フッターカテゴリーラベルを縦ではなく横に並べる。【QooQ】Bloggerカスタマイズ【備忘録】

　tonbori堂はPCで作業をする事が多いのですが、そうなるとこのテーマQooQで気になるのがカテゴリーラベルです。Web-tonbori堂アネックスはカテゴリー増やし過ぎて減らさないとと思っているんですが投稿記事で現状五つほどのカテゴリーにまたがっているのも多いのでデフォルトのエントリ下部（フッター）のカテゴリーラベルが縦表示なのです。そうすると周りの空きが気になります。そこでラベルを減らすのと同時に横に表示できないかチャレンジしてみました。ちなみにせっかちな人のために見出し後の小見出しに簡単な手順まとめを付記しておきます。

スクリーンショット/テストブログにて再現/タグラベルCSSコード変更後

　またこれはあくまでも自分のPC環境でのラベルの見え方でしか検証していませんので（モバイルもブラウザでの仮想環境の検証）他の例で全体的に使えるかどうかは分かりません。あくまでも参考として、そしてtonbori堂の備忘録としてお読みいただければ幸いです。

ちなみにPCのブラウザでモバイルの見え方を検証する場合は「ブラウザ　モバイル　見え方」でGoogleなどで検索してみてください。tonbori堂はChromeのデバッグ機能を使っていましたが最近Bloggerの管理ページの大幅なアップデートにより表示のプレビュー画面にPCの他にタブレット、スマートフォンの疑似表示画面も追加されましたのでそちらを使っています。レスポンシブ対応テーマが増えてきた事とアクセスの殆どがスマートフォンまたはタブレットというご時世にかんがみての事だと思いますが、出来上がりのチェックが非常に簡便になって助かります。（テーマのHTML編集画面からエラーが出る場合は保存してから面倒ですがエントリのプレビューを試してみてください。）

まずはどこから弄るかを考える

　基本的にカテゴリーラベルは、投稿部分（個別記事）のヘッダーとフッターにあります。この場合上部のラベルは横表示にですので、問題になっているのはフッター（下部）のカテゴリーラベルの並びです。今回はCSSを弄ってどうにかならないかなと思い、まずはBloggerダッシュボード画面を開いてテーマからhtml編集画面を開きます。おっとその前にお約束のバックアップを忘れずに。今回は何度かやり直したのでこのバックアップ役立ちました。デフォルトというか最初の数値を比べる時にそこのCSSの数値と突き合わせて何度がやり直したので、是非バックアップはとっておいてください。

html編集を開いたらまずはctrl+fで検索窓を開き「個別記事」を検索。ここからさらにカテゴリーラベルに関係する部分を探ります。

まずは検索すると

/****************************************
        個別記事
*****************************************/

以下をずっと下ると「/* 個別記事見出し */、/* アドセンスのデザイン指定 */、」などが見つかりますがもっと下って「/* 個別記事下部 */」というのがあります。そこからずっと下れば「/* フッターカテゴリ */」というのが見つかります。どうもこれがカテゴリーラベル関係のCSSのようです。

せっかちな人のための手順１（まとめ）

1. まず現在のテーマをバックアップ。
2. html編集画面を開く。
3. ctrl+fで「/* フッターカテゴリ */」検索

フッターカテゴリーを弄ってみる。

　とりあえずどういう挙動を示すのか調べてみる事にしました。まずテストブログの投稿タグラベルを出来るだけ沢山付けて見ました。（7つ）実際にはこれほどのタグはつけませんけれどどういう状況になるにせよ３つで調べると５つの場合に困るので沢山でもという考えで７つでやってみました。

スクリーンショット/テストブログにて再現/通常時のタグ表示

で、適当な数値変更をしてみます。

/* フッターカテゴリ */
#single-footer-category{
	margin-top: 10em;
}
.single-footer-category-item{
	display: table;
	margin: 10em auto 1 auto;
	padding: 10em;
	font-weight: bold;
	border-radius: 5px;
	background: $(brand.color);
	color: $(brand.font);
}

スクリーンショット/テストブログにて再現/フッターカテゴリの数値変更後

ラベルがふくれあがってしまって何がなんやらになってしまいました。

次に弄ったのは要素の４辺のマージンを決定するmargin: をauto にしてみたものです。

margin: auto にしてみた。

/* フッターカテゴリ */
#single-footer-category{
	margin-top: 2em;
}
.single-footer-category-item{
	display: table;
	margin: auto;
	padding: 1em;
	font-weight: bold;
	border-radius: 3px;
	background: $(brand.color);
	color: $(brand.font);
}

スクリーンショット/テストブログにて再現/マージンをautoに。

　隙間がなくなってしまいました。とりあえずマージンや数値の入れ替えではどうにもならないというのが分かりました。それでいろいろ調べてまずはdisplay: table;を変更しようと思いました。このdisplay: table;というCSS、display:は要素の表示形式を指定する際に使われる記述で、この場合table;要素で構成されているという事が分かります。ならばtableで縦にならそれで横表示にするようにしてみればいいという単純な考えでまずはtableで横に指定するCSSを探しました。検索して、あちこちあたってみると幾つかのCSSの中からdisplay:table-cell;というtable要素を表のセルとして表示させるCSSなら要素を横に並べそうなので早速を使ってみました。

スクリーンショット/テストブログにて再現/table-cellを使う

おおっ！いい感じになりました。これで決まりか？ではモバイルで見てみましょう。先にも書きましたが当ブログを閲覧する方はほぼモバイル端末（スマホ・タブレット）です。最近はPCで見る人は少ないようですね。

スクリーンショット/テストブログにて再現/ラベルtable_cellモバイル変更分

がびーん😅これはアウトですね。カテゴリラベルが重なってしまっている。おまけに折り返しで途中で切れてしまって次の段にはいるようです。重なって見えませんけど。つまりレスポンシブには対応しているけれどデザインが崩れてしまっているようです。なのでこのdisplay:table-cell;は諦めました。CSS上級者なら対策法もあるのでしょうが素人ではこの先は難しすぎます。

そこでiinline-block要素でラベルを括ることにしました。というのもhtmlやCSSの初心者向けサイトでdisplay要素を最初に引くと大体これがよく出てきます。iinline-blockブロック要素で扱うというのも1個1個でラベルを扱えるし、これなら初心者のtonbori堂も扱えるかもと考え、これでやってみようと思ったのです。

ラベルをinline-blockで括ってみる。

　そこでいろいろ調べた結果、以下のCSSでフッターカテゴリをまとめてみることにしました。

/* フッターカテゴリ */
#single-footer-category{
  margin-top: 2em;
  list-style-type: none; 
}
.single-footer-category-item{
  display: inline-block;
  width: auto ;
  padding: 1em 1.5em;
  margin: 1em 0;
	font-weight: bold;
	border-radius: 3px;
	background: $(brand.color);
	color: $(brand.font);
}

最終的にはこれでまとめてみました。でPCでの見え方が以下のスクリーンショットです。

スクリーンショット/テストブログにて再現/iinline-block/PC

見た目はdisplay:table-cell;に近い感じになっています。次はモバイルでの見え方です。

スクリーンショット/テストブログにて再現/iinline-block/モバイル

ラベルごとに要素がまとまっており、上下でかさなってもいないのでこれで良しとしました。最初はPCでの見え方を優先してtext-align:centerを入れてセンターに寄せていましたがモバイルで見えるとどうも並びが悪いのでセンター寄せのtext-align:centerは外してこの形としました。

せっかちな人のための手順2（まとめ）

html編集部分からフッターカテゴリの下を別記のCSSに書き替える。

別記：CSS

/* フッターカテゴリ */
#single-footer-category{
  margin-top: 2em;
  list-style-type: none; 
}
.single-footer-category-item{
  display: inline-block;
  width: auto ;
  padding: 1em 1.5em;
  margin: 1em 0;
	font-weight: bold;
	border-radius: 3px;
	background: $(brand.color);
	color: $(brand.font);
}

以上です。

最後に

　素人なので色々分からない事も多く、検索しながら手探り状態でやってみましたがまあまあ上手くいったかなと自分では満足しています。アドバイスとしてはhtml、CSSな部分は専門的な部分多く難しい事も多いですがとりあえずやれることからやってみるのと、テストブログを作って色々弄ってみる事かなと思います。そうすれば色々見えてくる事もありますので。そして初心者向けにCSSを丁寧に説明されているブログ、サイトも多々あります。そういうサイトの説明を参考にしたりするのも良いかと。検索してみると結構あります。その場合は色々検索ワードを組み合わせてみてください。それとこれは当然のことながら自己責任でお願い致します。テーマをhtmlやCSSを弄る事はカスタマイズの第一歩ですが元に戻らないほどにやる前に、まずはバックアップをとりましょう。それで失敗を恐れずに進めることが出来ると思います。

※本を買って勉強するのもいいかもしれません。（電子書籍ではなく敢えて紙媒体で）

｜【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート) /Mana (著)/SBクリエイティブ/Amazon