PCインストラクターの川上です。
先週、こんな宿題のコメントいただきまして･･･^^↓↓↓
3. テレパシー
先生♡
おととい、どうやって、やるのかな？って、思ってたんですよ。
先生のところで検索するにも、見出しの言葉が出なくて(´･_･`)
便乗で、お願いしちゃお～
見出しにかわいいマーク、イラスト、いれたいな～
あっ宿題ふやしちゃう(@_@)
先生♡
おととい、どうやって、やるのかな？って、思ってたんですよ。
先生のところで検索するにも、見出しの言葉が出なくて(´･_･`)
便乗で、お願いしちゃお～
見出しにかわいいマーク、イラスト、いれたいな～
あっ宿題ふやしちゃう(@_@)
見出しにかわいいイラストを入れたいのですね^^
ちょうど、素敵な小見出しを見つけましたので、その小見出しと同じのができるように進んでいきますね^^!
（ 『インパクトのある広告の作り方「1.73倍売る！集客の教科書」』ブログ運営されている岡田さんの小見出しがオリジナルですよ～）
まず最初に、マークやイラストを画像アップロードしておきますね。
例えば、このようなイラストをアップロードして、画像URLを取得しておきます。
アップロードした画像を記事に貼りつけけて、HTML表示 or HTMLタグにするとアップロードされた画像は
<a href="http://stat.ameba.jp/user_images/20140331/12/sumitak1329/9b/4f/p/o0030003012892901596.png"><img style="border: currentColor; width: 30px; height: 30px;" alt="えんぴつ" src="http://stat.ameba.jp/user_images/20140331/12/sumitak1329/9b/4f/p/o0030003012892901596.png" ratio="1"></a>と表示されますので、ここから画像URLが
http://stat.ameba.jp/user_images/20140331/12/sumitak1329/9b/4f/p/o0030003012892901596.pngとわかります。
記事のHTML表示 or HTMLタグに、このHTMLタグ↓を貼り付けて、画像URLを変更されるとよいです。
<div style="background: url(画像URL) no-repeat left center;border-left: #000066 8px solid; border-bottom: #000066 2px solid; padding:0px 0px 1px 35px;font-size: 1.2em;font-weight:bold;color: #005752;">これは見出しです</div>すると、このように↓見出しが表示されますので、あとは見出しの文字を変更されるとよいです。
これは見出しです
また、面倒な方は、このHTMLタグ↓↓↓をそのままコピペしてもOKです。
<div style="background: url(http://stat.ameba.jp/user_images/20140331/12/sumitak1329/9b/4f/p/o0030003012892901596.png) no-repeat left center;border-left: #000066 8px solid; border-bottom: #000066 2px solid; padding:0px 0px 1px 35px;font-size: 1.2em;font-weight:bold;color: #005752;">これは見出しです</div>線がいらない場合は、
border-left: #000066 8px solid; border-bottom: #000066 2px solid;を削ってください。
このようになります↓↓↓
これは見出しです
イラストについては「装飾」画像の中から直接記事に貼り付けてもOKですので^^;
（こちらの『チェックマークのついた囲い枠』をご参照くださいませ）
また･･･
CSS編集デザインを使用されている方は、次のCSSソースを追加して、
/*小見出し 設定*/
.articleText h3 {
font-size: 1.2em;
color: #005752;
font-weight: bold;
margin: 0;
background: url(画像URL) no-repeat left center;
padding-left: 35px;
border-left: #000066 8px solid;
border-bottom: #000066 2px solid;
}そして、記事の見出しには
<h3>これは見出しです</h3>とする方法もあります。
さて、ご質問していただいた方は、もう宿題できたかな～～～？（微笑）
あ！ヘッダー画像変わってます～～～！！ね^^
以上、パソコンワンポイントレッスンでした。
LIDS澄川・ライフデザインスクール
川上 雄大