WordPressでの投稿の仕方

WordPressログイン

お知らせしたログインURLにアクセスし、IDとパスワードを入力します。IDは変更出来ません。パスワードはご自身で設定することも可能です。IDとパスワードは厳重に管理いただきますようお願いします。

ログイン画面

▲ ログイン画面

ログインすると最初に表示されるダッシュボードです。クリックすると拡大します。

ダッシュボード

▲ ダッシュボード

記事投稿画面の作成

左側の『投稿』にカーソルを合わせ、『投稿一覧』を選択します。『新規追加』を選ぶと何も入力されていないページが追加されます。慣れてきたら新規で記事を作成しても構いません。

投稿ページの作成

▲ 投稿ページの作成

投稿のタイトルに、鍵アイコンと◯◯さんが編集中というアラートが出ている場合があります。これは、編集者か管理者が記事に手を入れたという表示です。そのまま編集を続ける場合は、構わず作業を続けてください。

記事の複製

▲ 記事を複製します

ログインしたIDの所有の投稿のみが表示されます。誤って別人の記事を変更してしまう心配はありません。記事のタイトルにカーソルを合わせると、選択肢が表示されます。

    • 編集 …… 今現在の投稿を編集します
    • プレビュー …… 今現在の投稿のプレビューを表示します
    • 【使用しない】複製 …… 今現在の投稿を、公開ステータスを含め複製します。公開済みの記事を複製すると、公開された記事がもう一つ出来てしまうので、こちらは使用しないでください
    • 【こちらを使用】新規下書き …… 今現在の投稿の複製を、下書き状態で作ります。こちらをお使いください

▲ カーソルをホバー

記事の書き方

新規下書きを作成するとこのような画面が表示されます。クリックで拡大します。

記事投稿画面

▲ 記事投稿画面全体像

投稿の編集

まず、タイトルを入力してしまいましょう。32文字程度を目安にしてください。
インパクトのあるキャッチーなタイトルをお願いします。
(参考)
http://bazubu.com/blogtitle-3527.html
http://liginc.co.jp/web/useful/96228

英単語を使用した場合、スペースにより自動で改行されますので適宜調整してください。また、『☆』『◯』等記号を使用する場合、2個以上連続させないようにお願いします。表示エラーとなる可能性があります。公開した際、見た目に不都合があった場合、編集側でタイトルを調整する場合もありますのでご了承ください。

また、パーマリンクは自動で入力されるものを使用するので、変更は不要です。

▲ タイトル入力場所

▲ タイトル入力場所

『エディタ』の使い方

実際に文章や画像を入力する『エディタ』は『テキストエディタ』を推奨します。『ビジュアルエディタ』は、テキストの校正などにご使用ください。

こちらにテキストを書き、最低限のHTMLタグを使いながら実際の記事を作成していきます。

本文は1000W~2000Wを目安にまとめてください。

段落の頭落としは不要です。

読みやすくするため、3~4行で段落を区切ってください。

エディタ上部

▲ エディタ上部

『メディアを追加』ボタンの使い方

画像を挿入する際に使用します。ボタンをクリックするか、エディタ上に直接画像をドラッグ&ドロップでアップロード可能です。
なお、画像サイズはあらかじめペイントソフト等で調整お願いします。大きなサイズの画像はアップロードできません。デジカメで撮影した写真等、特にご注意ください。

【画像サイズ一覧】

アイキャッチ サイドカラムや一覧でタイトルの横に表示される正方形の画像。アプリレビューはアプリアイコン w 250px ✕ h 250px 必須 (eyec)
キービジュアル 記事の本文の一番上にくる画像。アプリレビューはイメージ画像。イベントレポート記事は会場の様子。製品モニター記事は製品の使用イメージなど。 w 640px ✕ h 400px 必須(kyev)
本文・画像 本文中の画像の基本サイズ w 300px ✕ h なりゆき 適宜
本文・解説画像 大きく見せたい画像など w 640px ✕ h なりゆき 適宜
スマホ画面 スクリーンショットそのままのサイズでアップロードしても画面上で幅300に指定可 w 300px ✕ h なりゆき 適宜
PC画面など なるべく必要な部分のみをトリミングすること。拡大表示させなくてもわかるよう工夫。 w 1280px程度まで ✕ h なりゆき 適宜
特集画像・上段   w 800px ✕ h 516px 編集で用意
特集画像・中段   w 620px ✕ h 400px 編集で用意
特集画像・下段   w 400px ✕ h 258px 編集で用意
特集画像・上段PC用   w 1280px ✕ h 460px 編集で用意
メディアを挿入

▲ メディアを挿入

挿入する画像を選択したら、右下でキャプションや表示、リンク等の設定をします。

URLやタイトルは自動で入力されています。
キャプションをつける場合は、こちらに入力してください。簡潔に入力します。キャプションは本文より小さく、文字色も薄くなります。画像の説明などはキャプションではせずに、本文中でしてください。

代替テキストは必ず入力してください。なんらかの事情で画像が表示されない場合にこのテキストが表示されます。SEO上も重要な項目ですので、キャプションと同じでも構いませんのでご入力ください。

画像を差し替えた場合は、不要な画像を『完全に削除』で消しておきましょう。

画像設定画面

▲ 画像設定画面

添付ファイルの表示設定

こちらは、画像のサイズや画像に貼るリンクの設定になります。
配置は『中央』のままで。

        • リンク先は、そのままで画像だけ表示するものは『なし』
        • 画像を拡大して表示させたい場合は『メディアファイル』。アップロードした画像のサイズが拡大サイズになります。小さい画像でメディアファイルは選ばないでください。
        • 『添付ファイルのページ』は使用しません。
        • 画像からリンク先に飛ばしたい場合は『カスタムURL』を選択すると、リンク先のURLを入力するフォームが生成されますので、そちらに入力してください。
リンク先

▲ リンク先

サイズはアップロードした画像のサイズにより、自動でいくつか選択可能です。
希望のサイズが選択出来ない場合は、希望サイズよりひとつ大きいサイズを選び、『テキストエディタ』上で微調整します。フルサイズというのが、アップロードした画像のサイズになりますので、これより大きな画像サイズは選べません。

サイズの指定

▲ サイズの指定

【希望のサイズを選択できず、後から画像サイズを調整する方法】
サンプル1

▲ すみだ水族館のくらげたち


大きめのサイズ

▲ 希望のサイズより大きいサイズを選択して普通に画像挿入した場合


黄色の部分を変更します。width=”数字”と言う部分が横幅になりますので、これを表示したいサイズに変更します。横幅を指定すると、自動でそのままの比率で縮小されますのでheight=”数字”と言う高さの指定部分はまるごと削除してしまいます。

調整後

▲ 調整後


『”(半角ダブルクォーテーション)』や『 (半角スペース)』を誤って削除しないよう注意。

サンプル1

▲ すみだ水族館のくらげたち


このように希望のサイズで表示できます。

テキストリンクの貼り方

エディタ上部の『link』ボタンから簡単にリンクを挿入することができます。

エディタ上部

▲ エディタ上部

『リンクの挿入・編集』という画面が開きます。
URLと、リンクを貼らせたいテキストを入力します。
外部サイトへ貼るリンクの場合は『□リンクを新しいタブで開く』にチェックを入れます。ピンク文字のリンクができます。
Happyデジタル内へのリンクの場合はチェックを外します。グレーのリンクになります。URLを直接入力するか『既存のコンテンツにリンク』から検索し、選択する事も可能です。

必要事項が入力できたら、『リンク追加』ボタンをクリックします。

テキストエディタに自動でタグが挿入されます。
直接テキストエディタを編集する事も可能です。

リンク指定

▲ リンクボタンをクリックするとダイアログが作成される

リストの作り方

エディタ上部の『ul』というボタンをリストの最初に押し<ul>と言うタグを挿入します。次に、リストの項目を入力する前に、『li』ボタンを押し、<li>タグを挿入。リスト項目のテキストを入力します。終わりにまた『li』ボタンを押すと</li>と言う閉じタグが自動で挿入されます。
必要な数だけタグを挿入したら、全体を『ul』ボタンで閉じます。
ボタンを使用せず、タグを直接記載することも可能です。その場合、半角、全角にはご注意ください。タグは全て半角で書きます。

【例】

  • リスト 1
  • リスト 2
  • リスト 3

【テキストエディタのタグの記載例】
<ul>
<li>リスト 1</li>
<li>リスト 2</li>
<li>リスト 3</li>
</ul>

HTMLでは<>で囲まれたタグで前後を囲むことで機能します。頭につけるものを開始タグ、後ろにつけるものは開始タグにスラッシュを入れたもので終了タグと呼びます(終了タグをもたない例外タグもあります)。WordPressではタグボタンを押すと、スラッシュの入っていない開始タグと、スラッシュの入った終了タグが自動で交互に挿入されます。目的のものが挿入されない場合は数回押してみて、不要な物を削除。開始タグと終了タグが交互になるようにしましょう。開始タグと終了タグの数があっていないと、タグ以降が表示崩れを起こす場合がります。プレビューでうまく表示されない場合、開始タグと終了タグがワンセットになっているか確認してみてください。

なお、ビジュアルエディタは、表示の確認には不向きです。必ず、右サイドの公開パネルのプレビューで確認してください。

表(テーブル)の作り方

テーブルはボタンが用意されていないので、タグをご自身で書く事になります。
テーブルの全体を<table><tbody>~</tbody></table>で囲います。

一行分を<tr>~</tr>で囲います。

ピンクの見出しセルは<th>~</th>
白い一般セルは<td>~</td>で囲います。

具体例は下をご確認ください。

なお、レスポンシブに対応したテーブルを採用しているため、セル同士を結合させるような複雑なテーブルには対応していません。

難しい場合は、テンプレートからコピペし、テキストを入れ替えてご使用ください。

【例】

 th  td  td
 thはピンク地の見出し用セル  tdは白地の一般タグ  セルの数は増減可能
 縦方向のセルはtrタグを使用  一行分のセル用のthまたはtdタグをtrで囲む  縦横のセルの数は必ず合わせること

【テキストエディタのテーブルの記載例及び解説】
テーブルタグ説明

パネルの使い方

右サイドの各パネルの使い方を説明します。

『公開』パネル

一番下の『公開』ボタンは押さないでください! 編集部で確認して公開します。

『プレビュー』で表示の確認ができます。ビジュアルエディタでは表示は確認できませんので、必ず最終的にプレビューで確認してください。プレビューだけでは保存されていませんので、最終的に『下書き保存』をして、編集部にご連絡ください。
なお、すでに公開したものに修正を入れる場合は編集部に一度ご連絡をください。追ってやり方をご説明します。

公開パネル

▲ 公開パネル

『カテゴリ』パネル

カテゴリーは編集部でいれますので『未分類』のままで構いません。

カテゴリー

▲ カテゴリー

『タグ』パネル

タグは最低3つは登録してください。『,(半角カンマ)』で区切ります。『,(全角カンマ)』や『、(句読点)』などは認識されませんのでご注意ください。『よく使われているタグ』をクリックすると、使用頻度の高いタグが表示されますので、こちらから選ぶことも可能です。クリックで選択されます。

タグ

▲ タグ

『アイキャッチ画像』パネル

こちらは、トップページのランキングや新着に表示される正方形のアイキャッチになります。必ず設定してください。一度設定したものを削除して変更することもできますが、新しいモノがうまく表示されない場合は、編集までご連絡ください。

アイキャッチ

▲ アイキャッチ編集

その他の部分

メタ情報には何も入力しなくて構いません。
特集画像は、編集部で設定します。
要請があったら、本文等に使用した画像の大きなサイズの元データを提供いただけるようデータの保存をお願いします。

追記)下部の画像追加欄について

説明画像

特集画像は、記事内容や時期、他の記事との兼ね合い等をみて、編集部で扱いを決めます。
記事投稿時点では、どの部分の扱いになるか決まっていないことがほとんどですので、何も入れないでください。

右カラム下の、アイキャッチは250✕250(または300✕300)の正方形の画像を入れてください。
トップページや一覧に表示させる正方形の画像になります。

アプリレビューはアプリアイコンを。
製品やサービス・イベントレポートなどは、正方形に近い形のロゴがありましたらロゴを。
ロゴがなければ、製品の写真を。
その他、適当なモノがない場合はイメージ画像を正方形に切り取った物を入れてください。

長方形の画像は入れないでください! 表示崩れを起こします。