WordPress

WordPressテーマ【ライオンブログ 】初心者でも簡単!使い方・カスタマイズを解説!

はてなちゃん
はてなちゃん
LION BLOGテーマをインストールしたけど設定がチンプンカンプンなんだけど!
ひろ
ひろ
WordPressに慣れるまでは、カスタマイズするのも大変ですよね
はてなちゃん
はてなちゃん
もー半日迷ってるよ!
ひろ
ひろ
それは大変でしたね。まずはこの記事通りに作業していけばすごく簡単にカスタマイズできますよ

こんなことで困っている方

・LION BLOGテーマをインストールしたけど、設定方法が分からない

・「オシャレなサイト」にしたいけどやり方がわかならい

・「記事書いたらこのまま公開していいのかな?」

・WordPressの管理画面の名称からして分からない。ウィジェットとかプラグインとか・・・

ご安心ください!

私が、初心者の方でも、簡単にカスタマイズや設定ができるように、解説していきます!

この記事の手順通りに作業していくと、あくまでもイメージですが、こんなデザインになります

サンプルサイト

一般的なWEBサイトの名称が分からない方はこちらを見て頂いてから、下記のカスタマイズにのぞんだ方がスムーズかもしれません。(ヘッダー、フッター、サイドバーなどが分かればOKです)

それでは始めていきましょう!

 

とその前にLION BLOGと同じ会社が作った「THE THOR」というテーマが非常に高機能ですので、もしご興味がありましたら、下記のぞいてみてください!

SEOに強く集客、収益化支援システムが搭載されています

これから稼ぎたい!という方は、先行投資してみてはいかがでしょうか?

こちらをクリックで詳細確認できます

 

LION BLOGテーマをインストールしよう!

まだインストールできていないよという方の為に、LION BLOGテーマのインストール方法から解説していきます

まず、LION BLOGの公式サイト(FIT株式会社)よりテーマをダウンロードします

LION BLOGのインストール方法サイトに入りましたら、下にスクロールしていきます

LION BLOGのインストール方法

「LION BLOG」の「ダウンロードページ」をクリック

LION BLOGのインストール方法

ダウンロードページのLION BLOGの「無料テーマ・ダウンロード」をクリック

LION BLOGのインストール方法

ユーザー登録をして、ログインが必要なので登録していきます

まず「ユーザー名」と「メールアドレス」を入力

「登録」をクリック

LION BLOGのインストール方法

ログイン画面に切り替わりますので、ログインしていきます

先ほど入力した「ユーザー名」を入力

「パスワード」は、登録したメールアドレスに届いています

「ログイン」して、ダウンロードページに戻ってください

 

LION BLOGのインストール方法

ダウンロードページに戻りました

右下に「ログイン中」と出ていれば、ダウンロード可能です

「無料テーマ・ダウンロード」をクリック

ダウンロードされたら、WordPressの管理画面に入ってインストールしていきます

LION BLOGのインストール方法

WordPress管理画面の「外観」>「テーマ」をクリック

LION BLOGのインストール方法

左上の「新規追加」をクリック

LION BLOGのインストール方法

「テーマのアップロード」をクリック

LION BLOGのインストール方法

「ファイルを選択」をクリック

先ほどダウンロードしたLION BLOGテーマのファイルは、ZIP形式なのでそのままドラック&ドロップでもOK

LION BLOGのインストール方法

「lionblog-200.zip」のファイルを選択

LION BLOGのインストール方法

このように選択されたら、「今すぐインストール」をクリック

LION BLOGのインストール方法

「有効化」をクリック

LION BLOGのインストール方法

このようにLION BLOGテーマが有効化されました

かっこいいですね!

LION BLOGのインストール方法

今サイトがどんな状態になっているか見ていきましょう

WordPress管理画面の左上から「サイトを表示」

サイトを表示する際に「サイトを表示」の上で右クリックをして、「リンクを新しいタブで開く」と便利です

サイトを表示の説明
LION BLOGのインストール方法

このようなサイトになっています

これをカスタマイズしていきます!

LION BLOGのインストール方法

ダッシュボードに戻ってカスタマイズしていきましょう

 

LION BLOGテーマのカスタマイズをしよう!

それでは、カスタマイズをしていきましょう!

LION BLOGテーマのカスタマイズは、

WordPress管理画面の「外観」>「カスタマイズ」でやっていきます

LION BLOGテーマのカスタマイズ方法

「外観」>「カスタマイズ」をクリック

LION BLOGテーマのカスタマイズ方法

これが、カスタマイズの項目です

こちらを使ってカスタマイズしていきます

LION BLOGテーマ特有のカスタマイズが多いですね

LION BLOGテーマのカスタマイズ方法

こちらは、カスタマイズ画面の見方になります

左側:「カスタマイズ項目」です

右側:左側でカスタマイズしたものが、リアルタイムに反映されるフィールドです。こちらを確認しながら、カスタマイズができるので便利です

※真ん中の「Hello world(タイトル)」はWordPressにデフォルトで入っている記事サンプルです。「No Image」の部分が記事の画像(アイキャッチ画像)です

カスタマイズが終わったら「カスタマイズ項目」の上にある「公開」を忘れずにクリックしましょう!

保存みたいなイメージになりますので、忘れると設定が反映されません

 

サイト基本設定

最初に、「サイト基本設定」をしていきます!

LION BLOGのサイト基本設定

「サイト」基本設定をクリック

サイトタイトルとキャッチフレーズの設定

「サイトタイトル」と「キャッチフレーズ」の設定をしていきます

LION BLOGのサイト基本設定

サイトタイトル:サイトのタイトルを入力

サイトキャッチフレーズ:サイトタイトルの補足情報などを入力(なくてもOK)

LION BLOGのサイト基本設定

入力すると、右側のフィールドにこのように反映されます

サイトアイコンの設定

サイトアイコンとは下記のことです

サイトアイコンの説明

では、サイトアイコンを設定していきます

「サイトアイコンを選択」をクリック

メディアライブラリ画面

メディアライブラリが表示されますが、まだ何も入ってない方もいますよね

まだ画像やアイコンがないよという方は、下記を参考にして頂き、準備をお願いします

画像はすぐ準備できますが、アイコンやロゴをプロに依頼した場合は、数日かかると思うので、納品され次第、また戻って設定してみて下さい。(サイトアイコンは今すぐになくても大丈夫です)

画像を持ってないようという方は、下記の参考サイトになります。ブログを書いていくにあたって画像は必要になってきますので、参考にしてください!

●写真AC

日本最大の無料写真素材サイト。まずは写真ACがおすすめ

写真素材無料【写真AC】

ぱくたそ

日本人のモデルが多いです
ぱくたそ

 

●Unsplash(アンスプラッシュ)

海外のサイト
Unsplash

 

●いらすとや

かわいいイラストフリー素材
いらすとや

 

自分のアイコンやロゴはココナラで作ってもらうのがおすすめです

私はいつもココナラを利用してアイコン、ロゴ、サムネイルなど作成してもらってます!

ブログを運営していく中では必要な投資かなと思います

準備はできましたか?

「サイトタイトル」「キャッチフレーズ」「サイトアイコン」が設定できましたら、「公開」を忘れずにして次にいきましょう!

 

カテゴリーの設定をしていこう!

次にカテゴリーの設定をしていきます

カテゴリーとは記事を分類するものです。

私のこのサイトでは、この「WordPress」と「Twitter」の部分にあたります

カテゴリーの説明

もし、まだ何についての記事を書くか決まってないよということでしたら決まってから設定でも大丈夫です

カテゴリーの設置方法はこちらの記事をご覧ください

おかえりなさい(⌒∇⌒)

カテゴリーの設定が完了したら、次にメニューの設定にいきましょう!

 

メニューの設定をしていこう!

続いてメニューの設定をしていきます

メニューとはこの部分です

メニューの説明

まずは、管理画面の「外観」>「カスタマイズ」をクリック

メニューの設定

「メニュー」を選択

LION BLOGテーマメニューの設定

「メニューを新規作成」をクリック

LION BLOGテーマメニューの設定

メニュー名:メニューを管理する為の名前。私は「メインメニュー」とします

メニューの位置:メニューを表示させる位置の選択です。私は、ヘッダー、フッター両方を選択します

設定をしたら「次へ」をクリック

LION BLOGテーマメニューの設定

「項目を追加」をクリック

LION BLOGテーマメニューの設定

固定ページの「▼」をクリック

「ホーム」をクリック

LION BLOGテーマメニューの設定

カテゴリーの「▼」をクリック

先ほど設定したカテゴリーをクリック

LION BLOGテーマメニューの設定

このように選択したメニューが左側に移っていればOKです

LION BLOGテーマメニューの設定

このように、「ヘッダー」に反映されています

LION BLOGテーマメニューの設定

このように、「フッター」に反映されています

これでメニューの設定は完了です!

次のパートからは、LIONテーマ用のカスタマイズになるのですが、非常にたくさんのカスタマイズができます

全てやっているといつまでたっても感じの記事が書けないので、必要最低限の解説をします

冒頭のサイトイメージのようになります

もっと細かな設定も知りたいよ!という方は、こちらもご覧ください

 

基本設定[LION用]していこう!

それでは、既存設定をしてきましょう!

変更するのは一箇所だけです

ヘッダー画像を設定します

WordPress管理画面の「外観」>「カスタマイズ」をクリック

基本設定の解説

「基本設定[LION用]」をクリック」

基本設定の解説

「画像の選択」をクリック

基本設定の解説

画像を選択します

もし画像がまだないよ!という方はこちらを参考にしてください

基本設定の解説

このようにヘッダー画像が挿入されました

サイトっぽくなってきましたね!

基本設定の解説

最後に「公開」をクリック

 

デザインスキン設定[LION用]していこう!

次にサイト全体のデザインやテーマカラーを決めていきます

自分の好みにあった、デザインや色にしてみてください!

「外観」>「カスタマイズ」をクリック

デザインスキン設定

「デザインスキン設定[LION用]」をクリック

ベースデザインを選択

まずベースのデザインです

デザインスキン設定

4パターンありますので、好きなデザインを選択します

あとからでも変更できますので、直感できめちゃいましょう

メインカラーを選択

次にメインカラーです

デザインスキン設定

デフォルトで用意されている色から選択しても良いですし

一番下の「Color Pickerからメインカラーを選択する」にチェックを入れて、「Color Picker」で自分の好きな色を選択できます

デザインスキン設定

このように選択した箇所の色がかわります

だいぶイメージに近づいてきましたか?

 

ウィジェットの設定をしていこう!

ウィジェットとは「小さなパーツ」という意味で、利用したいものだけ組み合わせて使えます

WEBサイトの中では下記のように使われています。赤枠の部分がウィジェットで設置したものになります

ウィジェットの設定

これがウィジェットです

ウィジェットの設定手順

ウィジェットの設定手順になります

初期段階で必要なウィジェットは全て配置されてますので、ここでは「不必要なウィジェットの削除」を行っていきます

「外観」>「カスタマイズ」をクリック

ウィジェットの設定

「ウィジェット」をクリック

ウィジェットの設定

「通常サイドバーエリア」をクリック

ウィジェットの設定

「最近のコメント」は初期段階ではコメントはないので削除しておきます

ウィジェットの設定

「固定サイドバーエリア」をクリック

通常サイドバーエリアと何が違うかといいますと

固定とは?

画面をスクロール(下にいった時)したときに、一緒にウィジェットも下に降りてくるウィジェットのことです

通常はスクロールしたら、表示されなくなります

ウィジェットの設定

「固定サイドバーエリア」で削除するのは、「メタ情報」です

メタ情報は、WordPress管理者(サイト管理者)が使うもので、読者の方には関係なので削除しましょう

これで必要なものだけ残しましたが、カテゴリーとかまだ付ける予定ないよ!という方は自分のサイトに合わせて、カスタマイズしてください

最後にウィジェットの追加方法も解説します

ウィジェットの設定

ウィジェットを設定したい箇所を選択して

「+ウィジェットを追加」をクリック

ウィジェットの設定

追加できるウィジェットの一覧が出てきます

ここでは試しに「カレンダー」を選択してみます

ウィジェットの設定

このようにカレンダーが配置されます

一般的に、有料のテーマを使うと、このウィジェットやカスタマイズ機能が充実していて、もっとさまざまな自分好みのカスタマイズが実現できることが多いです

「THE THOR」このLION BLOGと同じ会社が作った有料テーマです

 

投稿スキン設定[LION用]:見出しのデザインや色の設定

ここでは、記事の見出しの設定をしていきましょう

まだ記事がない方はわかり辛いと思いますので、記事ができたらまた設定してみてください!

見出しの設定

「投稿スキン設定」をクリック

見出しの設定

上記のように

・見出しの色

・見出しの文字の色

・見出しのデザイン

を選択していきましょう

 

デザインの完成イメージ

これに記事を書いていくとこんな感じになります

サンプルサイト

これで細かい部分のカスタマイズはまだ沢山ありますが、記事を書いて公開しても大丈夫なデザインになっていると思います

デザインのカスタマイズは、本当にきりがないので1日中やっていても終わりません!

それよりも、早く記事をかきながら、デザインも少しずつカスタマイズしていくことをおすすめします

記事書かないとブログになりませんので(-_-;)

記事の書き方はこちらの記事をご覧ください

【ワードプレスブログ】記事の書き方(グーテンベルグ・クラッシックエディターを網羅的に解説!)この記事は、「投稿」と「固定ページ」の違い。グーテンベルグ(ブロックエディター)とクラッシックエディターでの記事の書き方を初心者向けに解説しています。...

また、デザイン以外の細かい設定なども必要になってきます

こちらの記事はご参考まで

【ワードプレス】使い方マニュアル【初心者向け網羅版!】WordPressの基本操作や基本設定を初心者向けに網羅的に解説しています。50枚以上の画像で解説しているのでとにかくわかりやすいです。...

それでは、このあとはもっと細かいカスタマイズの説明をしています

 

【応用編】LION BLOGカスタマイズ

続いて、応用編として細かいカスタマイズの説明をいくつかしていきます

WordPress管理画面の「外観」>「カスタマイズ」の細かい設定の説明です

必要に応じて、設定していってくださいね!

基本設定[LION用]

基本設定の説明をしてきます!

説明項目はこんな感じです

  1. 検索機能の検索対象
  2. 投稿の抜粋文字数
  3. レイアウトの設定
  4. 記事ビューレイアウト設定
  5. ヘッダー最上部の表示設定

 

①検索機能の検索対象

サイト内を検索した際に、どの記事まで検索対象範囲にするかの設定です

検索対象の説明

ここの検索窓でサイト内検索をした時です。

そもそも、投稿と固定違いがわからないよ!という方はこちらから

 

②投稿の抜粋文字数

投稿の抜粋文字数とはここのことです

投稿の抜粋文字数

赤枠の中の文字数を変更したい場合に設定しましょう

 

③レイアウトの設定

レイアウトの設定です

カラムとは「列」や「蘭」という意味です

1カラムでしたら、サイト内を「1列」でレイアウトするということです

ここの設定では

1カラム:サイドバーなし

2カラム:サイドバーあり

となります

 

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

記事ビューレイアウトとは、サイト内での記事の表示方法になります

これが「画像レフト」の設定

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

これが「ワイド」の設定

お好みでどうぞ!

 

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

これはここの事です

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

PCとスマホで設定できますので、お好みで設定してください!

【お知らせヘッダーの表示選択】はここの事です

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

おすすめしたい記事がある場合は設定して目立たせましょう!

 

投稿ページの設定[LION用]

投稿ページの設定をしていきます!

設定内容はこんな感じです

  1. アイキャッチ画像の表示/非表示
  2. 投稿日の表示/非表示
  3. 投稿者情報の表示/非表示
  4. 目次の表示/非表示
  5. 前次記事の表示/非表示
  6. 関連記事の表示/非表示
  7. シェアボタンの表示/非表示

 

①アイキャッチ画像の表示/非表示

アイキャッチ画像とはこれのことです

アイキャッチの設定

基本的には「表示する」でよいでしょう

 

②投稿日の表示/非表示

投稿日の表示とはここのことです

投稿日の表示

お好みでどうぞ

 

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

投稿者情報とはここの事です

投稿者情報の設定

現在は設定していませんが、設定するとアイコンやプロフィール文章が表示されます

設定は、WordPress管理画面の「設定」>「プロフィール」でできます

 

④目次の表示/非表示

目次は説明の必要がないと思いますがこれですね

目次の設定

ある程度長い記事で、見出しを沢山使うようでしたら、目次はあった方が読者にとっては親切かなと思います

記事の内容によって設定してください

 

⑤前次記事の表示/非表示

これはここのことです

前次記事の設定

記事を読み終わったらあとに次の記事に誘導するのには便利です

 

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

関連記事とかここのことです

関連記事の設定

同じカテゴリーの記事などが自動で表示されます

 

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

シェアボタンとはこれのことです

シェアボタンの設定

良くみますね

記事を読んでくださった読者が、この記事をシェアしたいと思った時にシェアできるように設置しておきます

これもお好みで!

 

SNS・OGP設定[LION用]

SNSやOGPの設定をしていきます

まず「OGP」とは、「Open Graph Protcol」の略で、TwitterやFacebookなどのSNSでシェアした際に、設定したWEBページの画像やタイトルが表示されます

OGPの設定

ここの部分です

SNSで自分のブログを発信していく場合は、設定していきましょう

IDなど入れていけばOKです

Twitter Cardの種類を選択

これは、Twitterでツイートする際のカードのシ種類になります

デフォルトですと

ブログカードの説明

こんな感じで画像が小さく、横長のカードになります

「Large Image」を選択すると、大きなカードになります

OGPの設定

 

これで、LION BLOGテーマのカスタマイズは終わりにします!

どんどん記事を書いていきましょう!

記事の書き方はこちらの記事をご覧ください

【ワードプレスブログ】記事の書き方(グーテンベルグ・クラッシックエディターを網羅的に解説!)この記事は、「投稿」と「固定ページ」の違い。グーテンベルグ(ブロックエディター)とクラッシックエディターでの記事の書き方を初心者向けに解説しています。...

また下記に、WordPressを使っていくにあたり最低限設定しておいた方が良いことを解説した記事もおいておきますので、確認して設定していくことをおすすめします!

 

WordPressを使用するにあたり最低限やっておいた方が良い設定

この記事では、WordPressテーマの「LION BLOG」のカスタマイズに絞って解説してきました

ただ、WordPressを使っていくには、デザインのカスタマイズの他にいくつかやっておいた方が良いことがあります

それは

・記事の書き方

・パーマリンクの設定

・プラグインの使い方

・お問い合わせフォームの設置

・プライバシーポリシーの設置

・パスワードの設定

・バックアップの取り方

など

上記の解説している記事がありますので、ぜひご確認ください

サーバー契約から

WordPressをインストールして

LION BLOGをインストールして

LION BLOGをカスタマイズして

まだあるのか~

かもしれませんが、もう一息です

今やっておけばあとが楽になりますので、がんばりましょう!

アイキャッチ画像
【ワードプレス ブログ】初期設定・使い方を初心者向けに丁寧に解説!WordPressの初期設定・使い方を網羅的に解説した記事です。WordPress初心者の方はこの記事で基本的な設定などはできてしまいます。画像も70枚以上使って解説しています。...

お互いブログがんばりましょうね!

それではまた別の記事でお会いできることを楽しみにしています(^▽^)/

ひろでした。