悩んでいる人SWELLのブログトップページをカスタマイズしたい。
WordPressの有料テーマ「SWELL」は記事が書きやすいだけでなく、デザインの自由度が高いテーマでもあります。
私のようにCSSやHTMLがさっぱりの初心者でも、日本語が理解できてキーボードとマウスが使えたら簡単にカスタマイズできます。
この記事ではSWELLのブログパーツ機能を使ってトップページをカスタマイズした方法を紹介します。
- SWELLのブログパーツとは
- ブログパーツでトップページをカスタマイズした手順
SWELLのブログパーツ機能は超便利
SWELLのブログパーツ機能はサイトのカスタマイズに重宝する優秀な機能です。
使い方は悩む必要もなく、普通に記事を作成するように配置したいパーツを並べていくだけ。
完成したブログパーツを記事作成やウィジェットエリアで呼び出せばOKです。
このサイトの記事下エリアでSWELLを紹介している部分もブログパーツで作っています。
SWELLのブログパーツ機能を使ってカスタマイズした手順
さっそくブログパーツ機能を使ってのカスタマイズ手順を画像付きで説明します。
トップページカスタマイズ前の状態
まずカスタマイズ前のトップページの状態を。
記事一覧リストの部分はカスタマイザーだけで作成していて、その上部にピックアップバナー、右にサイドバーというシンプル設計でした。
この記事一覧の部分をカスタマイズ。
カテゴリーごとに主に読んでほしい記事を表示し、moreボタンでカテゴリー内の記事一覧に飛ぶように変更します。
トップページのカスタマイズ手順4ステップ
トップページのカスタマイズ手順を4ステップで解説していきます。
まず下準備をしておきます。
といっても簡単で、投稿ページの一覧からトップページで表示したい記事のIDをメモしておくだけです。
IDをメモしたらブログパーツを新規作成していきます。
使うのは「投稿リスト」というブロック。「SWELLブロック」の中にありますよ。
画面右のメニューから投稿リストの設定をしていきます。
表示する記事は全記事、任意のカテゴリー、任意の記事だけなど変更可能。
今回は任意の3記事を表示します。
今回のように表示する記事を指定した場合はmoreボタンのリンク先URLを指定しないとダメです。
ここではランニングカテゴリーにリンクします。
表示する記事を指定せずにカテゴリーなどから自動で表示する場合はmoreボタンのリンク先を指定する必要はないです。
カテゴリー名をウィジェットタイトルで設定するか見出しで表示するか迷いましたが、ウィジェットタイトルの場合はトップページが見にくくなったので見出しで表示することにします。
完成したら保存。
ブログパーツを保存したらウィジェットの設定に行き、「トップページ上部」のエリアにHTMLコードを入れます。
HTMLコードといっても簡単で、さっき作成したブログパーツのIDを入力するだけ。
ブログパーツの一覧からコピペでOKです。
入力したら忘れず保存をクリックしましょう。
最後にカスタマイザーでの設定。
これまではタブにカテゴリーのIDを入れてトップページでカテゴリー別に表示していましたが、そこを空欄にして新着記事と人気記事のタブ切り替えだけにします。
これでブログパーツで作成したウィジェットの下に新着記事と人気記事が表示されます。
トップページカスタマイズ完了
以上でブログのトップページのカスタマイズは完了。
ほかのSWELLユーザーさんに比べたらショボく見えますが基本的にはシンプル志向なので今回はこれでよし。
追記：トップページのカテゴリー名表示をデザインに変更
トップページのデザインをいじって二日たち、「トップページ内にh2タグがあるってSEO的にどうなん？」という疑問が出てきました。(STEP2の最後のところ。)
しかもトップページのソースを見たら記事タイトルのところがh2になってるみたいです。
「よくわからんけどちょっとやばそう。ていうかデザインしたほうがおしゃれっぽいし。」ということで、カテゴリー名のところをCanvaでちゃちゃっと作りました。
デザインをいじりたくなるテーマ「SWELL」
- CSSやHTMLの知識は一切不要
- ブログパーツで独自デザインのサイトを作成できる
- 人気テーマゆえ参考になる個人ブログやカスタマイズ記事が豊富
＼ ベテランブロガーも絶賛！ ／
SWELLでカスタマイズするのは楽しい
私がトップページをカスタマイズしようと思ったきっかけは「SWELLユーザーみんなやってるから」。
もともとは「ブログのトップページなんてシンプルでいいや」と思って記事スライダーも廃止してmanablogさんを参考にシンプルなトップページを作っていました。
でもやっぱり「せっかく他のテーマより高額なSWELLを使ってるのだから」と、シンプル要素は残しつつもう少しSWELLの機能を活かす方向に。
ただ単にカテゴリーごとに新着順に並んでるだけでは読んでほしい記事が読まれにくいですしね。
SWELLでブログのカスタマイズをするのはなにげに楽しい。まだカスタマイズしてないあなたもぜひやってみてください！
やりだしたら寝るのも忘れるのでカスタマイズは休日前にやりましょう。
