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

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

最終更新日:2018.06.02


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

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

基本設定[LION用]

 

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

 

『LION BLOG』にはどんなカスタマイズ項目があるのって方はこちらから。

『LION BLOG』カスタマイズの使い方【項目一覧】

『LION MEDIA』ってなぁに? どんな機能があるのって方はこちらをご覧ください。

『LION MEDIA』はWordPress初心者にオススメのテーマ!

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

広告

検索機能の検索対象

検索のイメージ

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

 

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

これでーす!

検索ボックス

 

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

検索機能の設定

1.固定ページと投稿

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

2.投稿ページ

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

3.固定ページ

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

 

こはるママ  こはるママ

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

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

 

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

アーカイブうのイメージ(引き出し)

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

 

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

 

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

 

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

 

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

投稿の抜粋文字数の設定

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

ワイド投稿抜粋文字数

 

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

画像レフト抜粋文字数

 

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

 

広告

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

レイアウトのイメージ

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

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

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

『LION BLOG』レイアウト設定ワイド

 

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

『LION BLOG』レイアウト設定 画像レフト

 

レイアウト設定

レイアウトイメージ

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

レイアウト設定

カラム数を選ぶ

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

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

 

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

1カラムと2カラムのイメージ(ランチボックス)

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

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

 

 

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

 

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

 

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

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

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

アーカイブ2カラム

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

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

アーカイブ1カラム

 

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

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

投稿ページ2カラム

 

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

投稿ページ1カラム

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

 

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

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

1カラム時の横幅設定

サイズの選択肢は、740px」「820px(デフォルト)」「900px」「100%の4つです。

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

1カラムサイズ

 

広告

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

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

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

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

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

 

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

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

『LION BLOG』のウィジェットの使い方を知りたい方はこちらから。

『LION BLOG』ウィジェットの使い方:初心者向け

 

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

お知らせのイメージ

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

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

お知らせヘッダーの設定

 

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

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

お知らせヘッダーの表示

 

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

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

広告

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

タグのイメージ

カテゴリー・タグの説明ってなんのこと?

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

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

カテゴリー・タグの説明

 

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

 

meta descriptionで表示

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

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

検索結果の例

metaの表示

1行目:タイトル

2行目:サイトURL

3行目:説明で入力した文章(meta description)

 

アーカイブページで表示

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

カテゴリー説明

 

両方で表示(デフォルト)

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

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

 

こはるママ

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

 

Copyrightの設定

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画像を指定してください」と指示されているので、条件通りに用意する必要があります。

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

 

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

ロゴ画像の設定後

 

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

ロゴ設定Webページの表示

 

メイン画像の設定

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

サイトのメイン画像の設定

 

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

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

メイン画像サンプル画像

 

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

サイト画像を設定したWebページ

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

 

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

サイト画像設定スマホイメージ

 

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

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

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

サイト画像を設定したWebページ

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

 

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

メイン画像高さイメージ

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

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

 

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

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

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

メイン画像表示位置サンプル

 

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

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

サイト画像設定スマホイメージ

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

 

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

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

メイン画像に表示するコンテンツ

 

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

メイン画像にキャッチフレーズを設定

 

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

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

 

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

 

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

 

 

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

お疲れさまでした。

 

『LION BLOG』にはどんなカスタマイズ項目があるのって方はこちらから。

『LION BLOG』カスタマイズの使い方【項目一覧】

『LION MEDIA』ってなぁに? どんな機能があるのって方はこちらをご覧ください。

『LION MEDIA』はWordPress初心者にオススメのテーマ!

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

当サイトは『THE THOR』を使っています。

詳細は公式ページをチェック!!


『LION MEDIA』『LION BLOG』のFITから、ついに有料テーマがリリース!
なんと、LIONテーマの10倍以上の機能を搭載

 

「THE THOR(ザ・トール)」

プラグインなしでSEOにも対応したWordPressのテーマです。初めての方でもサポート付きなので安心です。
デザイン着せ替え機能」を使えば、気に入ったデモサイトのスタイルを、あなたのサイトにワンクリックでコピーできますよ。

お気に入りのスタイルをダウンロードして、「THE THOR ザ・トール」を始めてみませんか?

 

広告