ブログリニューアルしました。　２月２１日

レスポンシブデザイン

当ブログのアクセス統計を見てみるとスマホからが45%を占めています。
以前のテーマでは、スマホではサイドメニューなどが使えずパソコンから見る時に比べて表示されない部分がいくつかありました。
これはPC用のテーマとスマホ用のテーマの2通りに分かれているBloggerの仕様だったのですが、端末が多様化し画面サイズも多様化する中でそれぞれの端末に合わせて最適な表示にするには不便な面もありました。
少し調べると、一つのテーマで多様な端末に対応できるレスポンシブデザインという設定に出来ることが分かりました。
WEBサイトを探すとBlogger用のいくつかのレスポンシブデザインのテンプレートが見つかります。

QooQを使ってブログをリニューアル

いろいろと探して、ラムネグさんのQooQというテンプレートを使うことにしました。
初期設定の方法も詳しく解説していただいているので簡単に導入できました。導入が終わると自分好みのデザインへカスタマイズしていきます。
”QooQ　カスタマイズ”といったキーワードで検索するといろいろなWEBサイトが見つかります。自分のニーズに合ったページを参考にテンプレートをいじっていきます。

ナビゲーションバーに線区切りを入れる

ページ上部にナビゲーション領域といういくつかのページへのリンクを貼っている場所があります。QooQの標準設定では、各ページタイトルがスペースのみで仕切られて表示されるので

ホーム　VAD　べトナム釣りダービー　2019　べトナム　釣り魚図鑑　VAD べトナム釣りダービー　2018
という感じになって、どこからどこまでが一区切りなのか分かりにくいです。
何か、仕切りが分かりやすくなる方法がないかと探していると、どストライクなのが見つかりました。

”Blogger向け_QooQのカスタマイズ_ページ上部を線引きでちょっとだけ見易く！”

”湖山桜好の銭湯日誌”というブログです。こちらのブログに書かれている通りにxmlファイルを書き加えれば完了。

ホーム｜VAD　べトナム釣りダービー　2019｜べトナム　釣り魚図鑑｜VAD べトナム釣りダービー　2018｜
の様に仕切りが入りました。格段に見やすくなりました。

画像なし投稿の見出しにも画像を表示する

次にとりかかったのが、トップページにサムネイル画像が表示されない投稿に表示される共通画像の表示です。こちらも、WEBをちょっと探せば、またまたどストライクなのが見つかりました。

”トップページに表示させるサムネイル無し記事にデフォルト画像を表示させる”

プゥ二郎さんの”勉強でもするか”というサイトです。上記ページに書かれている通りに作業を進めたのですが、一点、画像の指定で躓きました。
”一旦GoogleフォトにアップロードしてからURLを確認して、'画像のURL'の部分に記述する事になります。”
とあるのですが、この方法で画像のURLを指定してもうまくいきませんでした。
　そこで、Bloggerでページを一つ作り表示させたい画像を貼り、そのページを表示させます。画像を右クリックして画像アドレスをコピー。画像指定のURLをコピーしたURLに書き換えてみると、うまく行きました。

投稿検索機能の強化

QooQテーマをもとに上記2点の変更を加えたほか、少しだけテーマのxmlファイルのCSS部分をいじって自分好みに変更しました。
また、魚種や釣り場、月日から投稿を検索できるほか、フリーワードによる検索窓も設置しました。
　
POP-Rで釣れた投稿だけを探すなんてことも出来ます。
これまでの雰囲気は踏襲しつつ、レスポンシブに変更しました。
慣れないことをやったので、忘れないように備忘録の意味合いも含めて投稿しました。

これからもこれまで通りべトナム100倍速！をよろしくお願いいたします。

最後に、
ブログカスタマイズについて、有用な情報を公開していただいているラムネグ様、湖山桜好様、プゥ二郎様、どうもありがとうございます。