クラシトトノエ*賃貸の階段のあるおうち

メゾネット2LDKのおうちでインテリア・収納・家計を整えて、シンプルライフを目指しています

はてなブログカスタマイズーCanvaでブログヘッダー画像作成&目次・見出しのイメチェンー

土日はこどもたちがいて、なかなか思うようにパソコンをいじれません。
月曜になると、たまったうっぷんを晴らすかのごとく、うりゃぁぁぁぁぁとパソコンをいじり倒します。
そういう時にカスタマイズすると集中しちゃいますね!
今回はぱっと見の見た目が変わったところのカスタマイズのご紹介です。

 

 

無料でおしゃれな画像が作れるCanvaでヘッダー画像を作成

▼michikoさんのブログのヘッダーに感銘を受けました!

www.kurashi-asobi.com

かわいくておしゃれ!!

自分で絵を描いて画像を作ることができない私は、今までずっとヘッダーに悩んでいました。
シンプルなのも好きだけど、自分のブログの個性を少しでも出したいなと思い、おうちの写真を載せたりもしましたが、納得はいってませんでした(^^;

 

しかし、こちらの無料でデザインを作成できるツールを使えば、私でもできるかもしれない!と思い、挑戦しました!!
(有料の画像やイラストもありますが、無料の物だけでも作れます)

▼Web上でおしゃれな画像が作れるサイト

www.canva.com

▼使い方はこちらを参考にさせていただきました!

akiakigogogo.hatenablog.com

出来上がってアップロードすると、そのままでは左右に余白ができてしまうので、それの設定の仕方もおまけで書かれています。

 

私が作ったヘッダー画像

使い方に慣れるまでは「??」な感じでしたが(^^;やり方通りにやれば大丈夫でした!
フォントもたくさんの中から選べるし、画像も無料のものだけで作れました。

▼最初にできたのがこれ

シンプルすぎるかな~

 

▼アクセントカラーを入れて出来上がったのがこちら

目立たないけど真ん中の『*』をオレンジにしました。
この色がしっくりきたので( *´艸`)

あと、おうちの画像も『おうち』の文字部分にかぶせてみました。

背景の点線の柄も気に入りました^^

 

うぉー!!

 

私でもできたよぉーーー(涙)

 

michikoさんありがとうございました(*ノωノ)

 

ただスマホの表示が少し気になります(;^_^A
画像が妙に小さく見える・・・
スマホ対策のコードも別で付け足してみたんだけど、これが今の私には限界(^^;
直せたらご報告します。(いらんって?笑)←気になることを直すのが好きなんです

 

目次の簡単なカスタマイズ

ヘッダー画像に合わせて、白を基調とした見た目に変えたいと思いまして。
しかし色だけ変えるっていうカスタマイズ、検索しても見つけられず・・・( ;∀;)

そういう時の頼みの綱!

『右クリック』>『検証』です!!

これでページのソース(?)というかスタイルシートが見えちゃいます。

素敵なブログを参考にしたい時は「検証」すると、どのフォントを使っているかとか、カラーなどもわかります。 

▼難しそうな画面が右側に出てきます

目次部分を右クリックして検証を見て、どこを色指定すれば自分の好みになるかがわかりました。
(あまり知らない分野だけど、カンです笑)

『デザイン』>『CSS』にこの文を追加。

/* 目次カスタマイズ */
.table-of-contents{
background-color: #fff;  /* 背景色  */
border: 1px solid #ccc;  /* 枠線の色 */
}

 シンプルに、背景色を白、枠をグレーにしました。

 

見出しもイメチェン

どうせなら見出しも合わせようと思い、カスタマイズしました。

▼参考にさせていただきました。

www.nxworld.net

saruwakakun.com

 

大見出し

吹き出し風の見出しです。

枠線は目次と同じグレーです。
まるっとしてる枠より、カクカクの枠のほうが好み♡ 

 

中見出し

下線の色をアクセントカラーのオレンジを入れました。

ブログと合ってるかな?と思いましたが、見慣れてきたらいい感じに思えてます♪

 

小見出し

チェックアイコンがかわいかったので。

 めったに登場しない小見出しですが、かわいいから使いたいです(笑)

 

まとめ

今回は、ヘッダー画像・目次・見出しのカスタマイズをご紹介しました。

ガラッとイメチェンとまではいかないけど、ヘッダーを変えるだけでもけっこう雰囲気が変わりますね!
Canvaを使って私でもこのような画像が作れて、感動でした。

とっても気に入ったので、またカスタマイズ熱が再燃しそうです( *´艸`)

あー楽しかった!!

※カスタマイズは自己責任でお願いします。バックアップを取ってから行ってください。

 

ちなみに、以前の記事でご紹介したフォント関連のカスタマイズ。
游ゴシックのフォントが残っていた部分があったので修正しました。

www.kurasitotonoe.com

▼テーマ『Minimalism』のスマホで太字が表示されない問題を解決!

www.kurasitotonoe.com

 

最後までお読みいただきありがとうございました。