ブログ

ワードプレスのテーマJIN 7個のユーザビリティUPのポイント

昔のじぶん
昔のじぶん

なんかこのブログ、最近見た目が変わったんじゃない!?
というかそもそもぼくたち、これまでいなかったし!

ねなとう
ねなとう

よくわかったね〜
ワードプレスのテーマ「JIN」を使いはじめたんだよ〜
おかげでブログの見た目もよくなったし、書くのも楽になったんだよ〜

WordPressの有料テーマJINを導入しました。

見た目が整うとともに、書くのが楽になります。

まずは基本設定でJINの便利な機能を設定できます。
「ピックアップ」「コンテンツマガジン」「スマホスライドメニュー」「スマホフッターメニュー」などなど

WordPressテーマ「JIN」の設定マニュアル

そのままでも十分すばらしいのですが、さらにユーザビリティをよくするために、細かいところをカスタマイズしたので、その方法をご紹介します。

この記事で紹介する内容
  1. スマホトップページの記事タイトルの文字を大きくする
  2. カテゴリを並び替える
  3. リンク文字の色を変える
  4. 「次の記事」「前の記事」を削除する
  5. 「about me」を削除する
  6. スマホフッターメニューの色を変える
  7. WordPress Popular Postが文字だけの状態となったことへの対応

スマホトップページの記事タイトルの文字を大きくする

JINのデフォルト設定だと、スマホのトップページの文字が、小さすぎるように感じました。

デフォルトだとこのサイズです。

この文字を大きくするため、mone(ひよっこフリーランス)さんのブログを参考にさせていただきました。

「外観」→「カスタマイズ」
→「追加CSS」
に上記ブログのコードをコピペします。

すると文字が大きくなり、読みやすくなります。

カテゴリーを並び替える

カテゴリー一覧は、アクセスの多いカテゴリーから順番に並べて紹介したい。

単純な変更だと思いましたが、意外とめんどうでした。
プラグインの導入が必要です。

JIN作者ひつじさんのブログを参考に、プラグイン「Intuitive Custom Post Order」を導入しました。

WordPressのカテゴリーを並べ替える方法

プラグインをインストールすると、
「投稿」→「カテゴリー」で、カテゴリーの一覧を表示させたあと、
ドラッグで並び替えができるようになります。

リンク文字の色を変える

リンク文字が赤だったのを青に変えました。
見慣れている青字でないと、リンクできる文字と思われずに見落とされてしまうのでは、と考えたためです。

JINは「着せ替え」という機能があり、サイトの雰囲気をまるっと設定することができますが、私が選んだデザインだと、なぜかリンク文字が「赤」でした。
↓こんな感じです。

青の色を選ぶにあたり「マイクロソフトが検索サイトBingのリンク色に#0044CCを使って8,000万ドル売り上げが増えた」という記事を見つけ、この色にしました。
(その後、目立ちすぎるのでトーンを抑えた色にしました)

「外観」→「カスタマイズ」→「カラー設定」
→「リンクの色」
で変更できます。

「次の記事」「前の記事」を削除する

JINはデフォルトでは記事の下に「次の記事」「前の記事」が表示されます。
これを削除しました。

私のブログでは連載のような、続きものの記事はないからです。

「外観」→「カスタマイズ」→「記事のデザイン設定」
→「記事下の「次の記事」「前の記事」を非表示にする」
にチェックを入れます。

「about me」を削除する

WordPressでは複数メンバーで記事を書く際に、だれが書いたのか表示できる機能がありますが、これを削除しました。

JINでは「about me」というタイトルで記事下に表示されますが、私は一人で書いているので、プロフィールと同じことくらいしか書くことがありません。

これが「about me」

これが「プロフィール」

無駄なので削除しました。

載せる情報を消すと、エリア自体が消えます。

「ユーザー」→「あなたのプロフィール」
→「あなたについて」エリアの「プロフィール情報」「プロフィール写真」
を削除。

スマホフッターメニューの色を変える

スマホフッターメニューの色を変えました。

デフォルトはグレーなのですが、テーマカラーの色(#000066)に

「外観」→「カスタマイズ」→「追加CSS」
で下記のコードを追記

.footer-menu-sp .menu-item a{
  color:#000066;
}

※「#000066」の部分はカラーコードです。好きな色を設定してください。

もとの表示

色の変更後

WordPress Popular Postが文字だけの状態になったのを直す

自分のブログの人気記事一覧を自動で作ってくれる、便利なプラグイン「WordPress Popular Post」。
必須プラグインの一つです。

JINを導入すると、わたしの環境では表示に問題が出ました。
このように文字だらけに。

この画面では6つの記事が表示されていますが、どこからどこまでが一つの記事か分かりません。

これはひどすぎるので、「ottaka18」さんのカスタマイズ記事を参考に修正しました。

少し工夫したのは、「スタイルシート (style.css)」に手を入れるのではなく、「追加CSS」に追記するだけで対応したこと。

「ottaka18」さんのカスタマイズ記事にかかれているコードをコピーして、

「外観」→「カスタマイズ」
→「追加CSS」
にペーストします。

これだけで、ランキングがわかりやすくなります。

まとめ

以上、ワードプレスのテーマJINをちょびっとカスタマイズして、ブログにアクセスする方のユーザビリティを上げる方法でした。

参考になれば幸いです。

ねなとう
ねなとう

このブログの更新情報や、関係する速報を、ツイッターでつぶやいています。
よければフォローどうぞー

フォローする