なんやかんやで、投稿が50を超えました。意外と続いてます。ブログの見栄えもだんだんと納得いくものになってきたました。
そこで、今回は、ブログのテーマをQooQに変更してから、カスタマイズした内容をまとめておきたいと思います。ほとんど自分のためです。初期設定からなにを変えたのかまとめておくと、次またテーマを変更する際に参考になります。
BloggerでQooQをカスタマイズしよう
カスタマイズ前のテーマは、QooQでVersion1.26 を使っています。
最終更新日は、2019/05/17 になっていますが、2020/05/15 現在も最新版だと思います。
- パンくずリストを付けたい
- SNSアイコンを設置したい
という思いだけでテーマを変更しましたが、調べるうちにいろいろできることを知り、今の形になりました。
ここで一度カスタマイズした内容をまとめておきたいと思います。
Bloggerのカスタマイズ方法について
Bloggerのカスタマイズには、以下の方法があります。
- テーマ・レイアウトを変更する
- HTML編集でコードを追加・変更する
１．は簡単に見た目を変えられます。HTMLやCSSの知識がなくてもカスタマイズできます。
２．は上級者向けです。わたしのような初心者には、かなりハードルが高く、自力では編集できませんが、先駆者の方々のサイトをみるとコードの編集方法や、コピペするだけでカス
タマイズできるようにコードが直接掲載されているサイトもたくさんあります。
ガジェットを追加しよう
Blogger のレイアウト変更でサイドバーにドラッグ＆ドロップするだけで追加できます。
QooQはとてもシンプルな設定なので、追加してみました。
- ブログ検索
- 人気の投稿
- ラベル
- ブログ アーカイブ
- 基本情報
目次をつけよう
これはかなり気に入っています。
ブログに目次を見出しから自動で作って表示してくれる機能なのですが、記事を書く時もとてもに書きやすくてよいです。
どんな内容にしようかどんな順番で書こうかなど悩むことをかなり減りました。
なので、最初に目次に載せる見出しを作るところから始めて、この目次を見ながら書くと、設計図の上に、詳細な説明を書き足すだけで、なんとなく全体的に納得のいく内容になったりします。
参考にさせていただいたサイトは以下です。
比較的大きなコードを埋め込む必要があるので、バックアップはきっちりとった方がいいです。
目次をセンタに表示しよう。
既定では、目次は左寄せ表示になっているのですが、センタに寄せることもできます。
参考にさせていただいたサイトは以下です。
コードは短いですが、入れ込む場所を見つけるのが少し難しいです。
表示数を変更しよう
- パンくずリストの表示数を変更
- 関連記事の表示数を変更
Bloggerではパンくずリストは、記事につけたラベルで表示されるのですが、複数のラベルをつけてもパンくずリストには、一つのラベルしか表示されません。
なので、付けたラベルがすべて表示されるように変更しました。
また、それに合わせて関連記事もすべて表示されるように数も含めて変更しました。
参考にさせていただいたサイトは以下です。
記事に区切りをつけよう
関連記事の表示数を10記事と設定しても、3記事しか表示されないことがあります。
Bloggerでは、関連記事ページを自動的に作ってくれますが、読み込みサイズの上限が決まっているらしく、サイズの大きな記事があると、設定値よりも少ない記事しか表示されなくなってしまいます。特に画像をたくさん使っているときは意識した方がいいです。
そこで、区切りという機能で、1記事の読み込みをここで切るという区切りをつけて、Bloggerに必要以上に読まないように指定することができます。
旧バージョンのBloggerメニューにはあったのですが、新バージョンBloggerメニューからは消えています。
でも、HTMLモードにして、以下のコードを書き加えることで、同じように機能します。
<!--more-->
参考にさせていただいたサイトは以下です。
Analytics対応
QooQは、BloggerのAnalyticsウェブプロパティにIDを設定するだけで、コードをHTML編集で埋め込まなくても分析してくれます。
参考にさせていただいたサイトは以下です。
差分を把握しよう
さまざまブログマスターの方々のサイトを参考にしてカスタマイズをしてきました。
HTML/CSSをほとんど理解しないで使っているので、後でコードを見てもなんのコードか分からなくなってしまいます。
なので、ここで一度コードの更新箇所をきちっと把握しておきます。
そこで、テキストの差分ツール を使います。
WinMerge を使おう
テキスト差分ツールを使おう色分けされて、差分箇所が表示され分かりやすいです。
コメントをつけておこう
さらに自分で更新したコードかBloggerのレイアウト変更で更新されたコードかを見分けやすくするために、コードを変更したら、その上下にコメントを付けるようにしました。
<!-- ここから xxx 機能 -->
（ここに追加するコード）
<!-- ここまで xxx 機能 -->
といった形でまとめておくと、あとで追加・削除・更新もしやすくなるかと思います。
参考情報
blogger日本語テンプレート「QooQ」ダウンロードページ – くうく堂
[Blogger] 目次を簡単に自動生成（忙しい人向けのコピペ素材）
moca＊Blogger「Tokyo」: Bloggerで簡単に目次をつける方法
【 QooQ カスタマイズ 】 パンくずリストと関連記事にラベルすべての要素を追加する-インドアな日々
「追記の区切り」の使い方とカスタマイズ方法の解説【Blogger】 - Bloggerなび
Bloggerテンプレート変更時にやったこと、事前準備、カスタマイズ（Orange Zelo→QooQ）-セイナニティLog
テキスト差分ツールを使おう
0 件のコメント:
コメントを投稿