【無料ソフトのAdobeXDが大活躍】ブログのデザインをリニューアルしました!

ブログのこと

少し前に雑記でやりたいと書いていたのですが、自力で2日かけて、念願のブログデザインのリニューアルを行いました!
ブログ初心者はデザインよりも記事作成をするべし!と言われますが、やっぱりサイトデザインが気になったままだとモチベーションが上がらず記事作成も進みません。(言い訳ですね笑)

これからのブログへのモチベーションを上げていくためにも、2日間いろいろ頭を抱えながら行ったリニューアルです。
具体的にどこがどんな感じで変わったかリポートします。

ブログのデザインをリニューアルしたければ2点だけ変えればOK!リニューアルの実録

今回のリニューアルで変更したのは大きく2点だけです。
これだけでブログはすごく変わり、オリジナリティがでます。

  1. サイトの色味を全体的に変える
  2. タイトルとファビコンの画像を用意する

ワードプレスで「マナブログコピー 」のテーマを使っています

まずブログを始めようと思ったきっかけが、偶然YouTubeで超有名ブロガーのマナブさんを見つけて、動画を見始めたことからでした。
ブログのノウハウをマナブさんから学び、とりあえずブログを始めてみようと思ったので、ここはマナブさんが作られた「マナブログコピー 」のテーマを使おうと購入させていただきました。(もう少し記事数が増えて、細かいところまでブログの整理ができれば、ぜひご本人にご挨拶したいです。)

マナブログコピーのテーマの購入はこちら

しかしテーマの「マナブログコピー 」という名前の通り、本当にコピーです。
恐れ多くも、見た目がまんま「マナブログ」なんですよね。

他にも同じようにマナブログコピーのテーマを使われているブログをいくつか拝見したのですが、少し色味が変えてアレンジをされている方が多く、それだけで違うブログに見えます。
最低限全体的に色味を変えて、ブログにオリジナリティを出したいなと考えていました。

STEP① ブログ全体の色味を変える

ブログの色味を変えるため検索して見つけた「りゅうた学」さんから、こちらの記事を参考に、たくさんのCSSを追加しました。
すごくわかりやすい記事でありがたかったです!

メインカラーはずっと緑色がいいなと考えていて、少しミント色っぽいくすんだグリーンに。サブカラーはグリーンと相性がいいイエローとピンクです。

サブカラーは下記のように、ブログの本文に使っています。

基本的にブルーであしらっっていた部分はピンクにしました。
画像を見ていただけると分かるかと思いますが、こだわったのは見出し3(H3)です。

H2とH3の出番がどうしても多くなるのですが、もともとのテーマがよく似た見た目だったので、H3をオリジナルでガラッと変えてみました。
私がおしゃれだなと感じるブログをいろいろ見て、そこで使われている見出しを真似したく、検証画面を出して該当のCSSを探してコピーしてアレンジして、と試行錯誤で作りました。

ちなみに検証画面はGoogle Chromeのブラウザを使われている場合、誰でも見ることが可能です。
Windowsの方はF12を押すか右クリックで「検証」を選ぶ、Macの方は右クリックで「検証」を選べば、下記のような検証画面が見れます。

STEP② タイトルをデザインして設置

michikablog

タイトルのデザインも自分で行いました!
使ったものは下記の通りです。

ガーラントのデザインが好きで、XDで自作しました。良い感じに仕上がって満足です!
XDは無料で使える便利すぎるソフトなので、また記事にしたいと思っています。

STEP③ ファビコンをデザインして設置

特にブログにマスコットもいないし、どうしようかな…と最後の最後まで悩んでいましたが、シンプルにブログタイトル頭文字の「m」とメインカラーのグリーンを使ってデザインしました。
ファビコン作成所要時間3分です。思いついたらあっという間に完成しました(笑)

作成時間3分ですが、結構かわいく仕上がったので、プロフィール画像にも使うことにしました。
こちらもXDとしろくまフォントにお世話になりました。

まとめ

エンジニアを目指して職業訓練に通っていた頃にたくさん学んで覚えたHTMLやCSSを、久しぶりに自分でいじったのが楽しかったです。
ディレクターになると一切コーディングしないので、いろいろ忘れていたことを思い出すいいきっかけでした。

細かくまだ直したいところは何点かあるのですが、そこは記事を作りながら追い追い。
ブログが85%くらいの完成度となり今回の作業は大満足となりました!(Beforeは自分のオリジナリティがなく基礎があるだけの状態だったので30%かな、という感じです)

ナビゲーションも、今後ブログのネタにしたいなという希望も含めて整理しました。
生まれ変わったmichikablogで、これからも記事作成に励みたいと思っていますので、改めましてよろしくお願いします!