まとまった時間があったのでブログ周りを少しいじってみました。
Bloggerはカスタマイズの自由度が高いのが良い所なんですが、なかなか情報が無い事もあり整理を兼ねてメモを残しておくことに。
とりあえずカスタマイズも一段落ついたので、どこを変更したのかと参考にした記事をまとめておきます。
Blogger標準のページナビゲーションはいまいち挙動や使い勝手が良くなくて、ネットを参考にいくつかのベージナビ設定を行ったものの過去150件分しか遡れなかったり、スマホでは正常に動作しなかったりといくつか問題がありました。
また外部のjavascriptを参照する場合、参照できなくなり動作しなくなるという問題が続いたのでなんかいい方法ないかと調べていた所、こちらのブログですごく良い設定方法が公開されていました。
Blogger:ページ番号付ページナビ(8)Paginavi_Bloggerモジュールの導入
続きモノの記事なので始めから読み進めると分かりやすいと思いますし、その他のblogger関連記事も充実していてとてもタメになりますね。
今回は、色やページ数などを変更して設置すると以下のような感じに。
スマホでも動作するし全記事遡れれるし、リンク切れも気にしなくて良くなったのでページナビについてはこれで一段落した感じです。
パソコンなど画面サイズが大きい端末から接続した場合は、右側にサイドバーが有るレイアウトだったんですが「サイドバー要らないか」と考え１カラムに変更しました。
サイドバーを削除するにあたり、それまで設置していたメールフォームや人気記事のリストをどうしようかと考えたのですが以下の記事を参考に個別のページに表示させることにしました。
Bloggerの連絡フォーム機能を使ってお問い合わせページを作る方法
なんとか、↓のページにメールフォームを設置できました。
お問い合わせ
また人気記事の方はページだけでなく個別の記事下にも表示させた方が良さそうなので少し手を加え記事下にも表示するようにしています。
表示イメージとしてはこんな感じに。
なおbloggerの初期設定状態では人気記事も地味な感じなので以下を参考に色々手を加えると良さそうですね。
bloggerの人気記事一覧をカスタマイズする方法
これでスマホで見てもパソコンで見ても似たような画面イメージに、まあどこかでまたサイドバー復活するかも知れませんが。
最近は古い記事を時々修正することもあるので、修正日付順に記事を並べる事は出来ないかなと思っていました。
いろいろ探してみた結果、少し手を加える必要があるのですが以下を参考にjavascriptを使った方法でやってみることに。
Blogger:投稿タイトルと投稿時間の一覧表（ブログ内の全投稿）を作成する
Blogger の フィード URL 構成 と パラメタ― まとめ
記事をどのような順番で並べたいかによりフィードＵＲＬのパラメータを変更(２つめの記事が参考になります)していけば良い感じですね。
ただ記事数が多いとスクリプト表示に時間がかかるので、記事数見合いでJavaScriptに手を加えるのが良さそうです。
とりあえず20件だけ記事情報を取得して一覧化するように変更し、以下のような一覧ができるようになりました。
更新履歴サンプル
表示イメージはもう少し見直した方が良さそうか？
Adsenseなどで広告を移動するスクリプトを使うとアクティブビュー視認可能率が下がるということなので、以下の記事を参考に修正を行いました。
【改良版】コピペで簡単！はてなブログで「文中にアドセンス広告を入れる」を自動化する方法
こちらについては元記事にもありますが注意点がありますので引用しておきますね。
またサイドバーに表示していた一部の広告は表示に時間がかかる(レスポンス悪化に繋がる)ため今回の変更に合わせて無くすことにしました。
こちらもどこかで復活するかもしれませんが。
無料ブログなので限界はあるんだろうけど、サクサク動作しないと見ている人もストレスなんだろうと思い少し手を加える事に。
「時間が掛かっている処理を確認し修正する」というとても地味な作業なんですが、各処理時間の確認するときは以下のWebツールが、どこでどれだけ時間が掛かっているのかが分かり便利です。
GTmetrix
webpagetest
なお技術的な話はこちらのページがとても参考になりました。
ウェブページを1秒台で表示させる原理と方法
結局、サムネイル表示・非表示を見直したり不要な機能・ガジェット類を削除しましたが1秒台はなかなか難しいですね。
* なんとかページ表示速度が1秒台に
ブログ内の記事を探す時のためにラベルや月別アーカイブを設置していたのですが、見た目もゴチャゴチャしてあまり良くなかったこともあり「Googleカスタム検索」を画面下の方に設置することに。
検索条件により検索結果に広告が出る場合もありますが、Blogger標準の検索ウィジェットと比べ見た目も検索速度も良い感じです。
また「Google Analytisc」と紐付ける事で、どのようなキーワードで検索しているのか知ることができるようなので、記事を書く際の参考にもなりそうです。
お馴染みのアレです。
もう少し修正したいなと思っている事もあるのですが、だいたい一段落したので記事にしておきました。（忘れてしまうので)
あ、あと画面サイズにより文字サイズを調整するのと配色も変えるかもしれないのでそれぞれ参考にしているサイトを。
フォントサイズを「vw・vh」でビューポートの幅にあわせて可変させる
ウェブ配色ツール Ver2.0 produced by フォルトゥナ
文字サイズは大型のタブレットだと少し文字が小さいかもしれないので見直したい所ですね。
まあ、いろいろと修正したのでどこか表示がおかしい所がありそうですが、見つけ次第修正していこうかなと考えております。
とりあえず修正前後にはバックアップを忘れずに！
Bloggerはカスタマイズの自由度が高いのが良い所なんですが、なかなか情報が無い事もあり整理を兼ねてメモを残しておくことに。
とりあえずカスタマイズも一段落ついたので、どこを変更したのかと参考にした記事をまとめておきます。
ページナビを設置する
Blogger標準のページナビゲーションはいまいち挙動や使い勝手が良くなくて、ネットを参考にいくつかのベージナビ設定を行ったものの過去150件分しか遡れなかったり、スマホでは正常に動作しなかったりといくつか問題がありました。
また外部のjavascriptを参照する場合、参照できなくなり動作しなくなるという問題が続いたのでなんかいい方法ないかと調べていた所、こちらのブログですごく良い設定方法が公開されていました。
Blogger:ページ番号付ページナビ(8)Paginavi_Bloggerモジュールの導入
続きモノの記事なので始めから読み進めると分かりやすいと思いますし、その他のblogger関連記事も充実していてとてもタメになりますね。
今回は、色やページ数などを変更して設置すると以下のような感じに。
スマホでも動作するし全記事遡れれるし、リンク切れも気にしなくて良くなったのでページナビについてはこれで一段落した感じです。
２カラムから１カラムへ変更
パソコンなど画面サイズが大きい端末から接続した場合は、右側にサイドバーが有るレイアウトだったんですが「サイドバー要らないか」と考え１カラムに変更しました。
サイドバーを削除するにあたり、それまで設置していたメールフォームや人気記事のリストをどうしようかと考えたのですが以下の記事を参考に個別のページに表示させることにしました。
Bloggerの連絡フォーム機能を使ってお問い合わせページを作る方法
なんとか、↓のページにメールフォームを設置できました。
お問い合わせ
また人気記事の方はページだけでなく個別の記事下にも表示させた方が良さそうなので少し手を加え記事下にも表示するようにしています。
表示イメージとしてはこんな感じに。
なおbloggerの初期設定状態では人気記事も地味な感じなので以下を参考に色々手を加えると良さそうですね。
bloggerの人気記事一覧をカスタマイズする方法
これでスマホで見てもパソコンで見ても似たような画面イメージに、まあどこかでまたサイドバー復活するかも知れませんが。
最近変更した記事順に並べる
最近は古い記事を時々修正することもあるので、修正日付順に記事を並べる事は出来ないかなと思っていました。
いろいろ探してみた結果、少し手を加える必要があるのですが以下を参考にjavascriptを使った方法でやってみることに。
Blogger:投稿タイトルと投稿時間の一覧表（ブログ内の全投稿）を作成する
Blogger の フィード URL 構成 と パラメタ― まとめ
記事をどのような順番で並べたいかによりフィードＵＲＬのパラメータを変更(２つめの記事が参考になります)していけば良い感じですね。
ただ記事数が多いとスクリプト表示に時間がかかるので、記事数見合いでJavaScriptに手を加えるのが良さそうです。
とりあえず20件だけ記事情報を取得して一覧化するように変更し、以下のような一覧ができるようになりました。
更新履歴サンプル
表示イメージはもう少し見直した方が良さそうか？
広告関連
Adsenseなどで広告を移動するスクリプトを使うとアクティブビュー視認可能率が下がるということなので、以下の記事を参考に修正を行いました。
【改良版】コピペで簡単！はてなブログで「文中にアドセンス広告を入れる」を自動化する方法
こちらについては元記事にもありますが注意点がありますので引用しておきますね。
さて、大事なことですが、本スクリプトは自己責任でご利用ください。もし実施する場合は「自己責任」となりますが、とりあえずBloggerでも今のところ同じ仕組みで動作するようです。(多重カウントも解消している様子)
スクリプトが突然動作しなくなったり、今回のように単価減の状態になったり、またポリシー違反状態になった場合等も、当ブログならびにブログ主は責任を負いません。
またサイドバーに表示していた一部の広告は表示に時間がかかる(レスポンス悪化に繋がる)ため今回の変更に合わせて無くすことにしました。
こちらもどこかで復活するかもしれませんが。
表示速度を上げるために
無料ブログなので限界はあるんだろうけど、サクサク動作しないと見ている人もストレスなんだろうと思い少し手を加える事に。
「時間が掛かっている処理を確認し修正する」というとても地味な作業なんですが、各処理時間の確認するときは以下のWebツールが、どこでどれだけ時間が掛かっているのかが分かり便利です。
GTmetrix
webpagetest
なお技術的な話はこちらのページがとても参考になりました。
ウェブページを1秒台で表示させる原理と方法
結局、サムネイル表示・非表示を見直したり不要な機能・ガジェット類を削除しましたが1秒台はなかなか難しいですね。
* なんとかページ表示速度が1秒台に
ラベル・アーカイブのかわりに
ブログ内の記事を探す時のためにラベルや月別アーカイブを設置していたのですが、見た目もゴチャゴチャしてあまり良くなかったこともあり「Googleカスタム検索」を画面下の方に設置することに。
検索条件により検索結果に広告が出る場合もありますが、Blogger標準の検索ウィジェットと比べ見た目も検索速度も良い感じです。
また「Google Analytisc」と紐付ける事で、どのようなキーワードで検索しているのか知ることができるようなので、記事を書く際の参考にもなりそうです。
お馴染みのアレです。
もう少し修正したいなと思っている事もあるのですが、だいたい一段落したので記事にしておきました。（忘れてしまうので)
あ、あと画面サイズにより文字サイズを調整するのと配色も変えるかもしれないのでそれぞれ参考にしているサイトを。
フォントサイズを「vw・vh」でビューポートの幅にあわせて可変させる
ウェブ配色ツール Ver2.0 produced by フォルトゥナ
文字サイズは大型のタブレットだと少し文字が小さいかもしれないので見直したい所ですね。
まあ、いろいろと修正したのでどこか表示がおかしい所がありそうですが、見つけ次第修正していこうかなと考えております。
とりあえず修正前後にはバックアップを忘れずに！