ブログを始めて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編集の画面は、こんな感じです。(イメージ)
![](https://stat.ameba.jp/user_images/20180329/20/marea-renata/30/41/j/o0660064014159658752.jpg?caw=800)
以上、3つが、私を救ってくれた記事です。゚(T^T)゚。
ブログのカスタマイズで、「こんな記事見つけたよ」とか、「こうするとイイよ」というアドバイスがありましたら、ぜひ教えてくださいね。もちろんご自身の記事でも歓迎です。
簡単かつ、お役にたてそうな記事を見つけましたら、またご紹介させていただきます♪
マレーア 荒川
・ヘッダー画像の変更
・ヘッダーの背景色変更
・フォントを読みやすく変更
という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編集の画面は、こんな感じです。(イメージ)
![](https://stat.ameba.jp/user_images/20180329/20/marea-renata/30/41/j/o0660064014159658752.jpg?caw=800)
以上、3つが、私を救ってくれた記事です。゚(T^T)゚。
ブログのカスタマイズで、「こんな記事見つけたよ」とか、「こうするとイイよ」というアドバイスがありましたら、ぜひ教えてくださいね。もちろんご自身の記事でも歓迎です。
簡単かつ、お役にたてそうな記事を見つけましたら、またご紹介させていただきます♪
マレーア 荒川