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

FC2ブログのテンプレート「basic_white」をそのまま使うと、トップページでは「カテゴリ」や「タグ」はどこにも表示されません。
でもトップページから移動して個別記事ページを開くと、その記事の下部分に「カテゴリ」や「タグ」が表示されるようになっています。‥‥デフォのテンプレート仕様を忘れたので定かではありませんが、おそらくデフォルトではそういう仕様だったと思います。



この記事では、この「カテゴリ」と「タグ」をトップページのリスト記事で表示させてみます。
まあ、こんな感じで表示しようかな？と。






ちなみに今回も、以前勝手にご紹介した『素材圏』様の記事を参考にして書いています。
「カテゴリ」の表示の仕方を記載しておられましたので、勝手にアレンジして同じように「タグ」も表示させてみた、という感じですね（´∀｀*）
なんか勝手に色々と使わせていただいて、本当にありがとうございます！（←だからご本人様にちゃんと挨拶を言いに行けよ！ｗ）

「カテゴリ」と「タグ」を表示させる前に

まずは『素材圏』様のサイトを確認してください。2013/12/26の記事です。
リンクを貼ったりはしませんのでご自分で検索して辿り着いてくださいね？
（相変わらずヒドイ案内の仕方ｗ）



『素材圏』様では「カテゴリ」をトップページのどの位置に表示させるのか、細かく設定されていますので、お好きな場所に設定してください。
私は上の画像のように、記事の左下に表示させるようにしました。
なので、この記事で紹介するスタイルシート（CSS）の記述は左下用になっております。
他の位置に表示させたい場合はご自分でお考えください。（私が設定していないことについて、色々と考えてあげるほど私は優しくないのですｗ）




ということで、『素材圏』様が記載されている方法でHTMLとCSSを編集してください。


だってさ、私が考えたものじゃないから表記していいのかどうかわかんないんだもの。
私は勝手にアレンジしただけだし、「私はこうしたんですよ〜」って紹介するだけの記事なんですよ、コレ。なので、『素材圏』様のサイトを参考にされる方が正しいやり方なんです。



今から紹介するのは、あくまでも「私の場合はこうしてますよ」という意味でコードを記述したものです。
『素材圏』様の記事にはカテゴリを表示させる方法が紹介されていたので、それを参考にして、カテゴリと同時にタグも表示させました。なので『素材圏』様のコード記述とは異なります。


しつこいですが、私の記事ではなく『素材圏』様の記事を確認してそちらをご利用ください。
私は自分の記載内容に自信なんてありませんので、間違っていたりちゃんと動かなかったとしても責任は負いません。

トップページのリスト記事の左下に「カテゴリ」と「タグ」を表示する（HTMLの編集）

管理画面のサイドメニュー「テンプレートの設定」を開き、自分が使用しているテンプレート名の「編集」を選択してください。「○○のHTML編集」画面になるので、「<div class="entry_body">」というタグを探します。
この「<div class="entry_body">」の下に、下記の「追加するコード」を全部、コピペします。


下記の追加コードの上段部分はデフォルトのコードと同じですので見つけやすいと思います。
デフォルトのコードの下に「<!--TOPページのカテゴリ表示-->」以下のコードを貼り付けてください。（文字色は気にせずにすべてのコードをコピペしてください。）


＜追加するコード＞

HTMLコード内容の説明

まずはコードの冒頭部分ですが、「<div class="entry_body">」の部分で、今から「entry_body」という名前を付けたdiv（枠）の中の話をしますよ、と宣言しているわけです。


で、その枠の中に何を入れるのか、というのをHTML上で指示しています。
「<div class="entry_image">」で画像の話を、「<div class="entry_discription">」で記事の前半部分を入れます、とか指示してる。
まあ、細かいことはどうでもいいんですけどね。（じゃあ書くなよ！ｗ）



もちろん大事なのは「<!--TOPページのカテゴリ表示-->」以降、つまり「<ul class="entry_category">」以降の部分です。
「entry_category」という名前を付けた要素（これが「カテゴリ」）をこのdiv（枠）の中に入れます。
「entry_tag2」という名前を付けた要素（これが「タグ」）もこのdiv（枠）の中に入れます。
という指示をしているのです。


なので必要なのは「<ul class="entry_category">」以降の部分になります。
コレを表記しておかないと、何を入れたいのかがわからなくなりますからね！！



ちなみにFC2ブログのテンプレート「basic_white」には、既に「entry_tag」という名前のclassが存在しています。
class名は重複させることができませんので、「タグ」用に新しく名前を付けなければいけません。
色々と考えるのが面倒なので、私は「entry_tag2」のように「2」を付け足しただけの名前にしました。気に入らないなら好きなように変えたらよろしいがな！！（｀・ω・´）

トップページのリスト記事の左下に「カテゴリ」と「タグ」を表示する（CSSの編集）

では次に、HTMLで書き込んだ記述内容がきちんと表示できるように、スタイルシート（CSS）の編集をします。
しつこいですが、あくまでも下記は私のブログの場合の記述です。ご自分のブログに合うようにちゃんと編集してくださいね。


「HTML編集」画面の下に「スタイルシート編集」画面が表示されているので、スタイルシートの一番下にでも、下記のコードを追加（コピペ）してください。


＜追加するコード＞


●「カテゴリ」と「タグ」を別々に記述しています。
スタイルシートに記述する場合、同じ内容はまとめて表記することが可能ですが、わかりやすくするために、わざと別々にしました。個々で記述してもまとめて記述しても、指示内容は同じなので問題ないです。


●「カテゴリ」部分に記述されていた内容を、名前だけ変えて「タグ」部分に流用しています。
そのため、最後の2行の記述が全く同じになっています。
「タグ」の最後の2行は消してもいいんですが（だって先に「カテゴリ」部分で同じ命令を出しているのだから）、消して失敗したら嫌だなぁというよくわからない気持ちがあって残しているだけです。
CSSなどに記載した命令は後から書いたモノが優先されます。（上書きしていっているような感じ）
なので「カテゴリ」部分で出した命令と全く同じ内容を次の「タグ」部分で出していたとしても、生きているのは後から書いた「タグ」部分の命令となるので残していても問題はないんですよ。（という、言い訳ｗ）

ま、私のようなやり方は推奨はしません！！
私はわかっていてわざとやっているのです（笑）

ボタンを角丸にしました

トップページのリスト記事に「カテゴリ」と「タグ」を表示させる場合、文字リンクでもいいんですが、やっぱりボタン表示が良いと思うんですよ。（私の趣味なだけですけどね）
で、元のコード（つまり『素材圏』様のコード）はボタンが四角なんです。私はそれを角丸にしました。


なので、上記スタイルシート記述の中の文字色が青色の部分「border-radius: 3px;」より下の記述は、私が勝手に付け足したものです。
「カテゴリ」も「タグ」も角丸にしましたので、元のコードには無い記述です。

余白の位置を調整してください

スタイルシートには「カテゴリ」と「タグ」への指示が記述されています。
先ほども書きましたが、「タグ」ボタンを作るために「カテゴリ」の記述内容を流用しました。そのため記述内容が重なる部分が多いのですが、明確に異なる部分もあります。
それは「bottom」の数値です。
上記スタイルシート記述の中の文字色が赤色の部分のことです。





この画像を見てもらったらわかると思いますが、実際の表示では「カテゴリ」ボタンが上段、「タグ」ボタンが下段に表示されています。
横並びではないんです。
なので、位置を指定するために「bottom」の数値をいじりました。


「カテゴリ」は bottom: 27px
「タグ」は bottom: 10px


つまり、「カテゴリ」部分はdiv（枠）の下線から27pxの位置に、「タグ」部分は同じくdivの下線から10pxの位置に配置する、という指示内容になります。
こういう風に数値を変更することで、ボタンを上下の位置にずらして表示することができます。
ご自分のブログではお好きな数値で設定してください。

その他もろもろ、お好きなように調整してください

CSSの記述を色々と変更することで、ご自分のブログに最適なデザインを作ることができます。
私は「タグ」部分を「カテゴリ」部分よりも小さく表示したかったので、「font-size」を70%にしてみました。
他にも背景色や文字の色を変えたりしました。


私のようにフォントサイズを変更してしまうと、もしかしたら「続きを読む」の位置がおかしくなるかもしれません。
私は私のブログ上の仕様でしかわからないので説明するのが難しいんですが、もしかしたら他にも色々と表示がおかしくなる可能性があります。


こういう場合は、プレビューを見ながら、「続きを読む」ボタンの位置（marginとかpadding）をいじってみたり、記事の高さをいじることで対処します。
高さをいじるとベストポジションが見つかる可能性があります。



まあ、あくまでもこの記事は私のブログ仕様を紹介しているだけですからね。
責任は負いませんのでよろしくお願いします。
実際にやってみておかしくなっても私は知りませんからね！！（´∀｀*）




次の記事の紹介

次の記事では、FC2ブログのテンプレート「basic_white」の記事一覧ページをカテゴリ別で表示するために、その準備として画像を作る方法を説明しています。画像とは、記事タイトル部分の先頭に付けるマークのことです。