FC2ブログ

ブログをレスポンシブ対応にしました 2019年2月ブログ更新

0 Comments
ハル

初見の方は初めまして。2回目以降の方は、ブログの様子が大きく変わったことに驚かれたかも知れません。
ブログのテンプレートを変更して、レスポンシブ対応にしました。

どういう事かというと、PCで見てもスマホで見ても同じデザインのブログが表示されるようになったということです。いわゆるモバイルフレンドリーというやつです。これは管理者にとっても画期的なことですよ。何しろこれまではPC用とスマホ用の2つのテンプレートを用意する必要がありましたから。


このウェブサイトのアクセスを見ていると、大体半分近くはスマホからのアクセスです。
私の旅行記は無駄に長い上に写真が多いのでどう考えてもPCで見ることを推奨していますが、せっかく来てくれたスマホ利用者を使いにくい構成で追い返すのもアレなので、今回思い切ってレスポンシブ対応してみました。

ついでに色々とサイトの細かいところをイジりました。
何かの記録のために、更新内容をまとめておこうと思います。








レスポンシブWebデザイン対応



一番大きなのはこれです。PC版では今まで通りの構成ですが、スマホで閲覧した場合の見やすさ、分かりやすさが格段に向上しました。確かにスマホで見てみるとちゃんとナビゲーションやメニューが表示されてる!これまではカテゴリすら表示されてなくて使いにくかったです。


まあ、これは私が偉そうにレスポンシブに対応した!!とドヤ顔するものでもなく、レスポンシブ対応のテンプレートをお借りして使っているだけですけどね…。
なおこのテンプレートはThe other way round 様の作成されたものを使用させて頂きました。ありがとうございます。この方は他にもハイクオリティなテンプレートを量産されているです。FC2ブログ利用者は必見です。


ユーザータグ追加





記事にユーザータグを付けてみました。Twitterなどでお馴染みの#ハッシュタグと同じです。タグに牛タンが入っているのはお察し。


これまでもカテゴリでジャンル分けはしていましたが、カテゴリでは分類がざっくりしすぎ。四国の旅行記を見たいのに鳥取砂丘が出てくるとかザラでした。
タグでさらに細かくジャンル分が出来たので、欲しい情報へのアクセスは容易になったかと思います。


ちなみにユーザータグを設定する過程は結構苦労しました。FC2に苦情を言いたい。

・ユーザータグを付けると記事内に勝手にリンクされる
 ボタン一つでリンクするかしないかを選択出来るのですが、デフォルトがリンクを設定するとなっていたので100近い記事を全て編集しなおしてリンク機能をオフにさせられました。こういう迷惑な機能はデフォルトではオフにするべきでしょう。

・ユーザータグを普通に設定すると、全FC2ブログのユーザーから抽出される 
誰がどう考えても、自分の書いた記事の中から、任意のタグでジャンル分けしたいと思うでしょう。何が悲しくて他の方の記事の一覧を作らねばならんのか。
これを修正するにはhtmlを書き直す必要があります。



グローバルナビゲーションの変更+パンくずリスト追加





グローバルナビゲーションはテンプレート付属のものに変更しました。上の画像の「INDEX・ABOUT……」などが書いてあるヘッダーみたいなやつのことで、これがあると一気にブログがそれっぽく見えます。見た目だけじゃなく、訪問者がブログの中を移動する時に大変役に立つものです。

グローバルナビゲーション自体はこれまでも設置していました。これまで設置していたマウスを乗せると項目が出てくる奴は半日かけて苦労して設置したんですが、今回の更新で没です。さよなら。微妙に幅が足りていなかったのも私の技術力不足ゆえの仕様です。HTMLとINIは中学生の頃からよく触っていたので人並みには扱えるんですが、CSSはどうにも苦手です。いまだにコピペの継ぎ接ぎしか出来ません。

ついでにいわゆるパンくずリストというやつも設置されています。
TOP<日常<旅行まとめ
というコレです。階層を明らかにすることで今自分がどこにいるのか一目で分かるという優れものです。カテゴリ分けとどう違うのか私にはいまいち分かりませんが、役に立つことは間違いありません。なおパンくずリストという名前はヘンゼルとグレーテルから。迷わないためのアイデアという事ですね。


アイコン画像を変えた



細かい話ですがアイコンを、野辺山で撮影した花の写真から小豆島のオリーブ公園の写真へと変更しました。まるで地中海の国にいるように錯覚してしまう小豆島。小豆島は私が初めて自分だけの力だけで旅行をした場所なので今でも特別です。

あと背景色を真っ白ではなく、薄くカラーを付けました。個人的な意見かも知れませんが完全真っ白は目が痛い。



Chromeでジャンプしない問題は直ってた



fc2ブログのSSL化を悩み中 + 目次のページ内リンクがジャンプしない問題 という記事でも触れましたが、Google Chromeを利用している時のみ、目次をクリックしてもページ内リンクがジャンプしないという問題が発生していました。

が、テンプレートを変えたら直っていました。という事はテンプレート由来の問題?それもそれでよく分かりませんが……。


SSL化は出来るところから



SSL化は一日にしてならず。一気に修正するのは骨がバキバキに折れるので、とりあえず出来るところから。

・アクセスカウンター
・アクセス解析
・テンプレート

だけはSSLに対応させておきました。
このうちテンプレートは、テンプレート内のhttp:を片っ端から消して//にする不毛な作業でした。もし常時SSL化を目指すならこの不毛な作業を全ページでする必要があるとか心が折れます。リンクだけじゃなく画像も全部修正とか不可能です。


Before & After





びふぉー。



あふたー。

こうやって比べてみると新しいデザインはスタイリッシュというか、それっぽく見えますね。(語彙力) WordPressなんかで作ったブログと遜色ない見た目です。むしろWordPressは無駄に凝っていてページが見にくかったり重かったりするので、シンプル&クールなこのデザインは気に入りました。

前のデザインも可愛らしくて気に入っていて5年ほど使わせて貰いましたが、今日からは新生ハルの旅行記としてボチボチ頑張っていきます。




ということでブログ更新のお知らせでした。こういうことをすると何だかウェブサイトの管理人っぽくて変な感触です。

なおスマホで見た場合ですが、カラムが下に落ちているのはご愛敬です。横長のPCと縦長のスマホじゃどうしてもね。仕方ないね。
一番下まで簡単に飛べるようになっているのでそちらをぽちっとしてください。

トップに戻る

にほんブログ村 旅行ブログ 国内旅行へ
にほんブログ村

関連記事
ハル
Posted byハル

Comments 0

There are no comments yet.

Leave a reply