見やすさ改善プラグイン

このエントリーをはてなブックマークに追加

様々なサイト検証の結果、スピード低下を最低限にしつつ、見やすさを改善するお勧めプラグインを2つ紹介します。

PS Auto Sitemap

これは自分のサイトの記事とリンクアドレスを抽出して、自動的にHTMLサイトマップを作ってくれるシンプルで便利なプラグインです。

※サイトマップには検索エンジンが認識するXMLサイトマップと、閲覧者が認識するHTMLサイトマップの2つがあります。

※余計な機能も付いていないのでサイトマッププラグインとしては比較的軽量スピードもそれほど悪化しませんが、取り入れる前後でスピードチェッカー(後述)で確認はしてくださいね。

<利用方法>

①まずはプラグインをインストールしましょう。

WordPressの左メニュー「プラグイン」⇒「新規追加」でプラグイン名を検索して、インストール⇒有効化するのはいつもの通りです。

②次は、簡単な固定ページを1つ作りましょう。

・タイトルは「サイトマップ」と入力

・ブロック追加ボタン(+)で「カスタムHTML」を選ぶ

・カスタムHTMLの内容に、以下のコードを一行だけ貼り付けてページ作成は完了です。

<!– SITEMAP CONTENT REPLACE POINT –>

③最後に、作ったサイトマップを表示させてましょう。

・WordPressの左メニュー「設定」⇒PS Auto Sitemapを選ぶ

・上の画面で上から4つ目の項目「サイトマップを表示する記事」に作ったサイトマップページの記事番号を入力しましょう。

※作ったサイトマップの記事番号は、編集画面のURLで確認できます。

「/ドメイン/wp-admin/post.php?post=XXX&action=edit」というアドレスになっていると思うので、このpost=の後のXXXで表示される数字を見れば、固定ページでも投稿ページでも簡単にページ番号が確認できます。

・一番下段の「設定を保存」ボタンを押してサイトマップを表示させます。

④作成が完了したら、実際にサイトマップを見てみましょう。

(参考)本サイトのサイトマップ⇒ サイトマップ

※カテゴリで階層構造にしていても、自動的に階層ごとにサイトマップができるのでミスがなく便利です。

Simple Custom CSS

これはサイトのデザインをカスタマイズできるプラグインです。

全体のデザインは外観テーマで任せるのがよいので、ここでは主に「見出し」等のデザインの加工に使うのが効果的かと思います。

ちなみに、本サイトの検証では、このプラグインでデザインを少し強化しただけで、本サイトに最初に来訪した瞬間の離脱率が激減しました。

やはり、内容も大事ですが、ページ群ができたらデザインも少し手を入れていく価値はあります。※まずは中身が最優先ですが。

<利用方法>

①まずはプラグインをインストールしましょう。

WordPressの左メニュー「プラグイン」⇒「新規追加」でプラグイン名を検索して、インストール⇒有効化するのはいつもの通りです。

②WordPressの左メニュー⇒「プラグイン」⇒「インストール済プラグイン」⇒「Simple Custom CSS のCCSの追加」を押します。

③上の画面の入力欄に試しに、以下のコードをコピーしてみましょう。

h1 {
background: #c2edff;/背景色/
padding: 0.5em;/文字まわり(上下左右)の余白/
}

④コピーしたら一番下段の「カスタムCSSを保存」を押します。

⑤出来たらサイトのページのレイアウトを確認してみましょう。

これで、背景が水色のタイトルバーに変わったと思います。

上記の「background: #c2edff;/背景色/」の「c2edff」の部分が世界共通の色コードなので、この値を変える事で簡単に色も変更できます。

※以下のページで好きな色のコードを確認して、コピーして貼り付ければ、確認が効率的なので便利ですよ。

色コードの確認

ちなみに、タイトルは「1番目の見出し扱い」なので「h1」と表現すると以前説明しましたが、上の記述で「h1」を「h2」や「h3」にするだけで、簡単に2番目や3番目の見出しを変更できます。

※padding: 0.5em;/ は文字まわり(上下左右)の余白を表しているのでこれも数字を変えるなどして楽しんでください。

ページ作成ばかりで飽きたら、ちょっと目先を変えてデザインに凝ってみるのもよいかもしれませんね。

※CSSに不要な記述を増やし過ぎると、速度遅延の原因にもなるので、わたしは「見出しのデザイン」と「パンくずリスト」程度にしておくのがよいかなと思っています。

プラグイン調整と速度チェック


投稿者:

よしくん

楽観主義者で明るく前向きな性格。挑戦するのが好きで、WordPress 5.0も、早くからに取り入れました。(^-^)

コメントを残す