私の運営しているブログは、すべてQooQという無料のブログテーマを使っています。
もともとのデザインから気に入った見た目になるように、いろいろカスタマイズしてみました。
カスタマイズは検索すればたくさんヒットするのですが、その中でこのブログで取り入れたものをまとめておきます。
私の備忘録記事になりそうです。
QooQ
使用しているテーマはこちら。
シンプルで速い日本語bloggerテンプレート「QooQ」の紹介！
blogger日本語テンプレート「QooQ（クーク）」紹介！SEO対策から関連記事までオールインパックになった表示の速いテンプレートです
Bloggerの無料ブログテーマとしては比較的有名所だと思います。
有名所を使うメリットとしては、カスタマイズしたいときや、困ったときに検索すれば、すぐに答えが出てくれるところです。
もともと乗っかっている機能も多いので、使いやすいテーマだと思います。
カスタマイズ
ここからは、実際に導入したカスタマイズです。
パンくずリストに全てのラベルを表示させる
QooQにはパンくずリストの機能がついていますが、複数のラベル設定した場合、デフォルトの状態だとひとつのラベルしかパンくずリストとしては表示されません。
私のブログだと複数設定することが多いので、すべてのラベルを表示されるように変更しました。
やり方はこちらを参考にさせていただきました。
【 QooQ カスタマイズ 】 パンくずリストと関連記事にラベルすべての要素を追加する
最終更新日を表示させる
ブログは記事の情報がいつ時点のものかも大事だと思っています。
最初に記事を投稿してから、少し加筆・修正することもあるので、そこも表示されるようにしました。
参考にさせていただいた記事はこちら。
【 QooQ カスタマイズ 】 Blogger ブログで最終更新日を表示させたい
記事本文上部のシェアボタンを削除する
デフォルトの状態だと、記事本文の上下にシェアボタンが表示されています。
Bloggerのレイアウトからシェアボタンの表示/非表示が切り替えられるのですが、上下両方のシェアボタンを表示するかしないかの設定のみ。
記事下部のシェアボタンだけ残すということはできません。
記事上部のボタンは主張が激しいなと思ったので、表示させないことにしました。
参考にさせていただいた記事はこちらです。
目次を表示させる
定番ですが、記事内に目次をつけています。
これはもちろん手打ちではなく、自動生成されるようにしました。
参考にさせていただいた記事はこちらです。
目次が表示される幅を設定できますが、このブログでは80%に調節しています。
[Blogger] 目次を簡単に自動生成（忙しい人向けのコピペ素材）
プログラミング関連の備忘録。AI関連APIの解説等を行っています。 少しでも誰かの役に立てれれば嬉しいです。
また、目次の表示位置を左寄りから中央に変更しています。
その時に参考にさせていただいた記事はこちら。
Bloggerのブログ記事の内容に合わせて目次を自動生成する、非常にシンプルかつ簡単なカスタマイズ方法です。
改行の行間を狭くする
Bloggerはデフォルトの本文入力が「段落」になりました。
「標準」でなれていた身としてはとても違和感があるのですが、調べてみたところ、初心者にはどうやらこの「段落」になれた方が良さそう。
なので、見た目の違和感を少し低減させるようにしました。
「Blogger」のおすすめテーマ「QooQ」を綺麗にカスタマイズできるCSSまとめ
Googleがサービスを続けている無料ブログのBloggerを用いて、有料のWordPressに迫るブログを作るために行った作業を説明します。
こちらの記事の【「p」タグ【段落】をうまく使う】を参考にさせていただきました。
行間を少し狭く設定した感じです。
Twitterの引用を中央揃えにする
闘病ブログの方ではTwitterの埋め込みを多用していたのですが、この表示も好みの中央揃えになるようにしました。
参考にさせていただいた記事はこちら。
【Blogger】Twitterの埋め込みをCSSで中央揃えする方法
この記事ではBlogger記事へのTwitter表示をCSSで中央揃えにする方法を紹介します。
記事下部のラベルを横に並べる
QooQでは記事本文の下部にラベルが表示されます。
デフォルトだと、中央揃えで縦に並ぶのですが、これを横に並ぶようにしました。
ちょっとスッキリするかなと思います。
参考にさせていただいた記事はこちらです。
フッターカテゴリーラベルを縦ではなく横に並べる。【QooQ】Bloggerカスタマイズ【備忘録】
現在使用しているテーマ「QooQ」のタグラベルが縦表示なので横表示にしてみました。主にCSSを弄っております。
まとめ
私はブログを持っている期間は長いとはいえ、こういったカスタマイズについては全くの初心者です。
HTMLのコードを見る必要はありますが、どのコードをどう変更すれば良いかは、調べればきっちり教えてくれます。
怖がらなくても、大丈夫。
この記事で紹介したカスタマイズは本当に一例ですが、だれかの参考になれば良いなと思います。
Twitter → @777_Kanata
0 件のコメント:
コメントを投稿