副業で稼ぐ

WordPressテーマ「LION MEDIA」の使い方やメリット・デメリット

つい先日ツイッターでこんなことを話しました。

「コンテンツ部分だけ残して、ヘッダー部分は自作したろ」とか思ってましたが、やめました。

いい感じのワードプレステーマを見つけてしまったので。

それがこちら。

LION MEDIA

lion media

2/16追記

2/15にver2.0.0がリリースされたようです。詳しくはこちら。

LION MEDIA Ver2.0.0リリース!新機能のご案内と注意事項

注目すべきは「カスタマイザーからインフィード広告登録枠を追加できる」「CTAを追加できる」「投稿ページの見出し・マーカー・ボックスデザインが大幅に追加」ですね。

アドセンスのインフィード広告登録が、カスタマイザーからコピペで登録できちゃうのは非常に楽です。

CTAもブログ全体で売りたい・押したい商材があったりするといいですね。

例えばブログノウハウやWordPressテーマ、LINE登録、Facebook登録、Twitter登録、高単価のアフィリエイトなどでしょうか。

投稿ページのデザインはお好みで。ボタン一発で選べると自分でCSS書くより愛着度が減りますが、時は金なりですね。

 

LION MEDIAでできること(2018.3.14追記)

とにかく簡単にできるようになることが、たくさんあります。

あまりに多いため公式サイトから引用させていただきます。

  1. NO JavaScript(CSSの非同期読み込み機能と、ヘッダーのメニュー切り替えのみにJavaScript使用)
  2. W3Cの規格に基づくマークアップでエラーなし
  3. モダンブラウザに最適化のため、IEは非対応(11は表示されると思う)
  4. 管理画面の投稿・固定ページのビジュアルエディタは、実際に表示されるデザインとほぼ同じ
  5. 管理画面の投稿一覧に、IDと閲覧数、サムネイル画像を表示
  6. 管理画面の投稿一覧は、閲覧数で並び替え可能
  7. 管理画面からテーマの更新が可能
  8. 簡易お問い合わせページが標準で備わっている
  9. 固定ページを利用してランキングページを作成可能
  10. パンくずリストと投稿記事は構造化データを用いたマークアップ済み(schema.org)
  11. 記事上、記事下用のウィジェットエリアがある
  12. フッターは、左、中央、右の3か所にウィジェットエリアがある
  13. TOPページ用のウィジェットエリアがある
  14. サイドバー固定表示用ウィジェットエリアがある(スクロールに追尾)
  15. 広告用ウィジェットアイテムがある
  16. 人気記事用ウィジェットアイテムがある(表示件数自由)
  17. 画像付き最新記事ウィジェット搭載(通常の新着機能ウィジェットをカスタマイズ)
  18. 必要十分な細かなSEO対策が施せる(ページ単位でdescriptionやmeta robotの設定が可能)
  19. CSS非同期読み込みが選択可能(レンダリング速度が速くなる)
  20. OGPの設定もカスタマイズが可能
  21. 検索対象を「投稿・固定ページ」「投稿ページのみ」「固定ページのみ」と切り替えられる
  22. アーカイブページに利用される投稿の抜粋文字数を指定可能(抜粋表示は<!–more–>が優先)
  23. レイアウトを1カラム2カラムと選択可能(アーカイブ・投稿・固定ページすべて設定可能)
  24. カテゴリアーカイブページにカテゴリの説明文章を表示可能
  25. ロゴを設定可能(ロゴが無い場合は【設定】→【一般】の「サイトのタイトル」を表示)
  26. ヘッダーに注目検索キーワードを設定可能
  27. トップページにピックアップ記事を設定可能(3件表示)
  28. トップページにランキングボックスを表示可能
  29. トップページに全カテゴリの新着(1件)表示ボックスを表示可能
  30. 投稿者のプロフィールを簡単にカスタマイズ可能
  31. copyrightを自由に書き換え可能
  32. copyright下のリンクや文字列を非表示にできる
  33. AMP対応(通常ページとデザインがほぼ同じ)
  34. AMPページがGoogleの検索結果でカード表示された時用のロゴ画像を設定できる
  35. AMPページでも記事上と記事下に広告が設置可能
  36. AMPページ用にTwitter、Instagram、YouTubeの埋め込みが自動で変換される
  37. 投稿ページの投稿者情報の表示/非表示の選択が可能
  38. 投稿ページの同一カテゴリ新着6件の表示/非表示の選択が可能
  39. 投稿ページの目次の表示/非表示の選択が可能(目次は専用のショートコードで表示場所を自由に変更可能)
  40. 投稿ページの関連記事の表示/非表示の選択が可能(表示数も1から10で選択可能)
  41. 投稿ページのシェアボタンの表示/非表示の選択が可能(シェアボタンもJS不使用で軽量)
  42. 投稿ページのシェアボタンの表示項目が6つある(Facebook、Twitter、Google+、はてぶ、Pocket、LINE)
  43. Google AnalyticsはトラッキングIDだけあれば設定完了
  44. AMPページ用のGoogle AnalyticsのトラッキングIDも登録可能
  45. Google Search Consoleも認証IDだけで設置可能
  46. 2パターンあるベースデザインはすべてハイクオリティ
  47. 無限に選べるテーマカラーと、様々なカスタマイズを駆使すればオリジナリティを表現可能
  48. 【追加】Ver.1.1.0から記事アーカイブに表示するタグ数を制御できる機能を追加
  49. 【追加】Ver.1.1.0からダブルレクタングル広告を簡単に表示できる機能を追加
  50. 【追加】Ver.1.2.0から</head>と</body>タグの直上に自由にタグを記述できる自由入力エリアを追加
  51. 【追加】Ver.2.0.0からHeader最上部にお知らせを表示する機能を追加
  52. 【追加】Ver.2.0.0から投稿日の表示/非表示機能追加
  53. 【追加】Ver.2.0.0から記事の終わり部分にCTAエリア追加
  54. 【追加】Ver.2.0.0からインフィード広告登録枠を追加
  55. 【追加】Ver.2.0.0から記事中にアドセンス等の広告を挿入するショートコード追加

引用:LION MEDIA公式サイトより

ブログのカスタムが、ある程度はCSSをいじらずカスタマイザーからできます。

すっごい簡単すぎて泣けてくる・・・!カスタムに時間をかけるくらいなら、記事を書け!ということなんですね。

ありがとうございます!FITさん!(深々)

LION MEDIA公式サイトを見てもらえば分かる通り、特にカスタムせず使っても素晴らしいデザインのブログが作れちゃいます。

SANGOストーク、ATLAS作者とアフィリエイターのひつじさんが共同開発し、最近リリースになったJINなどもオシャレなテーマですが、あちらは有料。

こちらは無料でこのクオリティ。

すごいです。最近増えてるマネタイズの方法、フリーミアムというわけでもないのに。しかもこの更新頻度。

フリーミアム(Freemium)とは、基本的なサービスや製品は無料で提供し、さらに高度な機能や特別な機能については料金を課金する仕組みのビジネスモデルである。

引用:Wikipediaより

特にJINやSANGOのようなマテリアルデザインだと、リアルな写真などをアイキャッチにすると少し浮いてしまいますが、LION MEDIAなら写実的な感じでもOK。

ブログ アイキャッチ

むしろ、そういうアイキャッチのほうがマッチします。

LION MEDIAの使い方(2018.5.17追記)

LION MEDIAはほとんどの設定をカスタマイザー(外観>カスタマイズ)から行えます。

LION MEDIAのカスタマイザー

しかし、開いてみるとカスタマイズ項目が多く、どこから設定したらいいか迷うかもしれません。

多いね

僕の場合はですが、順序としては「収益に関係するもの>アクセスに関係するもの>見た目に関係するもの」という感じで行なっていきます。

なぜかと言うと、お金が一番大事だから(笑)

その次がアクセス。

最後がデザイン。

デザイナーやのに(笑)

というわけで、広告設定[LION用]から見ていきましょう。

LION MEDIAカスタマイザーの広告設定[LION用]の使いかた

なんと!

LION MEDIAは初めから、アドセンス用の「記事内広告」「アーカイブ用インフィード広告」「記事下用ダブル広告」「AMP用広告」の枠があります。

広告設定 [LION用]

テーマ編集からsingle.phpをいじったりしなくていいわけです!

これは非常に便利!

その分、場所の入れ替えなどには対応できないですが、とりあえず記事内とインフィードと記事下ダブルレクタングル入れとけば間違いないっしょ!というFITさんからのメッセージにも感じます。

まぁ実際、アドセンス始めたてのうちは全く問題ないと思います。

アドセンスの登録方法や設定方法などは、こちらが詳しいですのでご参照ください。

※その他の項目も順次追加していきます!

Lion Mediaを選んだポイント

僕が個人的にいいな、と思ったポイントです。

初めからなんとなく完成形をイメージしていたので、それが日本製のテーマであったのは助かりました。

子テーマがある

CSSやsingle.phpなどは結構いじることがあります。

更新が頻繁にあるテーマだと、直でいじると修正した内容が上書きれてしまいます。

そういった時に、子テーマがあると便利。アップデートしても、修正した変更が消えることがありません。

子テーマのダウンロードはこちらから

親テーマと同じ階層に入れておけば、テーマを子テーマに選択できちんと反映される。

なお、アップデートが合った場合も、上書き修正される心配がありません。

シングルカラムと2カラムを選べる

一番のポイントはここです。

シングルカラムはよく、「バイラルメディア向き」「直帰率が上がる」「アドセンスの収益が下がる」

などの論争がありますが、そもそも僕には関係ないすわー!

下がるほどの収益もないし|ω・`)

結局スマホだったらシングルカラムだし、PCも同じほうがいいでしょ。

CTAも記事下しか動きないんじゃないかな、という謎の仮説のもと断行。

すると意外な結果が。

ほーらね(ドヤ顔

ただのアナリティクスの二重記入でした・・・(恥

とはいえ、ちゃんと修正してからも直帰率は下がっております。

具体的には20%ほど。やっぱり2カラムだと記事に集中できないんですよきっと。うんうん(ドヤ顔

2018.3.14追記 やはり離脱率が高かったので、2カラムに変更しました。

ヘッダーにオススメ記事を配置できる

スマホでもサイズ感を変えずに入れられるのが良いですね。

アナリティクス見てると、やっぱり一度はホーム画面に来てくれる人が多いです。

どんなブログやねん、みたいな感じで興味を持ってくれるんでしょうか。

そこでオススメ記事をバーンと見せられると直帰率も下がるのかな、と。

グローバルメニューがレスポンシブでいい感じ

以前使っていたsimplicityは、スマホ版のグローバルメニューがハンバーガーアイコンでした。

こんなの↓

ハンバーガーアイコン

これでも悪くは無いんですが、PC版に比べ一覧性が良くないというのがありました。

つまり目的のカテゴリーに行くのに、2ステップかかってしまうということ。

初めから見えていれば、1ステップで目的のカテゴリーに行けるので便利ですね。

Lion Mediaの修正したいポイント

グローバルメニューの固定

スクロールさせた時に上のメニューが追従してこないのが、ユーザビリティ上いまいちなので改修しました。

lionmedia動画

記事途中でもグローバルメニューが出てる状態にする、ということですね。

これをすると直帰率の改善になる!気がします。

CSSをちょっと追加するだけなので簡単ですね。いずれ記事にします。

しました↓

ページャーの表示数が少ない

ここです↓

ページャー

2ページ目とか3ページ目を見たい時にNEXTを2回・3回と押さないといけません。

これもユーザビリティの問題で、あまりよろしくないですね。

これはPHPの修正なのかな?

なるべくプラグインは使いたくないので、function.phpを触らないとですね・・・

※2018年5月21日追記

lionmediaページネーション

親テーマにあるfunctions.php「オリジナルページネーションを作成」の項目、

(5313行目) ‘mid_size’ => 0,

‘mid_size’ => 2,

に変更すれば、現在のページの前後2ページが表示されるようになります。

「全部表示させたい!」という場合はページ数以上の数字にすればOK。

お試しください。

マウスオーバーでグローバルナビからサブメニューが出るようになって欲しい(2018.3.14追記)

OPEN CAGEスクリーンショット

ストークのように、マウスオーバーでサブメニューが出るようになったら最高ですね。

親カテゴリーだけの表示だとどうしても情報の深度が浅いため、踏まれなくなる気がするんですよね・・・。

HTMLとCSSだったら楽勝でできるんですが。。。PHPなので手をこまねいています。

時間がある時チャレンジしてみようと思います。

function.phpさわるのこわ〜〜い!!!

本日のまとめ

使い始めてからまだ1週間経っていませんが、導入してから1ヶ月以上経ちましたが、Lion Mediaかなりいい感じです。

目に見えて離脱率も減りましたし。

部分的に改修するところはまだまだありそうですが、とりあえずこのテーマを使い倒していこうと思います。

WordPressテーマ、Lion Mediaのダウンロードはこちらから。

もっと便利に使うカスタマイズ方法もご紹介しています。

それではまた。

ヤマダ

この記事が役に立ったら、シェアorはてブしてくれるとメッチャ喜びます!

この記事が気に入ったら
いいね ! をお願いします

Twitterでもデザインや日々のことをつぶやいています。
ABOUT ME
ヤマダカイト
都内メーカーでweb・グラフィックデザイナーとして働きながら、リンカイ-デザインという屋号でデザインしたりブログ書いています。デザインを使って何ができるのか、を考えるのが得意です。 将来は複業家として東京×長崎の二拠点生活をします。 詳しいプロフィールはこちら

POSTED COMMENT

  1. BAN より:

    ありがとうございます!

    私も最近Lion Blogを使い始めたんですが、
    お陰様でページ数の変更設定が出来ました。

    • kaito68 より:

      BAN様
      ご覧頂きましてありがとうございます!
      お役立ていただけて何よりです。

  2. K より:

    こんにちは。

    このサイトのように、Lion media のメインフッターで、〜 by FIT-Web creat および、powered by word pressの表示を削除し、copyright だけ残す方法を教えて頂けませんでしょうか?

    • kaito68 より:

      K様
      こんにちは!
      ご覧頂きましてありがとうございます。

      Copyrightの設定ですが、wordpressの管理画面から外観>カスタマイズと入っていただくと、基本設定 [LION用]という項目があります。

      クリックしていただいたあと、■Copyrightの設定という項目がありますので、そこの「Copyrightの下に表示されるFITおよびWordPressへのリンクを非表示にする」にチェックを入れていただければ、上記のテキストは消えると思います。

      お試しくださいませ。

  3. qk9 より:

    知識の泉、ページャーの表記は困ってたので助かりました。

    • kaito68 より:

      qk9様
      ご覧いただきありがとうございます!
      ページャーの表記変更、わかりにくいですよね。もっとカンタンに変更できればいいのに・・・!
      変更できたようで良かったです!

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です