色々調べていたところ、QooQというテンプレートがよさそうでしたので導入してみました。
今回は導入時の初期設定とBloggerのカスタマイズ方法を備忘録として残しておきます。
QooQとは
Bloggerのテンプレートを色々調べていると一番人気のテンプレートとして「QooQ」が出てきます。人気の理由を調べると数少ない日本語のテンプレートでシンプルかつ軽量だからですかね？色々な人がカスタム方法の記事も出しているため、困った際は調べればすぐにカスタマイズできるのも魅力の一つだと思います。
QooQの特徴については製作者様の記事も参考にしてください。
QooQを導入する
QooQは下記リンク先からダウンロードすることが出来ます。
ダウンロードページに行くとQooQには通常版とlist版の2種類があります。
この2つは記事一覧がタイル状に表示されるかリストで表示されるかの違いです。
(具体的にどのような違いがあるかはダウンロードページにサンプルのページがあるので、そちらを確認してください。)
どちらを導入するか悩んだのですが、スマホで見る場合のことを考えるとlist版の方が見やすく感じたため、今回はlist版を導入しようと思います。
(list版と通常版のPC画面とスマホ画面の見え方の違いはこちらの記事を参考にさせていただきました。)
前置きが長くなってしまいましたがそれでは実際にlist版をダウンロードして設定していきます。
テンプレートがダウンロード出来たらBloggerの管理画面から「テーマ」を選択してカスタマイズをクリックします。
カスタマイズの横の▽をクリックした後に「元に戻す」をクリックします。
(もし、元から別のテーマを使っている場合は必ず「バックアップ」をクリックしてロールバックできるようにしてください。)
これでQooQを導入することが出来ました。きちんと設定できてるかは自身のブログのトップページなどを見て確認してください。
QooQの初期設定
QooQの初期設定については製作者様のページに書かれているため、そこに記載されている内容を実行します。QooQリリースノートと初期設定方法！【ゼッタイ読んでね】関連記事のON/OFFの設定(HTMLの編集画面への行き方)
最初は関連記事のON/OFFの設定をします。
HTMLを直接編集して設定します。先ほどと同様「テーマ」→「カスタマイズ」の横の▽でHTMLを編集をクリックします。
HTMLを見ると32行目以降に関連記事設定をする箇所が記述されています。
関連記事を表示させたくない人はtrueとなっているところをfalseに変更してください。
また、"関連記事”という表示を変えたい場合は"関連記事"の所を好きな文字に変えることもできます。
(私はデフォルトの設定のままにしています。)
スマホ表示をOFFにする
bloggerにはスマホ表示とパソコン表示を分ける仕組みがあるらしく、デフォルトでは有効になっております。QooQを使用する場合はこちらをOFFにしてください。
製作者様の初期設定の解説ページでは管理画面の「テーマ」、モバイルのところの歯車マークから設定との記載がありましたが、2022/01/15現在bloggerのUIが変わったみたいで設定方法が少し異なります。
管理画面から「テーマ」→「カスタマイズ」の横にある▽をクリックで「モバイルの設定」をクリックします。
モバイルデバイスでどのテーマを表示するかの設定が出てきますので、「デスクトップ」を選択して保存してください。
これでスマホ表示の設定は終わりです。
不要なガジェットを削除する
ガジェットの削除はbloggerの管理画面の「レイアウト」から見ることが出来ます。
この中で不要なものを削除しましょう。ここは好みだと思うので、不要なものが無い場合は特にやらなくてもいいと思います。
グローバルメニューの有効化
こちらも製作者様の記事に記載のやり方が変わっているみたいです。
bloggerの管理画面から「レイアウト」→ナビゲーションの所に記載の編集をクリックします。
ページリストの設定画面が出てくるので
設定が終わった後にトップページを確認すると無事問い合わせページが追加されています。
自分は他にもよく使うラベルをグローバルメニューに追加しました。
ラベルをグローバルメニューへ追加する方法はラベルをクリックしたら出てくるURLをコピーしてください。
自分のブログのトップページにラベルを表示するようにして、ラベルをクリックした際に出てくるURLのことです。例えば次のような箇所が出てくるので、それをクリックしてください。
ちなみにですが、何故かラベル検索した際に表示される件数がまばらになってしまうという事象が発生しました。
理由を調べてみたところBloggerの制約で1ページあたり1MBまでしか表示できないとのことなので、画像をたくさん使っている記事があると表示件数がばらけてしまうみたいです。
こればかりは仕方がないので、このままでいきたいと思います。
(2022/08/20 追記)
表示件数がおかしい件について、目次の表示方法を変えたら解消されました。
(詳細は"目次を表示するようにする"を参照お願いします)
理由としては以前の目次表示はmoreタグの挙動を変えるものだったのですが、moreタグの挙動が従来通りに戻ったからだと思います。従来のmoreタグの挙動でのmoreタグは読み込むデータを減らすことができるみたいなので、結果的に1ページあたりの容量が減少して表示できる件数が増えました。詳細は下記記事を参照お願いします。
配色の設定を行う
こちらも製作者様の記事に記載のやり方から変更があるみたいです。
当時はテーマデザイナーという機能があったみたいですが、今はなくなったみたいです。
文字色とかは気軽に変えられそうですが細かな設定はHTMLを直接編集するという流れみたいです。私はデフォルトのままでいきますが、変更したい方は上記リンク先を参照お願いします。
QooQをカスタマイズする
ここから先は好みによるので、必要に応じて実施してください。
また、一部項目についてはQooQというよりBloggerの設定となってます。
(カスタマイズする際は失敗しても大丈夫なように必ずバックアップを取ってください)
目次を表示するようにする。
投稿した記事の見出しを元に自動で目次を作成するテンプレートを適用しました。
適用方法及び使い方の詳細は上記の記事を参照お願いします。
動作確認したところ目次ページが表示されるようになったので問題なさそうです。
(2022/08/20 追記)
現在は別の記事をもとに目次生成を実施しています。
両方使ってみた感想ですが、最初使っていた目次生成と比較して以下のよなメリット/デメリットがあると感じました。
メリット
・目次の表示/非表示が可能
・元の記事([Blogger] 目次を簡単に自動生成（忙しい人向けのコピペ素材）)にCSSのサンプルが何個か記載されているため、初心者でも簡単にいろいろなデザインを試すことが可能
また、オプションの設定方法も記載があるため、初心者でも簡単にカスタマイズが可能
デメリット
・最初に使っていた目次生成ではmoreタグを入れたところに目次を入る仕様でしたが、H2タグの前に目次が入る仕様となっている。
→カスタマイズで目次の挿入場所をある程度変更することができますが、自由度としては減ったように思えます。ただし、私は基本H2タグ前に目次を入れるようにしてたため、特に気になるデメリットではないと思ってます。
・すべての記事に目次が付いてしまう。
→私の場合はすべての記事に目次が付いていて問題ないですが、記事によって目次を付けたくない人もいると思います。そのような人には向いてないと思いました。(最初に使っていた目次生成ではmoreタグを入れた記事だけ目次生成がされるため、記事ごとに目次の有無を切り替えることが可能です。)
記事に更新日を表示する
今回は下記参考記事を元に設定しました。
少しアレンジしたところは、投稿日の所にもアイコンを付けるようにしました。
<p
id='single-header-date'><data:post.dateHeader/>となっている箇所を探して、
<p
id='single-header-date'><data:post.dateHeader/>の間に下記記述をします。
<!-- 投稿マーク -->
<i aria-hidden='true' class='fa fa-upload' style='margin-right:0.1em'/>具体的に書くと次のようになります。
<!-- 投稿マーク -->
<p id='single-header-date'>
<i aria-hidden='true' class='fa fa-upload' style='margin-right:0.1em'/>
<data:post.dateHeader/>
これで記事に投稿日と最終更新日が表示されるようになりました。
ちなみに他のアイコンを使いたいという方はこちらのサイトから設定したいアイコンを探してください。
例えば今回はclass = 'fa fa-upload'としているためこちらのアイコンが表示されています。
また、今回はFont
Awesome4を使ってアイコンを設定しましたが、2022年1月時点での最新はFont
Awesome5みたいです。Font Awesome5を使う場合はこちらの記事を参考にして下さい。
(補足：Font
Awesome5のバージョン5.9以降を使用する場合は会員登録が必要になったみたいです。詳しい使い方はこちらのブログをご確認お願いします。)
パンくずリストに設定したラベルをすべて表示する。
今回初めて知ったのですが、ブログ名の下に出てくるもののことをパンくずリストと言うみたいです。デフォルトだと最後に設定したラベルしか表示されないため、今回は複数ラベルを設定した際にすべてのラベルが表示されるように設定します。
具体的な設定の方法はリンク先の記事を参照お願いします。
少し変えたところはリンク先では該当箇所のHTMLを削除してましたが、元に戻せるように削除ではなくコメントアウトにしてます。
具体的に書くと下記のとおりです。
<!-- この記述があると最後のラベルしかパンくずリストに反映されないため;コメントアウト -->
<!-- <b:if cond='data:label.isLast == "true"'> -->サムネイルを丸から四角に変更する
デフォルトの状態だと記事のサムネイル画像が丸で表示されます。
個人的には四角の方が好きなので、サムネイルが四角くなるようにします。
HTMLの編集から次のような記述を探します。
.list-item-img{
display: block;
border-radius: 50%;
width: 72px;
height: 72px;
object-fit: cover;
}
border-radius:50
%となっているところを0%に変更します。これで記事一覧に表示されるサムネイルが四角に変更されました。
次に関連記事のサムネイルも四角にします。
先ほどと同様に次のような記述を探します。こちらも50 %となっているところを0
%に変更します。
.mrp-post-img{
display: block;
border-radius: 50%;
width: 72px;
height: 72px;
object-fit: cover;
margin: 0 auto 0 auto;
}記事に記載したソースコードを見やすくする(CSSの追加)
私の記事はプログラミングの内容も扱うため、ソースコードを見やすくしたいと思います。
過去に別ブログでGoogle Code
Prettifyを導入したので、そちらの記事を参考にします。
参考記事の所に記載しているCSSの追加方法が変わっていたのでメモを残しておきます。
まず初めにカスタマイズをクリックします。
その後画面左の「詳細設定」→「文字の色」をクリックすると下記のようにCSSを追加というものが出てきます。
数式を表示できるようにする
このブログでは数式も扱うためLatex入力をできるようにします。
設定の仕方は下記記事を参考にしました。
(参考記事：Bloggerで行うLatex(導入から式の書き方))
無事数式も入力できるようになりました。
(2022/09/25追記)
数式が画面からはみ出すのが気になったため、少し修正しました。詳細は下記記事を参照してください。
ナビゲーションバーを上部に固定する
現在の設定ではスクロールするとナビゲーションバーが見えなくなってしまいます。
基本的にリンク先に記載されているCSSを追加しますが、リンク先の記事で透けさせる記述とナビゲーションバーを透けさせるCSSが別に記述されていたため、まとめて記述しました。
/* ナビゲーションバーを上部に固定する */
#navigation {
position: sticky;
top: 0;
z-index: 5;
opacity: .9; /* 透けさせる(不要な方はこの行を削除してください) */
}
opacity: .9:という箇所で透過度を設定しています。今回は.9なので透過度90
%で設定します。
また、CSSの追加の仕方は本記事内の「記事に記載したソースコードを見やすくする」を参照お願いします。
これでスクロールしてもナビゲーションバーが常に表示されるようになりました。
ナビゲーションバーのリンクを強調する
ナビゲーションバーにあるホームなどのカテゴリーのリンクにマウスオンした際に下線を表示させるCSSを追加します。
参考記事では黄色い下線でしたが、私のブログでは黄色い線が合わないと感じたため、下記2つを参考にして少し改造しました。
実際に追加したCSSは以下の通りです。
/* ナビゲーションバーを リンクの強調 */
#navigation-content li a:hover{
border-bottom: 2px dotted white;
}
これでマウスオンした際に白い点線の下線を表示するようになりました。
(今回はプログラミングという項目にマウスオンしています。)
ナビゲーションバーに検索を追加する
今の設定ではBlogger管理画面の「レイアウト」→検索ウィジェットを追加してサイト内の検索をできるようにしています。
正直これでもいいのですが、せっかくナビゲーションバーを常に表示できるようになったので、ナビゲーションバーに検索窓を追加していつでもブログ内検索をできるようにしたいと思います。
<!--検索ボックス-->
<form action='/search' id='search-box-form' method='get'>
<input data-placeholder-end='' expr:value='data:view.isSearch ? data:view.search.query.escaped : ""' id='search-box-text' name='q' placeholder='ブログ内検索' type='text'/>
<button id='search-box-submit' title='検索' type='submit'><i class='fa fa-search'/></button>
</form>
Font
Awesome4を使用している方は上記コードを張り付ければ問題ないと思います。(Classの記述をFont
Awesome4用に変えただけです。)
以上でメニューバーで検索窓を追加できました。
引用符を変える
デフォルトの引用符だと引用が目立ちにくいため、下記サイトを元に引用符のデザインを変えました。
少しつまづいたところとして、参考サイトではFont
Awesomeを使っているのですが、Font AweSome５を使っている場合は書き方を変える必要があります。(詳細はリンク先にあるので、そちらを参照お願いします。)
引用箇所が下記のように表示されるようになり、分かりやすくなりました。
Twitterのフォローボタンを設置する
過去に記事を書いているので、そちらを参考にお願いします。
ブログカードを設置する
ブログカードとは下記のようなカード型のリンクの事です。
今までリンクは文字で表示させていましたが、こちらの方が視覚的に分かりやすいと思ったため、自分のブログのリンクを作成する際はブログカードにしていきます。
色々なやり方があるみたいですが、今回は下記サイトを元に作成しました。
こちらの方法ははてなブログの機能を使って作成する方法であるため、特殊な設定をすることなく導入することが出来ます。
やり方としては下記URLの「ブログカードを作成したいページのURL」という箇所を変更していただき、作成画面からHTMLを貼ればできます。
<iframe class="hatenablogcard" style="display:block;width:100%;height:auto;margin:12px 0;max-width:680px;" title="%title%" src="https://hatenablog-parts.com/embed?url=ここにブログカードを作成したいページのURL" frameborder="0" scrolling="no"></iframe>
注意点としてはあくまで、外部のものを使用しているため仕様変更などされると挙動が変わってしまう可能性があることです。他にも注意点がありますが、詳細は上記リンク先を参照お願いします。
また、他にもブログカードの作成方法はあります。下記リンク先に詳しくまとめられているため、こちらも参照お願いします。
ラベルを階層表示する
このブログのラベルが増えてしまい、ラベルのところが見にくい状態となったため、ラベルを階層表示させてすっきりさせました。
参考にしたサイトはこちらです。
参考記事通り設定したら無事に階層表示させることができました。
注意点としては階層表示させるためにラベルをすべて書き換えないといけないということです。例えばバイクの下に整備という階層を作りたい場合は「バイク/整備」というラベルを作らなければいけません。
私の場合は記事の数がそこまで多くないので問題なかったですが、数が多いとかなり大変だと思います。。。
(2022/11/06 追記)
こちらの変更について、思ったほど見た目がすっきりしなかったため、一旦元の状態に戻しています。
h2タグの1文字目の色と大きさを変える
内容については別で記事を書いたので、そちらを参照お願いします。
SNSシェアボタンを修正する(Twitter→X)
下記記事にまとめたので、そちらを参照お願いします。
SNSシェアボタンを追加する(Pinterest)
下記記事にまとめたので、そちらを参照お願いします
まとめ
BloggerでQooQを導入して初期設定およびカスタマイズを行いました。
他にも設定を変えたら記事を更新していこうと思います。
.png)
0 件のコメント:
コメントを投稿