【Blogger × QooQ】フッターにラベルとページリンクを追加｜見た目をカスタマイズ

この記事ではBloggerのテーマテンプレートQooQのフッターをカスタマイズする方法を紹介します。そのほかのカスタマイズは以下のリンクからどうぞ。

【Blogger】QooQカスタマイズをまとめます

この記事でわかること

• フッターにガジェットを追加する方法
• ガジェットのCSSをカスタマイズする方法
• ラベルの項目を線で囲む方法

私の環境

• ブログ：Blogger
• テンプレート：QooQ v1.29

ガジェット追加手順

ガジェット追加

まずはフッターにラベルガジェットを追加します。フッターは1から3まであり、左から1になっています。スマホの場合は1が上になります。

執筆時点では以下のような設定になっています。Aboutはページガジェットです。

ラベルをクラウド表示に変更

ラベルはクラウド表示を選択しています。クラウド表示するためには

「レイアウト」→ラベルガジェットの「編集」→「クラウド」を選択し保存します。

CSS変更手順

フッターのCSSを変更

今回は下の画像の見た目を目指します。

フッタータイトル部分デザイン変更

タイトル部分はh2に該当します。したがって#footer .widget h2のデザインを追加してやればOKです。よくわからない場合は以下のコードをコピペしてください。

統一感を出すためブランドカラーとフォントカラーを適用するようにしています。

QooQを使用している場合はフッターのCSS部分があるのでその周辺に挿入するのが良いでしょう。

#footer .widget h2{
	font-size: 1.8rem;
	padding: .6em;
	background: $(brand.color);
	color: $(brand.font);
}

マウスオーバーのデザイン変更

#fotter a:hoverでフッターのリンク全部に「マウスを乗せた時の挙動」を適用できます。私はフォントの色を変えるようにしています。以下のコードを先ほど挿入したコードの下あたりに挿入してください。

#footer a:hover{
	color : #ff7043;
}

ラベルの各項目のデザイン変更

項目を線で囲むデザインを追加します。先ほどコードを挿入したすぐ下に「個別アイテム」の項目があると思います。その中の.label-size内に線記述を追加し、別でhoverを追加します。コードは以下の通りです。

/* タグクラウド */
.label-size{
	padding: .5em;
	border-radius: 5px;
	margin: .25em 0;
	background: $(brand.subcolor);
	color: $(brand.subfont);
	border: solid 1px $(brand.color);
}
.label-size >a{
	color: inherit !important;
}
.label-size:hover {
	color : #ff7043;
}

これでラベル項目の周りに線がついて、マウスを乗せるとラベル内の文字と数字の色が変わるようになったと思います。

最後に

いかがでしたか？

ご質問やアドバイスがある方はコメント欄からお気軽にどうぞ。