はい。そんなわけで作ります。CSSの解説記事。
ほかにも解説されてる記事は多数ありますが、自分が元々知識ほぼ０の自分がやるからこそ意味がある！と、勝手に思いました(´･ω･｀)
分かってます。ほぼ０って言うてもそれなりにあったんやろ？と思うその気持ち。
自分も【初心者でもわかる！】って書いてあっても「俺…初心者レベルでもないんか…orz」と思うぐらいに複雑なこと書いてあったり。
そんな疑惑を払拭すべくどのくらいの知識だったかと言いますと
「<a href="URL">テキスト</a>でリンク作る、とか<font size="4">テキスト</font>で文字の大きさ変わる」とかしか分からないレベル。
仕事柄簡単なブログとかメルマガの本文を作ってた…と言う感じですね。CSSですらない、HTMLの初歩中の初歩しか知りませんでした。
なので後で解説しますがpaddingとか#contentとかなんじゃそれ状態です。
説明うまくできてるか分らんので意味わからんわ！(# ﾟДﾟ)って思ったら申し訳ございません。
あとこれは自分で独学で色々やってるうちに感覚で掴んだものなので、正式なCSSの知識ではないのでちゃんとした解説ではありません。
自分がカスタマイズする際に使った部分だけの解説になります。これを横目に自分でCSSを色々弄ってプレビューをみるのが一番早いと思います。
自分の中でクッソ長い記事になりました(´･ω･｀)
こんなに書いたん初めてやで…。
おそらくスマホでは半端なく
見にくいと思いますのでスイマセン。
そもそもCSSとHTMLの違いは？
ホントにざっくり言うとCSSはそのサイトの中でのルールを決める設計図で
HTMLは細かな指示と言う感じでしょうか…。
デザインCSSで
p {
color: #ff0000;
}
と書けば
HTMLの中の<p></p>と言うHTMLで囲まれた部分は赤にします。
と言う指示になります。
HTMLの中にも色々な指示が出せるのですが、
今回は自分で公開中のテーマデザインを直接弄りたい人向けに書いてるので
CSSの説明だけにとどめておきます。
場所
場所についてはこちらの方が図解してらっしゃって直観的でわかりやすいので、ぶっちゃけ文字で書くよりはこれ見てもらった方がわかりやすいです。
書き方の法則
.entry-header {
padding: 0 0 10px 0;
margin: 20px;
border: 1px solid #dddddd;
}
これは前回の記事に出した例です。
.entry-header＝記事のヘッダー部分、padding=内側の余白 、
margin=外側の余白、border=境界
と言う意味になります。
padding: 0 0 10px 0;は内側の余白を(上 左 下 右)の数値分で作るというもので、
margin: 20px;は外側の余白を全方向に作ると言うもので、
border: 1px solid #dddddd;はグレーで1ピクセルの境界線を作るというもの。
全部を総合すると「記事のヘッダーをグレーの境界線で囲い、内側の余白は下側を10ピクセル、外側の余白をすべて20ピクセル開ける」というもの。
場所{
指示する場所:指示内容
}
となってます。
#ddddddの部分はHTMLコードなのでこれを参考にして下さい。
どうです？こんな風に分けて考えると分りやすいですよね？
【スポンサードリンク】
では実際のコードを見てみましょう
これがこのブログの実際のコードの一部ですがこうなります。
#title {
margin: 0px;
}
#container {
width: 100%;
}
#blog-title-content {
text-align: center;
}
#blog-description {
margin: 0; text-align: center;
}
#content {
width: 93.75%; margin: 0px auto;
}
#main {
width: 55%; max-width: 60%;
}
#box2 {
width: 38%; min-width: 310px; max-width: 376px;
}
#entry-inner {
width: 93.75%; margin: 0px auto;
}
.hatena-module-body {
margin: 0px auto;
}
うん。もうわけわからんね。(´･ω･｀)
最初これ見た瞬間に頭が痛くなりました。元々英語苦手だし。
※上の解説の意味も知らない状態でした。
そんなわけで上から行きましょう。正確な解説ではないですがこんな感じと思ってください。
※文字の装飾同士が対応しています。
#title { margin: 0px; }＝タイトルの余白はなし
#container { width: 100%; }＝一番外の大枠の幅は全部使う
#blog-title-content { text-align: center; }＝ブログのタイトルは中央に整列させる
#blog-description { margin: 0; text-align: center; }＝ブログ説明は余白なしで中央整列
#content { width: 93.75%; margin: 0px auto; }＝記事やサイドバーの幅は93.75%まで、余白は上下は0で左右は均等に
#main { width: 55%; max-width: 60%; }＝メイン(記事)の幅は55%。最大60%まで使う
#box2 { width: 38%; min-width: 310px; max-width: 376px; } =サイドバーは幅38%まで、最小310px～376pxの間で使う。
#entry-inner { width: 93.75%; margin: 0px auto; }=メイン記事本文の幅は93.75％、上下余白なし、左右は均等に余白
.hatena-module-body { margin: 0px auto; } ＝サイドバーのモジュールの余白は上下なしで左右は均等に
太字が該当してる場所、色付き文字がそれぞれの指定の意味です。
こんな感じ…と言うわけですね(´･ω･｀)
※これははてなブログの2カラム(2列)の場合です。
具体的な数字を出してみますと、横幅の最大が1000pxとした場合上から順に小さい構造になっていくので#entry-innerと言う部分の幅は1000pxの93.75%のうちの55%のうちの93.75%を使います。
ちゃんと計算するとこうなります。
1000pxの93.75%＝937.5px
937.5pxの55%=515.6px
515.6pxの93.75%=483px
横が1000pxのモニターでは本文のサイズは483pxになる…と言うわけですね。
ちなみに483pxと言うとPCの方はこの記事の最後に出てる横並びの広告１つが336pxとなってます。
こんな感じで一個一個分解してみるとなんとなーく掴めると思います。
ただ英語でバーッと書かれるとスッと入ってこなかったり、特にややこしいのが同じ意味でも書き方が違ったりする点。
今普通に{padding : 0 0 10px 0;}なんて書いてますが同じ意味で{padding-bottom : 10px;}と書いてたりします。
ちなみになんで書き方が違うかはよく分かりません(´･ω･｀;)ｽﾝﾏｾﾝ
{ margin: 0px 10px; }のように二つしか書かないと、1番目は上下、2番目は左右の指定になります。
もちろんピクセル指定でなくても%指定での余白もできますしピクセル指定での大きさの指定もできますが、ピクセル指定だと大きさが変わった際に柔軟に対処できません。
先ほどのwidth: 93.75%を937.5pxとしてしまうと仮に800pxの幅しかないモニターで見た時に137.5px分が途中で切れてしまい横スクロールバーが出てきます。
%指定にしておくことで常に93.75%を位置取ってくれるので800pxのモニターだと750pxが記事範囲になります。
【スポンサードリンク】
自分で書き換えてみる
これまでを見てわかる通り基本英単語なのでコレなんだろか？と思ったら辞書検索すればなんとなーくの意味が出てきます。
ものによってはコードそのまんま検索掛ければ大体のものは出てきます。
例えばコレ【border-top-right-radius: 3px;】
直訳すると【境界-上-右-半径: 3ピクセル】
これでもぱっと見では意味わかりませんが、意味合いとしては境界線の右上の3pxを角丸にするという意味。(border-top-right-radiusで検索掛ければ出てきます)
また逆の事をしたいときは逆の意味のワードを入れると大体解決します。
border-top-right-radiusを左にしたいときはright→leftでOK
その他にも上の項目で例に出したのが全部 { text-align: center; }でしたが、左にしたいときは { text-align: left; }、右にしたいときは { text-align: right; }で。
その他にも上の例では幅を表すwidthしか出てませんが、高さを表すものはheight。非表示にしたい場合はdisplay: none; と入れれば非表示になります。
これを利用してこのブログはある程度の大きさになるとサイドバーは非表示になるようにしています。(display: none;はある条件下では非表示としたいときに使います)
PCの方は実際にウィンドウ幅変えてみてね(´･ω･｀)
場所が分からんぞ！
そんな時はF12で場所を探しましょう。
自分はchrome使いなのでクロームの画面で説明します。
左側の画面か右のコードにカーソルを合わせるとそれぞれハイライトされます。
分かりやすくでっかいとこに合わせてますが、日付だけなど細かく調べられます。
さらに右側の下の枠に今の要素が書かれてますのでこれを弄れば、どうなるかがその場でお試しできます。
が、そっちの機能はあんま使いませんでした(´･ω･｀)
弄れるといえどコードを知らないとお試しもできないのと、ぶっちゃけそこまで完璧に理解できてないので…。
大体場所探しと他の人がどんなコード使われてるのかで見てました。
ちなみにさっきの矢印の横はタブレットやスマホのお試し画面です。ipadでの見え方をPCで確認できます。
デザインテーマを直接弄るには…
何でもいいのでブログ作成(非公開で)
→大元のデザインテーマインストール
→デザインCSSに入っている(数字の羅列.css)と言うURLをコピー
→アドレスバーに貼り付け
するとCSSが出てくるのでこれをコピーしてさっき作ったブログのデザインCSSへ貼り付け。
これで色々弄っていき、完成したら非公開でテーマストアへアップして本ブログに取り入れてやればOKです。
こんな感じでいろんな場所にあーでもない、こーでもないとトライ＆エラーで作りました。
えらそうな事言ってますが、大元のデザインがなければ何もできないので”らいか”様には感謝しかありません。
どうでしょうか。
この記事もガチで作り込みました(´･ω･｀)ﾂｶﾚﾀ
5000字超って…誰得やコレ
元あるものをそれなりにやんわりと理解してるだけなので１から作るとか無理ですね。
このブログに取り入れているカスタム一覧はコチラ
しつこいようですが、独学でやったことなのでちゃんと知りたい人は本とか買って頂く方がいいです。
あとお前の解釈間違っとるぞ！ってあればご指摘ください。