基礎からのカスタマイズ1
新しく登録したテンプレート、simple_base_oneをカスタマイズしていく連載記事です。初めてテンプレートを弄る人にも分かりやすく書いていきますんで参考にしていただければと思います。
あくまでもオサーンが作るテンプレートに関した記事ですので、他の作者さんが作ったテンプレートには当てはまらない部分も出てきます。そこいら辺は適宜読み替えて応用してください。
まずはテンプレートの構造から覚えましょう。これを知っておくとメニューの配置を変更したり、後から3カラムに変更したりと色々と弄れるようになりますので。まずは下の図を見て下さい。
これがsimple_base_oneの大まかなレイアウトです。
赤い部分がブログタイトルの枠
ベージュの部分がプラグイン1とプラグイン2が表示されるメニューの枠
ピンクの部分がプラグイン3と記事が表示される枠
シルバーの部分が著作権表示部分
この4つの枠を更に外側の緑色の枠で囲っています。
緑色の枠で囲うのは中央寄せで表示するためです。
更にそれぞれの枠の中には小さな枠が組み込まれてます。
こうして図形にしてみると色々なことが分かります。
例えば、メニューを右側にするにはベージュの部分とピンクの部分を入れ替えればいいんだな。とか、ピンクの記事部分の横幅を拡げるためには緑色の部分も拡げなくてはいけないな。といったことです。
と、こんな感じで進めていたのではいつまで経っても本格的なカスタマイズまで進めませんので、実践的な内容を盛り込みながら進めていきたいと思います。
では次の図をご覧下さい。
これは各ブロック(枠)に対して実際のテンプレート内でどのような名前で指定しているかを示したものです。いやいや、横文字だらけですが難しくはありません。まずはsimple_base_oneのテンプレート編集画面を開いてみて下さい。
上の方からゆっくり見ていくと以下のような部分があると思います。
<!-- 一番外側のブロック(枠)ここから最終行付近までcontainer -->
<div id="container">
これは「ここから緑色の部分(container)が始まっていることを表しています。
上の図を見るとベージュの部分やピンクの部分は緑に枠の中に収まっているので、実際のテンプレートのソースでもベージュやピンクの部分は緑の部分より下(中に)記述されることになります。
では次にテンプレートの編集画面からスタイルシートを見て下さい。
上からゆっくり見ていくと以下のような部分が見つかります。
/* 一番外側の大きなブロック 全体の文字色や横幅もここで決めます*/
#container {
width:720px; /* 全体の横幅 */
margin:0px auto 0px auto; /* 全体のセンタリング(中央寄せ)に必要 */
color:#333333; /* 全体の文字色 */
padding:0px 0px 0px 0px; /* 全体を枠で囲う場合に使います */
text-align:left; /* 全体の枠内を左寄せに戻します */
}
HTMLの方に <div id="container"> と「container」という記述があって、
スタイルシートでも #container と「container」と記述してあります。
これを相互に照らし合わせてみると、
一番外側の枠(緑色の部分)はcontainerという名前が付けられていて、横幅が720px 文字の色が#333333(ダークグレー)に指定されているんだな
ということが分かります。
このようにそれぞれのブロック(枠)には名前が付けられていて、HTMLとスタイルシートで相互に連携し合ってデザインされています。
これを理解することが自由自在にカスタマイズするための第一歩。これさえ理解してしまえば「どこを弄っていいか分からない」ということが無くなります。
例えば著作権表示の文字の大きさを変えたい場合は・・・・。
そうです、著作権表示部分は footer という名前が付けられていますからスタイルシート内で footer と言う場所を見つければいいんです。
ということで、カスタマイズをする前にまずはHTMLとスタイルシートをザッとでいいから読んでみて下さい。simple_base_oneではなるべく詳しい説明書きを加えたつもりですので、HTML内の大まかな順番や、スタイルシートでどこをどう設定しているかが何となくお分かり頂けると思います。
ということで第一回目は終わりです。次回は文字色を変更してみたいと思います。
Simple base One
カスタマイズベースとしてお使いいただけるテンプレートです。管理画面では「simple_base_one」という名前でお探しいただけます。
→サンプル
CSSに説明書きを加えてあるので初心者の方でも比較的簡単にカスタマイズできると思います。また、当ブログでもこのテンプレートを題材としたカスタマイズ記事を連載しますので自由に弄っていただけると思います。
基本的な構造は月間訪問者数50000人を数える「待ち受け画像探検隊」で使用しているものと同じになっており、そこで培ったSEO対策やアクセシビリティの要素などを盛り込んでいますのでアフィリエイトブログのアクセスアップにも有効だと思います。
テンプレートに依存した内容であればサポートもさせていただいておりますのでお気軽にご利用下さい。