ブログカスタマイズの雑談BLOG

FC2ブログのテンプレート「basic_white」を色々といじっていますが、このテンプレートは、公式のまま使ってもカッコイイと思います。



私の場合は前回の記事＜■FC2ブログ【basic_white】編集（1）＞でも少し触れましたが、ブログの背景色を変えたり記事を掲載する場所（#main_contents .content）の色を変えたりして、なんだかもう自分から面倒なことに首を突っ込んでいるような感じです。


私が管理しているメインサイトは黒っぽいカラーで作っているので、そのメインサイトに付随するという位置づけでブログを作成する場合、デフォルトのままの白っぽい色のブログでは違和感が出てしまうんです。なので色々とテンプレートを編集しているんですが、仕方がないんだけどやっぱりメンドクサイですね。



前回の記事で勝手に紹介した『素材圏』様を参考にしながら色々といじったんで、この「basic_white」というテンプレートを編集したい場合は、まずは『素材圏』様のサイトを見てみることをおススメしたいと思います。もちろんリンクを貼ったりはしませんのでご自分で調べて辿り着いてくださいｗ

「basic_white」のタブについて

今回はテンプレート「basic_white」のタブの部分のお話です。


「basic_white」のPC用のテンプレートには「記事一覧」というリンク案内がページの上部、つまりヘッダーの下にあります。
この「記事一覧」という飛び出た部分を私は「タブ」と言っているのですが、実はこのタブ、数を増やせるんですよ。



先ほども書きましたが、私はFC2ブログをあくまでもメインサイトに付随するものという位置づけで作ったので、FC2ブログ内でメインサイトを紹介しなければならないわけです。サイドメニューでも紹介するんだけど、できれば目立つようにしたい。
で、こんな感じにしちゃいました。





「狛犬SITE」「TOP」「記事一覧」「SITEMAP」という4つのタブを作りました。
（画像は私がテンプレートを編集した後のものなので、ブログの背景色が黒っぽくなっています）



このタブの問題点は、使用されている元画像（テンプレートのCSSに画像元のアドレスが記載されています）は私が作ったわけじゃないので大きさが決まっていることです。
で、コレをもしも私が自分で作るのであれば、画像を選び、ちょっと薄らと色が変わるように処理をし、高さも設定しなければならない。そのためにCSSで関連するすべての設定を変えていかなければならない。
いや、メンドクサイでしょコレｗ


なのでそのまま使う。



となると、タブの横幅が決まっているのだから、長々とタイトルを入れるわけにはいかない。
結果、「狛犬SITE」という、パッと見ではすぐにはわからないタイトルになりましたが、所詮自己満足の世界なのですからコレでいいんです！（´∀｀*）


※タブの横幅を変更する方法について、記事を追加しました。【2014/03/23】

テンプレート「basic_white」にタブを追加する

それではテンプレート「basic_white」のタブの増やし方を説明します。
今回いじるのはHTML編集画面です。


編集のやり方を書いてみますが、コードをコピーする場合は、コピーしたい部分を選択した上で、マウスの右クリックからコピーをして、自分のブログに貼り付けてください。
強調するために色を付けていたとしても、色まではコピーされないので、気にせずにコピペをどうぞ。



＜編集方法＞


●「<p class="archives">」は絶対に変更しないでください。
これはCSS（スタイルシート）の方で命令を出すための名前なので、ここを変更してしまうと、命令（文字色はコレ、サイズはコレ、背景を付けるとかそういう命令）が全く効かなくなります。いじるのはあくまでも「<a href〜」以降の部分です。



●タブの文字色を変更する場合
私がタブを追加した「狛犬SITE」の文字のように、タブの文字色を変える場合のコードです。



「font color」で文字色を指定しています。お好きなカラーコードを入れてください。
もちろん「</font>」で閉じることを忘れないでくださいね。

実際に私が作ったタブについて

私自身は「TOP」タブにはブログのトップページのアドレスを、「記事一覧」には元のままのアドレスを（つまりコレは変更していません）、「SITEMAP」にはちょっとまた別のやり方がありますので、そのやり方でURLアドレスを記載しました。



「SITEMAP」についてはまた別の記事で説明したいと思っていますが、実はこの「basic_white」というテンプレートで記事一覧を表示させると、ダーッと記事の一覧が表示されるんですよね（って何このおかしな文章ｗ）
100個までかな？ダラダラと表示されるわけです。



でも私は、カテゴリ別に表示された記事一覧ページも作りたかったんです！！
コレ、どちらか1つにだったらこのテンプレートのままでできるんですが（カテゴリ別にしたいならまたタグを入れないといけませんけれども）、両方を掲載したかったらちょっとめんどくさい作業が必要になるんです。


なので、このお話はまた後で。


※タブ「記事一覧」と「SITEMAP」に別々の記事一覧ページを表示させる方法について、記事を追加しました。【2014/02/15】





次の記事の紹介

次の記事では、FC2ブログのテンプレート「basic_white」に「パンくずリスト」を設置する方法を説明しています。