ふーログ

大学生ブロガーがガジェットやアニメ、気になったニュースをまったりと書き留めていく。

ふーログ


メインカテゴリー

スポンサーリンク

おすすめ記事8選!

最新記事

ブログデザイン変えました! はてなProじゃなくてもデザインをおしゃれにする方法

スポンサーリンク

f:id:FULOG:20160525175255p:plain

今さらですが、ブログのデザインを変えました。

今回はカスタマイズに少し時間をかけて、できるだけおしゃれになるように頑張ってみました!

私はまだはてなProじゃないのですが、おしゃれにする方法を紹介しようと思います。

 

 

 

今回お借りしたデザインは、ゆきひーさんの「Naked」というデザイン!

今回のカスタマイズではゆきひーさんのカスタマイズを沢山取り入れました!

www.yukihy.com

 

  

このデザインのすごいところ!

・レスポンシブなナビゲーションが作れる!

・フッターを作り込める!

・カエレバ・ヨメレバのカスタマイズデザインが標準装備

 

レスポンシブなナビゲーションメニューが作れるだけでなく、今までのデザインではあまりなかったフッターの作りこみが可能に!

さらにカエレバとヨメレバのカスタマイズデザインが既にされていて、自分でCSSを設定したりしなくてOK!

初心者からフルカスタマイズしたい人まで、幅広い人が使いやすいデザインになっています。

 

 

実際に私がしたカスタマイズ

ここからは、私が実際にしたカスタマイズを紹介します。

だいたいコピペで出来てしまうので超楽でした(笑)

 

文字の大きさを変える

これは、一番はじめにしました。文字が小さかったりすると読みにくかったりしますからね。私はだいたい17px18pxあたりで設定しています。これ以外と重要ですよ。

 

続きを読むボダン

これは前回のカスタマイズの引き継ぎです。このボタンはかなり気に入っていてこれからも使っていきます!

georges.hatenablog.jp

 

 

はてなブログメニューバーの色

はてなProなら消せることができる上部に常に表示されるメニューバーですが、これもカスタマイズできます。邪魔になるメニューバーもカスタマイズしておしゃれに!

 

 

happylife-tsubuyaki.hatenablog.com

 

フォローボタン

はてなTwitterFeedlyのフォローボタンを設置しました。このデザインを作ったゆきひーさんのカスタマイズをお借りしました。コピペで簡単に設置できます。

www.yukihy.com

 

 

スポンサーリンク

 

 

関連記事を設置

関連記事を簡単に表示できるサービスのMilliardを設置カスタマイズしました。これもまたしてもゆきひーさんのカスタマイズをお借りしました。Milliard自体はコードを取得しなければなりませんが、カスタマイズCSSはコピペだけでOK!

www.yukihy.com

 

 

 サイドバーのタイトルのボーダーの色を変更

サイドバーのタイトルのボーダーの色を変更しました。元は薄いグレーでしたが、カスタマイズで青っぽくしてみました。

 

 

 

 日付の色を変更

日付の背景色と文字色を変更してみました。緑色の背景に白文字でさらにおしゃれに。みなさんも色を変えて自分のデザインにしてみると良いですよ。

 

 

 

SNSシェアボタン

はてなProじゃなくてもSNSシェアボタンを設置できるんです! 恥ずかしながら最近気が付きました(笑)

公式のSNSシェアボタンは読み込みが重いですし、デザインもいいので使うと良いですよ。

またまたゆきひーさんからお借りしました。

www.yukihy.com

www.yukihy.com

 

 

フッターを作りこむ

これもゆきひーさんのカスタマイズを借りてきました!

ちょっとだけ私なりにカスタマイズしましたが、これもコピペだけでできるので超簡単です!

theme-naked.hatenablog.jp

 

 

色のコードはここが便利!

色のコードはいつもここから探しています。検索機能も充実していて、探しやすいですのでオススメ。

www.colordic.org

 

 

まとめ

カスタマイズを終えてみるとゆきひーさんのカスタマイズばかりになってしまいました(笑)

はてなProじゃなくてもカスタマイズ次第でおしゃれになります。

みなさんもやってみると良いですよ。

スポンサーリンク