ユーザビリティを考える
ユーザビリティ（英語: usability）あるいは日本語で使用性（しようせい）とは、使いやすさとか使い勝手といった意味合いで使われることが多い。
引用：Wikipedia
先日、私のあるサイトをよく見てくれている知り合いからこんなことを言われた。
「私、順番に読んでいくから、’前の記事’、’次の記事’っていう表示がどこかにあったいいのに」と言いながら、そういう表示のある他のサイトを見せてくれた。
見せてくれたサイトは、記事のトップに、「前の記事」、「次の記事」というテキストだけのボタンがあるサイトだった。
その場は、「ふぅーーーん、そうなん？」って返事をしながらも、読み手であるユーザーは、そんなことを考えて読んでいるのかと、改めて思った。
何でも同じで、作る側の思いと、それを使う側の思いは得てして異なることがある。
ブログ記事でも同じなのだが、
「誰に読んで欲しいか？」
「自分が想像している読み手は、どんな情報に価値を感じるのか？」
そんなことを思い巡らせながら記事を書いてるつもりなのだが、記事の書き手である自分の思い込みが強い場合、いわゆる、読み手にこうあって欲しい」といった、独りよがりな考えに陥ってしまうこともあり、そこで記事を書く側と読む側にギャップが生じる。
結果的には、どれだけ多くの記事を書いても、読んでもらうことができなければ意味がないし、一度は読んでもらったとしても、ファンになってもらわなければ、サイトに継続して訪れてくれることはない。
そういう意味では、自分がターゲットとしているユーザーに、どれだけの「共感」を得られるかということで、記事の内容が一番大切なのだが、ユーザーに気持ち良く記事を読んでもらうという視点で見れば、使いやすいサイトのデザインや操作性も重要なポイントになるのかも知れない。
作り手を選ばない、WordPressテーマ「Diver」
知り合いが読んでくれているサイトは、このサイトと同じく、WordPressテーマ「Diver」で作っているサイト。
「Diver」というWordPressテーマは、機能的にもデザイン的にも非常に優れたテーマで、機能的な面にしても、やみくもに機能が多いとか、高い機能であるとかという意味ではなく、テーマを使うユーザーが、「こんな機能があったらいいのに？！」というものが、操作しやすい形で組み込まれている。
また、誰が作っても「美しくスタイリッシュなデザインのブログ」がカスタマイズなしで出来上がり、ブログを作るユーザーのスキルを選ばないという点においても優れたテーマだと思う。
今では、新しいドメインを取得して、テーマ選びに悩んだら、とりあえず「Diver」かTCDの「MAG」を選ぶ。
この二つが今の私にとって、デフォルトテーマになっている。
「前の記事、次の記事」のナビゲーションを、カスタマイズでDiverに組み込む
「前の記事、次の記事」というのは、次の画像を見ていただければわかるとおり、前後の記事へのナビゲーションを表示させることです。
単純にテキスト表示だけでも良かったのですが、せっかく入れるのであれば、「アイキャッチ画像＋タイトル」で表示できればと考えたのがこれです。
カスタマイズの手順
FFFTPで、親テーマからsingle.phpをダウンロードする
WordPressテーマ「Diver」は、親テーマと子テーマがあり、両方をWordPressに追加して、子テーマを有効にした状態で使います。
「前の記事、次の記事」を表示させるためには、「single.php」をカスタマイズする必要があります。
なので、まずは、FFFTPを使って親テーマの中にある「single.php」を、マウスで（自分のパソコンの任意の場所に）ドラッグしてダウンロードしておきます。
エックスサーバーの場合、「single.php」のある場所は
/自分のドメイン/public_html/wp-content/themes/diverの直下になります。
ダウンロードしたsingle.phpに子テーマ用のCSSを追加する
ダウンロードしたsingle.phpをテキストエディタで開き、以下の記述を追加します。
追加する箇所は、次の項で述べます。
ともかく、このままコピペしてもらえばいいでしょう。※右下のview rawをクリックすると、テキストのみの表示モードに変わります。
【single.php用】
single.phpに追加する箇所
DIVERでは、下図のとおり、103行目の次に追加し、ファイルを上書き保存します。
ファイル名は変更しません。
追加の箇所をわかりやすくするために、104行目と135行目は、わざと１行ずつあけています。
カスタマイズしたsingle.phpを子テーマにアップロード
FFFTPを使って、Diverの子テーマにアップロードします。
エックスサーバーの場合、アップロードする場所は
/自分のドメイン/public_html/wp-content/themes/diver_childの直下になります。
下図は、アップロードを終えた後の画像です。
追加CSSの画面を表示させる
ワードプレスのダッシュボード画面より、「外観」＞「CSS 編集」を選び、追加CSSの画面を表示させます。
追加CSS用のCSSを貼り付け保存
下記のCSSを「追加CSS」の画面に貼り付けて、公開ボタンをクリックし保存します。
このままコピーして使えます。※右下のview rawをクリックすると、テキストのみの表示モードに変わります。
【追加CSS用】
- FFFTPを使って、親テーマにある「single.php」を自分のPCにダウンロードする。
- ダウンロードした「single.php」をテキストエディタで開き、single.php用のCSSを、103行目の次に追加挿入して上書き保存する。
- FFFTPを使った、子テーマに❷でカスタマイズ済みの「single.php」をアップロードする。
- WordPressの追加CSSに、もう一つのCSSをコピペし、公開（保存）する。
※動作確認の上でお伝えしておりますが、自己責任で行って下さい。
以上でカスタマイズは終了です。
投稿記事の下に、前の記事、次の記事が表示されているか確認してください。
もし、うまくいかなかったときは、追加CSSのCSSと、子テーマにアップロードしたsingle.phpを削除すれば元に戻ります。
また、他のテーマでも考え方は同じですが、子テーマがないテーマだと、親テーマのsingle.phpを直接変えるか、子テーマを作るかになりますから、そのあたりはちょっと異なります。
どんなテーマでも子テーマを作ることはできますが、この投稿では割愛致します。
それに、テーマが異なれば、single.phpにカスタマイズ用のCSSを挿入する箇所も異なりますので、考え方は同じといっても、やり方は違うと思って下さい。
ユーザビリティの優れたテーマは記事投稿に集中できる
WordPressテーマ「Diver」の記事入力には「入力補助」という機能が標準でついています。
SEOに強いとかっていうキャッチフレーズは、どのテーマにもありますが、今どきSEOに弱いテーマなんかありません。
十分に考慮されてて当然、有償のテーマにSEOの強い弱いなど、それほど大差ありません。
それに、SEOで大きな差をつけるのは、結局は「記事」だからです。
また、ブログサイトアフィリエイトで一番労力と時間を費やすのは記事作成ですから、Diverのような入力補助がついているテーマはとても助かります。
私がダイバーを手放せないのは、作り手を選ばない完成された美しいデザインと、入力補助機能があるからと言っても過言ではないでしょう。
美しいテーマと言えば、TCDのWordPressテーマがダントツですが、あちらはデザイナー的な美しさで、Diverはビジネス的な美しさとも言えるでしょう。
※PCでご覧いただく場合は、全画面表示になさるとよくわかります。
手に入れて良かったと感じるWordPressテーマ「Diver」
Diverを使ったサイト
Diverを使ったサイトは他にもありますが、このテーマ１つで様々な顔を持ったブログサイトの制作ができます。
上記のサイトをご覧いただければわかりますが、素人でもデフォルトの機能を使って、ハイクォリティなサイトを運営することができます。
当サイトからDiverをご購入の方に特典のお渡しキャンペーン中！
ご購入者様特典
トップアフィリエイター「Yu」さんが運営する会員制コンテンツ「メールワールド」へご招待致します。
なお、陽向塾が発行するメルマガ会員として自動的に登録させていただくとともに、今後、陽向塾が開講を予定しております、無料のアフィリエイト起業塾（仮称）等、一般には公開しないコンテンツへ優先でご案内させて頂きます。
