見出し・装飾・挿入の方法

ここでは、記事作成に欠かせない「装飾」についての方法をまとめています。

よく使う機能ばかりですので、しっかりとマスターしていきましょう。

 

見出しの作り方

長い文章になる場合、途中に『中見出し』や『小見出し』を入れて区切ることで読みやすくなります。

  1. 見出しを作りたいところにカーソルをあてる
  2. 「見出し」をクリックします
  3. 見出しのテキストを入力します

テキストを入力してから見出しを選択することもできます。作成した見出しは、「目次」に自動的に表示されます。

【記事の目次例】

画像のように、大きな見出し(h2)の下には、次の小見出し(h3)がきます。

h2→h3→h4……といった順番がルールです。(「見出しの入れ子構造」参照)

※順番を飛ばしてh2→h4などとならないように注意してください。

 

記事作成の基本的な流れは、

  1. 見出しをつくり、記事の文章を完成させる
  2. 画像や動画、ツイッターなどの埋め込みをする
  3. 太字や枠などの装飾をして、体裁を整える

です。

メモ

はじめに2〜3個の見出し(h2)を決めてからそれぞれの文章を書き、見出しごとに(h3、h4…)項目を作成するとスムーズです。

注意

使用するのは「見出し2」「見出し3」「見出し4」のみ。「見出し1」と「見出し5以下」は使用しません。

 

「見出しの入れ子構造」とは

見出しは、大見出しの中に小見出しを入れる、というルールがあります。

※原則として最初は「大見出し」から入れます

#大見出し(親)=H2タグ
##中見出し(子)=H3タグ
###小見出し(孫)=H4タグ
###小見出し(孫)=H4タグ
#大見出し(親)=H2タグ
##中見出し(子)=H3タグ
#大見出し(親)=H2タグ具体的には、(見出し2)○○イベントの混雑回避テクニック!
(見出し3)駐車場の回避方法
(見出し3)電車・バスの回避方法
(見出し4)電車でオススメの時間帯
(見出し4)バスでオススメの時間帯
(見出し2)まとめ

 

文字を装飾する方法

文字を装飾することで、より読みやすくポイントが掴みやすい記事を作ることができます。

特に使用する頻度が高い装飾を解説していきます。

 

太字を設定する

太字にしたい文字をドラッグして選択し「B」ボタンをクリックします。

 

文字の色を変更する

色を変更したい文字を選択し、色設定をクリックしてください。選択したい色をクリックすると、文字色が変わります。初期状態に戻したいときは、「クリア」を押しましょう。

 

引用

引用したい部分を選択し、「“」をクリックするだけです。

 

以下の画像のように引用したい部分だけに引用装飾がされます。

※実際のデザインと異なる場合があります。

メモ

【専門的な文章の引用】

例えば、「花粉症になりやすい人」の特徴を書きたい場合、専門性がない一般人が書ける内容ではありません。そのため、企業の公式サイトや医師の記事など専門性の高い文章を引用する必要があります。

注意

【引用の表記】

URLの記載ではなく引用元のメディアの名前を記載してください。

○引用元:アレジオン
×引用元:https://www.ssp.co.jp/alesion/hayfever/

 

箇条書き(リスト)

箇条書きしたい部分を選択し、リストタグをクリックしてください。

また、番号付きのリストもありますので必要に応じて使い分けましょう。

 

会話調の吹き出し

  • 口コミ
  • あなたの意見

などを視覚的にわかりやすくするときに、吹き出しは有効です。

 

吹き出しの挿入手順

  1. ツールバーの「タグ」→「会話ふきだし」→「会話◯」を選択
  2. [st-kaiwa]と[/st-kaiwa]の間に、言葉を入れる

会話調の吹き出しの見本

 

ボックス

他の記事と雰囲気を合わせるため、基本的には以下の色(緑・赤・黄・灰色)を使ってください。

 

ボックス(タイトルあり)

  1. ボックスに入れたい文章を入力する
  2. その文章を選択
  3. 「Quicktag」→「★ボックス(赤or緑or黄)」をクリック
  4. 「タイトル(15文字以内)」をお好きなタイトルに編集
  5. プレビューで確認

【ボックスの見本】

【「Quicktag」→「★ボックス(赤or緑or黄)」が見当たらない場合】

「ビジュアル」タグから「テキスト」タグに切り替えて、「★ボックス(赤or緑or黄)」を選択してください。

 

ボックス(タイトルなし)

  1. ボックスに入れたい文章を入力する
  2. 「マイボックス」を選択
  3. 必要であれば色を変える(bgcolor=”#f3f3f3″の#f3f3f3を変える)
  4. プレビューで確認

メモ

緑:#daf5f5
赤:#ffebee
黄:#fffad1

 

【ボックス(タイトルなし)の見本】

 

SNSや画像などの挿入・埋め込み方法

画像の挿入

画像挿入したいとことろにカーソルをあて、「メディア追加」で入れたい画像を選択します。

基本的にサイズは「大」を選択してください。

※画像によって「大」が表示されない場合があります。その際は、全体のコンテンツに応じて適宜サイズを調整します。

 

YouTube動画の埋め込み

 

Instagramの埋め込み方法

  1. 埋め込みたいインスタをPC画面で開く
  2. 右上のメニューボタンをクリック
  3. 「埋め込み」を選択
  4. 「コードのコピー」をクリック
  5. WordPressの新規投稿画面に戻り、「テキスト」をクリック
  6. 任意の場所に貼り付け
  7. 「ビジュアル」に戻すと、無事に貼れています
    (プレビューを見れば実際の画像を確認できます)

※PC環境によっては、実際の画像を確認できない場合があります。

注意

著作権の関係上、できるだけ「公式」のマークがついたものを埋め込むようにしてください。口コミなどの利用目的であっても、使用する人に許可を取るのが無難です。

 

Twitterの埋め込み

ツイッターもインスタグラムとほぼ同じ手順です。

注意

著作権の関係上、できるだけ「公式」のマークがついたものを埋め込むようにしてください。

◆STEP1:埋め込みたいTwitterのメニューボタンをクリック

 

◆STEP2:「ツイートを埋め込む」をクリック

◆STEP3:「Copy Code」をクリック

◆STEP4:WordPressの投稿画面で「テキスト」を開く

◆STEP5:任意の場所に貼り付ける→完成

 

Googleマップの埋め込み

  1. Googleマップで、埋め込めたい場所を検索する
  2. 「共有」をクリック
  3. 「地図を埋め込み」→「HTMLをコピー」をクリック
  4. 新規投稿の編集画面で「テキスト」をクリック
  5. 任意の場所に貼り付け
  6. 「ビジュアル」に戻すと、埋め込み完了
HOMEへ戻る

© 2021 くらしく