お知らせ
旧ブログ(https://www.sayuminnishi.com/)から移転しました。
過去記事もこちらに移転していきます。
検索から来た方はお手数をおかけしますが、
記事一覧もしくはラベル別から探してください。

2020.05.25 管理人

【Blogger】QooQ v.1.26のカスタマイズ(2020.05.27時点)

2020/05/27

Blogger ブログカスタマイズ

t f P L







こんにちは。さゆみん(@sayuminxyz)です。

以前使用していたバージョンがv.1.21だったので、
執筆時点(2020.03.19)で最新のv.1.26にしました!!

そのときに、私がこのブログに行ったカスタマイズの紹介です。

お知らせ
ブログ移転に伴い内容が追加されています。
カスタマイズに関して、旧ブログのカスタマイズから減らしたことはありません。

旧ブログでやったこと

301リダイレクトの設定

前のブログから301リダイレクトの設定をしました。
とは言ってもBloggerはブログ内でのリダイレクトはできるけれど、ブログ移転の際に行うリダイレクトには対応していないのでテーマの中にタグを入れました。

コンテンツのバックアップ

移転するから、バックアップは必要だよね。
いま内容をチェックして、旧ブログで投稿した日付のままの方がよいのか新しく内容を加筆修正して投稿したほうがいいのかをチェックしています。
全てのコンテンツが完全移転するまでには時間がかかりそうです。

このブログのカスタマイズ

さて、本題です。
旧ブログで使用していたテーマを丸ごと使っているので、同じカスタマイズをしたものを使っています。

使用したテーマ

前回と同じラムネグさんのQooQです。
詳細はこちらからどうそ。

前回からの変更点

フォントサイズが大きくなっています。
見てわかるのは、それだけかもしれない。
詳細はこちらから見てください。

はてなブックマークの削除

いらないかなって思って消しました。(怖いのもある)
Ctrl + Fを押してはてなブックマークを入力して探せば出てきたはず。
(書き終える前に消した)
はてなブックマークが見つかったら、そこを囲ってあるタグ一行を削除で消えました。
全部消したらシェアボタンがすべて消えるのでいらないものだけ消してください。

パンくずリスト・関連記事

下のリンクを参考にして、
  • 複数ラベル時にパンくずリストを全表示
  • 関連記事に複数ラベルの記事を全表示
  • 関連記事数の記事数の変更
上の三つをカスタマイズしました。
【 QooQ カスタマイズ 】 パンくずリストと関連記事にラベルすべての要素を追加する

記事の最初に戻るボタンの設置

記事の隅に、記事の最初に戻れるボタンを設置しました

最終更新日の表示

記事投稿日の横に更新マークと最終更新日を表示させるようにしました。
このときに更新マークの表示がうまくいかなかったので、Font awesomeを入れました。

参考にしたのはこちらです。
【 QooQ カスタマイズ 】 Blogger ブログで最終更新日を表示させたい

Font awesomeの導入

<head>~</head>のどこかに入れる。
可能なら<!-- Font awesome -->も一緒に入れると分かりやすい気がする。

参考にしたのはこちらです。

関連記事に表示される画像の変更

画像の形を円形から四角形に変更しました。

参考にしたのはこちらです。
Blogger QooQで関連記事に表示されるサムネイル画像を円形から四角形に変更する方法

記事見出しの上にアドセンス自動挿入

WordPressでよく見かける見出しの上にアドセンスを挿入している機能を、
Bloggerでも可能なようにタグを追加しました。

参考にしたのはこちらです。

記事の見出しを自動作成

記事の見出しを自動で作成してくれるタグを追加。
これを入れると便利です。

参考にしたのはこちらです。
この記事の最初にあるような吹き出し式の会話を設置できるようにしました。
この下準備をしておけば、好きな時に吹き出し式の会話を記事に入れることができます。

参考にしたのはこちらです。
動くマーカーも追加しました。
追加しただけで色はまだ決定ではないのですが、入れた記事ではちゃんと動いています。

参考にしたのはこちらです。

ナビゲーションバーの位置変更

ナビゲーションバーが上にあると、
スマホで見た時に見てもらえない気がしたので位置変更しました。

参考にしたのはこちらです。
【blogger設定】qooqのナビゲーションの位置を変更する

カエレバ・ヨメレバ

カエレバ・ヨメレバのレスポンシブデザインの設置をしました。
WordPressでよく見かけるようなものがBloggerでも出来ちゃいます!!

参考にしたのはこちらです。
Bloggerでレスポンシブなカエレバ・ヨメレバを設置する方法

サムネイルがない記事にデフォルト画像を設定

せっかくなので、この機会にリスト版から通常版に変えました。

そのため記事ごとに最低1枚は設定しなければいけないのですが、
どうしても文章だけになってしまうものもあると思います。
なので、設定しました。シンプルにしたつもりです。

参考にしたのはこちらです。

HTMLサイトマップの設置

このブログでいうと新規投稿順/ラベル別のページのことです。
意外とあると便利だと思って設置しています。

参考にしたのはこちらです。
Blogger ブログにHTMLサイトマップを設置する方法

ヘッダー下にリンク

サイドバーやナビゲーションバーにおいてもいいかなって思ったけれど、
スマートフォンからだと折り畳みになってしまうので付けました。
画像のセンスはともかくスムーズに設置できたので満足です。

参考にしたのはこちらです。

ヘッダー下リンクの下にお知らせ

旧ブログから来た人がわかるようにお知らせを追加しました。
年末あたりまでこのお知らせを入れておく予定です。

ナビゲーションバーの中に検索ボックスを埋め込む

検索ボックスの場所って個人的にとても悩んで、「ナビゲーションバーって固定したら検索ボックスあるといいかも」って思ってナビゲーションバーに埋め込みました。

参考にしたのはこちらです。

ナビゲーションバーを上部に固定する

検索ボックスをナビゲーションバーに入れるので固定しました。
固定したほうが新着記事一覧も見るのに手間が掛からないかなって思ったから。

参考にしたのはこちらです。
【QooQ】ナビゲーションバーを上部に固定する方法

関連記事を中央寄せにする

見栄えがいいかなって思って中央寄せにしました。

参考にしたのはこちらです。
【QooQ】関連記事を中央寄せにする方法【カスタマイズ】

関連記事の表示件数変更

関連記事の表示件数を変更しました。
変更するなら今のうちなのかなって思って早いうちにやっておきたくて。

参考にしたのはこちらです。
【QooQ】関連記事の表示件数を変更する方法【カスタマイズ】

おわりに

長々と参考にした記事を紹介しました。ごめんなさい。

少しでもお役に立てたら嬉しいです。



QooQ