Blogger:QooQのカスタマイズ:フッターを修正する

2020/06/25

Blogger QooQ

t f B! P L

QooQのフッターを修正することにしました。


最初はこんなふうになっています。
これに加えて、

Powered by Blogger.

というのもあります。
二つもあるのは邪魔な気がするので、これをまとめて、


と修正します。

「Attribution」を削除する

Powered by Blogger」を表示しているのは「Attribution」です。

管理画面から、「レイアウト」をクリックして、「フッター」のところにある「Attribution」を削除します。

削除するには、右側にある青字の「編集」をクリックします。すると別窓が出て、削除できます。この「Attribution」は、「ガジェットを追加」でいつでも復活できますので、安らかな気持ちで削除しましょう。

「Powered by Blogger」を入れる

削除したのはいいのですが、Bloggerに非常にお世話になっているのは確かなので、感謝の気持ちをこめて、「designed by QooQ」の横に「Powered by Blogger.」を入れましょう。

管理画面から、

テーマ > (上の)縦の三点 > HTMLを編集

をクリックします。
全体の終わりから3行目あたりに、

<p id='designed-by'><a href='http://qooq.dododori.com' target='_blank'>QooQ</a></p>

というのがあります。
これを、

<p id='designed-by'><a href='http://qooq.dododori.com' target='_blank'>QooQ.</a> Powered by Blogger.</p>

に書き直します。
QooQの後に「.」を入れて、</a>の後に「 Powered by Blogger.」を入れました。Poweredの前に半角スペースがあります。

「designed by QooQ」を「Designed by QooQ」に

フッターを見てみると、

designed by Qook. Powered by Blogger.

となっています。
今度は、designedが小文字で始まっているのが気になります。Poweredと釣り合わせるために、Designedにしてやります。

HTMLの編集画面のどこかをクリックしてから、「Ctrl + F」とすると、上の方で検索できるようになります。



「Search:」のところに、「designed by」を入れてEnterを押します。Enterを押すごとに次の語を見つけてくれます。
580行目あたりに、

#designed-by:before{
  content:"designed by ";
}

というのがあります。
beforeというのは、「QooQという文字の前にこのcontentを入れよ」という意味です。
この"designed by"を"Designed by"にしてやります。
これで、


と、うまくいきました。
でもよく見ると、行間が狭すぎます。今度はこれを修正します。

フッターの行間を広くする



を探します。535行目あたりでしょうか。
その終わりの方に、

.Attribution a{
  color: inherit !important;
}

があります。
この後ろに、

p{
  line-height:1.6;
}

を入れてやります。これで行間が広くなります。


と、バランスよくなりました。

まとめ

今回は、フッターを修正してみました。QooQのHTMLは見やすいので修正が容易です。みなさんもいろいろ試してみてはいかがでしょうか。

QooQ. Powered by Blogger.