最終更新日：2018.05.31
WordPressの無料テーマ『LION MEDIA』を解説しているページです。
今回のテーマは、カスタマイズ【SEO設定】の使い方です。
SEO設定とは、
検索エンジン（GoogleやYAHOO！など）の検索結果に、自分のWEBサイトが上位に表示されるように設定することをいいます。
<titile＞と＜meta description>の内容を効果的なもの（これが難しい）に変更するだけで、上位に表示される可能性があります。あくまでも可能性です。
こういった設定も大切ですが、しっかりとしたコンテンツがあればGoogleさんからは嫌われないらしい・・・。
<title＞と＜meta description＞
まずは、「ヤフー」と検索したときの検索結果を見てみましょう。
「ヤフー」の部分が<title＞
「日本最大級のポータルサイト。検索、オークション・・・」の部分が＜meta description＞
何かを探している人は、検索された結果の「タイトル」や「表示された文章」をチェックし、自分が探し求めている答えがありそうなサイトをクリックしますよね。
この「タイトル」や「表示された文章」という限られた情報の中で、いかにしてユーザーの心を掴むのかが重要になってくるということです。
TOPページの<title>設定
TOPページの<title＞が反映されるのは、検索結果はもちろんですが、ブラウザーのタブにも表示されます。タブにマウスを合わせると全文見ることができます。
サイトをブックマーク（お気に入り）登録したときにも表示されますよね。
タイトル設定ボックスに何も入力しない場合
WordPressの一般設定で入力しているキャッチフレーズとサイト名が表示されます。
この場合、「ママが笑う」毎日を。こころ豊かな生活を。｜Mamma Ridea マンマリデアと表示されます。
タイトル入力欄の下にある「サイト名を表示する」のチェックボックスですが、タイトルを入力していない場合は、チェックの有無にかかわらずサイト名が表示されます。
タイトル設定ボックスに入力した場合
入力した文字がタイトルとして表示されます。「サイト名表示」のチェックボックスにチェックがない場合は、タイトルのみの表示となります。
左がタイトルのみ。右がタイトルとチェックあり
つまり、ここで表示させたいフレーズを設定すれば、一般設定のキャッチフレーズは無視され、設定しなければ、キャッチフレーズが活かされるということです。
TOPページの＜meta description＞の設定
TOPページが検索結果に表示されたときに、この項目で入力した内容がサイトの説明文として表示されます。
TOPページ以外はどうやって設定するの？
投稿ページや固定ページの<meta description>の設定は、各ページごとに行います。
詳細については、こちらのページで解説していますのでご参照ください。
『LION MEDIA』を使うとWordPressの投稿ページと固定ページはこう変わる！
CSS非同期読み込み設定
Webサイトのページは、HTML＆CSSという言語で作られており、この言語を使ってページの見た目や文字の大きさや色、背景の色、配置(レイアウト）などを指定しています。
ブラウザーはこれらの言語が書かれているHTMLファイルやCSSファイルなどを読み込み、Webサイトとして表示します。しかし、全てのファイルを一度に読み込んでしまうと表示されるまでに時間がかかってしまいます。
「あ～、このサイト全然開かへん・・・。違うサイト見よう」ってことになり、訪問者を逃してしまう可能性があります。
そこで、サイトを表示する際に、それほど重要ではないCSSファイルを後から読み込ませることで、表示する時間を短縮することができるということです。
この機能を使いたい場合は、「有効化」を選択します。（デフォルトは「無効」設定）
次に、非同期読み込みの設定をするCSSファイルを選択します。
メインCSS（style.css）を非同期読み込みにする
メインCSS（style.css）は、その名のとおりサイトのデザインやレイアウトなどの情報が入っているファイルです。
投稿・固定ページ用CSS（content.css）を非同期読み込みにする
投稿・固定ページ用CSS（contetn.css）は、投稿・固定ページを編集する際に使用する見出しの文字の大きさや段落の位置、スタイル（ドロップダウンリスト）に入っているマーカーやボックスなどのデザイン情報が入っているファイルです。
アイコンフォントCSS（icon.css）を非同期読み込みにする
アイコンフォントとは、簡単にいうと「アイコンを表現出来るWebフォント」です。
Webフォントとは、クラウド上にあげられたフォントデータを読み込むことでホームページに反映させる仕組みを指します。
『LION MEDIA』で使われているアイコンフォントは「IcoMoon」というWebフォントが使われています。
使われているアイコンフォントは１６種類。
どこかで見たことありますよね。アーカイブ記事などで使われています。
GoogleフォントCSS（Lato）を非同期読み込みにする
Googleフォント「Lato」はWebフォントなので、PCにインストールされているフォントに依存することなく、クラウド上のファイルを読み込めば表示されるという仕組みです。
しかし、何らかの障害が発生し、Gooleフォントファイルの読み込みが出来なかった場合に備え、『LION MEDIA』では複数のフォントが指定されています。
『LION MEDIA』で指定しているフォントの種類
Lato、游ゴシック体、Yu Gothic、YuGothic、ヒラギノ角ゴシック Pro、Hiragino Kaku Gothic Pro、メイリオ、Meiryo, Osaka、ＭＳ Ｐゴシック、MS PGothic、sans-serif
フォントは、スタイルシートに記述されている順番どおりに指定されるので、１番目「Lato」、なければ２番目の「游ゴシック体」というような使われ方をします。
「Lato」には英数と限られた記号しか含まれていないので、『LION MEDIA』を使って、日本語サイトを作った場合は「Lato」と「游ゴシック体」が併用して使われます。もし「游ゴシック体」がインストールされてなければ次のフォントが使われるということです。
こはる的には・・・
「メインCSS」「投稿・固定ページCSS」
チェックを入れるのは、デザインが崩れそうでコワい・・・。
「アイコンフォントCSS」と「GoogleフォントCSS」
ちょっとぐらい読み込みが遅くてもいいかなぁって思います。
あー、ちょっと難しかったので疲れました。みなさんもお疲れさまでした。
次のテーマは、『LION MEDIA』カスタマイズ【SNS・OGP設定】の使い方についてです。