おすすめテーマ

muumタブ記事一覧

【Muum使い方講座】フリースペースでブログの紹介文と、記事をタブで表示しよう。

ワードプレステーマ「Muum」を使ってブログを作る講座(第4回目)です。

今回は、トップページにブログの紹介文を掲載し、その下にタブ記事一覧のメニューを作ることが目標です。

タブ記事とブログ紹介文

上の赤枠で囲った部分が、ブログの紹介文とタブ記事一覧になります。

ブログの紹介文では、トップページのヘッダー画像の下にブログの紹介文を表示します。

この紹介文では、重要な箇所にアニメーションするアンダーラインを引いて目立たせるようにしてみます。

タブ記事一覧では、「最近の記事」「おすすめ記事」「ランキング記事」を、タブで切り替えるようにします。

トップページの一等地を、タブ切換で有効活用することができます。

どちらも簡単なので、挑戦してみてくださいね。

この講座を通じて、最終的にできるブログ(画像)>>

Muumの公式サイトはこちら>>

★前回(第3回)の記事はこちら↓

フリースペースでブログの紹介文を書こう

ブログの紹介文の部分には、「フリースペース」という機能を使います。

ワードプレスメニューから、

TCDテーマ → トップページ → フリースペースの設定

とクリックしてください。

ブログ紹介文1

すると上の画像の画面になります。

この時に、「フリースペースを表示する」にチェックが入っていることと、「ビジュアル」モードになっていることを確認しておいてください。

では、紹介文を入力していきましょう。

このサイトは、テーマプレスの「」です。
Muumでブログを作れば、簡単に美しいブログを作ることができます。(改行)

今回は上記のように入力してみました。

最後にエンターキーを押して改行しておくと、1行したにスペースができて、デザインがまとまると思います。

ブログ紹介文2

次に、「」の中に文字を入れて、アンダーラインを引いてみましょう。

「」の中をクリックして、文字入力ができるようにします。

メニューの中に「クイックタグ」という項目があるので、その中の「アンダーライン3」をクリックします。

すると「」の中に、アンダーライン3という言葉が自動で入りましたよね。

ブログ紹介文3

カーソル位置はそのままで、「Muum使い方講座」と入力します。

すると上の画像のようになったと思います。

この状態で、アンダーライン3という文字を消してください。

最後に、下の方にある「設定を保存」をクリックすれば、紹介文の完成です。

ブログ紹介文4

では、ここまでできた内容を確認しておきましょう。

トップページを表示してみると、上の画像のようになっていますよね。

赤いアンダーラインが、スーッとアニメーションして引かれていきます。

アンダーラインが引けるワードプレステーマはたくさんありますが、中には目立たせたいばかりに、見にくくなってしまっているものもあります。

その点、Muumのアンダーラインは洗練されていて、とても見やすいデザインになっていると思います。

トップページの記事をタブで表示しよう

ブログ紹介文の下にある「タブ記事一覧」を設定していきましょう。

ワードプレスメニューの中から、

TCDテーマ → トップページ → タブ記事一覧の設定

とクリックしてください。

タブ記事の設定1

デフォルトでは「ブログサンプル」という項目が3つ並んでいます。

これら3つのブログサンプルを、上から順に設定していきたいと思います。

では、一番上の「ブログサンプル」をクリックしてください。

タブ記事の設定2

この中身を変更すると、タブ記事一覧も変更されます。

以下のように設定してみてくださいね。

記事一覧の名前は、「最近の記事」と入力します。

記事のタイプは、「最近の記事」を選択します。

表示する記事の数は、PCが6、モバイルが4としました。

この辺りは好みになるので、この設定では物足りなくなったら変更してみてくださいね。

これより下は、設定の変更なしです。

タブ記事の設定3

続いて上から2番目の「ブログサンプル」を設定します。

記事一覧の名前は、「おすすめの記事」と入力してください。

記事のタイプは、「おすすめの記事」を選択します。

記事の並び順は、新しい記事を先頭に表示したいので「日付」にしました。

表示する記事の数は、PCが6、モバイルが4です。

これより下は、設定の変更なしです。

タブ記事の設定4

最後に、3つ目の「ブログサンプル」を設定します。

記事一覧の名前は、「ランキング記事」と入力してください。

記事のタイプは、「ランキング記事」を選択します。

ランキングの集計範囲は、日間・週間・月間・年間・無期限から選ぶことができます。

日間にすると日によって表示される記事が変わるのですが、閲覧が少ないとランキングに何も表示されないこともあります。

逆に無期限にすると、記事がランキングに表示されないことは無くなりますが、変動が少なくなります。

そこで、最初は週間や月間くらいにしておいて、様子を見てみましょう。

今回は「週間」を選択してみましょう。

これで3つの「ブログサンプル」を変更し終わったので、最後に下にある「設定を保存」をクリックしてください。

これで、新しいタブ記事一覧メニューに変わりました。

ブログを表示して確認してみてくださいね。

Muum講座ここまでのまとめ

今回は、まずトップページにブログの紹介文を掲載してみました。

ブログの紹介文を掲載できるテーマというのは、意外と少ないですよ。

Muumではフリースペースという機能で、紹介文を掲載できる数少ないテーマの一つに入ります。

この機能を有効に使ってくださいね。

それから、もう一つはタブ記事一覧の設定です。

タブで記事の表示が切り替えられると、表示できる記事数が多くなるし、興味がある記事がすぐに見つけられるようになります。

タブ切換ができるテーマの方が、訪問者にとっても、ブログを運営する側にとってもメリットがあります。

Muumのタブ記事の設定はとても簡単なので、あっという間に終わります。

ある程度記事数が増えたら、すぐにこの設定をしておいてください。

さて、これで第4回の講座はおわりです。お疲れさまでした。

※次回はメガメニューの設定をしていきたいと思っています。

【2021年版】WordPressテーマの目的別ベスト3はこちら>>

Muumの詳細はこちら>>

関連記事

  1. mag

    WordPressテーマMAGを使ったサイト事例。シンプルなブログにお…

  2. スワロー

    OPENCAGEのスワローは、初心者におすすめのシンプルなブログ向けテ…

  3. ONEでブログを作る

    【ONEの使い方講座】ブログ記事とトップページの設定をしよう

  4. スワロー

    OPENCAGEのWordPressテーマを5段階評価してみた【ブログ…

  5. MAGの広告スペース

    【MAG使い方講座】ウィジェットを使った広告設置方法

  6. MAGフッター4

    【MAG使い方講座】グローバルメニューとフッター記事一覧を作成します

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


PAGE TOP

おすすめテーマ

企業サイトにおすすめの高品質なWordPressテーマ12選【日本語対応】

おすすめテーマ

女性向けの美しい(かわいい)WordPressテーマ。ブログと商用サイトに

おすすめテーマ

美容、エステ、ヘアサロン等におすすめのテーマ5選。特徴を比較してみました

おすすめテーマ

トップページに動画を再生できる、おすすめWordPressテーマを集めました

おすすめテーマ

ブログにおすすめの有料WordPressテーマを厳選。デザインの美しさと機能を重…

ONEでCTA設置

おすすめテーマ

アフィリエイトにおすすめのWordPressテーマ。すべて複数サイトで使い回しO…

おすすめテーマ

WordPressの有料テーマ。目的別におすすめベスト3を発表!(2021年版)…

目的別テーマのおすすめベスト3

おすすめテーマ

WordPressでネットショップが作れるおすすめテーマ【Welcart・Woo…