SWELLブログパーツでトップページをカスタマイズ【固定ページは使いません】

URLをコピーする
URLをコピーしました!
悩んでいる人のアイコン画像悩んでいる人

SWELLのブログトップページをカスタマイズしたい。

WordPressの有料テーマ「SWELL」は記事が書きやすいだけでなく、デザインの自由度が高いテーマでもあります。

私のようにCSSやHTMLがさっぱりの初心者でも、日本語が理解できてキーボードとマウスが使えたら簡単にカスタマイズできます。

この記事ではSWELLのブログパーツ機能を使ってトップページをカスタマイズした方法を紹介します。

SWELL公式サイトはこちら

この記事の内容
  • SWELLのブログパーツは超便利
  • ブログパーツでトップページをカスタマイズした手順
  • SWELLでカスタマイズするのは楽しい
タップできる目次

SWELLのブログパーツ機能は超便利

SWELLのブログパーツ機能はサイトのカスタマイズに重宝する優秀な機能です。

使い方は悩む必要もなく、普通に記事を作成するように配置したいパーツを並べていくだけ。

完成したブログパーツを記事作成やウィジェットエリアで呼び出せばOKです。

このサイトの記事下エリアでSWELLを紹介している部分もブログパーツで作っています。

SWELLバナー
  • ブロックエディタに完全対応。
  • デフォルトでも美しいデザイン。
  • 初心者でも簡単。マウスだけでカスタマイズ可能。
  • 豊富なウィジェットエリアで誰ともかぶらない自分だけのサイトデザインに。

SWELLのブログパーツ機能を使ってカスタマイズした手順

さっそくブログパーツ機能を使ってのカスタマイズ手順を画像付きで説明します。

トップページ作成は固定ページを使う方法もありますが今回のカスタマイズはウィジェットとカスタマイザーだけで行いました。

トップページカスタマイズ前の状態

まずカスタマイズ前のトップページの状態を。

記事一覧リストの部分はカスタマイザーだけで作成していて、その上部にピックアップバナー、右にサイドバーというシンプル設計でした。

トップページのカスタマイズ前

この記事一覧の部分をカスタマイズ。

カテゴリーごとに主に読んでほしい記事を表示し、moreボタンでカテゴリー内の記事一覧に飛ぶように変更します。

トップページのカスタマイズ手順4ステップ

トップページのカスタマイズ手順を4ステップで解説していきます。

STEP
下準備

まず下準備をしておきます。

といっても簡単で、投稿ページの一覧からトップページで表示したい記事のIDをメモしておくだけです。

記事のIDをチェック
STEP
ブログパーツを作成

IDをメモしたらブログパーツを新規作成していきます。

ブログパーツを新規作成

使うのは「投稿リスト」というブロック。「SWELLブロック」の中にありますよ。

SWELLブロックの投稿リスト

画面右のメニューから投稿リストの設定をしていきます。

表示する記事は全記事、任意のカテゴリー、任意の記事だけなど変更可能。

今回は任意の3記事を表示します。

右のメニューから表示する記事を設定

今回のように表示する記事を指定した場合はmoreボタンのリンク先URLを指定しないとダメです。

ここではランニングカテゴリーにリンクします。

表示する記事を指定せずにカテゴリーなどから自動で表示する場合はmoreボタンのリンク先を指定する必要はないです。

moreリンク先のURLを指定

カテゴリー名をウィジェットタイトルで設定するか見出しで表示するか迷いましたが、ウィジェットタイトルの場合はトップページが見にくくなったので見出しで表示することにします。

完成したら保存。

見出しブロックを使ってカテゴリーを表示
STEP
ウィジェットの設定

ブログパーツを保存したらウィジェットの設定に行き、「トップページ上部」のエリアにHTMLコードを入れます。

HTMLコードといっても簡単で、さっき作成したブログパーツのIDを入力するだけ。
ブログパーツの一覧からコピペでOKです。

入力したら忘れず保存をクリックしましょう。

トップページ上部のウィジェットエリアに表示する設定
STEP
カスタマイザーの設定

最後にカスタマイザーでの設定。

これまではタブにカテゴリーのIDを入れてトップページでカテゴリー別に表示していましたが、そこを空欄にして新着記事と人気記事のタブ切り替えだけにします。

これでブログパーツで作成したウィジェットの下に新着記事と人気記事が表示されます。

カスタマイザーの記事一覧リストを新着記事と人気記事だけに設定

トップページカスタマイズ完了

以上でブログのトップページのカスタマイズは完了。

ほかのSWELLユーザーさんに比べたらショボく見えますが基本的にはシンプル志向なので今回はこれでよし。

カスタマイズ後のトップページ

追記:トップページのカテゴリー名表示をデザインに変更

トップページのデザインをいじって二日たち、「トップページ内にh2タグがあるってSEO的にどうなん?」という疑問が出てきました。(STEP2の最後のところ。)

しかもトップページのソースを見たら記事タイトルのところがh2になってるみたいです。

「よくわからんけどちょっとやばそう。ていうかデザインしたほうがおしゃれっぽいし。」ということで、カテゴリー名のところをCanvaでちゃちゃっと作りました。

カテゴリー名のデザインを作成

デザインをいじりたくなるテーマ「SWELL」

  • CSSやHTMLの知識は一切不要
  • 豊富なウィジェットエリアで誰ともかぶらない
  • ブログパーツでオリジナルのおしゃれな外観に
  • 人気テーマなので参考になる個人ブログがたくさん

SWELLでカスタマイズするのは楽しい

私がトップページをカスタマイズしようと思ったきっかけは「SWELLユーザーみんなやってるから」。

もともとは「ブログのトップページなんてシンプルでいいや」と思って記事スライダーも廃止してmanablogさんを参考にシンプルなトップページを作っていました。

でもやっぱり「せっかく他のテーマより高額なSWELLを使ってるのだから」と、シンプル要素は残しつつもう少しSWELLの機能を活かす方向に。

ただ単にカテゴリーごとに新着順に並んでるだけでは読んでほしい記事が読まれにくいですしね。

SWELLでブログのカスタマイズをするのはなにげに楽しい。まだカスタマイズしてないあなたもぜひやってみてください!

やりだしたら寝るのも忘れるのでカスタマイズは休日前にやりましょう。

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

URLをコピーする
URLをコピーしました!
タップできる目次
閉じる