LION MEDIA（ライオンメディア）は、2017年10月のリリース以降wordpressの無料テーマとして一気に人気テーマのひとつになりました。
webmoでもおススメ無料テーマとしてご紹介をしたところ、検索クエリにすぐ反響が出ました。
ということで、LION MEDIAの超基本カスタマイズ設定を一つずつ、画像付きで解説します。
少し長いですが、このページ通りに設定すればイイ感じのレイアウトになるので頑張って最後まで設定してみましょう。
テーマを反映させる
前提条件として、LION MEDIAのテーマをすでに入れている状態とします。まだダウンロードしてないという方はこちらからダウンロードをしてください。
子テーマを有効にする
LION MEDIAは親テーマと子テーマが用意されています。両方インストールをしますが、子テーマを有効化してカスタマイズを行います。
まずウェジット
wordpressの基本的なレイアウトはウェジットで操作します。LION MEDIAのウェジットは下記のような内容になっています。
始めは、最低限の設置にしてレイアウトを確認したいので下記を参考に同じようにしてみてください。
通常サイドバーエリア
- 人気記事ランキング
- 記事カテゴリ
通常サイドバーエリアは、PCなら右カラムに表示される部分です。スマートフォンでは記事アーカイブ(記事一覧)の下に表示されます。あなたのwebサイトに訪れたユーザーに、他にどんな記事があるかを紹介するスペースになるので人気記事や新着記事が表示されるようにしましょう。ユーザーは記事タイトルを見て、興味がある内容かを判断するのでタイトル付けは普段からキャッチーにしましょう。
左フッターエリア
- グローバルナビメニュー（サイト情報・お問合せ・サイトマップなど）
左フッターエリアは、PCなら最下段の左側スペースに表示される部分です。スマートフォンでも最下部に表示されますが左フッター・中央フッター・右フッターと縦に並びます。
一般的なwebサイトは、最下段にサイト情報やサイトマップを表示しているので同じように表示することでユーザーに安心感を与えることができます。
その他は一旦外しておく
LION MEDIAでは、ウェジットで記事上エリア・記事下エリアにもコンテンツの配置を行うことができます。この設定は後で行うようにして、次に進みます。
カスタマイズ
おまちかねのカスタマイズです。左側メニューの外観 > カスタマイズ で画面を切り替えます。
カスタマイズの画面では左側がカスタマイズメニュー、右側がプレビュー画面となっています。下記がデフォルト（初期設定）のwebサイトレイアウトです。
すでに良い感じですが、さらに見やすくオリジナリティも少し加えていきましょう。
基本設定【LION用】
ここでは下記の設定を行います。サイトの印象が変わる部分が多いのでひとつずつ見ていきましょう。
- 検索機能の検索対象
- アーカイブページの抜粋文字数
- アーカイブページのタグ表示件数
- レイアウト設定
- Copyrightの設定
- 最初に開くメニューを選択
- ロゴ画像の設定
検索機能の検索対象
LION MEDIAは、webサイトのTOPページ上部（ヘッダー部分）に記事検索が設置されています。
ここでは、キーワード検索されたときにどのページを対象にするか設定できます。一般的に固定記事はサイト自体の情報が掲載されることが多いので検索対象から外しても良いでしょう。
アーカイブページの抜粋文字数
ここでは、TOPページなどに表示される記事一覧の中の抜粋文字数を設定します。下記のように文字数を50まで減らすと、ファーストビューで見える記事が増えますね。前述の画像と比較してみてください。
アーカイブページのタグ表示件数
ここでは、記事一覧に表示される記事と一緒に表示されるタグの数を制限できます。しかし、タグ自体利用していない方が多いと思いますのでスルーでも問題ありません
レイアウト設定
ここではPC表示のレイアウトを変更します。デフォルトでは、2カラムレイアウトになっており、右サイドスペースがありましたが、１カラムにすることも可能です。
スッキリ見せたいときは１カラム、多く情報を見せたいときは２カラムと使い分けができますがwebmoでは２カラムを採用します。
TOPページと同じように投稿ページ（記事ページ）や固定ページも変更が可能です。
ユーザーのサイト遷移を考えると、２カラムのほうがコンテンツが多く表示されるため滞在時間が長くなりやすいです。検索で記事ページに直接入ってくるユーザーのほうが多くなりますから、あなたの記事内容に合わせて変更しましょう。
1カラム時のメインカラムの横幅を選択はそのままでOKです。
Copyrightの設定
コピーライトはwebサイトの著作権を宣言する部分です。フッター(最下部)に表示されています。
デフォルトでは、コピーライト表記の下に、LION MEDIAの制作元であるFITの表示があります。感謝を込めてこのまま表示をしていても良いですし、チェックボックスにチェックをいれるだけで表示を消すことも可能です。
最初に開くメニューを選択
ここでは、ヘッダーの表示内容の設定を変更できます。
Gナビメニューは、グローバルナビのことであなたのwebサイトの大枠のメニューです。メニュー内容の編集は別画面で行えます。通常は右上の三本線メニューで開きますが、このように最初から表示をさせることもできます。
ここでは、デフォルトの記事検索を表示させておきます。
ロゴ画像の設定
LION MEDIAのデフォルトでは、ヘッダー左側に白い文字でサイト名が掲載されています。ここをロゴ画像に変更します。
PING形式で保存された縦60×横340pxの画像を用意してください。
画像を選択で画像のアップロード画面に切り替わります。
- ファイルをアップロード
- メディアライブラリで画像を選択
- 代替テキストの入力
- 画像を選択
の順で設定してください。
これでサイト名がテキストからロゴ画像に変わりました。
ここまでの設定でメディアらしいwebサイトになってきましたが次の記事でもう少し基本設定を続けます。
LIONMEDIAのカスタマイズシリーズ更新中です。
LION MEDIA カスタマイズ超基本編（この記事）
LIONMEDIAカスタマイズ 超基本編３ デザインスキン設定
LIONMEDIAカスタマイズ 投稿スキン設定で見出しデザインを簡単変更