2019-05-06スポンサーリンク昔のじぶんなんかこのブログ、最近見た目が変わったんじゃない!?というかそもそもぼくたち、これまでいなかったし!ねなとうよくわかったね〜ワードプレスのテーマ「JIN」を使いはじめたんだよ〜おかげでブログの見た目もよくなったし、書くのも楽になったんだよ〜WordPressの有料テーマJINを導入しました。見た目が整うとともに、書くのが楽になります。基本設定でJINの便利な機能を設定できます。「ピックアップ」「コンテンツマガジン」「スマホスライドメニュー」「スマホフッターメニュー」などなどWordPressテーマ「JIN」の設定マニュアルそのままでも十分すばらしいのですが、さらにユーザビリティをよくするために、細かいところをカスタマイズしたので、その方法をご紹介します。※2019年2月9日:「関連記事の見出しの文字を大きくする」を追記しました。me」を削除する6.スマホフッターメニューの色を変える7.人気記事ランキングが文字だけの状態になったのを直す8.目次の自動番号振りを削除9.「関連記事」の見出しの文字を大きくするまとめ1.スマホトップページの文字を大きくするJINのデフォルト設定だと、スマホのトップページの文字が、小さすぎるように感じました。デフォルトだとこのサイズです。この文字を大きくするため、mone(ひよっこフリーランス)さんのブログを参考にさせていただきました。ありがとうございます!「外観」→「カスタマイズ」→「追加CSS」に下記コードをコピペします。}}これで文字が大きくなり、読みやすくなります。2.カテゴリーを並び替えるカテゴリー一覧は、アクセスの多いカテゴリーから順番に並べて紹介したい。単純な変更だと思いましたが、意外とめんどうでした。プラグインの導入が必要です。Order」を導入しました。「投稿」→「カテゴリー」で、カテゴリーの一覧を表示させたあと、ドラッグで並び替えができるようになります。3.リンク文字の色を変えるリンク文字が赤だったのを青に変えました。見慣れている青字でないと、リンクできる文字と思われずに見落とされてしまうのでは、と考えたためです。JINは「着せ替え」という機能があり、サイトの雰囲気をまるっと設定することができますが、私が選んだデザインだと、なぜかリンク文字が「赤」でした。青の色を選ぶにあたり「マイクロソフトが検索サイトBingのリンク色に#0044CCを使って8,000万ドル売り上げが増えた」という記事を見つけ、この色にしました。(その後、目立ちすぎるのでトーンを抑えた色にしました)「外観」→「カスタマイズ」→「カラー設定」→「リンクの色」で変更できます。4.「次の記事」「前の記事」を削除するJINはデフォルトでは記事の下に「次の記事」「前の記事」が表示されます。私のブログでは連載のような、続きものの記事はないからです。「外観」→「カスタマイズ」→「記事のデザイン設定」→「記事下の「次の記事」「前の記事」を非表示にする」にチェックを入れます。me」を削除するWordPressでは複数メンバーで記事を書く際に、だれが書いたのか表示できる機能がありますが、これを削除しました。me」というタイトルで記事下に表示されますが、私は一人で書いているので、プロフィールと同じことくらいしか書くことがありません。無駄なので削除しました。載せる情報を消すと、エリア自体が消えます。「ユーザー」→「あなたのプロフィール」→「あなたについて」エリアの「プロフィール情報」「プロフィール写真」を削除。6.スマホフッターメニューの色を変えるスマホフッターメニューの色を変えました。デフォルトはグレーなのですが、テーマカラーの色(#000066)に。「外観」→「カスタマイズ」→「追加CSS」で下記のコードを追記します。color:#000066;}※「#000066」の部分はカラーコードです。好きな色を設定してください。必須プラグインの一つです。JINを導入すると、わたしの環境では表示に問題が出ました。このように文字だらけに。この画面では6つの記事が表示されていますが、どこからどこまでが一つの記事か分かりません。これはひどすぎるので、「ottaka18」さんのカスタマイズ記事を参考に修正しました。(style.css)」に手を入れるのではなく、「追加CSS」に追記するだけで対応したこと。以下のコードを「外観」→「カスタマイズ」→「追加CSS」にペーストします。#D47B16;/*背景色*/}これだけで、ランキングがわかりやすくなります。Plus(TOC+)」と連携して、勝手にきれいな目次を作ってくれます。気になるのは、自動で番号を振ってくれるところ。自分で見出しの頭に番号を振ろうとした場合、バッティングしてしまいます。これを削除する方法は、クロネさんの「クロネのブログ講座」で紹介されていました。ありがとうございます!方法は簡単。WordPress管理画面の「外観」→「カスタマイズ」→「追加CSS」で以下を追記します。.toc_list>li:after{display:none;}9.「関連記事」の見出しの文字を大きくするJINの機能「関連記事」で表示されるエリアの見出しの文字が、JINの「人気記事ウィジェット」の見出しの文字より小さくなっていました。この文字を大きくする方法です。JINのサポートで教えていただきました。本当に感謝しています。(「関連記事」機能の見出しを「こちらの記事もおすすめ」と変えています。人気記事ランキングの見出しよりも、文字が小さいのが分かるでしょうか)修正後はこちら。文字のサイズが揃いました。修正するためには、WordPress管理画面の「外観」→「カスタマイズ」→「追加CSS」で以下を追記します。}}まとめ以上、ワードプレスのテーマJINをちょびっとカスタマイズして、ブログにアクセスする方のユーザビリティを上げる方法でした。参考になれば幸いです。スポンサーリンクスポンサーリンクねなとうこのブログの更新情報や、関係する速報を、ツイッターでつぶやいています。よければフォローどうぞーフォローする【2020】iPhoneのSIMロック解除の方法とSIMフリーになったか...WordPressサイトを高速化する7つの方法。9個のユーザビリティUPのポイントMacでAirDrop受信したファイルの保存先を変更できるかMacのスクリーンショット/キャプチャの保存先を変更する方法。57寝ながら投資ねなとう仕事や家庭が忙しくても続けられる、自動積み立てやロボアドバイザーを使った「寝ながら投資」を目指します。Stickはテレビのリモコンで操作できてめっちゃ便利!TVer(ティーバー)をテレビで見る方法。