今さらですが、ブログのデザインを変えました。
今回はカスタマイズに少し時間をかけて、できるだけおしゃれになるように頑張ってみました!
私はまだはてなProじゃないのですが、おしゃれにする方法を紹介しようと思います。
今回お借りしたデザインは、ゆきひーさんの「Naked」というデザイン!
今回のカスタマイズではゆきひーさんのカスタマイズを沢山取り入れました!
このデザインのすごいところ!
・レスポンシブなナビゲーションが作れる!
・フッターを作り込める!
・カエレバ・ヨメレバのカスタマイズデザインが標準装備
レスポンシブなナビゲーションメニューが作れるだけでなく、今までのデザインではあまりなかったフッターの作りこみが可能に!
さらにカエレバとヨメレバのカスタマイズデザインが既にされていて、自分でCSSを設定したりしなくてOK!
初心者からフルカスタマイズしたい人まで、幅広い人が使いやすいデザインになっています。
実際に私がしたカスタマイズ
ここからは、私が実際にしたカスタマイズを紹介します。
だいたいコピペで出来てしまうので超楽でした(笑)
文字の大きさを変える
これは、一番はじめにしました。文字が小さかったりすると読みにくかったりしますからね。私はだいたい17pxか18pxあたりで設定しています。これ以外と重要ですよ。
続きを読むボダン
これは前回のカスタマイズの引き継ぎです。このボタンはかなり気に入っていてこれからも使っていきます!
はてなブログメニューバーの色
はてなProなら消せることができる上部に常に表示されるメニューバーですが、これもカスタマイズできます。邪魔になるメニューバーもカスタマイズしておしゃれに!
happylife-tsubuyaki.hatenablog.com
フォローボタン
はてなとTwitterとFeedlyのフォローボタンを設置しました。このデザインを作ったゆきひーさんのカスタマイズをお借りしました。コピペで簡単に設置できます。
スポンサーリンク
関連記事を設置
関連記事を簡単に表示できるサービスのMilliardを設置カスタマイズしました。これもまたしてもゆきひーさんのカスタマイズをお借りしました。Milliard自体はコードを取得しなければなりませんが、カスタマイズCSSはコピペだけでOK!
サイドバーのタイトルのボーダーの色を変更
サイドバーのタイトルのボーダーの色を変更しました。元は薄いグレーでしたが、カスタマイズで青っぽくしてみました。
日付の色を変更
日付の背景色と文字色を変更してみました。緑色の背景に白文字でさらにおしゃれに。みなさんも色を変えて自分のデザインにしてみると良いですよ。
SNSシェアボタン
はてなProじゃなくてもSNSシェアボタンを設置できるんです! 恥ずかしながら最近気が付きました(笑)
公式のSNSシェアボタンは読み込みが重いですし、デザインもいいので使うと良いですよ。
またまたゆきひーさんからお借りしました。
フッターを作りこむ
これもゆきひーさんのカスタマイズを借りてきました!
ちょっとだけ私なりにカスタマイズしましたが、これもコピペだけでできるので超簡単です!
色のコードはここが便利!
色のコードはいつもここから探しています。検索機能も充実していて、探しやすいですのでオススメ。
まとめ
カスタマイズを終えてみるとゆきひーさんのカスタマイズばかりになってしまいました(笑)
はてなProじゃなくてもカスタマイズ次第でおしゃれになります。
みなさんもやってみると良いですよ。