FC2ブログで各カテゴリにアイコンや画像を表示させる方法

サンプル

サンプルに利用するテンプレートはこちら ↓

GirlOnWire - FC2ブログテンプレート

GirlOnWireテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

vanillaice000.blog.fc2.com

各記事が登録されているカテゴリ一覧ページへのリンクにアイコンを追加した様子です。どのテンプレートでも概ね同じことができるかと思うけれども絶対ではありません。デザインの親和性・html構造上 などで適用できない場合もあります。既にフォルダなどのアイコンが付いている場合や、親子カテゴリ階層が明示されている場合も作業が複雑になるので避けた方が良いと思います。

導入フロー

1. 全カテゴリの『カテゴリ番号』を把握する

   個人の管理ページ内で確認できます。

2. 表示させるアイコンを準備する

   PNG画像推奨, カテゴリ数と同数の画像が必要です。

3. HTML変更箇所を調べる

   ブラウザの開発者ツールを利用します。

4. HTMLの追加

   テンプレートHTMLに内容を追加します。

5. CSSの追加

   テンプレートスタイルシートに内容を追加します。

全カテゴリの『カテゴリ番号』を把握する

『カテゴリの編集』ページへ

今回は全てのカテゴリにそれぞれ別のアイコンを付加、を前提にしていますので、『カテゴリの編集』ページで カテゴリ数 と 各カテゴリの固有番号 を調べてメモしてください。

左上にある NO をクリックすると固有番号が表示されます。

ここでは目視確認を行うだけなので、誤って階層操作や削除等をしないよう注意です(もちろん必要があれば事前に行っても構いません)

表示させるアイコンを準備する

カテゴリが5つあるなら異なる5つの画像を。20あるなら20の画像が必要です。準備画像の注意点は以下の通り。

• サイズを揃えること
• 背景透過のPNG拡張子またはGIF拡張子

サイズは全て揃っていた方が見た目が綺麗です。具体的な大きさは、表示したいサイズの2倍のオリジナル画像 が最適です。例えば80px四方で表示させたいならば、横160px 縦160px の画像、ということですね。必ずしも正方形でなければいけない、ということはありませんが、正方形にしておくと扱いが楽です(任意)

画像の背景が透過されていると、表示形状(四角形表示や円形表示など)に対応しやすくなります。

また、今回はSVG画像を対象外とします。SVGで行いたい場合は自己責任・自力で(SVG拡張子のアップロードはできませんのでインラインで記すなど工夫を行ってください)

HTML変更箇所を調べる

各ブラウザに必ず用意されている 開発者ツール を利用します。概ね 右クリック で呼び出し可能です。呼称は様々で、Google Chrome なら『検証』、Firefoxなら『調査』

調べたい部位にマウスオーバーした状態で右クリック。以下は Google Chrome での例です。

HTMLの対象箇所がこれでわかります。

ここで変更対象となるHTMLを探りますが、実際のテンプレートHTMLの中に見つける必要がありますので、この付近の目印になりそうなものをコピーしておきます。この場合ならば element-category か element-title あたりが目印に使えそうです。

hrefの値でやりたくなりますが、この部位のテンプレートHTMLはFC2独自変数で記されているため、開発者ツールで表示されている内容とは異なります。目印にできませんので付近のclassなどを手がかりに利用してください。

また例えば element-category でテンプレートHTML内を検索しても、それが1箇所だけとは限りません。その場合は対象前後の内容を含めて開発者ツールと比較対象をして見つけます。

HTMLの追加

変更対象箇所(対象要素)がわかったら、次にこの要素に class属性 を追加します。サンプルの場合

<a href="<%topentry_category_link>"><%topentry_category></a>

上記がテンプレートのHTML内容です。ここにclass追加で以下の通り。

<a href="<%topentry_category_link>" class="cat__icons cat__<%topentry_category_no>"><%topentry_category></a>

今回は cat__icons と cat__<%topentry_category_no> の 2つ のクラス名を追加しています。何故2つかは後ほど説明します。

クラス名は任意変更しても構いません。自身が覚えやすいものにしておきましょう。既存クラス名とのバッティングを避けるため今回はアンダースコア2連を含めています。ハイフンの連続は不正なので利用しないよう注意。

<%topentry_category_no> はFC2独自変数でカテゴリ番号に自動変換されます。こちらについては変更不可。また、クラス名は数字から始まってはいけませんので、この独自変数の前には必ずアルファベットを入れるようにしてください。

心配な方は雛形を変更せずそのまま利用してください。

対象部位に既にクラスが当てられている場合もあります。その場合は既存クラス名の後ろに 半角スペースをひとつ 入力して、新しいクラス名を書き入れます。全角スペース及びスペース無しは構文エラー となり機能しませんので細心の注意を払います。

全角スペース利用(xxxは既存クラスとする)

<a href="<%topentry_category_link>" class="xxx　cat__icons　cat__<%topentry_category_no>"><%topentry_category></a>

スペース無し(xxxは既存クラスとする)

<a href="<%topentry_category_link>" class="xxxcat__iconscat__<%topentry_category_no>"><%topentry_category></a>

CSSの追加

HTMLの追加を済ませたら次はスタイルシートに内容を追加します。記載箇所は最終でOKです。

.cat__icons::before {
  content: "";
  display: inline-block;
  vertical-align: middle;/* 横にあるテキストとの垂直位置合わせ */
  width: 60px;/* 任意サイズ */
  height: 60px;/* 任意サイズ */
  margin: 0 15px 0 0;/* 横にあるテキストとの距離(余白) */
  border-radius: 50%;/* 円形にする場合, 不要ならこの一行削除 */
  background-color: white;/* 背景色が必要な場合, 不要ならこの一行削除 */
  background-position: center center;
  background-size: 80% auto;/* 100%で良い場合は値を cover に変更 */
  background-repeat: no-repeat;
}

まずひとつめは上記です。これは全アイコン共通の内容です。それぞれガイダンスを付けてありますのでざっと説明します。

displayプロパティ の値を inline-block にしておくと横並びが容易かつ垂直位置を合わせやすくなります。下に続く vertical-alignプロパティ が垂直位置指定です。上で合わせたい場合は値をmiddleから top に、下で合わせる場合は bottom に変更します。

widthプロパティ heightプロパティ で画像表示領域のサイズを指定しておいた方が良いでしょう。アイコンの縦横比を考慮して指定してください。サイズを大きく設定しすぎると今度は、やれ「カテゴリ名の文字列の折返しが」「見た目のバランスが」など視覚的な問題が生じる恐れがあるのでほどほどに。横30px〜80px程度で収めると良いと思います。

アイコンが正方形の場合は border-radius: 50% を指定して円形にしても良いでしょう。

background-sizeプロパティ の値に注意してください。アイコン内のオブジェクトが領域いっぱい使い切っている場合と、いくぶんか余白が有る場合とがあります。余白が無い場合に cover を指定してしまうと円形では角が削られてしまいますし、四角形表示だとしても背景色を付けた場合にギチギチで見た目が悪くなります。その場合は 横% auto と記載して調整を行います。例えば 70% auto など。pxを利用せず % を用いるようにしてください(pxだと調整が難しくなります)

* 以下のサンプル画像左隅はオリジナル画像です。

余白あり (cover値)

余白なし (cover値)

余白なし (80% auto 値)

続いて必要なCSSスタイリングは以下の内容です。

.cat__番号::before {
  background-image: url(画像アドレス);
}

上記はカテゴリごとに必要な記述です。例えば番号が 25 で、画像アドレスが https://xxx.png ならば

.cat__25::before {
  background-image: url(https://xxx.png);
}

です。全てのカテゴリ番号について同じ要領で追加します。カテゴリが20あるならば、セレクタ違い、値違いの類似ルールセットを20追加することになります。

まとめ

つまずきそうな作業段階はSTEP3の『HTML変更箇所を調べる』かもしれません。同一クラスを持つ他の部位にHTMLを適用してしまうミスなど考えられます。そのため カスタマイズ前に必ずテンプレートの複製を取る ことをおすすめします。

今回はCSSの疑似要素を使用して背景画像として掲載しますので、HTMLの定義に影響を与えたり、SEO面に悪影響を与えるといったことはありません。

『アイコン』と表現していますが、風景や人物など普通の画像のに置き換えてもOKです。いわゆる『写真』の場合は背景色設定などが不要になることが多いかな、と思いますが、設置領域背景色との同化を免れなかったり、表示領域が小さくて見た目に何なのかわからない、といったこともありますので、できるだけ単純なものにされることをおすすめします。

* ソースコードのご質問等は弊ブログ提供テンプレート利用者さまのみ受付致します。