技術 technology

3. 投稿ページの作成

お知らせやイベントページなど新しいページを投稿で作成する方法を説明します。

すでにある投稿を編集/修正する場合も同じ流れになります。

3-1.投稿メニュー

左側のメニューの「投稿」から「新規追加」をクリックするか、投稿一覧画面に移動してから画面上部「新規追加」ボタンをクリックします。

(すでにある投稿を編集する場合は「投稿一覧」から目的の記事の編集画面へ)

投稿メニュー

 

3-2.新規投稿を追加

新規投稿の画面です。タイトル本文のほかにカテゴリーやアイキャッチ画像なども設定します。

投稿追加画面

 

①タイトルの入力とパーマリンクの設定

投稿のタイトルを入力します。タイトルを入力すると、入力欄の下に「パーマリンク」という表示が現れます。これがその投稿のURL(表示されるのアドレス)になります。

初期状態ではタイトルがそのまま追加されるため編集しないと下図ののように日本語のタイトルが挿入されます。日本語が含まれるURLがSEOにとって悪影響となるということはありませが、日本語を含むURLはSNSなどでシェアされた際に、長くなってしまったり意味のわからない英数字や記号の羅列になってしまうことがあるため、面倒でもページの内容を示す半角英数字で入力することをおすすめします。

パーマリンク設定

「編集」をクリックして修正後「OK」をクリックしてください

 

 

②本文内容の入力

ワードプレスのエディタを使用して、本文を入力します。

エディタの使用方法については 「3.エディタの使い方」で後述します。

③カテゴリー

投稿のカテゴリーを選択します。予め設定したものから選択しますが、「新規カテゴリー追加」ボタンから追加することもできます。

④アイキャッチ画像

記事一覧ページ等に配置されるサムネイル画像です。またサイトによっては投稿内に表示されることもあります。

画面右下の「アイキャッチ画像を設定」をクリックして設定します。メディアライブラリーから選択するかアップロードします。

メディアライブラリーの使い方については「3.エディタの使い方」で後述します。

アイキャッチ設定

 

既に設定されている画像を変更する場合は、画像クリックしてメディアライブラリーを表示します。

3-3.エディタの使い方

①エディタの種類について

WordPressには「ビジュアルエディタ」と「テキストエディタ」という2種類のエディタ(編集機能)があり、入力欄右上部のタブを切り替えて使用します。どちらで入力しても構いませんが、テキストエディタはHTMLの知識が必要となるため、ビジュアルエディタを使用するのが便利です。

ビジュアルエディタとテキストエディタ

  • ビジュアル …ツールアイコンをクリックすることで、文字の装飾などを画面を見ながら簡単に行うことができます。
  • テキスト …HTMLタグを使用することができます。

ここからは標準的なビジュアルエディタの使い方を説明します。

ビジュアルエディタのツールバーの機能を使えば、誰でもMicrosoftのWordで文章を作成するような感覚でページ作成を行うことができます。また、デフォルトで搭載されている機能は少なめですが、TinyMCE Advancedのようなエディタのプラグイン(拡張機能)を利用することにより下図のように様々な装飾機能を追加することができます。

※プラグイン(拡張機能)とは

プラグイン(拡張機能)とは本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。WordPressが世界的に高いシェアを誇る理由の一つとして、他のCMS(コンテンツ管理システム=サイトの更新作業を容易にする仕組み)に比べプラグインが圧倒的に豊富であることが挙げられます。

ビジュアルエディタのツールパネル

②主な機能

エディタのアイコン説明

文章を入力後、装飾が必要な部分を選択/反転表示し、該当するアイコンで効果をつけていきます。

③見出しの設定

文中の章のタイトルなどに見出しを設定します。「段落」と表示されているボックスをクリックします。

見出し選択見出しのサイズを選ぶと予め設定されたスタイルが適応されます。

④リンクの挿入、削除

文章や画像にリンクを設定します。クリックしたときに同じタブ(ウィンドウ)で開くか、新しいタブ(ウィンドウ)で開くか等も設定できます

リンクを設定したい部分や画像を選択し、ツールバーの「リンクの挿入/編集」ボタンをクリックします。

リンク先のURLを入力するボックスが表示されますので、入力してEnterボタンをクリックでリンクが挿入されます。

リンクの挿入

細かく設定したい場合は右端の歯車マークをクリックすると詳細設定画面が開きます。

  • URL:リンク先のURL入力欄です。
  • リンク文字列:リンクが貼られる文字列です。選択範囲が間違っていた(一字多いなど)場合は修正してください。
  • リンクを新しいタブで開く:チェックを入れるとクリックしたときに新しいタブで開きます。
  • 既存のコンテンツにリンク:リンク先を外部でなくサイト内にする場合は下のリストから選択します。検索ボックスに入力することで絞り込むことができます。

入力が終わったら右下の「リンク追加」ボタンをクリックしてください。

 

設定済みのリンクを編集、削除する場合は、リンク済みの文字列をクリックすると、編集ボタンと削除ボタンが表示されますので

編集/削除を行ってください。

リンク設定

 

 

3-4.画像の挿入とメディアライブラリ

本文中の任意の場所に画像を挿入します。

画像を挿入したい位置にカーソルを合わせて、エディタのツールバー左上にある「メディアを追加」ボタンをクリックします

メディアの追加

ポップアップが表示され、左上のタブで「ファイルをアップロード」「メディアライブラリ」の切り替えが行えます。すでにアップロード済みの画像の場合は「メディアライブラリ」からファイルを選択、ファイルをアップロードする時は「ファイルをアップロード」にタブを切り替え下記の操作を行なってください。

①ファイルのアップロード方法

  1. 「ファイルを選択」をクリックして、画像を選択する
  2. 画像をドラッグ&ドロップしてアップロードする

下の画像はドラッグ&ドロップによる挿入の例。

 

画像をアップロードした後、メディアライブラリにて指定の画像データの情報やサイズを編集します。

  • タイトル・・・画像のタイトルをさします。
  • キャプション・・・画像に説明文(キャプション)を挿入します。
  • 代替テキスト・・・画像を読み込まなかった際、ここに書き込んだ情報が表示されるため、画像を表す言葉を入力すると良いでしょう。代替テキストはSEO(検索エンジンへの最適化)においても非常に重要な役割を果たします。
  • 配置・・・画像の配置方法を指定します。(左、中央、右があります)
  • リンク先・・・画像にリンクを挿入したい時はリンク先のURLを入力してください
  • サイズ・・・サムネイル(150×150)、中サイズ、フルサイズ、カスタムサイズが選べます。(使用テーマにより異なる場合があります)
  • 固定ページに挿入(投稿に挿入)・・・情報を入力後ボタンを押すと画像がページに挿入されます。

メディアライブラリ内

②代替テキストについて

代替テキストとはWebサイト内に含まれている画像や動画が何らかの原因で表示されなかった時に表示されたり、視覚障害者などが音声ブラウザを使用する時、替わりに読み上げられるテキストのことをいいます。

また、検索エンジンはクローラーというプログラムによってサイト情報を収集しますが、代替テキストを入力することによりクローラーはより内容を判断しやすくなります。したがって代替テキストの設置はSEOにも有効とされています。

以下の写真はT-NEXTのメンバーが、納涼祭で設置した特設ブースでプログラミングを教えている様子を撮影したものです。

プログラミング体験の模様

この写真に代替テキストを入るとすれば「子供にプログラミングを教える(T-NEXTの)インド人エンジニア」などといった具合になります。このように、画像に代替テキストを挿入することにより、ユーザーや検索エンジンにとって最適なサイトになります。

3-5.公開方法について

公開に関する設定は右上のボックスで行います。

公開設定

 

①保存と公開

作成の途中で中断し保存する際は「下書きとして保存」をクリックします。実際の表示を確認したい時には「プレビュー」ボタンで確認することができます。

作成を完了して公開するには「公開」をクリックしてください

②日時を指定して公開

作成を前日に行って翌朝公開したい、別の発表とタイミングを合わせたい等の場合に指定の日時に公開することもできます。

公開設定欄の一番下カレンダーアイコンの右側は通常「すぐに公開する」と言う表示になっています。右の「編集」をクリックすると

公開日時を細かく設定することができます。

公開日時設定

公開したい日時を入力して「OK」をクリックしてください。

③公開済みページの編集

すでに公開済みのページではボタンの表示が「公開」⇒「更新」 「プレビュー」⇒「変更をプレビュー」に代わっています。

公開済みページの更新

編集を行ったら「更新」ボタンで編集内容を公開してください。

WORDPRESSマニュアル記事一覧

ワードプレス基本操作マニュアル

1. ログイン方法と管理画面(ダッシュボード)について

2. 固定ページと投稿ページ

3. 投稿ページの作成

4. 固定ページの編集

5. プラグインについて

一覧ページへ 

Other contents
その他のコンテンツ

Go to Top

Contact
お問い合わせ

CONTACT