USEFUL TIME

気になったらとにかく記事にしてみる雑記ブログ。

PCブログデザインを大幅に変更しました!おしゃれなブログカスタマイズまとめ。

 

f:id:designlife:20171209012256j:plain

 

ブログデザインが変わると気持ちがリフレッシュしてやる気が湧いてきますよね。

 

PCのブログデザインを大幅に変更しました。期間は3日間と短いスパンになりましたが、良い仕上がりになり大満足です。

 

今回、変更した箇所のカスタマイズをまとめていきたいと思います。

 

 

USEFUL TIMEの全体図

 

ブログデザインを変更したので、まずはブログの全体図から載せていきます。

 

f:id:designlife:20171203041943p:plain

 

全体的な配色やロゴを自作したりと色々と大変なところもありましたが、デザインに関して全くの初心者がここまでできたら上出来だと感じています。

 

今回、大きく変えた箇所もまとめて書かせていただきますね。

 

 

大きく分けて7箇所を大幅に変更しました。アニメーションも初めて導入したのですが、不具合なく動いてくれているので安心しています。

 

使用しているカラーも一緒に載せておきます。配色には自信がないので少しずつ変えていくかも…

 

f:id:designlife:20171209012328p:plain

 

配色はAIカラーツール「Khromaを使いながら考えました。OMGさんの記事がすごい参考になるので、ぜひ配色に自信のない方は要チェックしてみてください。

 

www.omg-ox.org

 

当ブログのブログテーマは「Codomisu Flat」を使用しています。同じテーマを使用している人の参考になればと思います。

 

デザイン変更の際はテストブログで一度テストするなり、バックアップを取ってから行ってください。

 

それでは、導入したカスタマイズまとめていきます!

 

ヘッダー関連カスタマイズ

新しいヘッダーデザイン

 

ヘッダーのデザインをカスタマイズについて、Twitterでアドバイスをしてくれた方々…本当にありがとうございました。(Twitterの温かみに触れて感激) 

 

f:id:designlife:20171209012346j:plain

 

ヘッダー画像で使用しているフォントは、「ヲタG」と「貂明朝(てんみんちょう)」を使用。

 

f:id:designlife:20171209012404j:plain

 

砂時計をイメージしたUSEFUL TIMEのロゴになります。このロゴを作るのに5時間かそのくらいかかったので、ロゴ作成している人の偉大さが身にしみました… 

 

砂時計をイメージしましたが、3分間で読める記事ってよりも「カップラーメンができるまでのワクワク感」をイメージしてくれたら嬉しいです!笑

 

ヘッダーメニューにエフェクトを導入

 

グローバルメニューのマウスホバー時に少し動きが欲しかったので、ホバーエフェクトを導入しました。

 

参考にさせて頂いたのは、Photoshop VIPさんのアニメーションエフェクトの記事を参考にしました。

 

photoshopvip.net

 

他にも、デザイン関係の記事やボタンエフェクトなどたくさんのカスタマイズ記事もありますので、ぜひチェックしてみてください。

 

出来上がりはこんな感じです。

 

f:id:designlife:20171203165800g:plain

 

デザイン初心者の私でも比較的簡単に導入できたので、調整しながら簡単にできるのではないかと思います。

 

エフェクトの不具合もなく、ヘッダーメニューに少し動きがあるだけでおしゃれな雰囲気になりました。

 

サイドバーカスタマイズ

プロフィールを大きく作る

 

f:id:designlife:20171209012417j:plain

 

はてなブログのサイドバーに表示されるプロフィールってなんか小さいなって思っていたので、せっかくの機会なのでささっと変更しました。

 

プロフィールアイコンは、フォトショップで200×200の画像を丸く切り抜いています。

 

フォトショップを持っていない人には、画像丸抜きくんがオススメ!

 

簡単に丸く切り抜くことができるので、丸いアイコンを作りたいという人はぜひ使ってみてください。

 

 

カスタマイズ→サイドバー→HTMLを追加するだけ。

 

あとは記事作成からプロフィール内容を打ち込んでHTMLをコピペしたら作れるので、自分の好きなようにカスタマイズしてみてください。

 

プロフィールに表示されている枠は、サルワカさんの囲い枠のまとめ記事を参考に使わせて頂いております。

 

saruwakakun.com

 

記事内のボックスに使っても良しなので、ぜひチェックしてみてください!

 

エフェクト付きボタン

 

f:id:designlife:20171209012426j:plain

 

お問い合わせ関連のリンクを目立たせたかったので、エフェクト付きのボタンを導入しました。

 

参考にした記事は、NxWorldさんのこの記事を参考にさせていただきました。

 

www.nxworld.net

 

デザイン関連の記事も多くありますので、ぜひチェックして欲しいサイトです!サイトデザインもおしゃれで素敵…

 

f:id:designlife:20171203172857g:plain

 

今までテキストリンクのみで表示していましたが、エフェクトボタンを使用することによって目立つようになりました。

 

このエフェクトも不具合なく、CSSにコードを追加して調整しながら、サイドバーのHTMLに入れ込むだけで簡単に導入可能です。

 

ボタン関連を簡単に導入したい人にかなりオススメなので、参考にしてみてください!

 

記事関連カスタマイズ

フラットなシェアボタン

 

f:id:designlife:20171209012436j:plain

 

シェアボタンもフラットなデザインに変更しました。

 

参考にさせて頂いたのは、Minimal Green(id:minimalgreen)さんのこの記事。

 

design.syofuso.com

 

Minimal Greenさんのカスタマイズは、当ブログのデザインにいくつか使用させて頂いております。

 

スクロールすると追尾するグローバルメニューのカスタマイズなど、おしゃれで可愛いカスタマイズも数多くあるので要チェックです!

 

自分のプロフィールデザインの参考にさせて頂いたのも、Minimal Greenさんのプロフィールを見てっていうのはここだけの話です…笑

 

ブログデザイン関連の勉強になる記事もありますので、ぜひそちらもチェックしてみてくださいね!

 

 

見出しカスタマイズ

 

ブログデザインの配色と合わせて、H2~H5までの見出しデザインを変えました。

 

f:id:designlife:20171203181053p:plain

 

一覧はこんな感じです。

 

少し物足りないところもありますが、このデザインを使いながら少しずつ変えていこうと思います。(圧倒的センス不足)

 

見出しのデザインについては色々な記事を参考に作らせていただきましたが、やはりサルワカさんの見出しデザインがすごい参考になりました。

 

saruwakakun.com

 

選ぶのに悩むくらいおしゃれなデザインのものばかりで、すごい助かりました。デザインに迷ったらサルワカさんの記事を参考にしてみると、自分好みのカスタマイズができるので必見です。

 

目次カスタマイズ

 

f:id:designlife:20171209012504j:plain

 

バックグラウンドに色を付けただけの目次も変更しました。

 

かなりおしゃれな印象になって大満足!

 

そんなおしゃれな目次デザインを参考させていただいたのは、えむしてっく(id:mshitech)さんの目次カスタマイズを導入させていただきました。

 

mshitech.hatenablog.com

 

えむしてっくさんの記事では目次内のフォントに動きのあるエフェクトを使用していますが、当ブログのカスタマイズはオフにしています。

 

カエレバデザインやはてなブログで使用できるカスタマイズ記事もありますので、ぜひチェックしてみてください!

 

まとめ

 

ブログ全体の印象が変わるとやはりやる気が出てきますね!デザインセンスはほぼない私ですが、少しでもおしゃれで読みやすいブログデザインを目指していきたいです。

 

今回紹介させて頂いた方々、アドバイスをくれた方々、本当に感謝でいっぱいです。本当にありがとうございました!これからもどうぞよろしくお願いします。

 

ほぼコピペでできると思うんで、わからないってことはほぼないと思います。お力になれることがありましたら、ご相談くださいませ。

 

今回は新しいPCデザインに変更したので、変更箇所、参考にさせて頂いたサイト様を紹介させていただきました。

 

素敵なブログデザインを作る参考になればと思います。

 

それではっ!