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

FC2ブログの公式テンプレート「basic_white」には「タブ」が表示されます。
HTMLでページを切り替えるために使われる「タブ」機能そのものなので、私はずっと「タブ」と呼び続けているんですが、もしかしたら「basic_white」では「タブ」とは呼ばないのかもしれません。
でも私のブログでは「タブ」で通しますけどねｗ



とりあえず、「basic_white」のヘッダー下に「記事一覧」として表示されているものを、私は「タブ」と呼んでいるわけです。





以前の記事＜■FC2ブログ【basic_white】（2）＞で私は、この「タブ」は増やすことができると書きました。
その時に、「使用されている元画像は私が作ったわけじゃないから大きさが決まっている」「横幅が決まっているから長々とタイトルを入れるわけにはいかない」などと書きましたが、先日、ちょっとこのタブ設定を使おうと思って色々といじっているうちに、「横幅は変えられる」ということに気づきました。
ということで、補足的な意味合いでこの記事を書いています。



まずはちょっと基本的なこと（という名の言い訳）を書いておきます。


私が「タブ」の横幅を変えられないと思い込んでいたのは、元画像を見ていなかったからです。
もうてっきり、「タブ」部分の背景全部が画像になっているのだと思っていました。
で、今回ちょっと調べてみたら（というか今回初めてこのタブ部分のCSSをしっかりと見ました）、このタブ部分の元画像は縦に細長い画像なんですよ。
細長い画像を使ってCSSで指示を出し、横に広げていただけの話なんです。



ということですから、もうおわかりだとは思いますが、この横幅を広げてあげればいいんです！！
ちなみに今回はHTMLはいじりません。
横幅の話になるので、CSSのみを編集します。

「タブ」の横幅を変更する（広げる）

では、スタイルシート（CSS）の編集をします。
管理画面のサイドメニュー「テンプレートの設定」を開き、自分が使用しているテンプレート名の「編集」を選択してください。
下の方に「スタイルシート編集」画面が表示されているので、「Headermenu」という見出し部分を探します。


＜見出し「Headermenu」＞


この見出し以下、一連の表示の中に「#headermenu .archives」があると思います。（おそらくこのタイトル部分の2つめあたり）



今回は「#headermenu .archives」と、すぐ下にある「#headermenu .archives a」の記述内容を編集します。
「タブ」の横幅を変更したいだけなので、CSSに何かしら付け足すのではなくて、数値を編集することになります。


＜元コード＞

タブの横幅のサイズを変更する

2つの「#headermenu」の中で「タブ」の横幅を指示しているのは「width: 105px;」の部分です。
デフォルトでは「タブ」の横幅は「105px」だということです。
この数字部分を好きなように変えてください。
もちろん、「width」2つとも、です。



1つ目の「#headermenu .archives」で指示しているのは、タブの背景部分だと思ってください。
そしてもう1つの「#headermenu .archives a」は1つ目と同じ単語ではありません。「a」が最後に付いています。
この「a」があることで、「リンク部分に対する設定」という意味になります。
イメージでは、背景画像の上にマウスを持ってきたら、そこにはリンクを貼っているのだからマウスに合わせて背景が変わる、って感じです。

‥‥あ、わかりにくいですね、すみません（´；ω；｀）
（説明しなきゃよかったｗ）



ということで、「width」の数字を2つとも変えてください。
そしてその数字は同じ値にしてくださいね！！
（背景の幅と、マウスポインタを持ってきた時の幅が異なることになってしまいます）


私のブログでは「120px」に設定してみました。

背景画像の位置を変更する

さて、「タブ」の横幅を変更しましたが、その上で「プレビュー」ボタンを押してみてください。ものすっごい、ズレてませんか？
「タブ」の上にマウスポインタを持ってくると、めちゃくちゃなことになりませんか？


あ、いいんですよ、コレで。
「プレビュー」ボタンを押してもらったのは、これからは貴方様のフィーリングで処理をしていただきたいので、そのための「練習」です。
つまり今から貴方様は「プレビュー」を確認しつつ作業をする、ということです。



上記デフォルトのCSSコード（元コード）の中で、「width」以外で私が文字色を変えて表示している部分があります。




この数字をいじってください。
これは背景画像をどの位置に置くのかの指示を出している部分です。
（デフォルトでは画像を左から103px、上から0pxの位置に置く、という指示になります）



この画像は縦に細長いものですので、この「左から103px」という配置が、タブそれぞれの右端の線になります。なので、この右端の線がズレてしまうと、おかしなことになるのです。
（だってマウスポインタを持ってきた時の右端の線と、元々のタブ背景の右端の線がズレてるんだからね）



この「右端の線」の位置を確定するために、貴方様は「プレビュー」ボタンをクリックしながら、数字と見た目を調整してください。
これは各ブログの設定で異なりますので私から指示できる数字ではありません。
そもそもタブの横幅を何pxにするのかでこの右端の線の位置も変わってきますので、何回も繰り返してちょうど良い位置を見つけてくださいね！！



あ、そうそう。
絶対に「0」は変えないでください！！


今は横幅の話をしているのであり、「タブ」の高さを編集しているのではありません。
この「103px 0」のうち、「0」は上からの距離を示していますので、これを変えてしまうとマジでおかしくなります。
いじるのはあくまでも「左から103px」の「103」という数字です。



ちなみに私は、「width」を「120px」にしましたので、「左から118px」にしてみました。
まあ、こんなもんかな？

コード編集後の実際の「タブ」部分

では、実際にコードを編集して「タブ」の横幅を広くした時の画像を掲載しておきます。
けっこうわかりやすく横幅が広がったと思います。


デフォルトの場合



編集後のイメージ





関連記事の紹介

FC2ブログでは記事を更新せずに1ヶ月が経過すると「スポンサー広告」が表示されます。
どういう状況になってしまうのかを確認するために、わざと1ヶ月ほど更新をしないでおいたので、その報告記事を紹介しておきます。