こんにちは！
輝きたい女性の豊かな生活を応援する
時短パソコンスキルサポート
＆
キャリアコンサルタントの
後藤美和子です。
仕組みを知ってブログの装飾を楽しもう！（３）
ブログ記事（アメブロやWordPress等）を
毎日投稿し続けている方が多い中
「あの人の記事みたいに装飾を可愛くしていきたい！」
と思っている方もいらっしゃるのではないでしょうか？！
記事を読みやすくするために
見出しに対して装飾をしていく過程を
回数に分けてお伝えしていきます。
ほんと、仕組みを知るとおもしろいですよ (^_-)-☆
前回は、
について紹介をしました。
今回は
見出しに罫線を引くにはどうすればいい？
と気になっている方にお勧めです。
すぐに実践できて、
しかも自由に装飾ができるようになると
ブログを書くことが、もっと楽しくなること間違いなし！
▼▼今回の仕上がり見本はこちら▼▼
CSSの記述で自由自在！
アメブロの「HTML表示」モードを利用して
仕上がり見本と同じになるよう解説をしていきます。
まず、
ブログ作成において文字を入力すると
初期値では「段落」として認識されます。
HTML表示モードには、
<p>〇〇〇</p>
と自動的にHTML言語で記述されます。
解釈としては
- <p>は、段落の始まり位置を指す
- </p>は、段落の終わり位置を指す
ある特定の段落に対して書式設定をしたい場合は、
段落の始まりの<p>にstyle属性を追記し、書式情報を入力します。
？？？？？？？？？？
ですよね (笑)
今回はここがポイントなんです！！！
もう一度、言い方を変えて繰り返しますね。
開始タグにstyle属性を追記し、書式情報（スタイル設定／CSS）を入力します。
===== 説明図 =====
では、仕上がり見本のように仕上げましょう！！
▼▼仕上がり見本▼▼
CSSの記述で自由自在！
作業項目は以下の３つです。
- 見出しの周りをピンクの細い枠線で囲む
- 左の枠線だけ太く設定する
- 文字と枠線との隙間（余白）を広げ、見栄えを調整する
紹介する書式情報は３つです。
- 枠線（border）
- 左側に限定した枠線（border-left）
- 枠線と文字との隙間（余白）（padding）
【作業項目１】
見出し文字の周りをピンクの細い枠線で囲む記述
▼記述例
===================
<h3 style="border:2px solid #ed5e97">〇〇〇</h3>
===================
※線の太さは、数字＋px（ピクセル）単位を付けて指示をします。
※「solid」は実線で、他にも種類がいくつかあります。
※色の指定方法はいくつかありますが、今回は16進数表記にしました。
お好みの色を決めて指定しましょう。
参考サイト：原色大辞典
▼ブラウザ表示
CSSの記述で自由自在！
上手く表示がされましたか？！
まとめ
作業項目は３つあり、今回は1番目の解説をしました。
- 見出しの周りをピンクの細い枠線で囲む
- 左の枠線だけ太く設定する
- 文字と枠線との隙間（余白）を広げ、見栄えを調整する
次回は、２番目と３番目を解説しますね。
今日もお読みいただきありがとうございました。
■■■■■■
アメブロやFBヘッダーやバナー画像のデザイン作成のご依頼も頂いています！
Excel、PowerPoint、Word等で販促資料の作成代行
パソコン苦手でも大丈夫！Officeソフトの操作サポート、疑問が生じたらサポートいたします！
パソコンをもっと便利に活用するための情報を発信していきます。
パソコンが苦手な方
もっと作業を楽にしたい方
ブログを使いこなしたい方
LINE公式アカウントのご登録をお待ちしております↓
(ID:@387iwqzh)
■■■■■■