【HTMLとCSS】初心者でも扱えるアメブロで可愛く装飾する方法（事前確認１）

こんにちは！

輝きたい女性の豊かな生活を応援する
時短パソコンスキルサポート
＆
キャリアコンサルタントの
後藤美和子です。

仕組みを知ってブログの装飾を楽しもう！

ブログ記事（アメブロやWordPress等）を
毎日投稿し続けている方が多い中

「あの人の記事みたいに装飾を可愛くしていきたい！」
と思っている方もいらっしゃるのではないでしょうか？！

今回は、記事を読みやすくするために
見出しに対して装飾をしてみましょう。

ほんと、仕組みを知るとおもしろいですよ　(^_-)-☆

アメブロで記事を書く際の操作を説明します。

まず、ブログを書くときに
左下にある「通常表示」と「HTML表示」で
切り替えれるようになっています。

表示モードの切り替えは、
いつ切り替えても大丈夫ですよ！

実は、初心者の方からの声で

「この表示モードを1度切り替えたら
ずっと同じ画面で入力作業を
しなきゃいけないんだって思いこんでいました！！」

と、HTML表示に切り替えたまま
文字入力で苦戦していらっしゃいました。

「通常表示」モードと「HTML表示」モードは
いつでも切替がOKなんです！

初期値は通常表示モードです。
Word感覚で文章を入力することができるので便利です。
読者に伝えたい内容を入力していきましょう。

一方の「HTML表示」モードでは
HTMLやCSS言語の専門的な知識とルールを
知った上で活用をしていく画面です。

ツールバーで文字装飾をしていくと
どのような記述になっていくのかを確認できます。

HTMLやCSS言語の見方や使い方を
少しずつご紹介していきますのでお楽しみに。

ブログで伝えたい内容は
構造を意識して入力をしてみてください。

ここは見出しにする！
次の文章は説明だから段落（本文）とする。

ここでまた話題を変えるから見出しにする。

といった具合に話の組み立てを
意識した記事を入力していきましょう。

▼構造を意識して入力したサンプル

次にすることは、

Webページに必要な構造は
見出し設定です。
これはSEO対策にもなります！

アメブロで使える種類は

の4種類です。

入力した文章を大見出しに切り替えたいときは

指定した種類によって文字サイズが
初期値で決まっており、
ツールバーの「文字サイズ」で
いつでも大きさは変更できます！

▼見出しの種類を切り替えた結果

▼こちらは「HTML表示」モードに切り替えて表示されるHTML構造です。

日本語以外に

といった緑色の記述が確認できますね。

これがHTML言語であり、
Webページを構成していくための重要な記述なのです。

では次回、ツールバーで書式設定をしたら
HTML表示モードに何が書き込まれるのかをお話しますね！

今日もお読みいただきありがとうございました。

■■■■■■

アメブロやFBヘッダーやバナー画像のデザイン作成のご依頼も頂いています！

Excel、PowerPoint、Word等で販促資料の作成代行

パソコン苦手でも大丈夫！Officeソフトの操作サポート、疑問が生じたらサポートいたします！

▼LINE公式アカウントはこちら↓

(ID:@387iwqzh)

ご要望がありましたら
こちらからお問い合わせくださいね！

■■■■■■