知っておきたいアメブロのカスタマイズ方法 CSS編集

この記事を読むのに必要な時間は約 4 分です。

アメブロでCSSを編集する

アメブロでCSSを使うためには、CSS編集用のテーマを選択します。

まずアメブロの管理画面から左下のデザインの設定をクリックします。

デザイン変更の画面で下にスクロールさせカテゴリから探すのカスタム可能を選択します。

カスタム可能なデザインが表示されるので画面下方にあるCSS編集用のどれかをクリックします。

 

自分で決めてください

CSSの編集と少し話はそれますが僕自身がメンタルセラピストやスピリチュアル系のお仕事をされている方にカスタマイズなどのセミナーをしている時必ずある質問があります。

「どれをクリックしたらいいですか」という質問。

答えはどれを選んでもOKなので自分で決めてください。


CSSを編集する

実際にCSSを編集していきます。

よく扱うのは見出しで使われるh2タグ大見出し、h3タグ中見出し 、 h4タグ小見出し を追加します。

今回は、「アメブロ 見出し枠CSS 21選」で紹介している 赤系統のCSSを利用します。

以下のCSSコード編集画面の一番下に貼り付けてください。

入力できたら画面下の保存を押すとブログに反映されます。

これでCSSの設定は異常になります。

このままではスマートフォンで表示した時に反映されない

ただ問題外あり、このままではスマートフォンでは反映されず何も装飾されていない状態になります。

そこでスマートフォンでも反映できるようにします。

スマートフォンにCSSを反映させる方法は、「アメブロ スマホのデザインをCSSでカスタマイズする方法」でしょうかいしているのでそちらを参考にしてください。


CSSを使うことを勧めるわけ

以上で、アメブロのカスタマイズ CSS編集の紹介は終わります。

ちなみになぜCSSを良した方がいいのかというと、アメブロは1記事に書ける文字数に制限があります

ただ普通に記事を書くだけでは意識するような文字数ではありません。

仕様が変わってなければ HTMLタグ等込みで半角で60,000字だったと思います。

ひらがな漢字の記事25,000文字弱になります。

しかし記事に装飾や写真を挿入するとさらに少なくなります。

特に凝った装飾を付けるとかなり入力できる量が減ります。

ほかにも、タグにCSSを直接記入すると可読性が落ちてSEOとしてあまりいいとは言えません。

そうした理由や、冒頭でも書きましたが毎回、装飾する手間ももったいないです。

CSSは確かにややこしいと感じますが、一度設定すればあとは、あなたがデザインを変えたいと思うまで永続的に使用できます。

たった1度だけ手間をかけるだけで、ブログ作成時間が減らせるのならやらない手はありません。

 

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

今回の記事があなたの役に立ったなら幸いです。

質問疑問ございましたらコメント欄へお願いします。

アメブロ関連記事

設定編

技術編

デザインCSS集

集客編

WordPress関連記事

設定・インストール

トラブルシューティング

動作環境・リリース情報

  1. 1
  2. 2