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

• アメブロ スマホのデザインをCSSでカスタマイズする方法を追加しました
• アメブロ 画像に代替テキストつけてますか？画像に追加して、SEO対策しようを更新しました
• アメブロの始め方 アメーバの登録から開設・作成時の注意点を追加しました
• アメブロ/WordPress ブログの文章にルビ（ふりがな）を付ける方法【HTML】を更新しました

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

[アイキャッチモデル: 茜さやさん]

このブログは基本的に、メンタルセラピストやスピリチュアル系を仕事にしたい方で、ブログを書いている方でITが苦手な方を対象にしています。

 

よくある相談

僕のところによくある相談が、「アメブロのカスタマイズを外注で頼みたい」というものです。

外注先は僕自身であったり、別のところであったり様々ですが僕がその都度お答えしているのは「アメブロのカスタマイズを外注するなんてお金の無駄です」と伝えています。

もしあなたもアメブロのカスタマイズを業者の人に頼もうと思っているのであれば思いとどまってください。

なぜならカスタマイズを依頼する前にあなたのアメブロが一番読まれているデバイス（機器）は何ですか？PC？タブレット？スマートフォン？アプリ？

この質問に対してあなたのアメブロのアクセスの大半がPCだというのであれば、アメブロのカスタマイズを外注するのもOKです。

スマートフォンやアプリからのアクセスが多いのであればカスタマイズをする意味はあまりありません。

それよりもあなた自身でデザインをカスタマイズしてしまいましょう。

この作業はそれほど難しいものではありません。

CSSを知る

アメブロをカスタマイズするためにはCSSを設定する必要があります。

CSSやHTMLと聞くだけ身構えてしまうかもしれません。

しかし理屈を知ってしまえば簡単です。

CSSとは

CSSはcascading style sheets(カスケードスタイルシート)の略称です。

ブログを書く場合に見出しの色を変えたり、文字を大きくしたりするのにつかわれているものです。

あなたも普段からブログで文字の色を変えたり、大きさを変えたりしていると思います。

あなたも毎回、見出しなどに同じ装飾をしていることはありませんか？

例を挙げると

大見出し

中見出し

小見出し

↑のようなものを見出しの度に設定してませんか？

この作業ってそれなりに手間だとおもいます。

その時に役に立つのがCSSです。

CSSを使うとあらかじめ決めておいた装飾を自動で行ってくるようになりブログを書く手間を格段に減らせます。

手間を減らすためにツールを使うのもいいんですが、CSSを記述しておくと自動でその装飾なります。

CSSの書き方

CSSはセレクタ、プロパティ、値の3つの項目で成り立っています。

セレクタ？プロパティ？値？もうすでに珍紛漢紛ちんぷんかんぷんでしょうか？

上の図を日本語にすると。

h1タグセレクタの文字の色プロパティを赤色値にするとなります。

アメブロの場合は、h1タグは使わないので 大見出しで説明すると

大見出しセレクタの文字の色プロパティを赤色値にする となります。

改めて、セレクタ、プロパティ、値の説明をしていきます。

セレクタ

セレクタというのは大雑把に言えばHTMLタグのことです。

他にも、id属性やclass属性などもあります。

id属性やclass属性については後程説明します。

意味合いとしてはブログのどの部分を装飾するのかを指定するのに使います。

プロパティ

セレクタで指定したものに対して、装飾の内容を指定します。

具体的に言えば、文字の色や文字の大きさ、枠線の種類や太さなどです。

値

プロパティで指定した内容の詳細な数値などを指定します。

文字の色であれば何色、文字の大きさなどです。