SWELLのブロックエディタで超簡単!真似するだけでトップページをオシャレカスタマイズする方法

ブロックエディタ超簡単!真似するだけでSWELLトップページをオシャレカスタマイズする方法
調べ人

・SWELLトップページをおしゃれにしたいけど方法がわからない

・SWELLを使ってトップページを作り込みたい

・真似するだけである程度おしゃれなブログトップページにしたい

ー 当記事の概要 ー

  • WordPressブログテーマ『SWELL』でおしゃれなトップページを作る方法がわかる
  • 初心者でも出来る『真似するだけでおしゃれトップページ』を作れるようになる

この記事を書いている人

Free

結婚を意識するようになってから、資産形成を本気で考え色々行動して、人生好転しているFreeです。
そんな僕はこんな感じです

  • ブラック飲食店勤務 → 介護職へ転属するもうつ気味 → 副業実績でWeb業界に転職で開放
  • 2018年副業開始:月30万達成
  • 資産5,000万目指して爆進中
  • 副業ブログ約2年で本業×副業×共働きで月収130万円越えを達成!

WordPressテーマを『SWELL』にしてブログ運営を始めているあなたは本当にセンスがあります!その感性があればオシャレトップページを簡単に作ることができますよ!

ボクは今までWordPressブログで『無料テーマを1つ・有料テーマを3つ』使用してきましたが、間違いなく素晴らしい運営人(了さん)が作っているSWELLのブロックエディタ』とはブロガーに最適解かつ最高のテーマです。

ネッコ

他のテーマでトップページをブログ型からサイト型にするのは超大変やったけど、ブロックエディタに完璧対応しているSWELLはホンマに楽に作れるでー!

SWELLトップページをブログ型からサイト型へ移行への全体を知りたい方へ

当記事は、SWELL導入後にトップページをブログ型からサイト型へ移行するときの細かい作り込み部分の解説記事になります。以下の方は参考ページへ移行してくださいね。

Free

WordPressブログやサイトをまだ作っていない方は、上記を参考にしてみてくださいね。

目次

WordPressテーマ『SWELL』のトップページをブログ型からシンプルおしゃれサイト型へ設定方法

SWELLトップページをブログ型からサイト型に変更する全手順

では、上画像の通り『左の状態=ブログ型』から『右の状態=サイト型』になるように作っていきます。

Fun

1つずつ長い説明になってるので、全部確認する必要がなければ興味ある項目箇所をクリックしてね!

画像つきでわかりやすく解説していきます。

1.人気記事3.新着記事の作り方は同じです。記事を取得する方法だけ異なります。

固定ページで『トップページ=ホーム』を作っていない人はこちらの記事で先に作ってくださいね。

①:人気記事(ピックアップ)ゾーンの作り方

SWELL人気記事ゾーンピックアップの作り方
フリファンブログの人気記事ピックアップゾーン

下右画像の通り、人気記事ゾーンで使っているブロック(エディタ)を分解して確認すると『見出しH2』と『投稿リスト』の2種類のブロックです。

人気記事ピックアップゾーンの使い方確認方法
人気記事ピックアップゾーンでは2つのブロックを使用

ではまずは『段落>見出しH2』を作っていきます。

段落 > 見出しH2を作る

人気記事ゾーンの作り方【見出し1】
  1. 段落をクリック
  2. お好みのタイトルを入力
  3. H2を選択
  4. セクション用を選択
    ※セクション用の装飾がなかったり、違うデザインに変更したい場合は下画像の『セクション用のH2変更方法』を確認してくださいね。
セクション用のH2タグ変更方法
  1. ダッシュボードからカスタマイズを選択
  2. 投稿固定ページを選択
  3. コンテンツデザインをクリック
  4. セクション用デザイン内の3種類から選択
人気記事ゾーンの作り方【見出し2】
  1. アイコン用ショートコードを選択するとと表記されるので”アイコンクラス名”に入れる好きなアイコンをFont Awesome公式ページから選択する。
    ※fas fa-blogなら当ブログの人気記事ピックアップと同じアイコンになります
  2. 注釈したい文字を打ち込んで『注釈』を選択

ここまでくると『段落>見出しH2』が終わりです。次に『段落>投稿リスト』を作っていきます。

段落 > 投稿リストを作る

人気記事(ピックアップ)ゾーンの作り方『段落投稿リスト1』
  1. 投稿リストを選択する
  2. ①の投稿リストを選択すると”記事が表示される”ただし、記事を1つも書いていない場合は表示されない。その場合は今後記事を増やしていくと、自動的にこの欄に表示されるようになる
人気記事(ピックアップ)ゾーンの作り方『段落投稿リスト2』
  1. settingを選択する
  2. 表示は6を選択する(お好みでOK)
  3. カード型を選択する(お好みでOK)
  4. 人気順を選択する(表題の通り、人気記事を作る場合のみ)
    ※3.新着記事を作るときは新着順にする
  5. 公開日を表示する(その他は更新日表示も同時に設定はオススメ)
  6. サムネイル画像の上を選択する(お好みで表示しないもOK)
  7. h2を選択する
  8. 最大カラムPCは3列がオススメ(お好みで1列2列へ)
  9. 最大カラム(SP=スマホ)は2列がオススメ(お好みで1列へ)
  10. 抜粋文の文字数はPC・SP共にがオススメ(お好みでその他選択)
人気記事(ピックアップ)ゾーンの作り方『段落投稿リスト3』
  1. 作成した『段落 > 見出しH2を作る』と『段落 > 投稿リストを作る』を選択して、グループ化をする
  2. ⑮でグループ化した背景に色をつける(デフォルト色やカスタマイズカラーを選択)

これで当ブログフリファンブログの『人気記事ピックアップ』の部分とほぼ同じ状態を作る事ができています。

では次に、②:簡易自己紹介の作り方を紹介しますね。

②:簡易自己紹介

SWELLトップページブログ型からサイト型の簡易自己紹介の欄
フリファンの簡易自己紹介(About us)ゾーン

では順にSWELLでフリファンブログのような『簡易自己紹介ゾーン』の作り方を解説します。

SWELLトップページブログ型からサイト型の簡易自己紹介2
  1. フルワイドを選択する
  2. 右側の設定画面より、画像URL欄のメディアから選択する
  3. 背景になる希望の画像を選択する
  4. Fixed BackgtoundをONにする

上右画像の通り、簡易自己紹介ゾーンで使っているブロック(エディタ)5個のブロックです。上からそれぞれ『見出し、段落、画像、段落、ボタン』という順で作っています

  1. 見出しになるタイトルを決めます。当ブログでは『About us』(お好みでOK)
  2. 段落ブロックで文章入力して中央寄せにする
  3. 表示させる画像を選択する
  4. 段落ブロックで文章入力して中央寄せにする
  5. ボタンブロックでボタンを表示
    ※左画像ボタンの出し方を参考にしてください
SWELLトップページサイト型簡易自己紹介の設定
  1. ブロックを選択する
  2. コンテンツの横幅をフルワイドに選択する
  3. 上下padding量PC・SP=スマホともに0を選択する
  4. テキストカラーはホワイトを選択する(お好みでOK)
    ※当ブログは背景が黒系なのでテキストカラーはホワイトです
  5. オーバーレイカラーはブラックで不透明度は40を選択する(お好みでOK)
  6. ボタン内にURLを入力する
    ※別で固定ページで作った自身のプロフィールURLをコピペするのみ

上記の設定が終われば当ブログと同じような簡易自己紹介欄のゾーンが仕上がります。

では、次に③:新着記事の作り方の解説にいきます。

③:新着記事

SWELLトップページサイト型のカテゴリーゾーンの作り方

③:新着記事の全体の流れは①:人気記事(ピックアップ)ゾーンの作り方と同じです。なので、もういちど①:人気記事(ピックアップ)ゾーンの作り方を参考にしながら作ってみてくださいね。

Fun

異なる点が一点あるので、下記を参考にしてね!

①:人気記事ピックアップゾーンの作り方でそのまま作ってしまうと、新着記事ではなく人気記事を自動表示させてしまいます。そのため、人気記事ではなく新着記事を表示させる設定をしなければなりません。

人気記事ではなく新着記事を表示させる方法は下図の黄色枠の通り。

人気記事ではなく、新着記事を設定する方法
人気記事ではなく、新着記事を表示する方法

上記の通り、①:人気記事(ピックアップ)ゾーンの作り方で解説した、手順⑥の人気順を選択するという部分を新着順に選択することにより、表示される記事が新着順になります。

その他は、①:人気記事(ピックアップ)ゾーンの作り方と全く同じで③:新着記事のゾーンが完成します。

では最後に④:カテゴリーの部分を作っていきます。

④:カテゴリー

SWELLトップページサイト型の新着記事の作り方

下右画像の通り、カテゴリーゾーンで使っているブロック(エディタ)『見出しH2』と『3カラム』の2種類のブロックです。ただし、3カラム内でピンク枠1つずつブロックを複数利用しています。(後述します)

カテゴリー欄の作り方見本
カテゴリーゾーンでは上記のブロックを使用

ピンク枠部分はピンク枠内にブロックを複数使用しています。

『段落>見出しH2』の作り方

『段落>見出しH2』の作り方ですが、①:人気記事(ピックアップ)ゾーンの作り方で説明している『段落>見出しH2』と同じ作り方なので、こちらを参考にしてみてくださいね。

『段落>カラム』の作り方(3カラム)

SWELLトップページをサイト型段落>カラムを作る
3カラムの作り方
  1. 段落 > カラムを選択する
  2. カラムが表示されるので、33/33/33を選択することにより3等分にすることが出来る
  3. ②が終わると、3カラムが表示される
④:カテゴリー3カラムの作り方

④⑤⑥⑧はこれまでの内容と重複するので、割愛しますね。詳しく知りたい方は①:人気記事(ピックアップ)ゾーンの作り方で確認してくださいね。

  1. 段落 > 見出しH3
  2. 段落 > 画像
  3. 段落 > そのまま文字入力
    ※ピンク枠になっている⑥段落 > そのまま文字入力はそのまま⑦と繰り返し設定する
  4. 段落 > 区切り
    ※設定方法は下の補足に記しています。
    ※ピンク枠になっている⑦段落 > 区切りはそのまま⑥と繰り返し設定する
  5. 段落 > SWELLボタン

補足 ⑦段落 > 区切りの詳細は以下の画像の通り

SWELLトップページサイト型の区切り線の作り方

ここまで来ると当ブログフリファンブログトップページのようになっています。お疲れさまでした。

最後に

あくまで、当ブログのトップページのようにWordPress手間『SWELL』でブログ型からサイト型に移行していく方法でしたので、あとは応用することにより、自身好みのトップページでおしゃれなサイト型を作り込むことができます。

外観も重要ですが、WordPressブログの運用は『記事の質』や『情報量』のほうが重要ですので、しっかり記事も作っていきましょうね。

SWELLサイト型のトップページの作り方全体が分かる記事は下記にありますので、参考にしてくださいね。

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる