『LION BLOG』カスタマイズ【基本設定】の使い方：初心者向け

最終更新日：2018.06.02

WordPressの無料テーマ『LION BLOG』のカスタマイズ設定の使い方について解説しているページです。

今回のテーマは、カスタマイズ【基本設定】の使い方についてです。

基本設定では、WebサイトのTOPページの構成やデザインなどを決定していきます。

検索機能の検索対象

訪問者が検索ボックスを利用したときに、検索対象ページをどの範囲にするのかを設定する項目になります。

検索ボックスとは、みなさんご存知かとは思いますが、

これでーす！

検索ページの範囲は、３つから選ぶことができます。

１．固定ページと投稿

デフォルト（初期設定）はこちらが設定されています。

２．投稿ページ

投稿ページとは、投稿記事のページのことを指します。

３．固定ページ

固定ページとは、WordPressの固定ページで作成したページのことを指します。お問い合わせページ、サイトマップ、プライバシーポリシー、会社概要など。

  こはるママ

ユーザーが検索する場合、

投稿ページから検索することが多いので、２の設定でもOKです。

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

アーカイブページとは、複数のページを１つにまとめたページのことです。アーカイブページがあることで、ユーザーが記事を探す際のひとつの手段となります。

『LION BLOG』でいうと、投稿記事につけたカテゴリーやタグごとにまとめたページ、投稿時に記録された「投稿年月日」を元に作られる年月ごとのページのことを言います。

複数の記事が集まっているアーカイブページでは、１つ１つの記事の内容がわかるように、アイキャッチ画像や記事タイトル、記事の抜粋文が表示されるように設定されています。

その記事の内容を抜粋する文字の数を指定するのがこの項目になります。

指定できる文字数は、20～500文字の間で自由に設定ができます。デフォルト（初期設定）は200文字です。指定した文字数を超えた場合は、［…］で表示されます。

200文字と400文字のイメージ【レイアウト：ワイド】

200文字と400文字のイメージ【レイアウト：画像レフト】

特別なこだわりがなければ、デフォルトの200文字設定で問題ないと思います。

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

先ほどの抜粋文字数を設定するところで、ワイドと画像レフトのイメージを少し紹介しましたが、レイアウトの設定はこちらの項目で行います。

初期設定は「ワイド」になっています。

「画像レフト」にするとこんな感じ。先ほどと印象が変わりましたね。

レイアウト設定

サイトの基本となる枠組みを決定する項目になります。

カラム数を選ぶ

カラムって言われても・・・・・・。カラムとは列のことを意味しています。

『LION BLOG』では、サイドバーのない「１カラム」またはサイドバーがある「２カラム（デフォルト）」から選ぶことができます。

お弁当箱を想像してみてください。

仕切りがある状態が「２カラム」、仕切りをはずしたのが「１カラム」です。

なんとなくイメージできましたか？

『LION BLOG』では、アーカイブページ、投稿ページ、固定ページ、各ページごとに別々に設定することができます。

では、設定したイメージを見ていきましょう。

アーカイブページのレイアウト

デフォルトの２カラムでは、画面右にサイドバーが設置されています。

2カラム + 画像レフトのレイアウトイメージ

１カラムを選ぶと、サイドバーがなくなります。

1カラム + 画像レフトのイメージ

投稿ページ・固定ページのレイアウト

２カラムはアーカイブページと同じように、サイドバーが設置されています。

１カラムではサイドバーがなくなります。

初心者の場合は、２カラムのほうが扱いやすいと思います。それに、サイドバーがあると何かと便利。色々なものを設置できるので、ユーザーを導きやすいのではないかと思います。

１カラム時のメインカラムの横幅を設定する

１カラムを選んだ場合、横幅のサイズを設定することができます。

サイズの選択肢は、「740px」「820px（デフォルト）」「900px」「100％」の４つです。

選択した横幅のサイズは、１カラムを設定しているすべてのページに適用されます。（例えば、投稿ページと固定ページに１カラムを設定、横幅を820pxとした場合、どちらのページも820pxとなります。）

ヘッダー最上部の表示設定

ヘッダー最上部とは、サイト名の上の部分を指します（赤枠）。

デフォルトでは、「PC・スマホ：表示」になっているので上の画像のようにNEW ARTICLEの表示と記事検索のボックスが表示されています。ちなみに、「NEW ARTICLE」とは新着記事のことです。

ヘッダー最上部の「表示」を設定しておくと、最新記事のお知らせとして記事タイトルが流れながら表示されます。

設定はPCとスマホを別々に設定できるのが特徴で、「ＰＣ・スマホ：表示/非表示」「PCのみ非表示」「スマホのみ非表示」から選ぶことができます。

非表示設定をしたときの注意

非表示設定にした場合、検索ボックスの表示がなくなります。『LION BLOG』の初期設定では、どこにも検索ボックスが設置されていないのでサイト内の検索が行えなくなってしまいます。サイト訪問者が、記事の検索を行えるようにウィジェットで検索ボックスを設置しておきましょう。

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

お知らせヘッダーは「サイトメンテナンスは○月○日に行います」など、サイト訪問者へ伝えたい内容を設定する項目になります。

初期設定では「非表示」になっているので表示されていません。

お知らせが表示される位置

設定を「表示」すると、お知らせヘッダーが現れます。表示される位置は、先ほどのヘッダー最上部より さらに上部のエリアです。少し見にくいですが、オレンジ色の帯状のところです。

リンク先URLを入力しておけばリンクを貼ることができるので、お知らせの詳細などを訪問者に知らせたいときに使えそうですね。

お知らせヘッダーの背景色も変更ができます。文字が読みやすいようにビューで確認をしながら設定しましょう。

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

WordPressでカテゴリーやタグを追加・修正をするときに表示される入力項目です。説明内容を入力するボックスの下に「デフォルトではあまり意味を持ちませんが、これを表示するテーマも中にはあります。」と記載されています。

そうです！『LION BLOG』は説明が表示されるテーマなのです！

この説明欄に入力した内容をどこに表示するのかを設定する項目になります。

meta descriptionで表示

meta descriptionとは、「Googleさ～ん！ここにサイトの説明やカテゴリーの説明を書いてますよ～！」とお知らせするhtmlの言語のことをいいます。

ここで、「meta descriptonで表示」を選択すると、Googleさんの検索結果に、説明欄で入力した文章が表示されるのです。

アーカイブページで表示

アーカイブページで表示を選ぶと、カテゴリーやタグ名の下に説明文が表示されます。

両方で表示（デフォルト）

デフォルト設定では、「meta」と「アーカイブ」の両方で表示させるように設定されています。

ユーザーは検索結果において、タイトルと説明文を見てクリックしようか判断するので、デフォルト設定のままでOKだと思います。

こはるママ

ただし、説明文を入力していない場合は表示されないので、表示したいと思っている方は忘れず入力しておきましょうね。

Copyrightの設定

Copyright（コピーライト）とは、著作権という意味です。

著作権（ちょさくけん、英語: copyright、コピーライト）は、明確な形を持たない無体財産権（無形固定産）である。 主な無体財産権は、書物、言語、音楽、絵画、建築、図形、映画、コンピュータプログラムなどである。 また、特性が類似する特許権や商標権も含めて、知的財産権と呼称する場合もある。

引用元：Wikipedia「著作権」

Copyright（コピーライト）とWebサイトに明記することで、「このページには著作権があるぞー！勝手にコピーしないでね～」と示せるわけです。

ここの設定で、何も入力しない場合は【Copyright 2018 サイト名】が自動的に表示されます。

デフォルトで、【タグ利用可能】の下にあるボックス内には、「© Copyright 2018 <a class=”copyright__link” href=”サイトURL”>サイト名</a>.」と入力されています。

ここに設定されている内容は消すことができるので、自由に編集を行うことができます。

「タグ利用可能」の意味は、HTML＆CSSのタグを使うことができますよってことです。タグ利用するには知識が必要なので、初心者の方はデフォルトのまま利用しておきましょう。

FITおよびWordPressへのリンクを非表示にする

ここにチェックを入れると、「© Copyright 2018 Mamma Ridea　マンマリデア.」の下にある【Mamma Ridea マンマリデア by FIT-Web create. Powered by WordPress.】という一文を消すことができます。

通常、無料で提供されてるテーマでは消せないことが多いのでビックリ！です。感謝の意を込めて、表示させておいても問題ありません。

FITさん、なんて親切なの！ありがとうございます！

ロゴ画像の設定

この項目では、サイトのロゴ画像の設定をします。

サイトロゴ用の画像は、「高画素密度のディスプレイ表示を考え、縦100×440pxの透過PING画像を指定してください」と指示されているので、条件通りに用意する必要があります。

サイトロゴの用意がまだできていない場合は、後々設定してもいいかと思います。

ロゴの設定は、「画像の選択」ボタンをクリックし、メディアファイルの中から設定したい画像を選択します。選択するとカスタマイズ設定画面にも表示されます。

ロゴを設定するとサイト名とキャッチフレーズの部分がロゴに置きかわります。

メイン画像の設定

『LION BLOG』では、TOPページにサイトのメイン画像を設定することができます。ここは『LION MEDIA』と違うところですね。

まず「画像の選択」をクリックし、メディアファイルから設定したい画像を選びます。

例えば、このような画像を設定してみたいと思います。

設定した画像は、メニューバーの下にでで～ん！と表示されます。

むむむ、ちょっとなんか変だぞ・・・。とりあえず、今は気にせず、ここに表示されることだけを覚えておいてください。

スマホでのイメージはこちら。スマホの方がキレイに配置されていますね。

PCの方は、なんだか納得がいかない表示になっていましたね。では、さらに設定をしていきましょう。

PC表示時のメイン画像の高さを指定

そうです。高さをちゃんと指定していなかったので表示がおかしかったのです。

上の画像の高さ設定は「200」。デフォルトでは「400」になっています。

では、「200～500」でどのようなイメージになるのかを設定してみました。

「200」と「300」だと、まだ枝先しか見えません。「400」で地面の部分が少し見えてきました。「500」で全体が見え、いい感じに収まりました。しかし、画面全体の画像の占める範囲が広くなってしまいました。

そんな時は、メイン画像の表示位置も指定できるので変更してみましょう。

メイン画像の表示位置を指定

メイン画像の表示位置の指定とは、登録した画像のどの部分を表示させたいのかを指定することです。「中央（デフォルト）」と「上」「下」から選ぶことができるの、サンプル画像のように、被写体（真ん中のお花）が中央より下にある場合は、「中央」もしくは「下」を選ぶとうまく表示されます。

スマホ表示時のメイン画像の高さを指定

先ほどのスマホの表示は「150」に設定しています。（デフォルトは「200」）

スマホでのメイン画像の表示が上手くいっていない場合は、ここで高さを変更してみましょう。

メイン画像内に表示するコンテンツを入力する

設定したメイン画像上にキャッチコピーを表示することができます。

例えば、キャッチコピーに「Koharu Mama」、表示する文章に「子育て・お出かけ情報サイト」と設定した場合、このような表示になります。

画像だけではなく、キャッチコピーや文章を設定するだけで、またまた印象がかわりましたね。

サイトロゴを設定した場合、キャッチフレーズの表示がなくなってしまいましたよね。この機能を利用すれば、メイン画像上にキャッチコピーとしてキャッチフレーズを表示することができますね。

また、タグを利用することで、タグのアーカイブページへ誘導することが可能です。

なんだか、『LION MEDIA』の基本設定より盛りだくさんだった気がします・・・。

次のテーマは、『LION BLOG』カスタマイズ【デザインスキン設定】の使い方をご紹介します。

お疲れさまでした。