ブログを始めて1か月♪アメブロ初心者の私でも、

・ヘッダー画像の変更
・ヘッダーの背景色変更
・フォントを読みやすく変更


という3つのことが、とってもカンタンにできました。

早く、この記事にたどり着きたかった!

実は、この3つの記事にたどり着くまで、さまざまな記事を読んで、フリープラグインをいじってみたり、CSS編集をいじってみたり…。回り道をして、ようやくデザイン変更に成功しました。

同じように、回り道をして苦戦している方の、お役に立てれば幸いです。


1.ヘッダー画像の変更

最新デザインでヘッダー画像を設置する方法
パソコンインストラクター川上雄大さんの記事です。

アメーバのカスタマイズをgoogle検索すると、たくさんの記事が出てきます。ところがアメブロは2017年に仕様変更があったため、古い記事で紹介されているカスタマイズ方法が、今は使えない、ということがあります。

この記事は、最新のCSS編集用デザインでの、ヘッダー画像の設置方法。

いちばん分かりやすく、そして簡単でした。


2.ヘッダーの背景色変更

これは、「1.ヘッダー画像の変更」で、同時に行えます。

「background-color:#FFFFFF;」
↑これが、ヘッダーの背景色を変えるCSSコード。

川上さんの例では、背景色は白(#FFFFFF)です。
背景色を決めるにあたって、参考にさせていただいたのが、こちら。
色の名前とカラーコード、RGB、CMYKの一覧表
分かりやすく、大きな色見本があります。

例えば、私は、桜色(さくらいろ)を背景にしました。
この場合、色の名前のすぐ下にある色コード、「#fceeeb」を
先ほどの「#FFFFFF」に置きかえると、カンタンに背景色を変えることができます。

さらにこの一覧表、画面の上のほうに、
赤系、ピンク系、オレンジ系など、使いたい色で絞り込むボタンもついていて、とても親切です。


3.フォントを読みやすく変更

「なんとなく、字が細くて読みづらい…。」
アメブロを見ていて、私はそう感じていました。そこで出会ったのが、

アメブロ メイリオフォントにするには(「カスタム可能」でないデザイン&CSS編集)こちらもパソコンインストラクター川上さんの記事です。これも本当に助かりました。

記事は、部分的にフォントを変更する説明から始まっています。
(「記事本文」、「メニューバーの項目名」など)

私の場合、ブログ全体をメイリオフォントにしたかったので、記事を下にスクロールして、ちょうど真ん中あたりにある、

「なお、ブログ全体をメイリオフォントにしたい場合は、」

という部分から読みすすめ、CSSを編集しました。
コピー&ペーストするだけで、文字が読みやすくなる
す、す、すばらしい!


1.2.3.をまとめると
CSS編集の画面は、こんな感じです。(イメージ)



以上、3つが、私を救ってくれた記事です。゚(T^T)゚。

ブログのカスタマイズで、「こんな記事見つけたよ」とか、「こうするとイイよ」というアドバイスがありましたら、ぜひ教えてくださいね。もちろんご自身の記事でも歓迎です。

簡単かつ、お役にたてそうな記事を見つけましたら、またご紹介させていただきます♪

マレーア 荒川