ブログ記事の書き方について説明致します。ブログ記事には様々なカテゴリが有りますが、カテゴリが存在する投稿は全て「投稿記事(ブログ記事)」になります。

1.ブログ記事の作成

ブログ記事を書くには、管理画面の左メニューから「投稿」をクリックし「新規追加」をクリックします。

1

すると以下の画面が表示されます。

2

上記の赤枠内、「ここにタイトルを入力」のところに投稿のタイトルを入力し、その下の枠内に文章を入力します。

右側のカテゴリに、投稿したいカテゴリにチェックを入れます。

右下の「アイキャッチ画像を設定」をクリックすると、記事一覧ページやトップページなどの記事表示の際にサムネイル画像を表示する事が出来ますので、設定を行います。

3

左上の「ファイルのアップロード」をクリックし、下の赤枠のところに画像をドラッグ&ドロップします。すると以下の画面が表示されます。

4

ドラッグ&ドロップした画像が青いわくとレ点で選択されている事を確認し、右下の「アイキャッチ画像を設定」というボタンをクリックします。

以上でアイキャッチ画像の設定が完了です。

右上の公開ボタンをクリックすると、記事の投稿が完了します。

2.ブログ記事の詳細機能

ブログ記事を書く場合は、「ビジュアルエディタ」と「テキストエディタ」を利用する事が可能です。切り替えは以下の箇所で行います。

5

「ビジュアル」と「テキストエディタ」のタブで切り替えが可能です。

2-1.テキストエディタとは?

テキストエディタは「HTMLソースが書ける方」向けの投稿画面です。特にHTMLをご存知無い方でもテキストエディタでそのまま行っても特に問題は有りません。ただ、一部の見出しなどの入力を「HTMLソースでタグを打つ」などの作業を行わなければなりませんので、初心者向けでは有りません。

2-2.ビジュアルエディタとは?

専門的な知識が無くても、ビジュアルエディタですと様々な入力を行う事が可能です。

ビジュアルエディタで、平文以外の文字入力を行う場合の基本操作は「文字の選択」です。文字を選択すると、以下の様に青い背景で文字が選択されます。

6

 

2-1-1.見出しを設定する

見出しにしたい文字を選択した状態で、以下の「見出し」のところをクリックします。すると中に「見出し1見出し2・・・」と続きますので、見出し2を選択します。

7

この状態で、画面右上の「変更をプレビュー」ボタンをクリックすると、現在編集中の画面が新しいタブ、もしくはウインドウで表示されます。編集中の画面のプレビュー結果は以下の様になります。

8

上記の画面では、見出し2~4までが適用されています。見出し1は技術的な事情で利用しないほうが良いです。また、見出し5、見出し6は見出し4のスタイルで、文字が小さいものが表示されます。

 

2-1-2.文字に色を付ける

文字に色を付ける場合は、文字を選択し以下の操作を行います。

9

「A」に下線が引かれたアイコンをクリックすると、下にカラーパレットが表示されます。好きな色をクリックすると文字色を変更可能です。

 

2-1-3.文字を太くする

文字を太くする場合は、文字を選択した状態で「B」のアイコンをクリックします。

10

 

2-1-4.文字に下線を引く

文字に下線を引く場合は、以下の操作を行います。文字を選択した状態で「U」に下線が引かれたボタンをクリックします。

11

 

2-1-5.リンクを作成する

サイト内の他ページや、他のサイトのURLなどにリンクを作成するには、文字を選択した状態で、以下の図のクリップの様なボタンをクリックします。

12

すると、以下のウインドウが表示されますので、「URL」の欄にURLを入力し、リンクを新しいタブや新しいウインドウで開きたい場合は「リンクを新しいタブで開く」にチェックを付けて、「リンク追加」ボタンをクリックします。

13

 

2-1-6.文字の大きさを変更する

文字の大きさを変更する場合は、以下の画面の様に文字を選択し、「フォントサイズ」というところをクリックします。すると、下に「8px~」といったリストが表示されます。

デフォルトの文字サイズは15pxですので、小さくする場合はそれよりも小さな数字のpxを選び、それより大きくする場合は15pxよりも大きなサイズを選択して下さい。

14

 

2-2.投稿に画像を追加する

画像を追加するには、投稿欄にマウスカーソルをクリックし「|」という縦の線が表示されている状態で「メディアを追加」ボタンをクリックします。

15

すると以下の画面が表示されます。左上の「ファイルをアップロード」というタブをクリックします。

16

ファイルアップロードの画面になりますので、大きな赤枠内に画像をドラッグアンドドロップします。

18

ドラッグアンドドロップしたら画面が以下に切り替わります。

17

画像を編集する場合は右側にある「編集」のリンクをクリックします。

 

2-2-1.画像の縮小を行う

画像の縮小や、画像の切り抜きを行う事が可能です。

19

右側の「縮尺変更」の左側の入力欄は「横幅」です。右側は「縦幅」です。記事投稿の横幅が「700px」ですので、今回は横幅を700pxに縮小します。縮小は横幅と縦幅の比率を同じに画像を縮小します。

20

右側の「縮尺変更」の入力欄左側だけに「700」と入力し、右側の「縮尺変更」ボタンをクリックします。その後、右下の「戻る」ボタンをクリックします。

 

2-2-2.画像の切り抜きを行う

画像の切り抜きを行う場合は、再び画面右側の「編集」リンクをクリックします。

17

再び、以下の画面が表示されますが、今回は左側に表示されている画像の上で作業を行います。

21

画像の切り抜きたい範囲を、画像の上でマウスを左クリックしながら選択していくと、□と点線が表示されます。点線の範囲が切り抜きが行われる範囲です。また、画面の右側には現在選択されている横幅と縦幅が表示されます。

画像を切り抜きたい場合は、左上の赤枠内のアイコンをクリックすると切抜きされます。切り抜きを行った後は「保存」のボタンをクリックすると、画像の切り抜きが完了です。

23

 

2-3.画像を投稿に挿入する

投稿に画像を入れる操作を行います。先ほどの画像切り抜きから続きで作業を行います。

24

画面右下に、画像を投稿するときの設定と、その下に「投稿に挿入」というボタンが表示されます。

設定の内容は以下です。まずは「配置」です。「左」にすると、画像が左寄せになります。「中央」ですと投稿画面の中央に画像が配置されます。「右」だと右寄せにする事が出来ます。

25

次は「リンク先」です。「メディアファイル」を選択すると、画像だけをウインドウに表示できます。

「添付ファイルのページ」を選択すると、以下にURLの入力欄が表示され、ファイルのパスを入力するとファイルのダウンロードをさせる事が可能です。

「カスタムURL」を選択すると、以下にURLの入力欄が表示され、画像をクリックした時にページを移動させる事が可能です。

「なし」は何も起きませんが、投稿に画像を表示したいだけの場合は「なし」を利用します。最も利用頻度が高いでしょう。

26

最後は「サイズ」です。画像編集を行った場合は「フルサイズ」にしなければ思ったサイズの画像を貼り付け出来ません。「フルサイズ」はアップロードしたファイルの大きさになります。ファイルの編集を行った場合は編集後のサイズの画像になります。

「サムネイル150x150」は小さな正方形の画像を挿入します。切り抜きは中央になります。

「中サイズ」はだいたい元ファイルの半分くらいのサイズです。

27

最後に右下の「投稿に挿入」ボタンをクリックすると投稿に画像を挿入する事が可能です。

28

以上で、画像の挿入は完了です。

最後に

以上で、記事投稿に必要なテクニックは完了です。記事投稿に利用する各種の機能は「固定ページ」を作成する場合にも利用できるので、良く確認の上操作を行って頂ければと存じます。