2年ぶりにブログのデザインを変えてみた。いい感じ。
どうも、はむ(@_ham29_)です。
最近は自宅に引きこもって読書してばかり。写真撮影に出かけていないのでブログの更新が途絶えがちでした。最近は自分のブログを読むと、見づらいなあと思うことが多いので、重い腰を上げて一新してみました。やったことを、メモとして残しておきます。
目次:
新旧比較してみる
もともとのデザインはこんな感じ。シンプルに見せているつもりだったんだけど、なんかゴチャゴチャしているような。
デザイン変更後。かなり洗練されたよね??
更新前のデザインは2016年5月に設定したから、2年弱もそのデザインだったんだなあ。
やったこと
ブログテーマの変更
サイドバーがあると気が散ってしまいそうだから、ワンカラムにしてみました。 適用したテーマは人気が高い「Material」。とても美しいです。
以下の記事を参考にして、テーマのカラーを変更しました。選択したカラーはLIGHT BLUEとORANGE。いいでしょ!?
はてなブログテーマ「Material」のカラーを変更する方法 - ウェブ学のすすめ
フォローボタンの変更
シンプルで美しいフォローボタンにしてみました。
はてなブログをコピペ+αでカスタマイズ!おしゃれなSNSフォローボタンのつけ方 - くうねるだす
ソーシャルボタンの変更
忍者おまとめボタンを使ってたけど、下の記事のものに変えてみました。
はてなブログにMaterial Design風のソーシャルボタンを設置する方法 - ウェブ学のすすめ
関連記事表示の変更
これまでもMilliardを使ってたけど、タイル表示にしてみました。写真ブログだから、アイキャッチ画像が大きく見えるといいかなと思って。もしかしたら、様子を見てまた変更するかもしれません。
Milliardはブログ記事の関連表示決定版!設置とカスタマイズ方法まとめ
見出しのデザイン変更
以下の記事を参考にしました。わかりやすく解説してくれる人がたくさんいて、ホントに助かります。
コピペ一発ではてなブログ見出しをカスタマイズ!ちょっとの工夫で印象が格段に変わる! - Yukihy Life
蛍光ペン風に強調する設定
こんなやつ。やっている人が多いので、マネしてみました。過去記事の強調部分の修正は、追い追いやるつもり(;^ω^)
はてなブログで文章中の文字を蛍光ペン風に強調する方法 - 理系男子のIoTライフ
目次のデザイン変更
とりあえず変更はしたんですが、囲みの中に「目次」という表記を入れてもイマイチ美しくならなかったので、ここも追い追い直していきます。たぶん。
はてなブログの目次のデザインをCSSで変更する方法 - すずろぐ
Adsenseの変更
ちょっと話が脱線しますが、最近流行りの自動広告を試しに導入してみました。このブログではほぼ収益なんてないので、しばらく放置して様子を見てみたいと思います。
関連記事を目立たせる枠
下のリンクのような感じのやつ。導入したものの、これも過去記事は修正が必要ですね。気が向いたらやります(いつ気が向くんだ)。
おすすめ記事・関連記事のリンクを枠で囲って目立たせるカスタマイズ - NO TITLE
好きなコードを選んでCSSに追加したら、記事内で使ってみましょう。p要素にクラスを指定します。
導入を見送ったもの
ページトップへ戻るボタン
ブログのカスタマイズ記事を見ていて導入しようかと思ったんだけど、これって必要? 自分は使った試しが無いので、いらないと判断しました。ぜひつけてほしい! という方がいらっしゃればつけます。
モチベーションがちょっと上がった?
ブログを書き始めた2015年の夏頃は毎日のように更新していたんですが、ここ1年くらいは更新頻度が下がっちゃいました。でも、ブログデザインを変えて、ちょっとブログ更新に対するモチベーションが上がったように感じます。わざわざこの記事を書くくらいだし。
最近はKindle Unlimitedのおかげで読書を頻度が急激に上がったので、写真だけでなく書評もやってみようかなあ、なんて考えています。ちなみにKindle Unlimited(月額980円)はまだ無料お試し登録ですが、デジタルカメラマガジン(1,080円)を一冊読むだけで元が取れちゃいます。たぶんこのまま契約しちゃうだろうなあ。とりあえずデジタルカメラマガジンの最新号 2018年3月号から2017年7月号までまとめ読みしちゃいました( •̀ㅁ•́;)
なぜか最終的にKindle Unlimitedの紹介になっちゃいましたが、興味あればぜひ!