FC2ブログ【basic_white】(8)タブ「記事一覧」の横幅を変更する|ブログカスタマイズの雑談BLOGスマートフォン専用ページを表示ブログカスタマイズの雑談BLOGブログのカスタマイズやパソコン・ネットに関する雑談をするブログです。FC2ブログ編集FC2ブログの公式テンプレート「basic_white」には「タブ」が表示されます。HTMLでページを切り替えるために使われる「タブ」機能そのものなので、私はずっと「タブ」と呼び続けているんですが、もしかしたら「basic_white」では「タブ」とは呼ばないのかもしれません。私のブログでは「タブ」で通しますけどねwとりあえず、「basic_white」のヘッダー下に「記事一覧」として表示されているものを、私は「タブ」と呼んでいるわけです。以前の記事<■FC2ブログ【basic_white】(2)>で私は、この「タブ」は増やすことができると書きました。その時に、「使用されている元画像は私が作ったわけじゃないから大きさが決まっている」「横幅が決まっているから長々とタイトルを入れるわけにはいかない」などと書きましたが、先日、ちょっとこのタブ設定を使おうと思って色々といじっているうちに、「横幅は変えられる」ということに気づきました。いうことで、補足的な意味合いでこの記事を書いています。基本的なこと(という名の言い訳)を書いておきます。私が「タブ」の横幅を変えられないと思い込んでいたのは、元画像を見ていなかったからです。「タブ」部分の背景全部が画像になっているのだと思っていました。今回ちょっと調べてみたら(というか今回初めてこのタブ部分のCSSをしっかりと見ました)、このタブ部分の元画像は縦に細長い画像なんですよ。細長い画像を使ってCSSで指示を出し、横に広げていただけの話なんです。いうことですから、もうおわかりだとは思いますが、この横幅を広げてあげればいいんです!!ちなみに今回はHTMLはいじりません。横幅の話になるので、CSSのみを編集します。「タブ」の横幅を変更する(広げる)では、スタイルシート(CSS)の編集をします。管理画面のサイドメニュー「テンプレートの設定」を開き、自分が使用しているテンプレート名の「編集」を選択してください。下の方に「スタイルシート編集」画面が表示されているので、「Headermenu」という見出し部分を探します。.archives」があると思います。a」の記述内容を編集します。「タブ」の横幅を変更したいだけなので、CSSに何かしら付け足すのではなくて、数値を編集することになります。105px;」の部分です。デフォルトでは「タブ」の横幅は「105px」だということです。この数字部分を好きなように変えてください。「width」2つとも、です。.archives」で指示しているのは、タブの背景部分だと思ってください。a」は1つ目と同じ単語ではありません。「a」が最後に付いています。この「a」があることで、「リンク部分に対する設定」という意味になります。イメージでは、背景画像の上にマウスを持ってきたら、そこにはリンクを貼っているのだからマウスに合わせて背景が変わる、って感じです。́;ω;`)(説明しなきゃよかったw)ということで、「width」の数字を2つとも変えてください。その数字は同じ値にしてくださいね!!(背景の幅と、マウスポインタを持ってきた時の幅が異なることになってしまいます)私のブログでは「120px」に設定してみました。背景画像の位置を変更するさて、「タブ」の横幅を変更しましたが、その上で「プレビュー」ボタンを押してみてください。ものすっごい、ズレてませんか?「タブ」の上にマウスポインタを持ってくると、めちゃくちゃなことになりませんか?あ、いいんですよ、コレで。「プレビュー」ボタンを押してもらったのは、これからは貴方様のフィーリングで処理をしていただきたいので、そのための「練習」です。今から貴方様は「プレビュー」を確認しつつ作業をする、ということです。上記デフォルトのCSSコード(元コード)の中で、「width」以外で私が文字色を変えて表示している部分があります。0;この数字をいじってください。これは背景画像をどの位置に置くのかの指示を出している部分です。(デフォルトでは画像を左から103px、上から0pxの位置に置く、という指示になります)この画像は縦に細長いものですので、この「左から103px」という配置が、タブそれぞれの右端の線になります。この右端の線がズレてしまうと、おかしなことになるのです。(だってマウスポインタを持ってきた時の右端の線と、元々のタブ背景の右端の線がズレてるんだからね)この「右端の線」の位置を確定するために、貴方様は「プレビュー」ボタンをクリックしながら、数字と見た目を調整してください。これは各ブログの設定で異なりますので私から指示できる数字ではありません。そもそもタブの横幅を何pxにするのかでこの右端の線の位置も変わってきますので、何回も繰り返してちょうど良い位置を見つけてくださいね!!あ、そうそう。絶対に「0」は変えないでください!!今は横幅の話をしているのであり、「タブ」の高さを編集しているのではありません。0」のうち、「0」は上からの距離を示していますので、これを変えてしまうとマジでおかしくなります。いじるのはあくまでも「左から103px」の「103」という数字です。ちなみに私は、「width」を「120px」にしましたので、「左から118px」にしてみました。こんなもんかな?コード編集後の実際の「タブ」部分では、実際にコードを編集して「タブ」の横幅を広くした時の画像を掲載しておきます。わかりやすく横幅が広がったと思います。編集後のイメージ関連記事の紹介FC2ブログでは記事を更新せずに1ヶ月が経過すると「スポンサー広告」が表示されます。いう状況になってしまうのかを確認するために、わざと1ヶ月ほど更新をしないでおいたので、その報告記事を紹介しておきます。■FC2ブログを試しに放置してみた(スポンサー広告の確認)FC2ブログは、記事を更新せずに1ヶ月が経過すると「スポンサー広告」が表示されるらしいので、試しに1ヶ月ほど放置してみました。[必須入力]※画像の中の文字を半角で入力してください。