LION MEDIA標準機能デモサイト
私の御託を聞くよりも、まずLION MEDIAのCSSやphpを一切いじっていない標準機能だけで作成したデモサイトをご覧ください。あくまでデモサイトなんで記事の中身は適当です（３、４記事くらいまでは多少真面目に作りましたが、ガジェット自体そこまで得意な分野ではないので残りの記事は体裁だけです）。
PC版トップ画面イメージ
（クリックで別ウィンドウ表示）
PC版記事画面イメージ
（クリックで別ウィンドウ表示）
モバイル版トップ画面イメージ
（クリックで別ウィンドウ表示）
モバイル版記事画面イメージ
（クリックで別ウィンドウ表示）
デモサイトを見てなんとなく気付いた方もいるかもしれませんが、本サイト「brighter stories」もLION MEDIAを使用しています（多少手を入れていますが）。
LION MEDIAとは
LION MEDIAはフィット株式会社が提供する無料のWordPressテーマです。
公式の説明をそのまま引用すると次のような特徴があります。
LION MEDIA(ライオン メディア)は、AMP対応・SEO最適化・レスポンシブ・高機能。そして、表示速度が速い、無料のデザイナーズ WordPressテーマです。全体としてメディアサイト向けに作っていますが、個人ブログなどでももちろん利用できますし、カスタマイズ次第で様々なタイプのサイトに利用できるテーマになっています。
http://lionmedia.fit-jp.com/
平たく言うと「デザインはかっこいいし、SEO対策もAMP対応もレスポンシブデザインも全部やってくれる高機能テーマなのに無料！」という夢のようなテーマです。基本デザインがブログ形式なのでブログ形式のメディアサイトに向いています。
ベースデザインがスタイリッシュな印象なのでサンプルサイトのようにガジェットやTech系は相性がよく、標準機能だけでも結構見栄えのするサイトを作ることができます（だから得意分野でもないのにガジェットでサンプルサイトを作ってみました）。
機能的にもグローバルナビと言われるメニューやトップページのピックアップ記事、ランキングウィジェットやCTAボックスなどがプラグイン無しで標準機能として提供されており、AdSenseやAnalytics、SearchConsoleなどのタグの設定やheaderタグ内の記述をFTP転送やphp編集無しで行えるなど、初心者から上級者まで満足な機能が至れり尽くせりで付いています。
その上でSEOにも強いサイト構造やモバイル画面表示に対応したレスポンシブデザイン、モバイルページの高速表示技術であるAMPにも対応していて、これで何で無料なのか不思議なレベル、ということで私も愛用させていただいているとても素晴らしいテーマです。Fitさん本当にお世話になっております。
難点を挙げるとすれば、テーマの完成度が高いのでいくらカスタマイズしても見る人がみたらLION MEDIAを使っていることがすぐわかるというところくらいでしょうか。LION MEDIA感を消そうとすると余計なカスタマイズになる場合もありますし、そこまでするなら他のテーマ使えよと言いたくなることも。
LION MEDIA標準機能解説
賛辞はこれくらいにして、「私もLION MEDIAでWebサイトを作りたい！」という方にこれから２段階でLION MEDIAでのサイト作成をレクチャーしていきたいと思います。
まず第１段階として先ほどのデモサイトを例にLION MEDIAの標準機能を説明していきたいと思います。標準で実装されている機能が多いので紹介しきれない部分もありますが、可能な限り多くの機能を説明していきたいと思います。
| 設定その１ | サイト全体の設定 |
|---|
| 設定その２ | メインページヘッダー・記事一覧の設定 |
|---|
| 設定その３ | サイドバー・フッターエリアの設定 |
|---|
| 設定その４ | 記事ページ・カテゴリ等の設定 |
|---|
LION MEDIAカスタマイズ解説（※準備中）
標準機能に飽き足らない人、もっと独自性を出したい人、もうちょっと手を加えたい部分がある人向けにCSSやphpをいじるカスタマイズをレクチャーしていきます。
カスタマイズは標準機能以上になんでもありなのでこちらもデモサイトを準備しました。
標準機能のデモサイトを元に手を入れたものです。LION MEDIA特有の記述中心の説明になっていますが、ここで解説する以外の箇所も手を加えることは可能ですし、LION MEDIAに限らずWordPress全般で共通したカスタマイズ事例はその都度別記事のリンクを貼っていこうと思います。
| カスタマイズ その１ |
メインページヘッダーのカスタマイズ |
|---|
| カスタマイズ その２ |
サイドバー・フッターエリアのカスタマイズ |
|---|
| カスタマイズ その３ |
記事ページのカスタマイズ |
|---|
