ワードプレスの無料テーマ「MOESIA」の使い方&カスタマイズ画面での設定方法

オシャレな無料テーマ、「Moesia」の使い方をワードプレス初心者にも分かるように説明しますね!おそらく日本で一番親切なテーマの設定解説記事になっているのではと思います(笑)カスタマイズ画面で編集する具体的な方法をお伝えします。

今回の記事は予めデモサイトページのようにレイアウトをインストールしなければなりません。インストールがお済みでない場合は

ワードプレスの無料テーマ「MOESIA」の使い方~デモ画面のようなレイアウトにする方法~

2017.09.28
をご覧ください。

まずはカスタマイズ画面を開いてください。

 

今回はカスタマイズ画面にて編集を行います。

 

左側にあるサイドバーの項目を一つ一つ見ていきましょう。

その前に、設定して欲しい部分があります。

デモサイトと同じレイアウトにする方法

カスタマイズ画面左サイドバーをスクロールすると、「固定フロントページ」という項目が出てきます。

まずはこの項目から設定しましょう。

  1. 「フロントページの表示」を「固定ページ」にします。
  2. 「フロントページ」を「Front Page」にします。
  3. 「投稿ページ」を「Blog」にします。

これでデモページと同じサイトデザインになりましたね!

早速、カスタマイズ画面のサイドバーの上から順に説明していきます。

サイト基本情報

カスタマイズ画面の一番上の項目をクリックすると、「サイト基本情報」を編集する事ができます。

  • サイトのタイトル(覚えやすいサイト名で今後変更することは好ましくない)
  • キャッチフレーズ(検索エンジンの評価に大きく関係します)
  • ブラウザタブに表示されるファビコン(サイトアイコン)

を設定することができます。

この項目はしっかり考えてから設定することをオススメします。サイトが育つスピードに大きく関係します。

 

GENERAL

ロゴ画像の設置を行うことができる項目になっています。このロゴはブログ記事から流入してきた人が「TOPページを見たい」というときにクリックする可能性が高いです。

TOPページを見たいと言うことは、サイトに興味を持った証です。これからコンテンツの充実を図り、たくさんクリックされるようなロゴになっていくと嬉しいですね!

ロゴの設定が終わり、下にスクロールすると、4つの項目設定を行うことができます。

  1. アニメーション表示をOFFにする場合はチェック
  2. 表示スクリーンが1024px以下のとき、サイドバーを消す場合はチェック
  3. 表示スクリーンが1024px以下のとき、フッターウィジェット(本記事下部にて説明)を消す場合はチェック
  4. 検索機能ボタンを表示するときはチェック

④はチェックを入れるとメニューバーの下に虫眼鏡マークがつきます。

Blog options

この項目では2種類のブログのレイアウトの設定ができます。

  • “ブログ一覧ページ”の設定(メニューバーのBLOGをクリックすると自動で表示される設定になります)
  • ”TOPページに一部表示される”ブログの表示設定

コンテンツを充実させて、検索順位を上げたいという人にとって、とても需要な設定項目になります。

 

ブログ一覧ページ

「Layout」のラジオボタンでブログ一覧ページのデザイン編集を行うことができます。

 

「Layout」項目の「Small images」を選択すると、サイドバー有りで左側に小さい写真が出る表示形式になります。

「Layout」項目の「Large images」を選択すると、サイドバー有りで大きい写真の下に記事の一部が表示される表示形式になります。

 

「Layout」項目の「Masonry (no sidebar)」を選択すると、サイドバー無しでブログことにアイキャッチ画像と記事の一部が連結して表示される形式になります。

 

「Layout」項目の「Full width (no sidebar)」を選択すると、サイドバー無しで左側に小さい写真が出る表示形式になります。

 

TOPページのブログ表示

ラジオボタン選択の下にチェックボックスがあります。

「Excerpt lenght」でブログの一部表示部分(アイキャッチ画像下部)に表示される文字数を決めることができます。デフォルトで30文字です。

「Check this box to display the full content of your posts on the home page.」のチェックを外すとブログページのアイキャッチ画像下部にシェアボタンや記事の一部が表示されます。

 

チェックを入れるとブログアイキャッチ画像の下部に何も表示されなくなります。シンプルなデザインにしたい場合はチェックを入れることをおすすめします。

 

4.Welcome Area

「Welcome title (not the site title)」にTOPページ上部の文章を設定します。PNG形式のロゴ画像を設置することが可能です。

また、タイトルの下に簡単な説明文を設置できます。「Welcome message (not the site description)」に文章を記入してください。この文章を作るポイントは、短い文章にすることです。文章を設定するときに改行できないので、画面のサイズによっては変なところで改行されてしまうんです。

このテーマの強みは、TOPページ上部にボタンリンクを設置することができるんです。

The text for the call to action button」にボタンに記載する思わずクリックしたくなる文章を記入してください。

「The link for the call to action button」にボタンをクリックした先のリンク(URL)を記入してください。もちろん、文字の色やボタンの色も変更できます!

その他に、

  1. TOPページ以外にTOPヘッダー画面を表示させない場合はチェック
  2. スクロールした時にメニューバーが追尾する場合の透過をOFFにする場合はチェック

②はメニューバーの追尾機能をOFFにしていたら何も変化はありません。

Single posts/pages

ブログ記事ページと固定ページのアイキャッチ画像設定に関する項目です。

  • 「Check this box to show featured images on single posts」ブログ個別ページの上部にアイキャッチ画像を表示する場合はチェック(チェックする方がおすすめ)
  • 「Check this box to show featured images on pages」固定ページ上部にアイキャッチ画像を表示する場合はチェック(チェックを外す方がオススメ)
  • 「Check this box to display the author bio on single posts. You can add your author bio and social links on the Users screen in the Your Profile section.」記事投稿者情報&SNSを表示する場合はチェック

 

MENU

メニューバーの位置やレイアウトを設定する項目です。

「Check this box to show the nav bar at top (changes will be visible after you save and exit the Customizer).」にチェックを入れると、メニューバーがページの最上部に設置されます。

 

「Check this box to show the nav bar at top (changes will be visible after you save and exit the Customizer).」のチェックを外すと、メニューバーがTOP画像の下に設置されます。

 

Fonts

Fontsの項目では、HP内で使用するフォントデザインを選ぶことができます。アルファベット用のフォントしか選べません。

  • 「Select your desired font for the headings.」で見出し(HP内でフォントサイズが大きい見出し文字)のフォントを選ぶことができます。
  • 「Select your desired font for the body.」で本文のフォントを選ぶことができます。
  • 「H1~H6 font size」でブログ記事の見出しレベルごとのフォントサイズを事前に設定することができます。
  • 「Body font size」でブログ記事本文のフォントサイズを設定できます。
  • 「Home page widget titles size」でウィジェットタイトルのフォントサイズを変更できます。
  • 「Menu links font size」メニューバー内の文字サイスを変更できます。(デフォルト設定は小さめになっているので大きく変更することをおすすめします。)

Front Page Colors

HP内の色を細かく変更することができます。

Web Designは配色のセンスがものすごく重要になってきます。使う色は基本的に何でもいいのですが(色彩心理を考慮したら尚よい)、色の組み合わせがものすごく大事になってきます。

そこで僕がよく使っている配色サイトを紹介します。

http://coolors.co/

また、ページの背景色と文字の色は高コントラスト(白と黒など対極の色)を使用することをおすすめします。

色んな色を試してピッタリな配色を選んでください!

ヘッダー画像

メディアにアップロードしてある画像を埋め込む事ができます。何枚か画像を設置してランダム表示することもできますよ!

背景画像

全ページの背景に画像を設定することができます。写真などを設置してしまうと本文が非常に読みにくい状態になります。パターン画像やグラデーション画像など、本文を読みやすい背景画像を設置しましょう。

メニュー

ワードプレスのメニューは色んなパターン組み合わせを予め設定しておき、適切なメニュー項目を設置します。TOPページ上部に設定するメニューバーとページ最下部(フッター)のメニューバーには異なるメニューを設置することが可能です。

1つのメニューの組み合わせ毎に名前をつけるとこのように表示されます。

そしてメニューセットの名前をクリックすると、中身(メニューバーに表示される項目)が表示されます。「Praymary Menu」をにチェックを入れるとTOPページ上部のメニューバーとして表示されるようになります。

ウィジェット

フッター内に好きな項目を選んで設置することができます。Facebookページを掲載したり、Twitterと連携させたり、GoogleMapを表示させることもできます。もちろん問い合わせフォームを設置することもできます。

 

追加CSS

追加CSSの項目に下のコードを埋め込むと、ページ下部の宣伝リンクを消すことができます。

⇓デフォルトで設置してある文章を消すことができるんです!

⇓のコードをCSSの記述欄に埋め込んでくださいね!

 

関連記事

表示される関連記事の形式に関する設定画面です。上2つのチェックは入れておくのがオススメです。

これでワードプレス初期設定は完了です!

まとめ

Moesia完全マニュアルとして丁寧に書き連ねました。

僕は無料テーマの中でTOPクラスのクオリティのテーマだと思っています。色や画像を変更するだけで、オリジナルのサイトになります。このテーマはオシャレに特化しています。集客目的のブログには向いていませんが、会社説明目的のHPとして使うならもってこいのHPが出来上がります。

今回は基本設定のみのお話でした。TOPページコンテンツの中身の編集に関しては別の記事にて説明します!

親切すぎる記事だったと思います(笑)

ワードプレス使い方マニュアルとしてお気に入り登録しておくことをおすすめします。

 

長い記事になりましたが、最後までご覧いただき、ありがとうございました。

The following two tabs change content below.
このブログを書いている人は Web集客構築家の原田ゆうきです。 鹿児島出身名古屋在住のガキんちょです。 人を惹きつける文章作成の力を身に着け、理系大学在学中に集客システムの構築・販売ページ作成などのサービスを提供することにより数千万円以上の売上に貢献してきました。 現在クライアントさんの成果発生率100%記録継続中。 暇さえあれば、一人で壁にボールを投げて犬のように遊んでいる。

「いいね!」と思ったらボタンをクリックしてシェアしてね!


オウンドメディア開設後わずか2週間で60万円を回収できた運用ノウハウを詰め込みました

  • 自社で低リスクな資産運用をしたい
  • 年利200%の資産運用をオウンドメディアで達成したい
  • 安定したアクセスを自社媒体に集めたい
  • 広告費を削減したい

売却できるオウンドメディアの作り方をE-BOOKにまとめました

メールマガジン登録者だけに無料配布


カンタンに配信停止できます

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です