こんにちは！
好きなことを仕事にして
自分らしく価値あるサービスを提供し
人に喜ばれ売り上げを3倍に増やしたい方の
集客サポートデザイナー
＆
キャリアコンサルタントの
後藤美和子です♪
仕組みを知ってブログの装飾を楽しもう！（５）
ブログ記事（アメブロやWordPress等）を
毎日投稿し続けている方が多い中
「あの人の記事みたいに装飾を可愛くしていきたい！」
と思っている方もいらっしゃるのではないでしょうか？！
記事を読みやすくするために
見出しに対して装飾をしていく過程を
回数に分けてお伝えしています。
ご紹介している内容を
是非やってみてくださいね！
仕組みを知ると
とっても楽しいですよ (^_-)-☆
LINEにご登録いただき
ご質問いただければ
無料でお答えしますね！
これまでに、
３．初心者でも出来ちゃうオリジナル装飾「見出しに罫線を引く」方法
４．初心者でも出来ちゃうオリジナル装飾「見出しに罫線を引く」方法（続き）
についてご紹介をしました。
今回はこちら！
複数の文章をまとめて枠線で囲みたい！
と気になっている方にお勧めです。
すぐに実践できて、
しかも自由に装飾ができるようになると
ブログを書くことが、もっと楽しくなること間違いなし！
▼▼仕上がり見本はこちら▼▼
楽しく働きたい！
お客様に喜んでいただきたい！
あなたが「できること」は何ですか？
あなたにとって「やりたいこと」は何でしょう？
アメブロでの作業手順は以下のとおり！
- ［通常表示］モードで文章を入力する。
- 文章の終わりはEnterキーで改行する。
- 次の文章を入力する。
- 入力が終わったら、［HTML表示］モードに切り替える。
- スタイル設定を記述する。
- プレビューで確認する。
では、前回の復習を兼ねながら解説していきます。
★★★★★★★★★★★★★
前回は、1つの段落にスタイルを設定しました。
※［HTML表示］モードで入力すること
<p style="border:2px solid #0EAE09;padding:20px;">楽しく働きたい！</p>
「border」プロパティは、枠線のスタイル情報でしたね！
- 2pxの線の太さ
- 実線 solid
- 線の色
「padding」プロパティは、文字と枠線のスキマとなる余白スタイル情報でした。
- 文字周りの上下左右すべてを20pxの余白を設ける
▼その結果は、このようになります。
楽しく働きたい！
「じゃぁ、残りの3つの文章（段落）にも同じスタイルを設定すればいいんじゃないの？」
って思いますよね。
このように、
「自分が次にどのようにしたらいいかな？」
と考え思いついたことは、実はとても大切な発想なんです。
試してみますね！！
※［HTML表示］モードで入力すること
▼実験中
=================
<p style="border:2px solid #0EAE09;padding:20px;">楽しく働きたい！</p>
<p style="border:2px solid #0EAE09;padding:20px;">お客様に喜んでいただきたい！</p>
<p style="border:2px solid #0EAE09;padding:20px;">あなたが「できること」は何ですか？</p>
<p style="border:2px solid #0EAE09;padding:20px;">あなたにとって「やりたいこと」は何でしょう？</p>
=================
結果、このように表示されます。
楽しく働きたい！
お客様に喜んでいただきたい！
あなたが「できること」は何ですか？
あなたにとって「やりたいこと」は何でしょう？
あれれ？！
仕上り見本とは全く違う結果になっちゃいましたね。
段落一つひとつにスタイル設定をしてしまうと
個別の囲み線になってしまいます。
そこで、今回使ってほしい記述があるんです！！！
それは、
div要素を使ってグループ化する
です。
★★★★★★★★★★★★★
この「div」は、Webページの構造内で
グループ化させる役目がある
（ひとまとまりとみなす）
HTML言語の一つの要素なのです。
【注意】
HTML言語とCSS言語は
必ず半角文字と半角スペースで
入力する必要があります！
日本語入力をOFFにしてから記述してください♪
記述は以下のとおりに。
※［HTML表示］モードで入力すること
▼記述例
>=================
<div>
<p>楽しく働きたい！</p>
<p>お客様に喜んでいただきたい！</p>
<p>あなたが「できること」は何ですか？</p>
<p>あなたにとって「やりたいこと」は何でしょう？</p>
</div>
=================
そして、いつものようにスタイル情報を追記します！
▼記述例
>=================
<div style="border:2px solid #0EAE09;padding:20px;">
<p>楽しく働きたい！</p>
<p>お客様に喜んでいただきたい！</p>
<p>あなたが「できること」は何ですか？</p>
<p>あなたにとって「やりたいこと」は何でしょう？</p>
</div>
=================
その結果
楽しく働きたい！
お客様に喜んでいただきたい！
あなたが「できること」は何ですか？
あなたにとって「やりたいこと」は何でしょう？
上手く表示されましたでしょうか？！
まとめ
Webページを自由に装飾する場合は、
HTML言語の構造とCSS言語の書式設定における
最低限のルールを知るだけで
アレンジの幅も広がっていきます！
div要素を使うことで
入力した複数の文章を一つのまとまりとして
グループ化させることができます。
様々なスタイルを設定したいときに有効です。
是非、使ってみてくださいね。
これからもお楽しみに♪
今日もお読みいただきありがとうございました。
【過去の連載記事】
■■■■■■
アメブロやFBヘッダーやバナー画像のデザイン作成のご依頼も頂いています！
Excel、PowerPoint、Word等で販促資料の作成代行
パソコン苦手でも大丈夫！Officeソフトの操作サポート、疑問が生じたらサポートいたします！
パソコンをもっと便利に活用するための情報を発信していきます。
パソコンが苦手な方
もっと作業を楽にしたい方
ブログを使いこなしたい方
LINE公式アカウントのご登録をお待ちしております↓
(ID:@387iwqzh)
■■■■■■