SWELLでブログのトップページをカスタマイズ！
こんにちは、ブログ制作にあたり、SWELL
を購入したAnnaです。
前回の記事で、SWELLがどれだけ優秀なWordPress有料テーマかをご説明しているので、ご覧ください✨
そして、今回はその中でもブログのトップページのカスタマイズにフォーカスしていきたいと思います！
Youうん、Annaさんのトップページいい感じになってる！
Annaありがとう♡SWELLでトップページのカスタマイズも簡単にできたよ！
前回もお伝えしたように、SWELLでブログを作ると作業がとても簡単です。
このブログのトップページのカスタマイズももCSSやhtmlを使わずにできているんです✨
実際にどんな感じでしたのかを説明していきますが、いろんなデザインにできるので、好きなようにカスタマイズしていきましょう！
▼WordPressブログで必要なもの▼
・エックスサーバー
・WordPressテーマ「SWELL」
・格安ドメイン取得サービス─ムームードメイン─
☆SWELLでブログのトップページをカスタマイズ
トップページは、SWELLの基本設定であるカスタマイズとSWELLのブロックで完成させました！
右上のグローバルナビゲーションや記事スライダーは、カスタマイズというほどでもないし、デフォルトなのですが、あとで詳しく説明していきます。
Popular Articlesから下は、SWELLのブロックでカラムや投稿リストなどを組み合わせてカスタマイズしました！
タブ切り替えなどもSWELLで簡単にカスタマイズできるのですが、私はそれはせずにカテゴリー毎でカード型で表示させています。
この記事の最後に書きますが、ブログのトップページは、要素別に作成して、最後にトップページ用の固定ページとして当てはめていきます👍
☆SWELLの「カスタマイズ」でトップページ作成
では、早速「カスタマイズ」でできることを説明していきます。
・グローバルナビゲーション
これは、画面の左にあるWordPress基本機能のメニューから設定できます。
ヘッダーに表示する重要なナビゲーションで、基本的にはカテゴリーが表示されることになっています。
「メニュー設定」→「グローバルナビ」でどのカテゴリーを表示するか選びましょう！
・ピックアップバナー
グローバルナビの画面から、ピックアップバナーを設定することもできます。
下の「ピックアップバナー」に✓を入れると、トップページにピックアップバナーも表示されます。
私は、今のところ表示していませんが、お好みで✨
・お知らせバー
さっきの、管理メニューから外観、カスタマイズを押すと、上の画面にとびます。
そこから「サイト全体設定」で「お知らせバー」をクリック。
お知らせバーをどこに表示させるのか、クリック。
「ヘッダー上部に表示」に✓をいれると、ブログ名の下に一行でてきます。
これがお知らせバーです。
私はいま表示させていませんが、何かあれば使ってみるといいと思います👍
・記事スライダー
SWELLのデフォルトのままでも、記事スライダーは設定になっていますが、カスタマイズから設定もできます✨
☆SWELLのブロックでトップページをカスタマイズ
さて、今度は後半の部分です！
Popular Articles以下のところですが、これはトップページ用固定ページにおいてSWELLブロックで作っているだけです。＊ブログパーツで作ることもできますが、ここでは固定ページに一気に作っていきます。
・固定ページからトップページ作成
新規作成に進むと、固定ページのタイトルが出てくるので「Home」とか「トップページ」といれます。
こんな感じですね。
すでにPopular Articlesができているんですが、どうやって作るかを説明していきます。
まず、「Popular Articles」や「人気記事」、「新着記事」など、あなたがトップにもってきたいもののタイトルをH3でいれます。
次に「＋マーク」をおして、SWELLのブロックを表示。
右上の「投稿リスト」をクリック。
すると、右の欄に「投稿数」や「レイアウト」、「新着順or人気順」などを選ぶことができます。
投稿数に対して、パソコンとスマホで見るときの「カラム数」を選びます。
これは、お好みで調整してください✨
これで、「人気順」や「新着順」のカラムができたかと思います。
ちなみに私の設定は以下です。
- 表示投稿数 6
- カード型
- 人気順か新着順
- 最大カラム数３列（PC)
- 最大カラム数２列（スマホ）
では次に、カテゴリー別の表示を設定していきましょう！
・カテゴリー別の設定
「＋マーク」→「レイアウト要素」→「カラム」をクリック。
好きなのを選ぶんですが、ここでは一番左のをクリック。
カラムがちょうど半分で２つ出てきます。
右でも左でも、＋マークをクリック。
ここでも「投稿リスト」をクリック。
右の欄にある、SettingsというタブからPickupというタブに切り替える。
スクロールダウンさせて、どのカテゴリーかタグで表示させるのかを選択する。
ここでは「ブログ」を選択してみる。
右の欄にある、Settingsのタブの方に戻って、「表示する投稿数」やレイアウトなどを決める。
少しスクロールダウンして、パソコンとスマホで表示させるカラム数を決める。
カテゴリー別では、１列ずつにしています✨
設定は以下の通りです。
- 表示投稿数 ３
- リスト型
- 人気順
- 最大カラム数１列（PC)
- 最大カラム数１列（スマホ）
- More readのテキスト入れる
- カテゴリーのみ選択
これで、固定ページが完成したと思います✨
保存をしたら、これをトップページに設定していきます。
☆カスタマイズした固定ページをトップページに設定
「ホームページの表示」を「固定ページ」にする。
「ホームページ」をさっき作った固定ページのタイトル「Home」にする。
これでトップページが、会社のホームページみたいになります👍
あと、私はトップページではサイドバーを表示させないようにしていますが、そのあたりもお好みで♡
☆SWELLで簡単にトップページをカスタマイズ！
こんな感じでトップページを作ってみたんですが、CSSもhtmlコードも使ってないのがわかりますよね！
もう本当に簡単にトップページもカスタマイズできます✨
私のデザイン以外でもカスタマイズできるので、お好きなようにSWELLをいじってみてくださいね！
SWELLを購入して気づいたすごさ！
- 機能がたくさんでポチポチするだけ♪
- ブロックエディタが使いやすい！
- 簡単で楽しい！
SWELL公式サイト（無料お試し版もアリ）
【登録無料！】SNSプロフィール添削プレゼント中！
ノマドフリーランス情報やブログの新着情報・イベント情報を配信！
サーバーとテーマのおすすめな組み合わせ
この記事が気に入ったら
フォローしてね！
コメント
コメント一覧 （4件）
anna様
様
お世話になっております。
英語やポイ活などについて情報発信しておりますぴろやんと申します。
いつも有益な情報発信ありがとうございます。
くうか様のサイトがとってもわかりやすかったので、貴サイトを参考にSWELLでサイト構築いたしました。
当方のブログでもくうか様のサイトを参考にさせていただいた旨は、記載させていただいております。
https://piroyan101.com/wordpressswell2-2/
引き続き、よろしくお願いいたします。
ぴろやんさま
コメントありがとうございます。
とっても嬉しいです！
またSWELLの記事が参考になったとのこと、嬉しく思います♡
SWELLいいですよね。私は全然IT関係がダメなので、SWELLさまさまです。
こちらこそ、よろしくお願いいたします。
Annaさん、コメントありがとうございます。
おしゃれなサイトとてもいいですね。
解説とてもわかりやすく参考にさせて頂きました。
自分も早く海外ノマドしたいです。
ありがとうございます♡
今は、どんなお仕事されているんですか？