ブログデザインを大幅リニューアルしました

 

どうもウノモトです。

 

ご覧の通りお気づきかとは思いますが、この度ブログのデザインを大幅に変えてみました。

今回は忘備録として、そして素晴らしいデザイン用のカスタマイズをシェアするという目的で書いていきます。

 

 

 

やったこと

ブログテーマの変更

これが一番大きいんじゃないでしょうか。

たまたまCodomisu Flatというテーマを発見いたしまして、「これは!」と思ったので導入してみました。引っ越しのときに良いお部屋が見つかった感覚に似ていますね。Codomisuさんどうもありがとうございます。

 

hitsuzi.hatenablog.com

 

ざっくりと整える

導入したあとはサイドバーの画像サイズを調整したり、トップページにいくつかの記事を「続きを読む」設定で何件か表示させるようにしました。

 

Miliard関連記事の導入

前まではなぜか反映されなかったのですが今回はどうだろうと思い、多くのブログでお馴染みのMiliardを導入してみました。

記事の下にズラっと出てきたときには興奮しましたね。「すげえ!ブログみてえだ!」つってね。

これでだいぶ回遊性が増したのではないでしょうか。

Milliard関連ページプラグインについて | シスウ株式会社

 

シェアボタン、フォローボタンの設置

そしてブログの成長を左右するであろうシェアボタン、フォローボタンを設置。

 

シェアボタンに関してはshunさんのこちらの記事を参考に。

www.ituore.com

 

フォローボタンに関してはじょーじさんのこちらの記事を参考に設置しました。

georges.hatenablog.jp

 

また、スマホ版表示にはゆきひーさんのこちらのフォローボタンを設置しました。

www.yukihy.com

 

メニューバーの設置

ブログの一番上、のタイトル横に見えますメニューバー。

こちらもブログの内容がわかりやすいように設置しました。

これは前回からの引き継ぎですね。まったくCSSなどに関しては無知なのですが、手探りでいじりながら丁度良い感じに仕上げることが出来ました。

 

ヘッダー画像の設置

実はこれに一番苦労しました笑

デザイン自体はサッサッサーとiPadのSketches Proというアプリで作ってしまったのですが、サイズの調整が上手くいかず、試行錯誤を重ねるうちに丁度良い位置に収まりました。

うむ。なかなか良い看板構えじゃないですか?

 

関連記事をサイドバーに固定

そしてこれはほんの思いつきなのですが、下に行くとサイドバーが寂しいなあという気持ちからやってみました。サタンさんの記事を参考にさせて頂きました。

www.needs-blog.com

 

まだできてないけど、やりたいこと

おすすめ記事のスライダー表示

このCodomisuFlatというはてなブログテーマ、なんとヘッダー画像下にオススメの記事をスライダーで表示できるのですよね。

同じくこのテーマを使っていらっしゃるうぃるさんのブログのように、サイトに来た人にサッと一押しの記事を表示させているのがすごく良いなーと思うんです。

まあ、まだアフィリエイトのフの字くらいまでしか知らない僕にとってはまずは一押しの記事を作ることが先なんですけれどね。

hrktksm.hatenablog.com

 

記事のデザイン最適化

逆にこれは近いうちにやっておきたいですね。新しいデザインになったことでガラッと見え方が変化したので、それに合わせて記事の方も手直ししたいです。読者ファーストの「見える」ブログにしたいですねー。

 

サイドバーのカスタマイズ

サイドバーがないと寂しい、なんて先程は言っておりましたが少しゴチャゴチャしすぎもどうかなーという気持ちもあるのでシュッとまとめてみたいですね。シュッと。

 

スマホ用のデザイン設定

レスポンシブデザインではないので今のところスマホ版表示ははてなブログのデフォルトテーマになっているのですが、こちらもブログに合った形にカスタマイズできたらと考えております。

 

果たして効果は

さて、そんなこんなで大幅リニューアルした当ブログ。

これからの伸びしろに期待ですね。何しろ半日くらいかけて頑張ったんですから。

 

だいぶ居心地の良さが増したのではないかなと思うんです。Beforeと比べるとこの通り。

 

Before

f:id:unomoto3:20170503083112p:plain

 

After

 

というわけでリニューアルした当ブログをよろしくお願いいたします。

今回紹介したものも含め、何かの参考にしていただければ幸いです。

 

それではまた。

 

 

Bookmark this on Google Bookmarks
LINEで送る
Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です