【JINからSWELLに変えたら大反響】ブログをサイト型トップページにカスタマイズする方法

WordPressテーマをJINからSWELLに変えてから

と質問をいただくようになりました。

WPテーマJINを利用していた時は思い通りにトップページを作ることができずにいた私でも、簡単にブログをサイト型にすることができたのはSWELLのおかげ。

SWELLに変えてからはHTMLの編集もCSSも使ってないです。

ブロックエディター（ビジュアル編集画面）だけで作成しているので、私のようなブログ初心者でもSWELLを使えば簡単にブログがカスタマイズできます。

この記事では、JINからSWELLに変えた理由とサイト型トップページのカスタマイズ方法を紹介します。

WPテーマをJINからSWELLに変更した理由

1. SWELLは【Pinterestのシェアボタン】対応
2. SWELLの【スクロールする表】と【ステップブロック】で記事作成が簡単になる

SWELLはPinterestのシェアボタン対応

Pinterestのシェアボタンが付いていなかったことが、JINからWPテーマを変えようと思った一番の理由です。

TwitterよりPinterestからの流入が圧倒的に多い当ブログでは、Pinterestのシェアボタンは絶対にほしい機能でした。

#SWELLアップデート予告
シェアボタンのところにもPinterestのボタンを追加します！
また、デザインパターンを２種類追加します！

デザインパターンの名称も一新し、既存デザインも微調整加えてます。 pic.twitter.com/h5FG2uXcic

— 了🌊SWELL開発者 (@ddryo_loos) December 2, 2019

JINを使用していた時は、コードを入れてカスタマイズしたり、プラグインを検討していましたがキレイに設置できずにいたのでSWELLで簡単に設定できるようになって大満足。

SWELLのシェアボタンは、追尾にしたり記事下だけの設置にしたり、デザインも豊富で、汎用性が高いです。

設定方法などはSWELL公式サイトの「SNSシェアボタン」の設定方法を参照ください。

ピンタレストについては、ブログ初心者とピンタレストは相性良すぎ◎閲覧10万人→流入600人【アクセス数公開】の記事で運用方法などを紹介しています。

SWELLの【スクロールする表】と【ステップブロック】で記事作成が簡単になる

Twitterで見たときに「この機能、絶対に使いたい」と思ったのが携帯表示でスクロールする表。

#SWELLアップデート予告

テーブルブロックをスマホで横スクロールできるようにした時、「スクロールできるよ」ということが表示されるようになります！#wpswell pic.twitter.com/GlFzKccwO6

— 了🌊SWELL開発者 (@ddryo_loos) September 17, 2020

JINを使っていた時は、横にスクロールする表を作るためにプラグインを追加していましたが、SWELLではプラグイン不要で見やすい表が簡単に作れるようになりました。

また、JINを利用していた時はカスタマイズのコードを入れて作成が大変だった手順のデザインも、SWELLならボタンをクリックするだけで設定できると知って、SWELLの購入を決めました。

【SWELL ver 1.3.3 リリースしました】

今回の目玉アップデートは「ステップブロック」の追加です！
完成版を使用している様子の動画も新しく録画して、記事内で見れるようにしています^^https://t.co/0WhKVHUq1b pic.twitter.com/XzNAbgywR0

— 了🌊SWELL開発者 (@ddryo_loos) October 31, 2019

詳しく知りたい方は、SWELL公式サイトの下記2記事をご覧ください。

• 「表ブロック」で使えるSWELLのオリジナル機能
• 【SWELL専用ブロック】ステップブロックの使い方

JINとSWELLの違い。ブログ初心者でも活用できるようになった機能

JINからSWELLに変更してから特に活躍している機能は2つ。

1. 【ブログパーツ】カテゴリーごとに記事下の表示が変更できる
2. 【LP機能】ヘッダーやフッターが表示されないオリジナルのページが作れる

【ブログパーツ】カテゴリーごとにCTAの表示が変更できる

SWELLのブログパーツを使えば、カテゴリーごとに記事下（CTA）の表示を変えることができます。

同じカテゴリーの関連記事を表示させたり、ニーズに合った広告を貼ることができるので、雑記ブログ運営者としては大変ありがたい！

カテゴリーごとにCTAを設定する方法

【LP機能】ヘッダーやフッターが表示されないランディングページが作れる

海外からのアクセスが僅かにあるインスタからの入り口にLP機能で作ったページを利用しています。

linktreeやLit.Link、html名刺などの外部サイトを利用してもいいんですが、デザインやページ速度など何かしら不満を感じていたのでLPとして自作しました。

【LPの編集画面】ランディングページのヘッダーとフッターを非表示にする方法

私はLP機能の「ヘッダー・フッター設定」のチェックを外して、ヘッダー（ブログロゴやメニューバー）とフッターを非表示にしています。

最初に目に入る画面上部から日本語を消すことで、海外の人が迷子になりにくいかなと思っています。

WPテーマSWELLでサイト型トップページを作る方法

この記事の公開時、

• WordPress歴10ヵ月
• WPテーマSWELL歴2ヵ月

だったブログ初心者が作ったサイト型トップページの再現方法を紹介します。

サイト風トップページ作成の事前準備

1. WordPressのテーマSWELLをインストール、SWELLの子テーマを適用
   ※子テーマのダウンロードはこちら
   ※インストール方法はこちら
   
2. トップページ用の固定ページを作成、トップページを「最新の投稿」ではなく「固定ページ」に設定
   （外観＞カスタマイズ＞WordPress設定＞ホームページ設定）

【新着・カテゴリー別】記事リストを表示させる方法

タブの設定（SWELLブログ：タブ）

SWELLブロックの「タブ」から、4つのタブを作成しています。

タブのデザインは3種類ありますが、私は「ふきだし」を使用していて、横幅は「固定幅PC25％」に設定しています。

記事の表示方法（SWELLブロック：投稿リスト）

タブの中身は2カラムの設定。

SWELLブロックの「投稿リスト」を使って1カラム3記事で合計6記事を表示させています。

【オーディオブック特集】のタブでは、「Pickup」の箇所から記事のIDを入力して、どの記事を表示させるか指定しています。

【洋書の楽しみ方】のタブでは、Pickupで表示させたい「カテゴリーを選択」した後、Settingsから「投稿の表示順序」で「人気順」を選択して、「聴き方」カテゴリー内の記事が人気順に表示されるように設定しています。

さらに詳しく知りたい方は、SWELL公式サイト「【SWELLブロック】投稿リストブロックの使い方」の記事をご覧ください。

【波のような背景】の設定方法

SWELLブロックの「フルワイド」を使用しています。

背景色を好きな色に設定して、境界線の形状を「波」、高さレベルを「5」にすると下記の通り曲線の背景が付きます。

さらに詳しく知りたい方は、SWELL公式サイト「【SWELL専用ブロック】フルワイドブロックの使い方」の記事をご覧ください。

【パソコンから見ると3列2行、携帯から見ると2列3行】デバイス別に表示を分ける方法

PC表示用とモバイル表示用の2パターンを作成して、画面の大きさに合わせてどちらか一方のみを表示するように制限しています。

他のSWELLを使ったトップページを見てみたい方はSWELL公式のデモページにデザインが素敵なブログがたくさん掲載されているのでぜひチェックしてみてください。

WPテーマSWELLと一緒に紹介したいおすすめサイト・利用サービス

当ブログを運営するために、1年間ABCオンラインに所属していました。

2020年8月は3,000PV以下でしたが、2021年8月には13,000PVを達成。

しっかり着実にブログを成長させたい方におすすめのブログサロンなので、気になる方は【ABCオンラインを1年利用】月1万円達成・ドメインパワー5倍【評判通りブログ初心者におすすめ】の記事をご覧ください。

当ブログのアイキャッチ画像やデザインについては、【無料】ブログやピンタレストの画像作成におすすめな素材サイトとツールにて詳しく掲載しています。