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

2 min

記事内に広告を含む場合があります。このサイトの記事内では「アフィリエイト広告」などの広告を掲載している場合があります。消費者庁が問題としている「誇大な宣伝や表現」とならないよう配慮しコンテンツを制作しておりますのでご安心ください。問題のある表現がありましたら、お問い合わせいただけますと幸いです。

f:id:FULOG:20160525175255p:plain

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

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

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

 

 

 

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

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

www.yukihy.com

 

  

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

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

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

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

 

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

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

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

 

 

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

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

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

 

文字の大きさを変える

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

 

続きを読むボダン

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

georges.hatenablog.jp

 

 

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

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

 

 

happylife-tsubuyaki.hatenablog.com

 

フォローボタン

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

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じゃなくてもカスタマイズ次第でおしゃれになります。

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

ふー

ふー

Microsoft Power Platformを使ったり、ガジェットを買ったり、アニメ見たり、バイクに乗ったり、色々しています。

FOLLOW

カテゴリー:
関連記事

コメントを残す

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

CAPTCHA