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

悩んでいる人のアイコン画像悩んでいる人

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

こんな悩みに答えます。

SWELLは記事が書きやすいだけでなく、とにかくデザインをいじりたくなるテーマでもあります。

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

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

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

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

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

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

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

このサイトのフッター直前でSWELLを紹介している部分もブログパーツで作っています。

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

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

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

カスタマイズ前の状態

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

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

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

カスタマイズ手順

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

STEP
下準備

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

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

STEP
ブログパーツを作成

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

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

投稿リストの設定をしていきます。

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

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

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

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

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

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

完成したら保存。

STEP
ウィジェットの設定

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

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

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

STEP
カスタマイザーの設定

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

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

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

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

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

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

追記:カテゴリー名表示をデザインに変更

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

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

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

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

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

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

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

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

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

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

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

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

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

タップできる目次
閉じる