こんにちは！
輝きたい女性の豊かな生活を応援する
時短パソコンスキルサポート
＆
キャリアコンサルタントの
後藤美和子です。
仕組みを知ってブログの装飾を楽しもう！（２）
ブログ記事（アメブロやWordPress等）を
毎日投稿し続けている方が多い中
「あの人の記事みたいに装飾を可愛くしていきたい！」
と思っている方もいらっしゃるのではないでしょうか？！
記事を読みやすくするために
見出しに対して装飾をしていく過程を
回数を分けてお伝えしていきます。
ほんと、仕組みを知るとおもしろいですよ (^_-)-☆
前回は、
アメブロ記事を入力する際の表示モードの切り替え
について紹介をしました。
今回は
ツールバーで書式設定するとどうなる？
という視点で
「HTML表示」モードで解説する
書式設定の仕掛けを見ていきす！
（１）「通常表示」モードでツールバーを利用する
ここでは、1行目の文字の色をピンク系に変更してみますね。
- 対象の文字を範囲選択する。
- ツールバーの文字色ボタン右側にある▼をクリックし、色を選ぶ。
- 範囲選択した文字がピンク系に変更される。
＜設定前＞
＜設定後＞
とても簡単に書式設定ができますよね！
初心者でも手軽に使えるツールバーのボタンです。
では、
この書式設定がWebページの構造に対して
どのような指示命令で文字色がピンク系に
変わっているのかを確認してみましょう。
（２）「HTML表示」モードで書式設定された内容が確認できる
これから確認する記述内容には、以下の2点があります。
- HTML言語を使ったWebページは構造化されている
- HTML記述の属性としてCSS言語が使われている
■HTML言語を使ったWebページは構造化されている
ブログ記事は、１つのWeｂページです。
HTML言語は、Webページの中で
「ここの文字は大見出しだよ」
「ここの説明は段落だよ」
「ここの文字は中見出しだよ」
「ここに画像を挿入するよ」
「ここは箇条書きだよ」
といった具合に構造化していくことが役目です。
この構造化の必要性は、SEO対策なのです。
＜補足＞==========
SEO対策の一つにクローラー対策です。
膨大な情報があふれている
インターネットの世界を巡回している
クローラー（ロボット）は、
ホームページやブログ記事の内容が
読みやすく構成されているか？
重要な言葉が何であるか？
などをHTML構造や文字情報等で
判断し情報収集（データベース化）を
してくれています。
==================
今回は、大見出しの文字色を
ピンク系に変更したので、
HTML表示モードに切り替えて
どのように記述されているのかを
見ていきましょう！！
＜HTML表示モード＞
記述内容は以下のとおり
======================
<h2><span style="color:#ff007d;">ブログを見栄えよくしてみよう！</span></h2>
<p>あなたのファンに記事を読んでもらえるように装飾をしてみましょう。</p>
<h3>HTMLとは</h3>
<p>Webページを構成する骨組みを指定する言語です。</p>
<h3>CSSとは</h3>
<p>構成された骨組みに装飾を行うための言語です。</p>
<h3>HTMLとCSSの使い方</h3>
<p>ここではサンプルを用いて説明をしていきます。</p>
<p> </p>
======================
上記のHTML言語の記述内容に
<span>〇〇〇</span>
という箇所が登場していますね。
これは、大見出し<h2>に指定した
「文字を範囲選択しているよ」という
HTML言語マークなんです。
注目はその中身です！！
■HTML記述の属性にCSS言語が使われている
実は、ピンク色で示した箇所が書式設定の指示なんです。
======================
<h2><span style="color:#ff007d;">ブログを見栄えよくしてみよう！</span></h2>
======================
「style」は＜span＞に対しての属性
であり、
＜span＞の箇所にスタイル設定（書式設定）をしましょう！
と指示したことになります。
ダブルクォーテーション「"」で囲まれた文字が属性の値です。
つまり、スタイル設定のための具体的な装飾内容です。
「color」は、「文字色」
「#ff007d」は、16進数で表した「色コード」
colorプロパティの値は#ff007dにして！
と伝えているんです。
後ろのセミコロン「；」は、
「文字色については以上です」という区切りです。
■書式設定を複数指定したらどうなる？！
さらに、複数の書式を設定したら
どのようにHTML表示モードへ記述されるかを確認していきます。
文章内の一部の文字を範囲選択し
- 文字サイズをL
- 文字を太字
- 文字色を青
とツールバーを利用して書式設定をしてみます。
＜通常表示モードにて＞
すると、書式設定の情報が
以下のように記述されました！
＜HTML表示モードにて＞
かなり複雑な印象を受けますね。
でも大丈夫！
書式設定の記述ルールには決まり事に従って
記述が増えているだけです。
「font-size」は、文字の大きさ
「1.4em」は、標準文字の1.4倍
「font-weight」は、文字の太さ
「bold」は、太字
実は。。。
上記図のHTML表示モードの下線部分は
３つの書式情報をもっと短縮させた
記述方法があるんですよ！
興味が湧いてきましたか？
もっと知りたいですか？！
まとめ
私たちがブログを書く際に、
文字入力したり
入力した文字を見出し設定したり
備え付けのツールバーを利用して
簡単に書式設定が出来るように
工夫がされています。
ある程度、ブログ投稿に慣れてくると
装飾をもっと可愛く仕上げてみたい！
という思いも出てきます。
だれでも装飾をアレンジすることができます。
そのためには、まず下準備として
- ブログ記事はHTMLの構造を意識して文章を入力する
- 見出しと段落を区別する
- 書式設定は後回し
次回は、いよいよツールバーを使わない
書式設定のアレンジ編です。
お楽しみに！！
今日もお読みいただきありがとうございました。
【過去の連載記事】
■■■■■■
アメブロやFBヘッダーやバナー画像のデザイン作成のご依頼も頂いています！
Excel、PowerPoint、Word等で販促資料の作成代行
パソコン苦手でも大丈夫！Officeソフトの操作サポート、疑問が生じたらサポートいたします！
パソコンをもっと便利に活用するための情報を発信していきます。
パソコンが苦手な方
もっと作業を楽にしたい方
ブログを使いこなしたい方
LINE公式アカウントのご登録をお待ちしております↓
(ID:@387iwqzh)
■■■■■■