このページは、当社(株式会社コンパス)にてWEBサイトを制作させていただいたお客様向けの、ブログやNEWS・インフォメーションなどの記事投稿の仕方についての説明ページです。

ログインについて

ログインページの開き方

当社から納品時に提供させていただいている「WEBサイト管理について」の書類をご覧いただき、Wordpressについての項目の「ログインURL」をお使いのブラウザのアドレスバーに入力し、ログイン画面を開いてください。

ログイン画面が開けたら、お気に入りにブックマークしておくことをおすすめします。

書類の例

ログインする

ログイン画面が表示されたら、「WEBサイト管理について」の書類をもとに、①ユーザー名(Staffなど)、②パスワードを入力します。

基本的に自分が使用するPCであれば、「□ログイン状態を保存する」に✓をいれて、「ログイン」ボタンを押してください。

「WEBサイト管理について」の書類には、「管理者アカウント」「編集者アカウント」を初期状態でご用意してあります。記事の更新などの日常業務では、「編集者アカウント」を使用するようにしてください。

管理者と編集者の違い

管理者アカウントと編集者アカウントでは、でWordpressの管理画面でできることが違います。管理者アカウントの場合、ユーザー権限の変更などのほか、テーマの変更や外観のカスタマイズなど、サイトの中核部分を簡単にいじれるようになっています。うっかりミスでサイトが表示されなくなってしまうという間違いが起こらないように、普段の業務では編集者アカウントを使用してください。

編集者のユーザーを増やしたい場合や、プラグインを追加したいといった場合に、管理者アカウントでログインするようにしてください。

次はいよいよ記事の作成です。

無事に編集者アカウントでログインされると、ダッシュボードのページが表示されます。

記事の書き方

投稿の新規作成

ダッシュボードのサイドメニューにある「投稿」にカーソルを合わせると、サブメニューが表示されます。その中から「新規追加」をクリックしてください。

WordPress 編集者ダッシュボード

固定ページと投稿ページ

WordPressのページには、静的ページである「固定ページ」と、動的ページである「投稿ページ」の2種類のページが簡単に作成可能です。日常業務でのブログや新着情報の発信は、「投稿ページ」で行います。投稿ページで作成することで、月ごとやカテゴリーごとのアーカイブを作成することができるほか、設定によって、最新情報がTOPページやサイドバーなどで表示されるようになります。一般的なブログ機能と思っていただいて問題ないでしょう。

タイトルを入力する

表示された空欄のページの一番上に「タイトルを追加」という欄があります。こちらをクリックすると文字を入力できます。実際の投稿でタイトルとして表示されますので、内容に合ったタイトルを入力してください。下記の画像では、例として「記事投稿の仕方」と打ち込んであります。

ちなみに、こちらの状態でプレビューすると、下記のようにサイト上で表示されます。表示方法は、使用しているテーマや設定によって異なります。

アイキャッチとカテゴリーの設定

記事の投稿の際に、忘れずに設定していただきたいのが、「アイキャッチ」と「カテゴリー」の設定です。いずれも画面右側の「投稿」サイドメニューから設定が可能です。

※再度メニューがない場合は、右上のアイコンをクリックすると開きます。

アイキャッチ画像を設定

アイキャッチ画像を設定すると、記事一覧ページ(アーカイブページ)やTOPページのお知らせ欄(サイト構成による)の一覧部分に、サムネイル画像が表示されるようになります。こちらのアイキャッチを設定してない場合には、自動的にロゴ等で構成されたデフォルトアイキャッチ画像が入るようになっています。

アイキャッチには、記事内で使う画像のほか、目を引きやすく、わかりやすい画像を編集制作して設定することもあります。

カテゴリーの選択

投稿にはいくつかのカテゴリーを設定してあります。初期段階でサイト内容にあったカテゴリーをいくつか作成してありますが、ご自身で追加することも可能です。カテゴリーを選択しておくことで、記事ジャンルごとの一覧表示の精度が高まります。設定しないと、「未分類」に自動的に分類されてしまいますのでご注意ください。

パーマリンクについて

パーマリンクの設定はSEO上も重要とされておりますので、可能な限り編集をすることをおすすめしています。

パーマリンクとは、記事のURLを示すリンクのことで、例えばこのページのURL(https://u-compass.jp/how-to-post/)でいうところの、「how-to-post」の部分を指します。

Googleのロボットが巡回の際にこのパーマリンクを読み込んでいくのですが、ここが日本語の場合、文字化けしてしまって解読ができない可能性があると指摘されるひともいます。日本語のままでも検索エンジンには登録されるので、まったく駄目というわけではありませんが、可能な限りアルファベットとハイフンで構成するのが望ましいでしょう。日本語のURLにすると、なにかにコピー&ペーストする際にも、記号が長文で羅列された読みづらいリンクとなります。

パーマリンクは、初期設定で記事の「タイトル」がそのまま転載されるようになっています。記事のタイトルはほとんどが日本語だと思いますので、そうすると必然的にパーマリンクが日本語になってしまいがちなのです。ですので、投稿の際に横文字化してあげる必要があります。この際に、無意味な横文字ではなく、記事の内容に関連した内容ですとなお良いとされています。URLを読んだだけで、なんとなく内容をさっすることができることが良いパーマリンクの条件です。

パーマリンクは、「投稿」サイドメニューの最上部のいくつか項目がならんでいるところの、「リンク」のところで編集できます。

「リンク」の右側の文字列をクリックすると、編集用のダイアログが展開されます。こちらに投稿内容に沿った英文字を入力すれば完了です。適切な英語が出てこない場合は、ローマ字でも構いません。日本語だけは避けましょう。

ブロックについて

タイトルより下の部分は、自由な記事作成が可能なコンテンツエリアです。

現行のWordpressでは「ブロックエディタ」という方式が採用されており、様々なパーツ(=ブロック)を組み合わせて、自由なWebページの表現が簡単にできるようになっています。

ブロックはどんなものがあるかというと、

  • 見出し……タイトルや中見出し、小見出しです。。
  • 段落……長文・文章を入れます。
  • 画像……その名の通り、画像を挿入します。画像はWordpressサーバー内のメディアライブラリに保存されているものから選択することも可能ですし、新たにアップロードして追加することも可能です。
  • リスト……箇条書きをする際に使います。今読んでいるこのブロックが、リストブロックです。
    1. このようにインデントをしたり、
    2. 数字を表示したり、アレンジが可能です。
  • テーブル……表を挿入することができます。

などなど、いろいろな要素が「ブロック」となっており、それを選択して追加していき、ページを作っていきます。

「ブロックを選択するには「/」を入力」と書かれているグレー文字のところにカーソルを合わせ、「/」を入力すると、ブロック選択のダイアログが表示されます。あるいは、その行の右端に表示される+マークをクリックしてもOKです。

右端の+マークを押して、さらに「すべて表示」をクリックすると、左側にブロック全一覧が表示されます。使用テーマやプラグインによって、表示される内容は異なる場合があります。豊富なブロックがあるので、自分の表現したいイメージに近いブロックを探してお選びください。

ブロックの編集

ブロックには、ブロックごとの特性に沿って、簡単にレイアウトやオプションを変更できる機能が備わっています。直感的に編集できる項目が多いですので、色々とお試しいただくことをおすすめしています。

例えば上記のような画像の場合、ブロックを選択すると画面右側の設定サイドメニューに「投稿」と並んで「ブロック」のタブが表示されるのでこちらをクリックします。

ブロックタブを開くと、さらに「歯車マーク」と「白黒マーク」のタブがでてきます。

「歯車」の方では、代替テキストや追加CSSなどの編集が可能ですが、あまり触れる必要はありません。

「白黒」の方では、レイアウトの変更が可能で、選択式で簡単に見た目を変えることが可能です。

ドキュメント概欄

いま書いている記事が、どのようなブロックの構造になっているか、また見出しや小見出しのアウトラインがどうなっているか、といった概要を一覧で見るための機能があります。

投稿ページ左上のアイコンが並んでいるところの、横線が縦に三つ並んだアイコンをクリックすると、ブロックの配置が一覧できる「リストビュー」が開きます。「入れ子」状態にあって編集画面で必要なブロックを選択しづらい場合にも、こちらのリストビューから正確に選択が可能です。

おすすめのブロック

ここでは個人的におすすめのブロックをご紹介します。

ギャラリー

画像をたくさん表示したい時におすすめです。ただ「画像」ブロックを並べるよりもきれいに、自動的に表示してくれます。

FAQ新(VKBLOCKS)

WordPressテーマ「Lightning」で有名なVektor社のプラグイン導入型ブロック「VKBLOCKS」に入っているブロック。正直なところ、VKBLOCKSとVKBLOCKS PROを使いたいからLightningを使う、という面もあるくらい、便利で使いやすいブロックが豊富です。その中の一つ、FAQ新ブロックです。

こんな感じで文字をいれるだけで

Q&Aが簡単に作れちゃうんです。

アイコン部分のレイアウトも選べるので

サイトのデザインに合ったイメージで選べるのもうれしいですね。

ちなみにアコーディオンも対応していて

別途設定画面からアコーディオンをONにすれば、最初は閉じた状態にすることも可能です。