まえがきに2日もかかってしまいましたので、今日はさっそく本題に参ります
見出しを飾ってみよう！
見出しの装飾（パソコン表示編）
CSSのカスタマイズになりますので、CSS編集可能なテンプレートを選んだ場合に設定できます。
って方は、アメブロカスタム（1）「テンプレート選び」をご覧になってみてくださいね。
1. CSS編集画面に行きます。
メニューの「ブログの管理」 
「デザインの変更」を選びます。
こんな画面が表示されます。
上の赤い四角で示したところにある、
「CSSの編集」をクリックします。
すると、こんな画面が表示されます。
この画面の下のほうに、
CSSを編集できる入力窓があります。
赤い枠で囲んだ部分です。
右のスクロールバーで、
CSSの一番下（終わり）を表示させて、
そこに設定したい内容を書き足します。
2. 見出しの設定
私が設定した「大見出し」
の場合は、
先ほど説明したCSS編集画面の中に、
カスタム：大見出し
********************/
.skin-entryBody h2{
font-size: 1.7em;
font-weight: bold;
color: #777777;
background:#D1E8CB;
box-shadow: 0 3px 3px 0 #b5c3b2;
position:relative;
margin: 0 -10em -10em -0.5em;
padding: 0.2em 0.8em;
margin-bottom: 40px;
width: 100%;
}
.skin-entryBody h2:before{
border-left-color: #9CB396;
border-width:0 10px 10px 0;
border-style:solid;
border-color:transparent;
left:0;
position:absolute;
top:100%;
content:" ";
}
.skin-entryBody h2:after{
border-right-color: #9CB396;
border-width:10px 10px 0 0;
border-style:solid;
border-color:transparent;
right:0;
position:absolute;
top:100%;
content:" ";
}
と書き込んでいます。
私と同じ設定を試してみる場合は、上記のピンク枠の中のテキストをそのままコピペすれば、設定できます。
このCSS、知らない方にとってはちんぷんかんぷんと思いますが、コピペするだけで使えるので簡単ですよね。
ちょっとだけ説明すると、、、
赤い丸で囲んだ「h2」が、
「大見出し」をあらわす名前です。
アメブロでは、大見出しが「h2」、中見出しが「h3」、小見出しが「h4」にあらかじめ設定されていますので、「h2」を「h3」にすれば、中見出しを設定することができます。
3. 文字を見出しにする方法
ブログ記事を書く際に、見出しにしたい文字を範囲指定して、段落メニューから「大見出し」等の見出しの種類を選びます。
私の今日のブログをパソコンで表示すると、
こんな感じです。
SEO効果もあるそうです。
ただ、スマホ表示には反映されず、スマホで見る際には文字が極端に大小しているだけで、すんなりと目に入っていきにくい印象もあります。。。
次回は、スマホでも「見出しっぽく」表示できる方法をお話しします。
「Happy Clover」って
「Happy Clover」の
「パソコン操作個別レッスン」
つながってくださる方、募集中 
よろしくお願いします
