１．投稿ページづくりの作り方を解説します
ゆるゆるカフェは WordPress を採用しています。WordPress で作られるページは「固定ページ」と「投稿ページ」の２つに大きく分けられます。固定ページは、固定的に表示されているページです。投稿ページは、つどその時事に合わせて投稿される（ブログ）ページとなります。近年そのどちらのページも「ブロック」を単位として構成されるようになりました。この記事投稿では、ゆるゆるカフェにおける「投稿ページづくり」を基に、ページの作り方を解説します。
操作にかんしては、ほとんどすべてスマートフォン・タブレットからも可能な操作となりますが、ここでは一般的なパソコンからの操作をメインにお話しをします。
２．「新規」に投稿ページを作る
「新規」にページを作るときは、管理画面にログインをして（ダッシュボードを表示できる状態）、上部の黒帯から「＋新規」を選択してください。まずは新規に「投稿ページ」の作成ですので、「＋新規」→「投稿」を選択してください。新規に投稿するページ画面が出現します。ここで「タイトルを追加」をクリックして、タイトルをご入力ください。ページ全体のタイトルとなります。
３．本文はカラムの中に入れる
次に「Return」（またはEnter）ボタンを押してください。ここですぐに本文を入力するのではなく、ブロックの中から「カラム」をお選び頂きます。画像を左右に配置するときなどは、２カラム。文字だけの場合は、１カラムを選択します。
カラムの中で「段落」を選択して、本文をご入力ください。これで、ページ画面右上にある「公開」ボタンを押して頂くと、画面左下から「投稿を更新しました。投稿を表示」と文字が浮き上がってきますので、「投稿を表示」のリンクをクリックして、投稿ページを完成頂けます。
すでに公開しているウェブサイトにおいては、ある程度記事を完成してからの公開となります。上記「公開」ボタンの代わりに、同じくページ画面右上の「下書き保存」で保存をして、「プレビュー」をクリックすると、デスクトップ、タブレット、モバイルの３つのモードで表示のご確認を頂けます。
ゆるゆるカフェのテーマでは、カラムごとにワクの中に幅を持たせています。そうすることで、カラムごとにコーナーに丸みを持たせることが可能となります。また固定・投稿ページの区別なくデザイン・レイアウトを統一していきたいので、文章や画像はすべてカラムの中に入れていくことをルールとしています。但し、ブログ投稿においては、固定ページ（とくにトップページ）よりは気楽に、リズミカルに記述を進めても良いと考えていますので、一つの投稿記事全体を、一つのカラムの中で書くのもありです。それでも、投稿ページにおいても、章立てごとにカラムを分けた方が良いメリットがあります。後から画像を入れたいときなど、その章立ての中でカラム数を増やして、画像を左右に入れていける柔軟さゆえです。
４．入力画面では、画像をいつも右側に置く
ゆるゆるカフェのテーマでは、画像を文章の左右に配置したいときは、「70：30」のカラムを選択したあと、画像を右側の「30」の方に配置します。これはパソコンで投稿ページを作成しているときも、いつも「モバイル」で表示されることを優先して作成するためです。モバイルで表示頂くとお分かり頂けますが、パソコンの入力画面で画像を右側に配置することで、モバイルのワンカラム表示では、いつも文章の説明のあとに、画像が表示されるようになります。
それでは、パソコンで表示させるときに、画像と文章でレイアウトを左右に分けたときに、画像を左に寄せたいときはどうすれば良いか？画像を入れているブロックを選択してください。そのブロックを選択した状態で、ブロックの「設定」> 「高度な設定」> 「追加CSSクラス」と進んで頂き、追加CSSクラスに「order1」と入れます。同様に、文章を入れているブロックの追加CSSクラスには「order2」と半角小文字で入力します。この設定を行うことにより、モバイルではいつも画像があと表示。パソコンでは、「order1」と入れたブロックが左に表示されるようになります。
一見手間のかかるこの設定プロセスは、「モバイル・ファースト」という考え方に基づいています。まずはスマートフォンでどう見られるかを検証して、しかるのちに、タブレット・パソコンでどう表示されるかという優先の順番をつけています。ゆるゆるカフェのテーマにおいて、モバイルを優先して表示するコードを記述しており、そのスタイルに沿う形で、ご投稿を入力頂くよう推奨しております。
５．投稿の編集をブロック単位で行う
投稿の編集画面に戻ります。下書き保存をした後、プレビューを行った場合は、プレビューを閉じてください。別タブで表示されていますので、そのまま編集画面が残っています。公開をした場合は、画面上部黒帯の「＋新規」の右隣りに「投稿を編集」をクリックすると、投稿の編集画面に戻ります。
ここで本文の文章を重ねる場合、注意点が２つあります。１ブロック内で文章を書く時は「改行」を行わないでください。逆に、章または節単位で、文章のまとまりを作っていきたいときは、「改行」を行ってください。自動的に新しいブロックで文章を作成していくことになります。
６．本文に見出しを入れて分類を行う
本文は章立てをして、章ごとに見出しを入れます。投稿ページ全体のタイトルが大見出し（h1）とすれば、本文中のタイトルは中見出し（h２）となります。「ｈ」はヘッド（head）の頭文字です。大きい順に、１〜５まで選択できますが、実際には（はん雑さを防ぐために）、中見出し（h2）と小見出し（h3）ほどまでにご使用を留めておくことが望ましいです。ブロック単位で中見出しまたは小見出しを設定すると、ゆるゆるカフェのテーマでは、自動的にページの初めに「目次」を生成していけるよう設定しています。
使用プラグイン：Heroic Table of Contents
７．ページ編集画面において「投稿」設定を表示する
ページの編集画面で、右側の設定メニューが「投稿」タブを選択されていることをご確認してください。設定メニューが表示されていないときは、ページ右上の船の舵のマークをクリックしてください。設定メニューで「ブロック」タブを選択すると、クリックしたブロックに特有の設定画面が表示されます。ここでは、「ブロック」ではなく「投稿」タブを選択します。
８．リード文とページタイトルはラストに決まる
リード文は意識しなくても、勝手に（本文の）冒頭の110文字を引っ張ってきて、自動に生成されます。上記ページの「投稿」タブにおいて、「抜粋」でページ全体の概要を記述頂くと、その内容が優先的に使用されます。SEO対策のための文章としても自動的に使用されます。入力は後からでも大丈夫なので、投稿ページ全体をご紹介するリード文は、（自動生成ではなく）改めて記載することをお勧めいたします。文字数に制限はありませんが、全体の概要を読み取れる内容にします。
私は各パラグラフごとの中見出しを編集して、リード文を作成することが多いです。中見出しを各パラグラフ（章）ごとに、設定していれば、その中見出しを基に目次も生成してくれますので、その目次をコピーして編集をかけ、リード文を作成しています。
同様に、ページ全体のタイトルも、中見出しを編集しながら最終的に決定していくことが多いです。とくにブログにかんしては思うままに書き出して、中見出しをつけながら、全体の構成を整えていく手順を踏んでいきますので、自然とリード文及び投稿全体のタイトルは、一番最後に決まることになります。
使用プラグイン：SEO SIMPLE PACK
９．投稿ページのメイン画像を入れる
そのページのメインとなる画像を入れてみます。設定メニューの「投稿」の中から、「アイキャッチ画像」を選択します。メディアライブラリーの中から、予めご登録された画像をお一つ選びます。投稿ページのメイン画像の横幅は、1200px を基準としています。ゆるゆるカフェのテーマでは、現在のところパソコン表示で横幅1000pxを最大幅としています。
1200pxを取っているのは、スマホのRetinaに対応したピクセル幅であると同時に、Google 推奨の規格に合わせた基準ともなっています。状況に応じて、パソコン表示のサイト全体の横幅を1200pxに拡げる使い方の可能性も探っていきます。
ゆるゆるカフェのテーマでは、投稿ページのメイン画像をやや細長い形状（４：１）にしています。実際はメイン画像の縦方向もきちんと見せたい状況も普通に想定されます。ですので、メイン画像で使用した画像は、もう一度文中で、（メイン画像よりは小さい大きさで）タテ横比を変えて表示すると、投稿ページとしてバランスの取れたページ作りになると考えています。
（ゆるゆるカフェのテーマで使用する投稿ページにおけるメイン画像として使う）アイキャッチ画像は、メディアライブラリーから画像を一つお選び頂くと、自動的に、４：１の横幅で切り取られます。そのトリミングの調整を行いたいときは、Crop Featured Imageボタンをご利用ください。画像の加工にかんしては、別途ブログ投稿いたします。
使用プラグイン：Crop-Thumbnails
10．パーマリンクを編集する
投稿ページを作成すると、パーマリンクが生成されます。パーマリンクとは、ホームページアドレスのことです。パーマ（permanent）とは、「恒常的な」とか「永続する」などと日本語訳されます。（英次郎WEBを参考）美容院で使われるパーマと同じですが、内容が変更されても、そのページのリンクは変わりがないよという意味を込めてそう命名されているのではないかと思います。WordPressにおいては、生成するページだけでなく、使用する画像や動画などのメディアすべてに渡り、パーマリンクが生成されます。それは画像検索など行われる際に、大切な役割を担います。
そのパーマリンクですが、メールやソーシャル・ネットワークでご紹介するときに使用しやすいよう、少し手入れをする必要があります。ゆるゆるカフェでは、投稿ページのパーマリンクを、「ドメイン」＋「/post/」+「投稿タイトル」の形式で自動生成しています。ゆるゆるカフェでは、パーマリンクに投稿タイトルを入れることが望ましいと判断しているため、そのような設定を選択しています。
ラストの「投稿タイトル」は、半角文字、すなわち半角英数文字にすることが望ましいです。日本語を表示するために使用される「全角文字」のままでは、パーマリンクが不必要に意味のない文字列となり、長い記載となってしまいます。
投稿ページで自動生成されるパーマリンクは、WordPressの管理権限があれば、ご自身で設定を変更することも可能です。自動的に枝番を割り振られるよう設定することも可能です。（［パーマリンク］<［設定］<［ダッシュボード］）パーマリンクはいったん決めたら、後から変更しない方が望ましいです。
投稿ページのパーマリンクの記述変更は、アイキャッチ画像の変更画面と同様、編集ページの投稿設定において行います。「パーマリンク」を選択頂いて、「URLスラッグ」に、半角英数文字を小文字でご記入ください。この文字列がそのまま投稿ページのラストも文字列として反映されます。
その投稿を行ってしばらく経って、同じフレーズ（文字列）を入力した場合は、WordPress の方で自動的に枝番を割り振ってくれますので、安心して重複を行えます。むしろ重複を行うことで、過去に同じような記事を書いていることを思い出し、振り返ることのできる機会ともなります。
11．カテゴリーを設定する
投稿ページは、必ず一つ以上のカテゴリーに属す仕様となっています。デフォルトで（何も設定を行わない状態において）何も行わずに「投稿」設定を行うと、その投稿は「未分類」のカテゴリーに自動的に割り振られます。
カテゴリーは、１投稿に１カテゴリーのみを割り当てることを、ゆるゆるカフェでは推奨しています。別のカテゴリーに属していても、別の視点で同じグループを生成することがあります。それは「タグ」を併用することで、整理されたブログ運用を実現します。「カテゴリー」と「タグ」の使い分けにかんしては、別途ブログ投稿いたします。
12．ダッシュボードで設定を見渡す
以上、すべての設定に渡り、投稿ページから直接編集画面に入るスタイルで説明して参りました。実際の設定は、ダッシュボードに入ることで、全体を見渡しながらの編集が可能となります。ダッシュボードは、WordPress にログインをした後、トップページからでしたら、上部黒帯左側に記載されているサイト名にマウスを乗せるて、「ダッシュボード」を選択頂き、左に表示するメニューから「投稿」を選択すると一覧できます。全体を見渡しながら編集するか、作業リズムまたは編集スピードを優先して、ページから直接編集に入るか、状況に応じて使い分けます。
