Blogger のカスタマイズ

広告の表示がうるさくない、カスタマイズが自由にできる、ということで選んだ無料ブログサービスの Blogger。

たしかに広告表示で快適なのですが、ユーザー数が少ないからかカスタマイズ情報がとても少ない!日本語のテンプレートも少ない!のが困りもの。

数少ないテンプレートのひとつをカスタマイズして使っていましたが、ちょっと物足りなくなり、今風に変えたくなり、ついでに不具合も発見。

そこで、思い切って 2019 年 9 月末に新しいテンプレートに変更、自分なりのカスタマイズを施しました。

ダウンロードしたテンプレート、参考にしたサイトをメモしておきます。

参考にさせていただいたサイトのおかげでこのブログは成り立っております。

本当にありがとうございます!


■テンプレート「QooQ」

シンプルで速い日本語bloggerテンプレート「QooQ」の紹介!


■ラベル(カテゴリ)の階層化

Bloggerのラベルをカテゴリ別に整理する(ラベルの階層化)
Bloggerのラベルを階層化を導入したのに階層化されない時の対応

※使用しているテンプレートが異なるため、階層が閉じてしまう不具合が発生。jQuary をいじって直しました。


■ブログの投稿日と更新日の設定

【Blogger】最終更新日を表示する


■トップページの表示件数が設定より減ってしまう場合の対策

一記事のデータ量が多いと Blogger 内部で制限がかかってしまうようです。

対策としては "<!--more-->" という区切りを入れることで全部を読み込ませないようにします。

こちらを参考にしました。

BloggerのAuto Pagination 対策(メインページの表示件数がおかしい)


■ページナビ

こちらを参考にして追加しました。

ページナビなどBloggerのカスタマイズをいろいろやってみた
Blogger:ページ番号付ページナビ(8)Paginavi_Bloggerモジュールの導入

ただ、カテゴリをいじっているせいか、カテゴリからページに飛ぶと表示がおかしくなります。とりあえず、そのままにしてあります。


■ Google Fonts

【2019年版】Google Fontsの使い方:初心者向けに解説!

※Blogger は XML なので、"&" は "&amp;" に直しました。それと </link> の追加。


■ブログカード

ブログカードのブックマークレットを作成しました - カスタマイズ

ブログカードの使い方はこちらで。

内部リンクを効果的に!Bloggerで使えるブログカード4選 - ウラの裏


■ページ内リンク

こちらを参考にさせていただきました。

Bloggerでページ内アンカーを設定する方法


■カッテネの導入

こちらを参考にして追加しています。

カエレバやヨメレバより使い方が簡単なカッテネ作った|クリックもされやすいよ

ボタンのカスタマイズはこちらから。

カッテネでAmazonと楽天のアフィリエイトリンクを並べてみた-76log


■その他

1. テンプレート「QooQ」にラベル階層化のコードを追加したところ、関連記事が表示されないというエラーに気づきました。

ラベルに "/"(半角のスラッシュ)を使っていたのが原因だったので、ラベルの区切りを " - " 半角スペースとハイフンの組み合わせに変更しました。

2. 写真に説明を入れると、スマホで見たときに写真が画面外にはみ出す現象が発生。

自分でテーブルをカスタマイズしていたのが原因だったので修正しました。

カテゴリ

このブログを検索

◎旧ブログはこちら
wakuwaku_wine

QooQ