NIFの楽園

主にAndroidスマートフォンやアプリに関する紹介

【WordPress】初めてのWordPress『ブログ記事の投稿』について

早速、新しいブログ記事を書いてみたいと思います。

※WordPressには、大雑把な区分けとして、プログ用のエディターとホームページ用のエディターが用意されています。
プログ用のエディターは、サイドメニューの「投稿」から、ホームページ用のエディターは、「固定ページ」からそれぞれ開始することになります。
今回は、ブログ記事なので「投稿」を使った紹介になります。

Ⅰ.ブログを公開するまで

サイドメニューの「投稿」⇒「新規追加」をクリックすると新規投稿画面になります。

1.新規投稿画面(ビジュアルモード)
wp001_convert_20160707100249

➀記事名を入力します。
➁記事(本文)を入力します。
➂「画像」を貼り付けます。
➃編集モードを切り替えます。
➄「公開」ボックス:記事を公開するとき、または、編集中の記事(下書き)を保存するときに使用します。
➅「カテゴリー」ボックス:記事のカテゴリーを設定します。
➆「タグ」ボックス:記事のタグを設定します。
➇「アイキャッチ画像」ボックス:トップページ等での記事一覧に表示する画像を設定します。

2.画像の貼り付け

1)本文の画像を貼り付けたい場所にカーソルをフォーカスします。
2)➂の【メディアを追加】をクリックすると、「メディアを挿入(ファイルをアップロード)」画面になります。
※ならない場合は「ファイルをアップロード」タブをクリック
wp002_convert_20160707112448

3)【ファイルを選択】をクリックして、エクスプローラから貼り付けたい画像を選択します。(または、ドラッグ&ドロップ)
4)「メディアを挿入(メディアライブラリ)画面に、選択したファイルの画像が表示されます。

wp003_convert_20160707111038

5)サイズを選択します。
※サイズの「サムネイル」「中サイズ」「大サイズ」は、一般設定の「メディア」で予め設定しておきます。
【WordPress】インストール後、最初にして置きたいこと。(最初の投稿公開前)を参照。

6)【投稿に挿入】をクリック
で新規投稿画面(ビジュアルモード)に画像が表示されます。

・ビジュアルモードの場合、画像そのものが表示されます。
wp004_convert_20160707111104

・テキストモードの場合は、<img />タグが表示されます。
wp005_convert_20160707111125

※「投稿」の編集モードには、「ビジュアルモード」と「テキストモード」があります。
・「ビジュアルモード」は、普通にワープロ感覚で文章を作成することができます。
(注意)「Enter」キーは、「改行」ではありません。「改行」したい場合は、「Shift」+「Enter」です。
・「テキストモード」は、HTML形式で編集します。

3.カテゴリーの設定

本文の作成が終了したら、カテゴリー等を設定していきます。

wp006_convert_20160707134338
カテゴリー一覧から記事内容に相応しいカテゴリーを選択します。

カテゴリー一覧に存在しない場合は【+新規カテゴリーを追加】をクリックして、新たなカテゴリーを作成します。

4.タグの設定
wp008_convert_20160707134713
タグもカテゴリーと同様に、記事に相応しいキーワードを入力して【追加】します。

5.アイキャッチ画像の設定
wp303
1)【アイキャッチ画像を設定】をクリック

2)設定したい画像を「メディアライブラリ」の中から選択して【アイキャッチ画像を設定】をクリック

・トップページにおける記事一覧の「アイキャッチ画像」と「抜粋」
wp304

6.パーマリンクの編集

【下書きとして保存】をクリックすると、パーマリンクが表示されて編集ができるようになります。
パーマリンク設定で「xxxx/カテゴリー/投稿名」としたので、下記のように表示されています。
wp009_convert_20160707140421

【編集】ボタンをクリックして半角英数字に編集し直すこともできます。
※投稿名の場合は、「スラッグ」ボックスに半角英数字を入力してもOKです。(「★★表示オプションの5)スラッグ」を参照)

7.記事の公開

wp010_convert_20160707141131
記事を書き終えたら【プレビュー】ボタンをクリックし、内容を確認して問題なければ【公開】ボタンをクリックします。

これで、記事の投稿が完了します。

★★「表示オプション」について

・テーマ:「Twenty Sixteen」の表示オプション
wp302
※表示オプションは、「テーマ」や「プラグイン」によって変わってきます。

上記で紹介した以外のボックスについて紹介しておきます。

1)抜粋
wp020b_convert_20160707151537

「抜粋」は、トップページ等の記事一覧の記事要約に利用します。
※設定しないときは、本文の冒頭部分が表示されます。

2)トラックバック送信
wp021b_convert_20160707151552

投稿記事の中で参考にしたブログ等のURLを入力します。
※トラックバック(trackback)とは、別のブログのURLリンクを張ったときに、そのブログ(相手)に通知する仕組みのことです。

3)カスタムフィールド
wp022b_convert_20160707152359

カスタムフィールドとは、「名前」と「値」をセットにして、テンプレートファイルの中で利用します。いろいろなことができるようですが、中級者以上向けのようなので詳細は割愛。

4)ディスカッション
wp023b_convert_20160707151612

ディスカッションとは、「コメント」と「トラックバック」「ピンバック」のことです。

※「ピンバック」とは、WordPressの機能で、投稿記事の中で、URLリンクした場合に自動的に相手側に送信されます。この場合、相手側もWordPressでブログ作成をしている必要があります。

5)スラッグ
wp024b_convert_20160707151627

スラッグとは、個別の投稿(または固定)ページの識別名で、URLの一部として使用します。
※パーマリンク設定で「投稿名」(postname)を指定している場合は、URLの一部に表示されます。
Ⅰ.6.「パーマリンクの編集」をみると、日本語の記事名が「article」になっています。

6)作成者
wp025b_convert_20160707151643

複数人でブログ記事を投稿している場合に、投稿者を識別するための入力します。(普通は一人ですが)
※テーマによっては、作成者が表示されます。

Ⅱ.ブログ本文作成のテクニック

1.編集モード(ビジュアル)のツールバー

wp029b_convert_20160708112330

(記号の説明)
➀太字 ➁イタリック(斜体) ➂打ち消し(取り消し線) ➃番号なしリスト
➄番号付きリスト ➅引用 ➆横ライン ➇行揃え(左寄せ、中央揃え、右寄せ)
➈リンクの挿入/編集・削除 ➉「続きを読む」タグを挿入

※「ツールバーの切り替え」をクリックすることで、2段目のツールバーが表示されます。
⑪段落 ⑫スタイル ⑬下線 ⑭両端揃え ⑮テキストの色 ⑯テキストとしてペースト
⑰書式設定をクリア ⑱特殊文字 ⑲インデントを減らす/増やす ⑳取り消し/やり直し

・⑪段落⑫スタイル⑮テキストの色
wp031_convert_20160708150653

・⑱特殊文字
wp032_convert_20160708150717

・キーボードショートカット
wp033_convert_20160708150744

wp034_convert_20160708150807

2.編集モード(テキスト)のツールバー
WP301

(タグを挿入する)
➀太字 ➁イタリック(斜体) ➂リンクの挿入 ➃引用 ➄打ち消し(取り消し線)
➅追記 ➆画像の挿入 ➇番号のなしリスト ➈番号付きリスト ➉リストの項目
⑪プログラムコード ⑫「続きを読む」 ⑬「タグを閉じる」

・➂リンクの挿入
wp035_convert_20160708152436

3.「メディアを挿入」画面での画像の編集

1)編集モードで、【メディアを追加】をクリック
wp307

2)「メディアを挿入」画面の「メディアライブラリ」タブで、編集したい画像をクリック
3)【画像を編集】をクリックすると「画像を編集」画面になります。
wp309

・「画面を編集」画面
wp036_convert_20160708171802

・「画面を編集」画面でできること
➀トリミング:画像上において、カーソルで切り取る部分を指定してから、➀のボタンをクリック
➀’トリミングの縦横比率を指定可(比率を維持しながら切り取るには、Shiftキーを押しながらカーソル操作します)
➁回転(90度単位)
➂反転(上下、左右)
➃元に戻す/やり直し
➄サイズの変更(縮小のみ)
➅【保存】:編集が完了したら保存します。
➆変更の適用 ※すべての画像とは、「サムネイル」サイズ、「中」サイズ、「大」サイズのことです。

4.ビジュアル編集モードでの画像編集

1)画像をクリック⇒ホップアップメニューが表示されます。

wp308

2)編集ボタン(鉛筆マーク)をクリック⇒「画像詳細」画面が表示されます。

・「画像詳細」画面
wp037_convert_20160708180304

・「画像詳細」画面でできること
➀キャプション:画像の下に入力したテキストが表示されます。
➁代替テキスト:画像が表示されない環境でのテキスト表示 ※検索エンジンが画像を認識するテキストでもあります。
➂配置:画像の位置
➃サイズ:「サムネイル」「中」「大」「フルサイズ」
➄リンク:通常は「なし」
ここまでは、画像を挿入するときに設定できます。後から変更するときは、こちらの方が便利です。
➅上級者向け設定:※今回は割愛
➆【更新】:変更が完了したら【更新】をクリック

5.カテゴリーの管理

投稿した記事をグループ分けしたいときに、各投稿記事にカテゴリーを設定します。既存のカテゴリーに当てはまらない場合は、新規に作成します。
サイドメニューの「投稿」⇒「カテゴリー」をクリック

・新規カテゴリーを追加
wp305
1)名前:カテゴリー名称で、日本語OK。

2)スラッグ:パーマリンクで使用します。半角小文字の英数字とハイフンのみ使用可。

3)親:カテゴリーは、階層管理(2層まで)できます。


6.タグの管理

投稿した記事にあるキーワードを設定します。サイドメニューの「投稿」⇒「タグ」をクリック

・新規タグを追加
wp306

※「タグ」ボックスでは、スラッグが設定できないので、こちらから編集しておきましょう。

以上

Amazon.co.jpアソシエイト(商品検索)

Amazon.co.jpアソシエイト(商品検索)

-wordpress
-, , , , , , , , ,