【2022年最新】人気・おすすめのWebマーケスクール11選

LION MEDIAのダウンロード後すぐできる初期設定・カスタマイズを徹底解説

当記事の信頼性
管理人:かつさんど
  • 現役Webマーケター
    元Webディレクター
  • 東証一部上場の不動産系企業で勤務
  • 最高収益:月間30万円

本ブログで利用しているテーマ「LION MEDIA」の基本機能設定の解説をします。

「LION MEDIA」はとても優れた機能におしゃれなデザインだと思っています。

ダウンロードした状態でも問題ありませんが、独自のカスタマイズができるので、利用される方の好みで設定を変更してみてください。

目次

基本設定

検索機能の検索対象

ウェブサイトの検索窓で検索する対象を変更することができます。

検索する対象を「固定ページのみ」「投稿ページのみ」「両方」から選択することができます。

検索にヒットしたくないなどが、特に無ければ「両方」で良いでしょう。

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

トップページで記事の抜粋文字を変更することができます。好みになるかと思いますが、100文字ぐらいがちょうどいいかと思います。

あまりに文字数が多いと、スクロールしないとコンテンツが見えにくくなります。

200文字の場合

100文字の場合

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

トップページで投稿のタグの表示件数を指定することができます。

「0」と入力すると全てのタグが表示されます。

レイアウト設定

トップページ、投稿ページ、固定ページのカラム数を変更することができます。

カラムは段組みという意味です。1カラムを選択した場合、横幅を選択することができます。

1カラムの場合

2カラムの場合

記事ビューレイアウト

トップページの投稿記事のレイアウトを変更できます。

サイドメニューを表示させたいのであれば、「ノーマル」を選択することになります。

ノーマルの場合

ワイドの場合

ノーマルでは、2列で投稿記事が配置されますが、ワイドでは1列に配置されるので、全体的に大きい表示になります。

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

一番上のヘッダーにお知らせを表示できます。

ユーザーに必ず伝えたいことなどを入力する項目になるでしょう。

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

カテゴリー・タグの説明を「アーカイブページのみ」「meta descriptionのみ」「両方」で表示させるのかを変更できます。

Copyrightの設定

フッターに表示されるCopyrightを変更することができます。

Copyrightは必ず自分のウェブサイト・ブログ用に変更して、ユーザーに信用してもらえるウェブサイトという印象を与えましょう。

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

デフォルトで検索窓を表示させるのか、グローバルナビゲーションを表示させるのかを選択できます。

ユーザーにどういうアクションを促すかで判断しましょう。

検索メニューの場合

Gナビメニューの場合

ロゴ画像の設定

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

基本機能設定

注目キーワード設定

グローバルナビゲーションの検索窓の隣に、キーワードのテキストリンクを設置することができます。

見てほしい記事に関連するキーワードを設置できるので、記事への誘導にスムーズにできますので活用しましょう。

TOPピックアップ記事

メインビジュアルで投稿ページの画像をスライダーで設定できます。最大3つまでです。

投稿ページのIDを入力することで指定ができます。IDは投稿一覧の項目で確認して下さい。

PC表示の場合

SP表示の場合

TOPランキングボックス

トップページに投稿ページのランキングを表示できます。最低5件で最大10件まで表示できます。

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

ランキングページの表示件数を設定できます。

固定ページで作成したIDを入力することで、その固定ページをランキングページにすることもできます。

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

トップページにカテゴリー毎の最新記事を表示できます。

親・子カテゴリーともに表示されるので、除外したいカテゴリーがあれば、IDを入力することで除外できます。

カテゴリTOP説明文

各カテゴリーページの上部に説明文を表示させるかを選択できます。

どういう記事がこのカテゴリーに含まれているのかをアピールできるので活用しましょう。

投稿ページ設定

投稿日・投稿者表示/非表示

記事の投稿日・投稿者の表示を設定することができます。

投稿日はあった方が良いと思います。

投稿者はサイト運営を1人でしているのなら不要かと思います。2人以上であれば、投稿者毎に記事一覧ページが出来るので、活用出来るかと思います。

投稿日

投稿者

目次表示/非表示

投稿ページに目次を自動で表示させる設定になります。

目次を表示させる最小の見出しの数を設定することができるので、見出しが少ない時は目次を表示させないということもできます。

また目次をデフォルトでは、閉じておくことも設定できます。

関連記事の表示/非表示

投稿ページの下部に関連記事を表示させるかどうかを設定できます。

最大の記事数も設定できます。

関連記事はウェブサイト内の回遊性を高めるので、有効にして表示させましょう。

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

投稿ページの下部に所属しているカテゴリーの最新記事を表示させるか設定できます。

こちらは自動的に最大6件表示されます。

所属カテゴリーの最新記事も関連記事と同様サイトの回遊性を高められるのであった方が良いと思います。

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

投稿ページの上下にシェアボタンを表示させるか設定できます。

シェアボタンはブログにとって必須なので有効にしましょう。

投稿スキン・デザインスキン設定

今回はウェブサイト・ブログのテーマの色、投稿ページのh2〜h5の見出しの色のカスタマイズ方法になります。

投稿スキン設定

見出し2〜見出し5のスタイルを選択

「カラーA」と「カラーB」で色を選択して、「スタイル」で見出しのデザインをカスタマイズすることができます。

スタイルが合計16種類あるので、それぞれどんなどういう風に表示されるか見ていきましょう。

01.先頭大[カラーA:先頭文字 B:文字]

02.内側影[カラーA:背景 B:文字]

03.リボン風[カラーA:背景 B:文字]

04.箱型[カラーA:背景 B:文字]

05.マーカー風[カラーA:背景 B:文字]

06.吹き出し風[カラーA:背景 B:文字]

07.グラデダーク[カラーA:上 B:下]

08.グラデライト[カラーA:上線 B:文字]

09.ボックス[カラーA:線 B:文字]

10.左線[カラーA:左線 B:文字]

11.左線+背景[カラーA:左線 B:背景]

12.下線[カラーA:左線 B:文字]

13.左下線[カラーA:左線 B:文字]

14.内側線[カラーA:背景 B:文字]

15.はみ出す線[カラーA:線 B:文字]

16.文字下色線[カラーA:下線 B:文字]

デザインスキン設定

「ベースデザインを選択」と「テーマカラーを選択」ではウェブサイト全体の色の変更ができます。

ベースデザインは「DARK」と「LIGHT」で色合いを調整できます。

カテゴリーで使う色を自分でカスタマイズすることができます。

SEO設定

TOPページのtitle・meta description

トップページの「titleタグ」「meta descriptionタグ」を設定できます。

入力をしない場合、「設定」>「一般」の「キャッチフレーズ|サイトのタイトル」が表示されます。

<meta name="description" content="このブログはnukoblogのテストサイトになります。このブログはnukoblogのテストサイトになります。このブログはnukoblogのテストサイトになります。">
<meta property="og:site_name" content="test-nuko" />
<meta property="og:type" content="website" />
<meta property="og:title" content="nukoblogのテスト│test-nuko" />
<meta property="og:description" content="このブログはnukoblogのテストサイトになります。このブログはnukoblogのテストサイトになります。このブログはnukoblogのテストサイトになります。" />
<meta property="og:url" content="http://nuko-blog.net/test" />
<meta property="og:image" content="http://nuko-blog.net/test/wp-content/themes/lionmedia/img/img_no.gif" />
<meta name="twitter:card" content="summary" />

デフォルトでは247行目あたりに「titleタグ」「meta descriptionタグ」が記述されています。

※ウェブサイト上のタイトル・キャッチフレーズを変更する場合

WordPressの左メニューから「設定」>「一般」に進んで、「サイトのタイトル」「キャッチフレーズ」を変更することで変更できます。

CSS非同期読込設定

一部のCSSを遅らして読み込ませることで、読み込み速度を向上させる機能になります。

利用されているWordPressのテーマによって、一瞬デザイン・レイアウトが崩れて見えてしまうこともあるので、検証しながら設定して下さい。

  • メインCSS(style.css)を非同期読み込みする
  • 投稿・固定ページ用CSS(content.css)を非同期読み込みする
  • アイコンフォントCSS(icon.css)を非同期読み込みする
  • GoogleフォントCSS(Lato)を非同期読み込みする

SNS・OGP設定

今回はSNSで自身のウェブサイト・ブログがシェアされた際の設定を行うことができます。

[OGP]画像の設定

投稿にアイキャッチ画像が登録されていない時に表示するOGP画像を登録できます。

OGPとは、「Open Graph Protocol」の略でFacebookやTwitterなどのSNSで記事がシェアされた時、ページのタイトル、URL、画像を表示させる仕組みのことです。

[OGP]FacebookのAPPID・ユーザーID

FacebookのAPPIDとユーザーIDを入力して連携します。

FacebookのAPPIDは、facebook for developersにアクセスして開発者アカウントを作成する必要があります。

FacebookのユーザーIDはFacebookにアクセスしてアドレスバーのURLを確認します。

https://www.facebook.com/〇〇〇

◯◯◯の部分がユーザーIDになります。

[OGP]Twitter Cardの種類を選択

「Summaryカード」「Summary with Large Images」のどちらかを選択します。

[FOLLOW]Facebookページのユーザー名

FacebookページにアクセスしてアドレスバーのURLを確認します。

https://www.facebook.com/〇〇〇

◯◯◯の部分がユーザー名になります。

ヘッダー(Header)のフォローアイコン

フッター(Footer)のフォローアイコン

[FOLLOW]Instagramページのユーザー名

InstagramページにアクセスしてアドレスバーのURLを確認します。

https://instagram.com/〇〇〇

◯◯◯の部分がユーザー名になります。

[FOLLOW]TwitterのID(@以降)

TwitterページにアクセスしてアドレスバーのURLを確認します。

https://twitter.com/〇〇〇

◯◯◯の部分がIDになります。

[FOLLOW]Google+ページのURL(+以降)

Google+ページにアクセスしてアドレスバーのURLを確認します。

https://plus.google.com/+〇〇〇

◯◯◯の部分がGoogle+ページURLになります。

[FOLLOW]RSSページのURL

RSSページのURLを入力します。

未入力の場合は[bloginfo(rss2_url)」が表示されます。

CTA設定

CTAとは「Call To Action」の略で、ユーザーに行動喚起を促すことになります。

CTA設定を行うことで、ユーザーにアクションを促せるブロックを設定することができるので、是非活用していきましょう。

記事下CTAボックス設定

CTAボックスは「記事下CTAボックスの表示」で表示するを選択することで表示できます。

  • 記事下CTAボックスのタイトルを入力
  • 記事下CTAボックスの本文を入力※タグ利用可能
  • ボタン上に表示するリンクテキストを入力
  • リンク先URLを入力
  • 記事下CTAボックスの画像を選択
  • PC表示時の表示位置
  • スマホ表示時の表示位置

入力が完了すると、このような感じで投稿記事の下にCTAブロックが表示されます。

資料ダウンロードやお問い合わせなど、ウェブサイト・ブログのコンバージョンを入れることでより成果が出しやすくなります。

広告設定

Googleアドセンスの広告タグを該当箇所に貼り付ける設定になります。

Googleアドセンスの広告タグの取得方法・またプラグインを利用してGoogleアドセンスの広告を掲載する方法は以下の記事で紹介しています。

記事内広告

記事内の広告表示の際に入力します。記事内という見出しですが、投稿ページ・固定ページで利用可能です。

記事上・記事下またサイドバーに広告を設置する場合は、「外観」>「ウィジェット」から広告タグを設置する必要があります。

ショートコード〔adsense〕で広告を表示させる場合、クラシックエディター(Classic Editor)のテキストエディターの場合は、そのままで問題ありません。

しかしクラシックエディター(Classic Editor)のビジュアルエディター、グーテンベルクエディター(Gutenberg Editor)を利用している場合は、「ショートコード」のブロックを利用する必要があります。

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

各アーカイブページのインフィード広告表示の際に入力します。下の赤枠では何番目に表示させるかを設定することができます。

上記はトップページの例になります。トップページだけでなく、カテゴリー・タグ・日付など各アーカイブページで共通の設定になります。

記事下用ダブル広告

記事下の左右の広告表示の際に入力します。

記事下用ダブル広告の例になります。上記は少し広告の表示が崩れていますが、左と右に広告を表示することが可能です。

AMP用広告

AMP用ページの広告表示の際に入力します。

「0000000000」の部分を自身の広告タグの番号に差し替えれば完了です。

<amp-ad
width="300"
height="250"
type="adsense"
data-ad-client="ca-pub-0000000000"
data-ad-slot="0000000000">
</amp-ad>

アクセス解析設定

今回はGoogleアナリティクス、Google Seach ConsoleからID確認して入力するだけになります。

Googleアナリティクス、Google Seach Consoleともに、ウェブサイト・ブログの運営に欠かせないアクセス解析ツールなので連携しましょう。

Google AnalyticsのトラッキングID

Googleアナリティクスにログインして、トラッキングIDを確認します。

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

推奨の設定では、通常とAMPでプロパティーを分けるそうなので、Google Analiticsで新規でプロパティーを作成して、トラッキングコードを取得します。

Google Search Consoleの認証ID

Google Search Consoleにログインして、認証IDを確認します。

AMP設定

AMP(Accelerated Mobile Pages)とは、モバイルページを高速で表示させるための技術になります。

「LION MEDIA」ではAMP設定を簡単に設定することができます。

「AMP機能」を有効にすると、既存のページのURLに「?amp=1」が付いたAMP対応したページが生成されます。

AMP機能では、ロゴ画像の登録が必須になります。

検索結果ページのカルーセル部分にAMP対応したページが表示される可能性があるため、AMP用のロゴ画像の登録が必須になっています。

高度な設定

項目名は高度な設定という名称ですが、複雑な設定内容ではなく、基本的に必要な時だけ利用する項目になります。

今回は、html文書内の「head」と「body」に自由に記述を追加することができる部分がありますが、急にソースコードを追加できると書かれても、困ると思うので用語の説明から入ります。

「html」「head」「body」とは?

html文書は、「html」「head」「body」の3つで構成されており、「html」の中に「head」「body」の順に記述されています。

<head>~</head>の間には、文書のタイトル等のファイルの情報を宣言するヘッダ情報を記述します。
<body>~</body>の間には、 実際にブラウザに表示されるページのコンテンツを記述します。

言葉自体の意味は、深く理解しなくても大丈夫ですが、htmlファイルはどういう構造になっているかということだけ理解してもらえればと思います。

htmlの文章は下記のようなイメージになります。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>~<title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
実際のページのコンテンツ情報が入ります。
</body>
</html>

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

LION MEDIAでは、headタグにCSSの読み込みの記述などを追加することが推奨されているようです。

LION MEDIAでheadタグに追加する内容

  • CSSやJavaScriptファイルの読み込み
  • URLの正規化(link rel=”canonical”)
  • サイトのアイコン
  • フィードページのURLを指定

などが追加できるかと思います。

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

LION MEDIAでは、bodyタグにJavascriptの読み込みの記述などを追加することが推奨されているようです。

もしbodyタグに入れるものがあれば追加しましょう。

アーカイブページのtitle設定

LION MEDIAの様々なアーカイブページのタイトルタグの前半部分を入力して設定することができます。

例えばお知らせカテゴリーであれば、デフォルトでは下記のようなtitleタグになっていますが、お知らせの前に文字を追加することができます。

<title>お知らせ | サイト名</title>

よかったらシェアしてね!
  • URLをコピーしました!
目次