【ブログ】SWELLでトップページをカスタマイズ!

SWELLでブログのトップページをカスタマイズ!

こんにちは、ブログ制作にあたり、SWELLを購入したAnnaです。

前回の記事で、SWELLがどれだけ優秀なWordPress有料テーマかをご説明しているので、ご覧ください✨

そして、今回はその中でもブログのトップページのカスタマイズにフォーカスしていきたいと思います!


Youのアイコン画像You

うん、Annaさんのトップページいい感じになってる!

Annaのアイコン画像Anna

ありがとう♡SWELLでトップページのカスタマイズも簡単にできたよ!



前回もお伝えしたように、SWELLでブログを作ると作業がとても簡単です。

このブログのトップページのカスタマイズももCSSやhtmlを使わずにできているんです✨

実際にどんな感じでしたのかを説明していきますが、いろんなデザインにできるので、好きなようにカスタマイズしていきましょう!

▼WordPressブログで必要なもの▼
エックスサーバー
・簡単!選べるデザイン!SWELL
・格安ドメイン取得サービス─ムームードメイン─

☆SWELLでブログのトップページをカスタマイズ


トップページは、SWELLの基本設定であるカスタマイズとSWELLのブロックで完成させました!

右上のグローバルナビゲーションや記事スライダーは、カスタマイズというほどでもないし、デフォルトなのですが、あとで詳しく説明していきます。



Popular Articlesから下は、SWELLのブロックでカラムや投稿リストなどを組み合わせてカスタマイズしました!

タブ切り替えなどもSWELLで簡単にカスタマイズできるのですが、私はそれはせずにカテゴリー毎でカード型で表示させています。

この記事の最後に書きますが、ブログのトップページは、要素別に作成して、最後にトップページ用の固定ページとして当てはめていきます👍

☆SWELLの「カスタマイズ」でトップページ作成

では、早速「カスタマイズ」でできることを説明していきます。

・グローバルナビゲーション

これは、画面の左にあるWordPress基本機能のメニューから設定できます。

管理メニュー → 外観 → メニュー

ヘッダーに表示する重要なナビゲーションで、基本的にはカテゴリーが表示されることになっています。

「メニュー設定」→「グローバルナビ」でどのカテゴリーを表示するか選びましょう!

・ピックアップバナー


グローバルナビの画面から、ピックアップバナーを設定することもできます。

下の「ピックアップバナー」に✓を入れると、トップページにピックアップバナーも表示されます。

私は、今のところ表示していませんが、お好みで✨

・お知らせバー

管理メニュー → 外観 → カスタマイズ → サイト全体設定 → お知らせバー


さっきの、管理メニューから外観、カスタマイズを押すと、上の画面にとびます。

そこから「サイト全体設定」で「お知らせバー」をクリック。

お知らせバーをどこに表示させるのか、クリック。


「ヘッダー上部に表示」に✓をいれると、ブログ名の下に一行でてきます。

これがお知らせバーです。

私はいま表示させていませんが、何かあれば使ってみるといいと思います👍

・記事スライダー

管理メニュー → 外観 → カスタマイズ → トップページ → 記事スライダー

SWELLのデフォルトのままでも、記事スライダーは設定になっていますが、カスタマイズから設定もできます✨

☆SWELLのブロックでトップページをカスタマイズ

さて、今度は後半の部分です!

Popular Articles以下のところですが、これはトップページ用固定ページにおいてSWELLブロックで作っているだけです。*ブログパーツで作ることもできますが、ここでは固定ページに一気に作っていきます。

・固定ページからトップページ作成

管理メニュー→固定ページ→新規作成

新規作成に進むと、固定ページのタイトルが出てくるので「Home」とか「トップページ」といれます。


こんな感じですね。

すでにPopular Articlesができているんですが、どうやって作るかを説明していきます。

まず、「Popular Articles」や「人気記事」、「新着記事」など、あなたがトップにもってきたいもののタイトルをH3でいれます。

次に「+マーク」をおして、SWELLのブロックを表示。

右上の「投稿リスト」をクリック。

すると、右の欄に「投稿数」や「レイアウト」、「新着順or人気順」などを選ぶことができます。

投稿数に対して、パソコンとスマホで見るときの「カラム数」を選びます。

これは、お好みで調整してください✨



これで、「人気順」や「新着順」のカラムができたかと思います。

ちなみに私の設定は以下です。

Setting
  • 表示投稿数 6
  • カード型
  • 人気順か新着順
  • 最大カラム数3列(PC)
  • 最大カラム数2列(スマホ)



では次に、カテゴリー別の表示を設定していきましょう!

・カテゴリー別の設定

「+マーク」→「レイアウト要素」→「カラム」をクリック。

好きなのを選ぶんですが、ここでは一番左のをクリック。

カラムがちょうど半分で2つ出てきます。

右でも左でも、+マークをクリック。

ここでも「投稿リスト」をクリック。

右の欄にある、SettingsというタブからPickupというタブに切り替える。

スクロールダウンさせて、どのカテゴリーかタグで表示させるのかを選択する。

ここでは「ブログ」を選択してみる。

右の欄にある、Settingsのタブの方に戻って、「表示する投稿数」やレイアウトなどを決める。

少しスクロールダウンして、パソコンとスマホで表示させるカラム数を決める。

カテゴリー別では、1列ずつにしています✨

設定は以下の通りです。

Setting
  • 表示投稿数 3
  • リスト型
  • 人気順
  • 最大カラム数1列(PC)
  • 最大カラム数1列(スマホ)
  • More readのテキスト入れる
Pickup
  • カテゴリーのみ選択


これで、固定ページが完成したと思います✨

保存をしたら、これをトップページに設定していきます。

☆カスタマイズした固定ページをトップページに設定

管理メニュー→外観→カスタマイズ→WordPress設定→ホームページ設定


「ホームページの表示」を「固定ページ」にする。

「ホームページ」をさっき作った固定ページのタイトル「Home」にする。

これでトップページが、会社のホームページみたいになります👍

あと、私はトップページではサイドバーを表示させないようにしていますが、そのあたりもお好みで♡

☆SWELLで簡単にトップページをカスタマイズ!

こんな感じでトップページを作ってみたんですが、CSSもhtmlコードも使ってないのがわかりますよね!

もう本当に簡単にトップページもカスタマイズできます✨

私のデザイン以外でもカスタマイズできるので、お好きなようにSWELLをいじってみてくださいね!


▶▶ノマド・フリーランス・ブログのご相談

SWELLを購入して気づいたすごさ!

  • 機能がたくさんでポチポチするだけ♪
  • ブロックエディタが使いやすい!
  • 簡単で楽しい!

SWELL公式サイト(無料お試し版もアリ)

SWELL
SWELL | シンプル美と機能性の両立 - 圧倒的な使い心地を追求するWordPressテーマ
SWELL | シンプル美と機能性の両立 - 圧倒的な使い心地を追求するWordPressテーマシンプル美と機能性の両立させ、圧倒的な使い心地を追求するWordPressテーマ - 『SWELL』の公式販売サイト。 最新のブロックエディター『Gutenberg』にも完全対応。プログ...
あわせて読みたい
【ブログ】独自ドメイン取得&Word Pressでブログ☆初心者でも簡単!
【ブログ】独自ドメイン取得&Word Pressでブログ☆初心者でも簡単!☆独自ドメイン取得&WordPressで作るブログこんにちは♡初心者でも独自ドメイン取得して、一人でブログ作りができたAnnaです。みなさん、ブロガーやノマドライフに憧れて...
あわせて読みたい
【ブログ】おすすめのアフィリエイトASP☆稼ぐなら登録すべき!
【ブログ】おすすめのアフィリエイトASP☆稼ぐなら登録すべき!☆ブログで稼ぐなら!おすすめのアフィリエイトASPブログとココナラ収益でノマドしているAnnaです。ブログで稼ぎたい!ノマドしたい!と思うなら、まずいくつかのアフィ...

サーバーとテーマのおすすめな組み合わせ



この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

この記事を書いた人

海外ノマドをしているAnnaです♡

とにかく旅行が好き!言語が好き!な感じで自由に生きてます。

詳しいプロフィールはこちらからご覧ください♡

コメント

コメント一覧 (2件)

  • anna様

    お世話になっております。
    英語やポイ活などについて情報発信しておりますぴろやんと申します。
    いつも有益な情報発信ありがとうございます。
    くうか様のサイトがとってもわかりやすかったので、貴サイトを参考にSWELLでサイト構築いたしました。
    当方のブログでもくうか様のサイトを参考にさせていただいた旨は、記載させていただいております。
    https://piroyan101.com/wordpressswell2-2/

    引き続き、よろしくお願いいたします。

    • ぴろやんさま
      コメントありがとうございます。
      とっても嬉しいです!
      またSWELLの記事が参考になったとのこと、嬉しく思います♡
      SWELLいいですよね。私は全然IT関係がダメなので、SWELLさまさまです。
      こちらこそ、よろしくお願いいたします。

コメントする

CAPTCHA