LION MEDIA カスタマイズ設定の使い方［LION用］全17設定

WordPressテーマのLION MEDIAを使い始めて２か月が過ぎましたが、私ふと思いました。

「カスタマイズ設定の記事を書いてない…」

という事で、LION MEDIAをインストールしてからの設定に合わせて、設定の使い方も記事にしたので、これからLION MEDIAの設定を始める人がいたら読んでみてください。

LION MEDIAのカスタマイズ設定をするには、LIONMEDIAの子テーマと親テーマをインストールする必要があるので、インストールがまだの人はLION MEDIA インストール方法が参考になります。よければ使ってください。

この記事だけでLION MEDIAのカスタマイズ設定が全部できます。

そのため、長い記事になっているので必要なカスタマイズ設定だけを知りたい場合は、目次から該当するLION MEDIAの設定に進んでください。

LION MEDIAの設定は「管理画面」⇒「外観」⇒「カスタマイズ」の順に進んでください。

基本設定［LION用］

■検索機能の検索対象

LION MEDIAには検索ボックスが設置できます。

その検索ボックスに訪問者さんがキーワードを入れるとキーワードに合う記事が表示されます。

検索機能の検索対象の設定は、検索ボックスでキーワード検索された検索結果をどの範囲までにするか選択できる設定です。

• 固定ページと投稿(default)
• 投稿だけ
• 固定ページだけ

LION MEDIAの設定で選択できる項目は上記３点ですが、デフォルトの「固定ページと投稿」が良いと思います。

■アーカイブページの抜粋文字数

アーカイブの投稿の抜粋文字数を決めることができます。

LION MEDIAのトップページやカテゴリーアーカイブ、タグアーカイブで表示される記事の説明を抜粋して表示させてある部分です。

アーカイブページの抜粋文字数の設定で、説明部分の文字数を「20文字～500文字以内」で変更できます。

20文字で設定すると寂しすぎます。

500文字の設定だとしつこいです。

「80～100文字」に設定するとベストな感じでした。

■アーカイブページのタグ表示件数

1記事に対して複数のタグを選んでる場合、タグ表示を何個アーカイブページで表示させるかを設定できます。

アーカイブページの見た目を考えてタグ表示件数は「２タグ」くらいで良いかな？と思います。

ちなみに私は1記事に1タグで設定してます。

■レイアウト設定

LION MEDIAのレイアウト設定はサイトの見た目が大きく変わります。

設定できるレイアウトは「2カラム」と「1カラム」です。

• アーカイブページのレイアウト
• 投稿ページのレイアウト
• 固定ページのレイアウト

上記3か所のレイアウトを2カラムか1カラムに設定するのですが、2カラムの設定だとサイドバーが表示されて1カラムの設定だとサイドバーなし表示になります。

1カラムにするとサイドバーが表示されない。

２カラムはサイドバーが表示される。

LION MEDIAを使用してどんなサイトにするかでもカスタマイズ設定は変わりますが、2カラムで設定してサイドバーを活用すると、サイト内の情報を多く発信できるので2カラムがベストかと思います。

■記事ビューレイアウト設定

アーカイブページの記事ビューレイアウトが設定できます。

• ノーマル(default)
• ワイド
• ノーマル(PC)ワイド(スマホ)

ノーマルのレイアウト表示は２列表示です。ノーマルに設定するとPC表示でもスマホ表示でも2列表示されます。

そしてワイドで設定したレイアウトは１列で、見え方が「デカっ！」こんな感じです。

• インフィード広告を貼らない人はノーマルで設定
• インフィード広告を貼る場合はノーマル(PC)ワイド(スマホ)で設定

この設定がベストでありんす。

何故かというと、LION MEDIAはインフィード広告を貼ってノーマル設定にしてしまうとスマホ表示でサイトを見たときインフィード広告が表示されません。

スマホユーザーが多いという事から考えるとスマホ表示で広告が表示されないのは痛いですよね。

なので、インフィード広告を使用するならノーマル(PC)ワイド(スマホ)の設定がベストです。

■お知らせヘッダーの表示選択

LION MEDIAのヘッダーの一番上にお知らせとして表示させることができる設定です。

例えば、物販サイトだとして数量限定商品の入荷をお知らせしたりとかですかね。

正直、私のサイトではお知らせヘッダーを使ったことがないのでイメージでしか使い方が分かりません。

お知らせヘッダーの設定方法は「お知らせヘッダーの表示選択」で設定します。

• 表示
• 非表示

が選択できるので表示を選択してお知らせ表示させる文章を入力します。そしてお知らせしたいリンク先のURLを入力するだけでヘッダー上部に表示することができます。

そして、お知らせヘッダーの表示カラーも背景色を指定で好きなカラーに変更可能です。

■カテゴリー・タグ説明の表示設定

カテゴリーとタグを決めるときにカテゴリー名、タグ名をそれぞれ決めますが、その時にスラッグを決めてカテゴリーとタグに説明文が記入出来ます。

その説明文をどこに表示させるかという設定です。

• meta description
• アーカイブページ
• 両方で表示

上記3点の中から選んで設定できます。

両方で表示に設定しておくのがベストと思われます。

LION MEDIAの、この設定はカテゴリーとタグを決める時に説明文も書いておかないと表示されないので説明文も表示させたい場合は、WordPressのカテゴリー設定やタグ設定から、しっかり書いておきましょう。

■copyrightの設定

「著作権」のことです。

「このWebサイトには著作権があるから勝手にコピーしないでください」という意味で使います。

copyrightをサイトに記述する必要がないという事も聞いたことがありますが、著作権に対して見て分かりやすいほうが良いのですね。

copyrightの表示位置はフッター左下で表示。

copyright表示される部分はLION MEDIAをインストールしたばかりは上記の画像のように「FIT-Web Create」と「WordPress」のリンクも表示されてます。

この2つのリンクを非表示にする場合はcopyrightの設定でチェックを入れると表示されなくなります。

■最初に開くメニューを選択

サイトを表示した時に最初に表示されてるメニューを「検索メニュー」か「Gナビメニュー」にするか設定できます。

検索メニューで設定した場合は検索窓が表示されます。

Gナビメニューで設定した場合はメニューで設定したコンテンツが表示されます。

「Gナビメニュー」がおすすめです。

■ロゴ画像の設定

サイトのロゴ画像が設定できます。

設定できる画像のサイズは縦60×340pxの透過PING画像を使ってください。との説明があります。

「ロゴジェネレーター無料」でググるとロゴを簡単に作るサイトが見つかります。

実際に作った画像をLION MEDIAのロゴ画像の設定で登録すると反映されるので、自分に合ったロゴを作ってカスタマイズしてみてください。

基本機能設定［LION用］

■注目キーワード設定

ヘッダーナビの検索窓を表示した時に左側に注目キーワードを表示することができます。

表示できる注目キーワード数は5個。

LION MEDIA基本設定でGナビメニューを検索メニューに設定できる設定がありましたが、その設定にした場合は注目キーワードがトップページのファーストビューに飛び込んでくるので目立ちます。

Gナビでも検索窓でも注目キーワードは設定しておいたほうが良いですが、まだ記事を書いてない場合だと注目キーワードを設定しても注目キーワードからの検索結果記事がないので、ある程度の記事数になったら注目キーワード設定をしてみてください。

■TOPピックアップ記事

ピックアップ記事は表示を「有効/無効」を選択できるカスタマイズ設定です。スマホ表示の時だけ非表示にすることも可能です。

LION MEDIAのピックアップ記事はトップページのヘッダーナビの下に3記事が表示できます。

TOPピックアップ記事の設定にピックアップ記事１～３まで記事のIDを入力するとヘッダーにピックアップ記事として表示されますが、せめて3記事書いてからじゃないと、どう表示されるかが体感できないので記事を書きましょう。

ピックアップ記事を好きな記事で指定したいときは投稿一覧を表示させて指定したい記事IDをTOPピックアップ記事の設定に入力します。

投稿一覧で記事IDが表示されないときは

投稿一覧の上部にある「表示オプション」をクリックして「ID」にチェックを入れると表示されます。

LION MEDIAのトップページはピックアップ記事、その下にTOP記事アーカイブ、2カラム設定ならサイドバーにも記事のアイキャッチが並ぶこともあります。

そうすると少しごちゃごちゃ感を感じることもあるかもしれませんが、ピックアップ記事の設定を有効にしてLION MEDIAピックアップ記事をヘッダー画像にカスタマイズも出来ます。良ければ今後の参考にしてください。

■TOPランキングボックス

トップページの下部に記事をランキング形式で1～10位までを横スクロールで表示できる設定です。

設定は有効にしてから、ランキング表示したい件数を決めれば終わりです。

もし、ランキングボックスのタイトルを変更したい場合は、ランキングボックスのタイトル指定で好きに変更が可能です。

この設定も記事数を先に増やしておかないと表示が確認できないので記事を書いてみてから設定してみてください。

それとランキング記事なので当然なのですが、サイトの記事のアクセス数で順位は変動するので、ランキングに変動があった場合は記事のリライトのキッカケにもなります。

■ランキングページの表示件数

LION MEDIAのランキングページの表示件数設定は、さっきのTOPランキングボックスとは違うもので、固定ページを使ってランキングページを作る設定です。

設定方法は管理画面から固定ページをクリックして固定ページの属性⇒テンプレートでランキングTPLを選択すると固定ページがランキングページになります。

そして、ランキングページの表示件数の設定で出来る設定は

• ランキングの表示件数を決めることが出来る

好きに表示件数を決められますが未入力だと10位まで表示されます。

• 固定ページで作ったページIDを入力してリンクボタンを表示できる

IDは固定ページで作った固定ページのURL、もしくは固定ページ一覧からIDが分かります。

LION MEDIAの固定ページで作ったページIDを入力するとランキングボックスの右下にランキングページのリンクボタンが表示されます。

私がランキングで思う使い方は、TOPランキングボックスは5位くらいまで表示しておいて、ランキング形式でもっと見たいと思った人のために「ランキング一覧へ」のリンクでランキングページをもっと見てもらう感じが理想かなぁ？とイメージしてます。

■TOPカテゴリ最新記事ボックス

設定を有効にすると、カテゴリーボックスがトップページで表示されます。

LION MEDIAのTOPカテゴリ最新記事ボックスの設定でできること

• カテゴリーボックスのタイトルを変更可能

カテゴリーボックスを表示させた時のボックスタイトルが好きに変更できます。

• カテゴリー最新記事ボックスから除外したいカテゴリーを除外

除外方法はカテゴリーIDを入力しますが除外したいカテゴリーが複数ある場合は、カテゴリーIDをカンマ「 , 」で区切って入力します。

カテゴリーIDの調べ方は、管理画面のカテゴリーから除外したいカテゴリーを編集にしてURLを見ると番号があるので、その番号を入力です。

カテゴリーを親と子で階層にしてる場合、最新カテゴリー記事が同じになってしまうことがあり、TOPカテゴリー最新記事ボックスに同じ記事が表示されてしまいます。

そのときに除外をして表示を調整できるカスタマイズ設定でもあります。

■カテゴリTOP説明文

設定で有効か無効を選択できます。

有効にすると、カテゴリーアーカイブページの上部にカテゴリーで説明文を入力した文が表示されます。

カテゴリーヘッダーをカスタマイズしているので、画像ではカテゴリー説明文が出ていませんが設定で有効にするとカテゴリー名の下に説明文が表示されます。

カテゴリー設定の説明文を入力して表示させてみてください。

それと、カテゴリーにある記事の中からピックアップ記事として説明文の横に表示されます。

LION MEDIAは設定でカテゴリーのカラーをカテゴリーごとに設定できるので上手に配色すれば設定を有効にして使うほうが良いです。

設定を無効にすると、カテゴリー名だけが表示されるだけになります。

SEO設定［LION用］

■トップページの<title>

トップページのタイトルを入力します。

タイトル決めは重要です。これからどんな記事を書いてどんなサイトにしていくかなどをイメージしてタイトルを付けてみたり、狙っているキーワードをタイトルに含めてみたりバランスの良いタイトル決めをして設定してみてください。

TOPページ<title>を入力しない場合はWordPressの設定⇒一般にある「キャッチフレーズ｜サイトタイトル」の形で表示されます。

■TOPページの<meta description>

meta descriptionはトップページがGoogleの検索結果の表示の時に、タイトルの下に表示される説明文がmeta descriptionです。

ここの設定では、TOPページに対しての説明文を書いてください。

■CSS非同期読込設定

デザインを表示するプログラムを実行するときに同期読み込みはプログラムが書いてある記述のとうり上から順に読み込んでいきます。

非同期読込は処理の実行ができるようになってから読み込みを開始します。LION MEDIAのcss非同期読込の設定では、4つの項目から選択してサイト表示速度が早くなるように表示のときの読み込みを設定するところです。

設定方法は有効を選択して非同期で読み込みたい項目にチェックを入れたら終わりです。

個人的にはメインCSS(style.css)は非同期読み込みにチェック入れないほうが良いかと思います。サイトを表示させた時にデザインが崩れるのがはっきりとわかるため、ユーザーも「んっ？」てなるはずです。

実際に設定してから、それぞれの表示位置でリロードしてデザインの崩れ具合を確認してみることで、どの設定にチェックするのが自分のサイトではベストなのか分かりやすくなります。

AMP設定［LION用］

AMPとはモバイル端末でサイト表示させた時に高速表示できることで、GoogleとTwitterが共同開発しているものです。

LION MEDIAを使い始めて、すぐに設定したほうが良い設定ではないので、ある程度LION MEDIAのカスタマイズ設定が終わってからでも大丈夫です。

■AMP機能

LION MEDIAのAMP機能の設定は有効にするだけです。

■AMP用ロゴ画像の設定

AMP設定はライオンメディア AMP(アンプ)の設定でスマホ表示の高速化を参考に設定をしてみてください。

サイトをAMP対応にするとGoogle Search ConsoleでAMPエラーが発生することがあります。

関連記事  ライオンメディアAMPエラーとは？その対処方法

AMPに対応した場合は、使えないHTMLとかが引っかかってエラーになってしまうので知識が浅いとエラー対応がしんどいです(私がそうでした…)

でもエラーを対処しないとAMP表示で見てくれるユーザーが記事を見ずらくなるので、エラー対処はしておきたいですが、AMPエラーでサイトの評価が落ちるという事はありません。

広告設定［LION用］

■記事内広告

記事内広告を設定すると、LION MEDIAの投稿画面で記事内に広告を設置できます。

記事内広告の設定からアドセンス広告やアフィリエイト広告のタグを入力しておくと、テキストエディタで記事内広告を選択して貼ることが出来ます。ビジュアルモードでもショートコードをコピペで貼り付ければできます。

■アーカイブ用インフィード広告

アーカイブ用インフィード広告の設定も、広告タグを入力するとアーカイブで広告が表示できます。

アーカイブ用インフィード広告設定の場合は、アーカイブ記事の何番目に広告を表示するかを決めることも出来るので設定してみてください。何番目にするか設定してアーカイブページが2ページ、3ページと続く場合でもそれぞれのページの指定した場所にインフィード広告が表示されます。

上記はアーカイブ用インフィード広告を設定で２番目に設定した場合です。

例えば4番目に設定して3ページ目の記事が2記事しかないという場合は設定で指定した4番目まで記事が足りないので3ページ目のインフィード広告だけは表示されません。

■記事下用ダブル広告

LION MEDIAの記事下にダブル広告を「表示する」「表示しない」を選択して、広告コードを貼り付けることができます。

• 左に表示する広告
• 右に表示する広告

それぞれに広告コードを貼り付けると、左右でダブル広告として表示できます。

記事下のダブル広告は収益アップに効果的といわれています。アドセンス広告でいうと「ダブルレクタングル広告」といいます。

記事下用ダブル広告は設定して是非活用してほしい設定です。

■AMP用広告

AMP対応に設定した場合、通常で貼り付けた広告がAMPページでは表示されません。

なのでカスタマイズ設定のAMP用広告の設定からAMP専用コードを貼り付けます。

アドセンス広告を貼る場合を入力例として

それぞれアドセンスで広告コードを取得すると同じ個所があるので番号だけを貼り付けてください。

投稿ページ設定［LION用］

■投稿日の表示/非表示

記事を公開した時の日付けを表示することが出来ます。

■投稿者情報の表示/非表示

投稿者を表示する事が出来ます。

この設定でプロフィールのコメントを表示するにはWordPressのダッシュボード⇒ユーザー⇒あなたのプロフィールと進むと、プロフィール情報を記入出来るので、記入しておくと投稿者情報として投稿ページの記事下に表示されます。

■目次の表示/非表示

表示/非表示で表示に設定すると投稿ページに目次が表示できます。

記事内で使う「hタグ」で目次生成をするのでｈタグに書く内容は目次にした時に記事の流れが分かりやすいようにしておくと良いです。

目次を表示するための最小見出し数を指定

この設定は、記事内で見出しを何個以上使用したら目次を表示します。という設定ができます。

例えば最小見出し数を５で設定した場合、記事内で見出しを４しか使っていなかったら目次は表示されません。

見出しは、人間もクローラーも記事がどういうものかを判断するための材料なので使うようにしましょう。

目次パネルをデフォルトで閉じておく

ここの設定にチェックを入れておくと目次が閉じられてる状態になるので、目次を見たいときはユーザーが目次を開いてみる事になります。

特にこだわりがなければ、チェックは入れないほうがおすすめです。

設定後に目次をカスタマイズする方法はLION MEDIA 目次のデザインをCSSでカスタマイズが参考にできます。

■関連記事の表示/非表示

投稿ページに関連記事を表示するか選択

表示する/表示しない選択で表示するを選択すると関連記事が投稿ページの下に表示できます。

関連記事を表示する最大数を指定

記事下に関連記事を表示させる数を指定できる設定なので、お好みで数を入力してください。

関連記事は当然に投稿記事に対して関連する記事がないときは「関連する記事はありません」と表示されるだけになります。

関連記事の設定をしてみると同じカテゴリーが関連付けされるようです。

■所属カテゴリ最新記事の表示/非表示

投稿ページの記事と同じ親カテゴリーの記事が投稿ページ下部に表示できる設定です。

設定方法は表示する/表示しないを選ぶだけです。

興味のある記事を読んだ後に、関連記事を表示して更に下に同じカテゴリー記事があるので他の記事へと誘導しやすくなるので設定して表示したほうが良い機能です。

■シェアボタンの表示/非表示

投稿ページの上部にシェアボタンを表示するか選択

表示する/表示しない　から表示するを選択すると投稿ページのヘッダー画像下にシェアボタンが表示できます。

投稿ページの下部にシェアボタンを表示するか選択

こちらも、表示する/表示しないから表示するを選択すると記事の終わりにシェアボタンが表示できます。

シェアボタンの種類

• Facebook
• Twitter
• Google＋
• はてぶ
• Pocket
• LINE

上記6種類です。

このシェアボタンは個別でチェックを外して表示させたいシェアボタンだけ表示することも可能です。

SNS・OGP設定［LION用］

ここの設定は、先ほどのシェアボタンの設定につながる設定でSNSで記事をシェアされた時などに表示される画像を登録します。

設定しておくと、シェアされた時にページタイトル・URL・概要・アイキャッチ画像が表示すること出来るので、いつシェアされても良いように先に設定しておくと良いかもしれません。

■［OGP］画像の設定

投稿にアイキャッチ画像が登録されてない時に、ここで設定した画像が代わりに表示されます。

記事を作成するときにアイキャッチ画像は投稿ページごとに決められるので、記事を書く時の習慣にしておけば［OGP］画像の設定は重要視する必要もないかもしれません。

念のために画像を設定しておきましょう。

■［OGP］FacebookのAPPID

FacebookのAPP IDを入力します。

Facebook APP IDを私は登録して設定していないのでググッてきました。

OGP設定にも使いますが、Facebook用のアプリを作成する時にも必要なIDのようですが、次で説明するFacebookのユーザーIDでOGP設定のほうが簡単かと思います。

Facebook APP ID で登録する人は参考記事を参考にしてみてください。

■［OGP］FacebookのユーザーID

こちらのOGP設定はFacebookのユーザーIDだけで設定ができます。

自分のFacebookのユーザーIDの調べ方

1. Facebookにログイン
2. 自分のプロフィールを表示
3. プロフィール写真をクリック

URLの最後の　「 . 」ドットと「 & 」アンドの間の数字を入力します。

■［OGP］Twitter Cardの種類を選択

Twitterでシェアされたときに表示されるカードデザインを設定します。

• summaryカード　⇐小さいカード
• summary with large imageカード　⇐大きいカード

この2種類から選んで設定してみてください。

■［FOLLOW］Facebookページのユーザー名

SNSフォロー用の設定です。

FacebookのIDを入力します。Facebookを開いてプロフィールを開くとURLが表示されています。

https://www.facebook.com/○○○○　⇐マルの部分だけを入力してください。

■［FOLLOW］Instagramページのユーザー名

Facebookの時と調べ方は同じです。

Instagramの自分のページから　http://Instagram.com/○○○○　⇐マルの部分だけを入力します。

■［FOLLOW］TwitterのID

Twitterも同じです。

TwitterのマイページのURL　http://Twitter.com/○○○○　⇐マルの部分を入力します。

■［FOLLOW］Google＋ページのURL

ここの設定も同じですね。

Google＋ページのURL

http://plus.google.com/＋○○○○　⇐マルの部分を入力です。

■［FOLLOW］RSSページのURL

この部分の設定の説明を見ると、「未入力の場合は[bloginfo(rss2_url)]を表示。」と説明があります。

RSSは「feedly」が人気があるので、おすすめではありますが「feedly」に登録してないスマホユーザーがサイトのRSSアイコンから「feedly」に進むとログイン画面が邪魔で進めないので微妙かもしれません。

RSS設定が未入力のままだと、RSS機能が十分に発揮できてないのでfeedlyをLION MEDIAで使う方法を参考に設定してみてください。

表示例は私のRSSから表示確認が出来るので参考までに。

［FOLLOW］が付いてる設定

• Facebook
• Instagram
• Twitter
• Google＋
• RSS

この設定では、フォローアイコンをHeaderとfooterで表示する/表示しないを設定できるので、自分のお好みで設定してみてください。

アクセス解析設定［LION用］

■Google AnalyticsのトラッキングID

このGoogle AnalyticsのトラッキングIDを入力する設定でトラッキングIDを入力しておくと、サイトにアクセスがどのくらいあったのかとか、ユーザーのサイト内での行動がAnalyticsで見ることが出来るようになります。

アナリティクスの登録の仕方が分からない場合はアナリティクスの登録と設定が参考にできて、プラグインやテーマ編集から設定する方法もあります。

今回はLIONMEDIAの設定を使う設定方法だけ説明します。

トラッキングIDの調べ方

Google Analyticsのホームから管理⇒トラッキング情報⇒トラッキングコードで進むと、トラッキングIDが表示されてるのでコピーしてLION MEDIAのGoogle AnalyticsのトラッキングID設定に貼り付けます。

■AMP用のGoogle AnalyticsのトラッキングID

AMP用には新しくトラッキングIDを作成する必要があります。

AMPトラッキングIDの作り方

「Googleアナリティクス」の管理⇒プロパティ⇒＋プロパティを作成で進みます

管理の場所はアナリティクス画面一番左下の歯車アイコンです。

• ウェブサイトの名前

自由に名前を決めて大丈夫ですが、わかりやすいように「自分のサイト名/AMP」とかAMP用と分かるようにしておくと良いです。

• ウェブサイトのURL

自分のサイトURLを入力

http:// と https:// を間違えないようにしてください。

• 業種

通常に個人ブログなら「その他」を選びます。

• レポートのタイムゾーン

日本に住みなら「日本」ですね。

最後に「トラッキングIDを取得」をクリックするとAMP用のトラッキングIDが作れます。

■Google Search Consoleの認証ID

SearchConsoleの登録がまだの人はGoogle Search Consoleに登録する方法で登録してから設定します。

認証IDの調べ方

設定に該当するウェブサイトをクリックして画面右上に歯車のアイコンがあります。

歯車のアイコンから確認の詳細をクリックするとメタタグの右に　▶詳細　があるのでクリック。

メタタグが表示されるので

content=”この中をコピー”/>

そして、LION MEDIAのGoogle Search Consoleの認証IDの設定に貼り付けてください。

CTA設定［LION用］

記事下にCTAボックスというのが設置できるのですが主な活用の仕方としては「アフィリエイトで○○万円稼ぐノウハウ」みたいな情報商材とかの宣伝とかですかねぇ…

CTAボックスを使ったことがないのでイメージでしか分かりませんが、使い方は宣伝する場所です(笑)

■記事下CTAボックス設定

• 表示しない/表示する　で表示を設定できます。
• 記事下CTAボックスのタイトルを入力で決めることが出来ます。
• 記事下CTAボックスの本文を入力して決められます。
• ボタンに表示するリンクテキストを入力して決められます。
• リンク先のURLを貼り付けます。
• 記事下CTAボックスの画像を登録して表示できます。
• PC表示時の画像の表示位置を選択できます。
• スマホ表示時の画像の表示位置を選択できます。

高度な設定[LION用]

■</head>直上の自由入力エリア

<head>～</head>内にCSSを入力する時などに使えます。

</head>は画面に直接は表示しないCSSを記述する場所で、ページのスタイルや情報なんかを書き込みます。

LION MEDIAで見るとテーマヘッダー(header.php)の中に<head>～</head>に挟まれて記述してあるCSSが見れるので、この設定のイメージがつかめない場合は見てみると良いかと思います。

■</body>直上の自由入力エリア

<body>～</body>は画面に表示させる文章や画像を書くために記述する場所です。

LION MEDIAの、この設定のところに説明があると思いますがJavaScriptの読み込みに最適と書いてあります。

</body>直上でJavaScriptを読み込むと表示処理がスムーズにできる。くらいのイメージで良いかと思います。

LION MEDIAの初期設定で優先して設定しておく設定ではないので、イメージとして覚えておいてください。

■アーカイブページの<title>の設定

アーカイブページとは投稿記事や固定ページとは別に表示されるページです。

カテゴリ―で表示した記事、タグで表示した記事別に表示される「書庫」みたいなものです。

カテゴリー書庫、タグ書庫。そんなイメージです。

ここの設定では、アーカイブページ(書庫)のタイトルの前半部分を自分で決めることが出来ます。

• カテゴリーアーカイブ
• タグアーカイブ
• 投稿者アーカイブ
• 年別アーカイブ
• 月別アーカイブ
• 日別アーカイブ
• 検索アーカイブ

上記のアーカイブページのタイトル前半部分を追加する感じですね。

LION MEDIAでカテゴリータイトル前半を「カテゴリー」を入力してカスタマイズすると、カテゴリーアーカイブページのタイトルは　「カテゴリー:○○○○」で表示されます。

アーカイブページの<title>の設定をしない場合は、○○○○の部分しか表示されないです。

投稿スキン設定[LION用]

■見出し２～５のスタイルの選択

• 記事内で使う見出しのカラーを自由に変更

見出し背景のカラーを変更するなら、「カラーA」で変更します。

見出しの文字カラーを変更するには「カラーB」で変更します。

カラーAもカラーBも設定の中にカラー配色表が表示されるので好きな配色を設定できます。

• 見出しのスタイル(デザイン)１６種類から選べる

見出しのスタイルが選べます。見出しのデザイン？見出しの形？言い方いろいろですが、設定のスタイル選択から１６種類あるので、記事の見出しを表示させたまま見出し選択するとデザインが変わるので好きなデザインに設定してみてください。

• オリジナル見出しのCSSを入力できる

見出しデザインを１６種類以外で自分で見出しをデザインしたい場合はオリジナル見出しをCSSを使ってデザインできる設定場所です。

デザインスキン設定[LION用]

■ベースデザインの選択

ベースデザインの選択設定では、ヘッダーのメニューバーとフッターの背景カラーが２種類から選択できます。

• DARK(ダーク)に変更

• LIGHT(ライト)に変更

上記の２種類が設定できるカラーです。

■テーマカラーを選択

テーマカラーを選択の設定でカラー変更される部分

• ヘッダーのサイトタイトル部分の背景カラー
• リンク文字カラー
• back to Topの背景カラー注目
• キーワードの背景
• タグ背景カラー
• ウィジェットのタイトル背景カラー

上記がテーマカラーを選択の設定でカラー変更した場合に変更になる部分です。

■カテゴリ用ユーザー定義カラーを選択

カテゴリーごとのカラーが設定できます。

設定をしたカラーが確認できるのはトップページのアーカイブのアイキャッチで見ると確認しやすいです。

あとは基本機能設定［LION用］で設定した「■カテゴリTOP説明文」の設定を有効にした場合、カテゴリー名の背景が同じカラーになります。

デザインスキン設定［LION用］ではユーザー定義カラーとして１～５までカラー設定が出来て、設定以外ではWordPressのカテゴリーからも他のカラーを選択できます。

サイト基本情報

サイトのタイトル

サイトのタイトルを決めて入力します。

キャッチフレーズ

ここで決めたキャッチフレーズがサイトタイトルの横に表示されます。

サイトアイコン

サイトアイコンは設定しておくようにしたほうが良いと思います。

サイトアイコン設定で画像を設定しておくとブラウザーのタブやブックマークバーに表示されるし、スマホのホーム画面にも設定したアイコンでアプリのように表示しておくことが可能です。

サイトアイコンに使う画像サイズは512×512ピクセル以上の正方形で設定します。

メニュー

メニュー名を変更

メニュー名はサイトに表示されることがないので自分がメニュー管理しやすいような名前にしておくと良いと思います。

それぞれのメニュー1つ1つの名前も変更が可能

「おっとぉ、なんかおもしろそだな」って思うメニュー名に設定で変更しても良いかもしれませんね。

メニューの順番を並び替えも可能

「並び替え」と表示のところをクリックして矢印が出るので調整してください。

メニューの項目を追加可能

URLとリンク文字列を設定するとカスタムリンクとしてメニューバーに表示できます。

設定してメニューに追加をクリックすると追加できます。

他に固定ページ、投稿、カテゴリー、タグからもメニューに追加が可能なので活用してみてください。

メニューの位置

選べる位置がLION MEDIAにはヘッダーしかないようなので、ヘッダーメニューにチェックを入れます。

ここで設定したメニューは、この次で説明する「ウィジェット設定」でサイドバーやフッターにメニューを表示することもできます。

ウィジェット

ウィジェットの設定で出来る事

• 通常サイドバー
• 固定サイドバー
• TOPページ上部エリア
• 左フッターエリア
• 中央フッターエリア
• 右フッターエリア

上記のエリアにウィジェットを追加することが出来ます。

WordPressの設定からもできますが、LION MEDIAのウィジェット設定からだとサイトのプレビューを確認しながら設定できるのが良いところです。

ウィジェットの追加方法

ウィジェットを追加したいエリアをクリック

ウィジェットを追加があるのでクリックすると追加できるウィジェットの項目が表示されるので、追加したいコンテンツをクリックすると追加されます。

また、エリアごとのコンテンツは並び替えが可能です。

ホームページ設定

通常は何も設定していない状態だと、トップページは記事を更新していくと新しい記事が上から順番に表示されていきます。

トップページが動的になっているため、記事を投稿するたびに変更になる感じです。

LION MEDIAのホームページ設定では、動的なトップページではなく静的なトップページを固定ページを使って変更ができます。

例えば、固定ページで「ようこそ当サイトへ」みたいなことを載せて、その下にサイトの紹介やサービス一覧とかを載せてみたりです。

そのように設定する場合は固定ページを作ってからホームページ設定にあるホームページの表示を固定ページを選ぶと設定ができます。

普通にブログとしてサイト運営するならホームページ設定は、設定することもないような気がします。

参考程度に。

追加CSS

追加CSSの設定は特に設定する事がなくて、サイト作りをしていく中で必要なものです。

サイトデザインをカスタマイズするときに、この追加CSSにCSSを記述してデザインを好きに変更してみたり、テーマの編集でスタイルシート(style.css)を使ってデザインをカスタマイズしてもどちらでも大丈夫ですが、スタイルシートを使ってる人が多い気がします。

まとめ

LION MEDIAのカスタマイズ設定は意外と全ての設定をすると多いです。

しかし、LION MEDIAのテーマをインストールしてから、すぐに全部の設定を一気にやってしまうと後が楽なんですよね。

それと、全部のカスタマイズ設定をすると後から「このカスタマイズ設定どう使うんだったかな？」という事がなくなので、いちいち調べなくて済むようになります。

設定お疲れさまでした。