MENU
にこ
\ SNSも更新中 /
訪問いただきありがとうございます。
一児の母・30代の主婦┊子育てや暮らしについて学んだことをシェア♩ママの日常が少し楽になる情報発信中!
2024年9月
 1
2345678
9101112131415
16171819202122
23242526272829
30 
お洒落な出産祝いはココから click

SWELLのカスタマイズ!|トップページをサイト型へお洒落に変えよう②

当ページのリンクには広告が含まれています。
  • URLをコピーしました!
にこ

こんにちは!にこ@25_nicomamaです。お越しいただきありがとうございます!

今回は、トップページのカスタマイズ方法第二弾です!

当ブログが利用しているWordPressのテーマは【SWELL】です。

前回ご紹介したカスタマイズ方法より、さらに【サイト型のブログ】を目指しました^^

トップページのカスタマイズに迷われている方は、どちらかのカスタマイズ方法を参考にしてみて下さい♩

この記事で出来るカスタマイズ

  1. ヘッダー
  2. ホーム(挨拶文・最新の記事・カテゴリー等)

\ カスタマイズ第一弾はこちら /

\ おすすめすぎるWordPressテーマ/

この記事はこんな人におすすめ
  • SWELLについて知りたい
  • SWELL のカスタマイズについて知りたい
  • ワードプレスのテーマ選びに迷っている
  • 有料テーマで失敗したくない

やり出したら止まらない「トップページ沼‥」。笑

今回もまんまとハマってしましました!!

#ブロガーあるある

カスタマイズしていたら時間が止まりますよね‥!笑 

※「役に立った!」と思われたら、ブログ内で紹介して頂けたら泣いて喜びます‥!( ; ; )♡

にこ

それではお洒落なカスタマイズ、let’s go〜♩

contents

【テーマ:SWELL】トップページをサイト型へカスタマイズしよう

SWELLといえば、高機能なブロックたち。

これらを組み合わせることで、誰でも簡単にプロっぽく仕上がります♩

前回のカスタマイズ

今回のカスタマイズ

前回のカスタマイズから大きく変わったのは、トップページに【メインビジュアル】を付けたこと。

また、大好きだった【記事スライダー】をやめてみました!

記事スライダーとは?

記事スライダーは、名前の通り自動的に記事をスライドしてくれるもの。

記事スライダー【SWELL公式】

ボタン一つで設置完了♩

【外観】→【カスタマイズ】→【トップページ】→【記事スライダー】

スライドの順番は投稿日・更新日・人気順から選べます。

にこ

記事スライダーはSWELLの標準機能!お好みでやってみて下さいね♩

サイト型ヘッダーの作り方【SWELL】

設定箇所は全部んで3つ!

  1. ヘッダーロゴ
  2. メインビジュアル
  3. ピックアップバナー

①ヘッダーロゴのカスタマイズ

まずはヘッダーロゴのカスタマイズです。

ヘッダーロゴ画像【SWELL公式】

前回のカスタマイズ

ワードプレステーマSWELL トップページのカスタマイズ方法
画像サイズ《1600×360》

今回のカスタマイズ

画像サイズ《1600×360》

【外観】→【カスタマイズ】→【ヘッダー】→【ロゴ画像の設定】

画像サイズは同じですが、設置場所を【左端から真ん中へ】変えてみました!

ヘッダーロゴ画像の設定(当ブログの例)

  • 画像サイズ(PC):120px
  • 画像サイズ(PC追従ヘッダー):48px
  • 画像サイズ(SP):70px
  • ヘッダーレイアウト(PC):ヘッダーナビを上に
  • ヘッダーレイアウト(SP):ロゴ中央メニュー左
  • ヘッダー境界線:なし
にこ

ヘッダーロゴもアイキャッチ画像も全て【Canva】で作成しています!私はプロ版を利用していますが、無料版でも十分お洒落な画像が作れるのでおすすめです^^

②メインビジュアルの設定方法

SWELLといえば、メインビジュアル!!

【SWELL公式】のトップページのように画面いっぱいに画像や動画を入れることができます。

にこ

本当にカッコいい!いつかこんなサイトを作ってみたいなぁ♩

メインビジュアル【SWELL公式】

【外観】→【カスタマイズ】→【トップページ】→【メインビジュアル】

当ブログのメインビジュアル

当ブログでは画面いっぱいにはせず、余白を付けています。

背景も白で統一感。シンプルが好きです!

この画像も【Canva】で作成しました。

メインビジュアルの設定では、画像にテキストを挿入することができます。

メインテキスト▶︎【日々の暮らしを楽しむ】

サブテキスト▶︎【子育って〜】

にこ

メインビジュアルの設定ではフォントを選ぶことができなかったので、このテキスト部分はCanvaであらかじめ作りました!

メインビジュアルの作成(当ブログの例)

  • メインビジュアルの表示内容:画像
  • 周りに余白をつける:チェックを入れる
  • Scrollボタンを表示する:チェックを入れる
  • メインビジュアルの高さ(PC):35vw
  • メインビジュアルの高さ(SP):50vh
  • フィルター処理:グレースケール

③ピックアップバナーの設置方法

にこ

ブログ初心者さんは、このピックアップバナーの設定が少し難しいかもしれません。頑張って設定しましょう〜!!

ピックアップバナー【SWELL公式】

まずは、ピックアップバナー用のメニューを作ります。

【外観】→【メニュー】

ピックアップバナーのメニュー作成

  1. 【メニューを編集】より、【新しいメニューを作成しましょう】をクリック
  2. 【メニュー名】を入力(分かりやすいようにピックアップバナーが良い
  3. 【メニュー設定】のピックアップメニューにチェックを入れる
  4. 【メニューを作成】をクリック
  5. 【メニュー項目を追加】欄の必要な項目にチェックを入れ「メニュー追加」ボタンをクリック
    1. 当ブログはカテゴリーごとに分けています
  6. 表示名(ナビゲーションラベル)・並び順を調整する
  7. 【メニューを保存】をクリック

画像のアップロード方法

【ダッシュボード】→【メディア】→【新規追加】

メディアにアップロードされていない画像は、この方法で登録を。

メニューを作る時に画像のURLが必要になるので、あらかじめアップロードをしましょう!

メニューの中身を作成

STEP
先ほど作成したピックアップバナーを選択
STEP
メディアライブラリより任意の画像を選択
STEP
開いた画像下の【ファイルのURL】をコピー
STEP
ピックアップバナー用メニューそれぞれの【説明欄】に先ほどのURLを貼る
説明欄に任意の画像URLを入力します
STEP
メニュー設定のメニューの位置「ピックアップバナー」にチェック→保存

アップロードする画像は同じサイズがおすすめ。サイズがバラバラだと、並んだ時の画像がバラバラになり綺麗ではありません。

次に、ピックアップバナーの設定をします。

【外観】→【カスタマイズ】→【トップページ】→【ピックアップバナー】

ピックアップバナーの設定(当ブログの例)

  • バナーレイアウト(PC):固定幅4列
  • バナーレイアウト(SP):固定幅2列
  • バナータイトルのデザイン:※表示しない
  • 内側に白線:つける
  • バナー画像を少し暗く:しない
にこ

※当ブログのピックアップバナーはカテゴリごとに分けています!各画像にはあらかじめバナータイトルを入れていますが、設定から入れることも可能です♩

バナータイトルを設定すると‥

ワードプレステーマSWELL トップページのカスタマイズ方法
前回のカスタマイズ

この様に、画像の上にタイトルが表示されます。

にこ

表示の場所やデザインも選べます!お好みでカスタムして下さいね♩

これでヘッダーの設定は終わりです!

次はホームの設定です^^

固定ページでホーム画面を作成しよう【SWELL】

ここからは、これまでに作成したヘッダーの下=メインとなる部分を作成します。

にこ

固定ページで作ることで、より自由にカスタマイズができますよ♩

固定ページ作成の流れ

  1. 固定ページを作成
  2. 固定ページをカスタマイズしていく
  3. 固定ページが完成したら【外観】→【カスタマイズ】→【WordPress設定】→【ホームページ設定】→【ホームページの表示=固定ページ】→カスタマイズした固定ページを選択で完成

固定ページで作成した当ブログのホーム⇩

\ 主に7つのブロックから出来ています/

  1. あいさつ文
  2. 最新の記事
  3. カテゴリー別記事一覧
  4. ピックアップ記事
  5. おすすめ記事
  6. おすすめ記事②
  7. SWELLの紹介
  8. キーワード

それでは、一つずつ詳しく見ていきましょう♩

①あいさつ文

先ほど作った固定ページに作っていきます。

あいさつ文の作り方

step
Canvaで作った【画像ブロッグ】を追加
字体もこだわります!
にこ

各部ブロックの見出しは全て画像を挿入して作っています♩

こちらは、ヘッダー画像と同様に【Canva】で作成をしています。

  • スタイル:デフォルト
  • 画像の表示サイズ:少し小さく表示
  • ブロック下の余白量:0
step
画像の下に【吹き出しブロッグ】を追加

任意の吹き出し・あいさつ文を入力します。

にこ

プロフィールを入れることも可能ですが、こちらの方がさりげなくて気に入っています♩

②最新の記事の作り方

STEP
Canvaで作った【画像ブロッグ】を追加

「New Post」部分も、あらかじめcanvaで作った画像を追加します。

STEP
【フルワイドブロック】を追加

フルワイドブロック【SWELL公式】

  • コンテンツサイズ:サイト幅
  • 上下のpadding量(PC):20
  • 上下のpadding量(SP):20

※padding=余白

背景に任意の画像や色を入れることでブログの雰囲気がガラッと変わるのでおすすめ!

ここでは背景色と上下の境界線の形状を設定しています。

にこ

波やジグザグがお気に入り!アクセントになります♩

STEP
【フルワイドブロック】の中に【カラムブロック】を追加(50:50)
STEP
左側に任意の題名と【投稿リストブロック】を追加

⇢投稿リストブロック【SWELL公式】

新しい記事だけを大きく目立たせたかったので1つだけ指定をしました。

  • 表示する投稿数:1
  • レイアウトを選択:カード型
  • 投稿の表示順序:新着順
  • 各種表示設定:公開日を表示
  • カテゴリー表示位置:日付の横
  • 抜粋文の文字数(PC)):80
  • 抜粋文の文字数(SP):40
STEP
右側に【タブブロック】を追加

⇢タブブロック【SWELL公式】

人気記事と新着記事をタブを使うことで切り替えられるようにタブを使いました。

各設定は同じです

  • 表示する投稿数:3
  • レイアウトを選択:カード型
  • 何番目のタブを先に開いておくか:1
  • 各種表示設定:公開日を表示
  • カテゴリー表示位置:日付の横
  • 抜粋文の文字数(PC)):0
  • 抜粋文の文字数(SP):0

ここで一つ注意!

タブの新着記事と投稿リストブロックの新着記事が重複してしまいます。

そのため、以下の設定を手動で行う必要があります。

投稿リストの【pickup】の設定

この【pickup】では、投稿IDを直接指定したり、除外したりすることができます。

ワードプレステーマSWELL トップページのカスタマイズ方法
にこ

私は左側カラムの最新記事をメインにしているので、右側カラムの最新記事の投稿リストより、最も新しい記事を除外しています!

にこ

IDはダッシュボードの投稿一覧から確認できます♩

③カテゴリー別記事一覧の作り方

ここでも【タブブロック】を使っています。

にこ

タブを押すことでカテゴリーが切り替ります!ブログ内がスッキリするのでおすすめ♩

\ タブを切り替えた感じ /

\ この記事でタブを駆使しました! /

STEP
Canvaで作った【画像ブロッグ】を追加
STEP
【タブブロック】を追加

タブの設定

  1. タブ部分にカーソルを合わせると入力できるので、任意の名前を入力

各投稿リストの設定をする!

これで終わり^^

にこ

④〜⑥については、これらを組み合わせて作れます♩オリジナルのトップページを完成させましょう^^

④SWELL紹介の作り方

STEP
Canvaで作った【画像ブロッグ】を追加

「SWELL」部分も、あらかじめcanvaで作った画像を追加します。

STEP
【カラムブロック】を追加(50:50)
  1. カラム左側にSWELLの画像を入れ、リンクさせる。
  2. カラム右側に【リストブロック】を入れ、関連記事をリンクさせる。
  3. 【SWELLボタンブロック】を入れ、SWELLのURLを入力
にこ

SWELLの関連記事を読んで欲しいので、リストにして入れました!

⑤キーワード検索【タグ】

タグでも検索できるようにこの設定をしています。

ワードプレステーマSWELL トップページのカスタマイズ方法
STEP
【フルワイドブロック】を追加
  • コンテンツサイズ:記事
  • 上下のpadding量(PC):20
  • 上下のpadding量(SP):0
  • 上部の境界線の形状:波
  • 下部の境界線の形状:波
STEP
【フルワイドブロッグ】にCanvaで作った【画像ブロッグ】を追加
STEP
【フルワイドブロッグ】に【タグクラウドブロッグ】を追加

【タクソノミー】→タグ で設定完了!

最後に、完成した固定ページのホームページ設定をします。

【外観】→【カスタマイズ】→【WordPress設定】→【ホームページ設定】→【ホームページの表示=固定ページ】→カスタマイズした固定ページを選択

にこ

以上で全て完了です!お疲れ様でした♩

【SWELLトップページをサイト型へ】カスタマイズ方法まとめ

今回は、前回よりもさらに【サイト型】へ近づけるようにカスタマイズをしました。

サイト型の方が、読んでもらいたい記事がよりアピールできることに気づきました!

また、ブログ全体もよりシンプルになって自分好みに‥^^

今回のトップページを変更するにあたって、全記事のアイキャッチも変更しました。

それについてはまた次回に書きたいと思います!

にこ

何か不明な点があれば、問い合わせでもツイッターでも良いので教えて下さい♩

\ 全力でおすすめするテーマ /

それでは今回はこの辺で。

最後まで読んでいただきありがとうございました^^

よかったらシェアしてね!
  • URLをコピーしました!
contents