yunico's fluffy life

横着主婦の暮らしの詰め合わせ

トップ画像

SCROLL

【ブログ改装】ブログのぷちリニューアルが完了!カスタマイズでお世話になったサイト様をまとめました。

記事内に商品プロモーションを含む場合があります。

数日前に自分のブログを読み直していたら、気になる箇所を見つけちゃって、気になりだすと居ても立っても居られない。

ちょっとデザインをいじりだしたら終わらない現象に突入!1つを変えると、別の場所が気になりだすの不思議だね。

微調整を繰り返していたけど、途中で「もう大幅に変えちゃえ!」と、記事を書くのはそっちのけで大改装を開始。

新しいデザインどうかな🌷.*

  • ブログ改装のきっかけになった心境変化
  • 変更点と、参考にしたサイト様の一覧



ブログデザインに対する心境変化

これまで、ブログのデザイン(主にスマホ閲覧)は

  • 初めてアクセスしてくれた方にもブログの構造が分かりやすい。
  • 1タップで見てもらいたいページに簡単に飛んでもらえるようにする。
これらに重点を置いていたけど、「読者に分かりやすく」配置しているはずの数々のボタンが急にゴチャついて見えるようになってしまった。

ゴチャついて見えた原因には

  • 1から10まで文字での説明(補足)を入れていたから
  • 目立たせたい箇所はとにかく強調すればいいと思っていたから
  • 見やすいと思ってすべてのフォントサイズを16px〜で設定していたから
こんな理由がありそう。

もちろん【誰が見ても分かりやすいデザイン】であることに越したことはないけど、この『誰が』というのは多少絞って考えてもいいのかもしれない。

私自身が「このブログ好きだなぁ」と思わずブックマークをポチッとするのは、無意識にデザインの第一印象で決めている気もする。

そして、この自分に刺さるデザインというのはたいてい『全ての人』に優しくない。
カテゴリ名やメニュー名が全て英語であったり、英語+オシャレな筆記体フォントを導入して、英語弱者な私にはさっぱどわがんねという状態のページも多い。

「見たいなら自由に見てね、」と進んで見せにすらいかない、サブカルみを感じるのがグッとくる。



じゃあ今までの私のブログはどうだったか。

入ってきた人たちに「上に戻るのはこのボタンで、ホームに戻るにはこのボタンを押してくださいね!読者登録してね!人気記事はここだからね!さぁさぁ!読んでください!あ、記事の中ではここを押すと目次に戻れまっせ!」と、目の回るような情報量を一点に集めていた気がする。

ニコニコしながらひたすらついて説明してくる店員さんみたいだけど、これを丁寧に感じる人もいれば、「そんないっぺんに主張しなくても自由に見て回るよ」という人もいるだろうな。

また、一体どれだけの人が詳しく記載している(と思っていた)ブログ案内を活用しているのだろうという素朴な疑問もあった。

このブログのアクセス数は約8割が検索からやってきてくれているんだけど、アクセスした記事を読んだあとに他の記事まで読む方は少ない。つまり、実際にはあまり使われてないという…

『読みやすいブログとは』『親しみやすいブログとは』そんな風に色々調べてブログを作ってきたけど、自己満足止まりだったという事実を目の当たりにしてしまった。
そのくらい、読む側は「興味がある記事にしか興味ないよ」ってことだと思う。



ええい!元々のデザインも自己満足止まりだったのなら、できる限り自分好みのデザインにしよう!と思い切って、好きを詰め込んでいくことにしてみた。

これまで使ってこなかった小さめの文字サイズも使ったし、アイコンフォントにはあえて文字説明をつけない。そっちの方が可愛い気がするぞ!

おそらく、多くの人はデザインはそんなに気にしてない。デフォルトならそれでいいし、読みづらくなければなんでもいい…というかそこまで興味ないって人が圧倒的だと思う。

ただ、デザインがグッと来たらとりあえず読んでみるという私のような人もそれなりにいると信じている!
そして単純にカスタマイズが楽しい



変更点と参考になったサイト様

ページャーボタン


次のページ・次の記事・前の記事にアクセスするためのリンクボタンで、もともとは

<<【前の記事】丨【次の記事】>>

こんな風に二手に分かれたような見た目で、記事の下に配置されている。

このページャーボタンを2行に分けて、可愛くカスタマイズする方法を説明してくださっているmonoさんのブログを参考にしました。mono-memo.hatenadiary.comありがとうございます!
他にも素敵なカスタマイズ方法を載せてくださっています。monoさんの記事を参考に、次は注目記事にナンバリングしたい!

便利な目次ボタン

今までは目次に戻るリンクを設置して、それを押すと目次まで画面が戻っていくという方法を取っていたけど、画面を戻すことなくその場で目次を確認できたらなぁという願望を叶えてくれたのがReoさんの記事です。reoasxdtmgt.hatenablog.comやりたかったことドンピシャの記事です。ページ上に戻るボタンもセットになっていて至れり尽くせりです。

今見ている画面の右下にあるボタンを押すと目次がそのまま画面に表示されると思うんですけど、すごく便利!ありがとうございます!

コンパクトな注目記事

注目記事(人気記事)を公開するようにしているのですが、サムネを潰したくなくて結構な幅をとって配置していた。

これを2列にする方法はwww.fuji-blo.comはてなブログのカスタマイズをしようと思った人なら多くの人が参考にしているであろうフジグチさんの記事を参考にしました。
記事ランキングがすっきりコンパクトに配置できました!

コメントを書くボタン


記事の左下に配置されている「コメントを書く」ボタン。
シンプルイズザベストすぎるからもう少し可愛くしたい…ということで参考にしたのはフジグチさんのこちらの記事。www.fuji-blo.comフジブロっ!さんには大変お世話になっています。ありがとうございます。



おわりに

トップ画像などは変えていないので大幅リニューアルではないけど、こまごました部分をいくつもカスタマイズできて満足。

まだ気になる部分はいくつかあるけど、それは少しずつ手を加えていくことにして、明日からはまた記事を書いていこう✐

読んでくれてありがとう!
それではまたね🧸◌𓈒𓐍