MENU
アーカイブ
くうか
ミニマリスト
整理収納・ゲーム・プログラミングが好きな40代専業主婦。4人家族。
小さなおうちに引っ越して収納が減っちゃった!少しずつ物を減らしているミニマリストでもあります。
SWELLでサイト型トップページを作る!解説→CLICK!

SWELLカスタマイズ|サイト型トップページの作り方【おしゃれ】

SWELLトップページサイト型カスタマイズ
この記事でわかること
  • おしゃれなサイト型トップページの作り方
  • ヘッダーをカスタマイズする方法
  • フッターをカスタマイズする方法
  • SWELLの使い方

こんにちは、SWELLというWordPressテーマを2年以上愛用している、くうかです…!

この記事では、ブログをサイト型トップページにするカスタマイズ方法を解説しています。

妹分のゆずいろ

記事が増えてきて古い記事が埋もれていっちゃう…

くうか

それならブログのトップページをサイト型にするのがおすすめだよ!

サイト型トップページにすると、

  • 読んでほしい記事をアピールできる
  • 読者が読みたい記事を探しやすくなる
  • サイトの個性を出せる

という、メリットがあります。

この記事を読めば、プログラミングの知識がなくてもサイト型トップページを作ることができます。

くうか

当ブログのようなサイト型トップページの作り方を、なるべくわかりやすく説明していくので、ぜひ最後まで読んでください!

この記事はこんな人におすすめ
  • サイト型のトップページにカスタマイズしたい
  • ブログのトップページをおしゃれにカスタマイズしたい
  • SWELLでどんなトップページを作れるか知りたい

当ブログは、SWELL公式サイトに利用ブログとして掲載されています。

\ 公式サイトを見てみる /

目次

トップページの「ブログ型」「サイト型」とは?

ブログのトップページには、「ブログ型」と「サイト型」があります。

ブログ型

ブログ型

サイト型

サイト型
サイト型
サイト型
  • ブログ型:記事が新しい順に並んでいる状態。(デフォルトの状態)
  • サイト型:記事が整理され、見やすく表示されている状態。

実際にサイト型トップページを見てみたい方はこちらから →トップページへ

読者側と運営者側のメリットを並べてみると…

読者のメリット
運営者のメリット
  • どんなサイトなのかひと目でわかりやすい
  • 知りたい情報を探しやすい
  • 見せたい記事をアピールできる
  • 記事以外の情報を表示できる
  • サイトの個性を出せる
妹分のゆずいろ

お互いにメリットが多いね!

くうか

SWELLではサイト型を作りやすい、高機能なブロックが揃っているよ。

SWELLを知らないという方は、レビューを書いているので良かったらご覧ください。

くうか

サイト型トップページを作る工程は、大きく分けて3ステップ。
読みたいところへ飛んでくださいね。

SWELLを使ったサイト型トップページの作り方

SWELLで固定ページをカスタマイズ

サイト型トップページを作る手順を説明していきます。

SWELLでは、固定ページで好きなようにブロックを組み合わせることで、自由なデザインを作れるようになります。

くうか

まずは事前準備!

固定ページを3つ作成していきます。

  1. 新着記事ページ:タイトルを付けただけの空白ページ
  2. 人気記事ページ:人気記事を配置したページ(設置したい場合のみ)
  3. ホームページ:メインとなるページ

STEP1. 新着記事ページを作成

①【新着記事ページ】は、タイトルとパーマリンク(URL)のみを設定した空白のページを作ります。

ワードプレスのメニューから「固定ページ」→「新規追加」します。

固定ページを新規作成
固定ページの新規追加
新着記事の作成画面
新着記事の作成画面
  1. タイトル(自分がわかりやすいもの)→「新着記事」としました。
  2. URLスラッグ(URLとなるので英語推奨)→「new-post」としました。
  3. 公開する

ページの中身は空白ですが、最後におこなうホームページ設定という設定で、以下のような新着一覧ページとなります。

新着一覧ページ
新着一覧ページ
くうか

後ほどこのページをトップページからリンクするので、パーマリンクを頭のどこかに入れておいてくださいね。

②【人気記事ページ】は、設置したい場合のみでOKです。

投稿リストブロックを配置して、読んでほしい記事を表示させるページ。

ワードプレスのメニューから「固定ページ」→「新規追加」します。

固定ページを新規作成
固定ページの新規追加
人気記事の作成画面
人気記事の作成画面
  1. タイトル(自分がわかりやすいもの)→「人気の記事」としました。
  2. URLスラッグ(URLとなるので英語推奨)→「popular」としました。
  3. 投稿リストブロックを追加する
    1. 投稿数:6、レイアウト:カード型、抜粋文:お好みで
    2. Pickupタブの投稿IDに6記事文のIDを記載
  4. 公開する

当ブログでは、本当の人気記事の表示ではなく、ピックアップしたい記事を表示しています。

本当の人気記事順に並べたい場合は、投稿IDを指定せず、表示順序を「人気順」にしてください。

妹分のゆずいろ

おすすめ記事より人気記事と書かれている方が読まれる気もするね!

くうか

そうなんだよね。
ではこれで事前準備完了!続いてついに実際の見た目を作っていきます。

STEP2. ホームページ(トップページのメイン部分)を作成

\実際の見た目となる③【ホームページ】全体像はこんな感じ!/

くうか

解説へすぐに飛べるようにしてあるので、見たいところがあれば飛んでくださいね。

①新着記事エリア→解説へ

新着記事エリア

②ピックアップエリア→解説へ

ピックアップエリア

③人気記事エリア→解説へ

人気記事エリア

④カテゴリーエリア→解説へ

カテゴリーエリア

⑤ギャラリーエリア→解説へ

ギャラリーエリア

⑥サイト紹介エリア→解説へ

アバウトエリア

⑦検索エリア→解説へ

検索エリア

それでは、ようやくトップページのメインとなる③【ホームページ】を作っていきます。

ワードプレスのメニューから「固定ページ」→「新規追加」します。

固定ページを新規作成
固定ページの新規追加
ホームページの作成画面
ホームページの作成画面
  1. タイトル(自分がわかりやすいもの)→「Home」としました。
  2. URLスラッグ(URLとなるので英語推奨)→「home」としました。
  3. 下書き保存または公開する。(公開は完成後でもOK)

そして、トップページに入れたい以下の内容を作り込んでいきます。

くうか

それぞれのエリアごとに説明していきますね。

①新着記事エリアの作り方

サイトによって新着記事の位置は様々ですが、私は1番はじめに持ってきています。

それは、リピーターの方のために新着記事がぱっと見でわかると、すぐにアクセスできるため。

見た目はこのように作りました。

新着記事エリア
新着記事エリア

最新の1・2番めの記事のみカード型のアイキャッチ付きで目立たせ、3番目以降の記事はテキスト表示にしています。

くうか

最新の記事をわかりやすくしたかったんだ。

妹分のゆずいろ

パッと見て新しい記事がわかるね!

以下、作成の手順です。

新着記事
【フルワイド】ブロックを追加する

ブロックパターンから、見出しがあらかじめ付属している【フルワイドセクション】を選択します。

フルワイドセクションを選択
フルワイドセクションを選択

見出しに注釈がはじめから入っているのが便利なので、フルワイドセクションを使っています。

フルワイド設定項目
  • コンテンツ横幅:記事
  • 上下のpadding量:PC40・SP20
  • 背景色:白
  • 上下の境界線の形状:斜線、高さ:0
新着記事
【見出し(H2)】ブロックを配置する

【見出し】はブロックパターンで付属していたものをそのまま使用しています。

見た目はセクション用。

テキスト(または画像)・注釈はお好みで設定してください。

見出しに画像を入れたい場合は、【インライン画像】で入れるとH2の属性を保つことができます。

見出しに画像を入れる
見出しに画像を入れる場合
新着記事
カード型の【投稿リスト】ブロックを追加する

【投稿リスト】ブロックで2記事のみ表示

新着記事の最新記事
この部分

【投稿リスト】ブロックを追加。

設定項目
  • 投稿数:2
  • レイアウト:カード型
  • 表示順序:新着
  • 抜粋文:40

最新記事の1・2番目の記事を大きく目立たせたいので、2記事のみ。
見た目を良くするため、抜粋文を入れています。

新着記事
テキスト型の【投稿リスト】ブロックを追加する

【投稿リスト】ブロックで3記事め以降をテキスト型で表示

新着記事の3記事め以降
この部分

【投稿リスト】ブロックを追加。

投稿リスト 設定項目
  • 投稿数:5(CSSで2記事非表示にするため5に)
  • レイアウト:テキスト型
  • 表示順序:新着
  • 抜粋文:0
  • MOREリンク:new-post(STEP1で作成した空白の新着記事ページのURLスラッグを入力)
投稿リストから1・2番目を非表示にする方法

1.投稿リストブロックを選択した状態で、Settingタブ内の【高度な設定】に追加CSS名「li-2nd-none」を入力する。

追加CSSクラスにクラス名を入力
追加CSSクラスにクラス名を入力
追加CSSクラス
追加CSSクラスにクラス名を入力

2.ページ下部にある「カスタムCSSのCSS用コード」に以下のコードを追加

固定ページ内下部のカスタムCSS
固定ページ内下部

\コピペ用CSSコード/

.li-2nd-none li:nth-child(-n+2) {
    display: none;
}
  • コードを追加する場合は自己責任の上おこなってください。
  • 表示される記事数が2つ減るので、記事数をお好みで調整してください。

カスタマイザーの追加CSSではなく、固定ページ下部のカスタムCSSに記載するようにしました。(2022年3月)

このページのみでCSSを使う場合は、この方が速度的にも良いと判断。

CSSに関するSpecial thanks → しらこさん鰥夫(ヤモヲ)さん

1〜2番目の記事を非表示、だけでなくカッコ内の「(-n+2)」の2の部分を他の数字に変えると、その数字の数だけ記事を非表示にすることができます!

例:3記事非表示にする場合は、-n+3にする

くうか

しらこさん、ヤモヲさん、ご協力ありがとうございました♪

くうか

新着記事の最新だけアイキャッチ付きで目立たせたかった!
お風呂で思いついたレイアウトなんだけど、いい感じで気に入ってます♪

他にもこのような表示方法もできます。(当ブログの旧バージョンより)

1記事めカード型
2記事め以降テキスト型

新着記事バージョン1

1記事めカード型
2記事め以降テキスト型+人気記事リスト型

新着記事バージョン2
くうか

新着記事は1記事めを目立たせると目を引きますね!

これら旧バージョンのレイアウトは、こちらの記事で解説しています。

②ピックアップエリアの作り方

特に紹介したい記事を、「メディアとテキスト」ブロックを使って表示させています。

メディアとテキストブロックを使ったエリア
メディアとテキストブロックを使ったエリア

【フルワイド】ブロック(フルワイドセクション)を追加後、【見出し】にインライン画像を設定。

フルワイド設定項目
  • コンテンツ横幅:サイト幅
  • 上下のpadding量:PC40・SP20
  • 背景色:白
  • 上部の境界線:斜線、高さレベル:0
  • 下部の境界線:斜線、高さレベル:0

そして【メディアとテキスト】ブロックを追加。

メディアとテキストブロックは、画像と文字の組み合わせで通常のブロックにはないレイアウトが楽しめます。

今回は「ブロークングリッド」という、SWELL独自のレイアウトを使ってみました。

メディアとテキスト設定項目
  • スタイル:ブロークングリッド
  • モバイルでは縦に並べる:ON
  • 画像サイズ:フルサイズ

テキスト側には様々なブロックを入れることができますが、今回は

  • 【段落】
  • 【SWELLボタン】

のブロックを入れて、関連する記事にリンクさせています。

メディアとテキストのテキスト部分
メディアとテキストのテキスト部分

テキスト側の背景色や装飾は、段落などのブロックをすべて選択した状態で【グループ化】するとできます。

余談ですが、背景色を「グレー」に設定すると、CSSを使わずに透過されますよ。

くうか

写真を目立たせつつコンテンツを入れられるブロックで、おしゃれで気に入っています♪

とても簡単なブロックですが、こちらの記事で使い方を解説しています。

ブログの人気記事を紹介しているエリアです。

人気記事エリア
人気記事エリア

【フルワイド】ブロック(フルワイドセクション)を追加後、【見出し】 にインライン画像を設定。

フルワイド設定項目
  • コンテンツ横幅:サイト幅
  • 上下のpadding量:PC40・SP20
  • 背景色:白
  • 上部の境界線の形状:斜線、高さレベル:0
  • 下部の境界線の形状:斜線、高さレベル:0

そして【投稿リスト】ブロックを追加。

投稿リスト設定項目
  • 投稿数:3
  • レイアウト:カード型
  • 表示順序:新着
  • 抜粋文:0
  • MOREリンク:popular(事前準備で作成した人気記事のURLスラッグを入力)
  • Pickupタブの投稿IDを直接指定:読んでほしい記事ID
妹分のゆずいろ

ここも見てほしい記事を配置してるんだね!

くうか

そう。実はこのアイデアを教えてもらって今回初めてやってみたよ!

④カテゴリーエリアの作り方

カテゴリーエリア
カテゴリーエリア

【フルワイド】ブロック(フルワイドセクション)を追加後、【見出し】 にインライン画像を設定。

フルワイド設定項目
  • コンテンツ横幅:サイト幅
  • 上下のpadding量:PC40・SP20
  • 背景色:白
  • 上部の境界線の形状:斜線、高さレベル:0
  • 下部の境界線の形状:斜線、高さレベル:0
カテゴリー
【リッチカラム】ブロックを追加

【リッチカラム】ブロックを追加し、好みの列数に設定する。

カテゴリー
カラム内にブロックを追加
カテゴリーエリアの詳細
カテゴリーエリアの詳細
  1. カテゴリーのイメージ画像を追加する(スタイルを角丸にしている)
  2. 【アコーディオン】ブロックを追加する(下の画像を参照)
    1. 【リスト】ブロックでサブカテゴリーへリンク
    2. 【段落】でよく使われるキーワード(タグ等)を入れリンク
  3. 【投稿リスト】ブロックを追加し、該当カテゴリーに絞る(ランダム表示)
  4. 【SWELLボタン】ブロックを追加し、該当カテゴリーページへリンクする
アコーディオンブロック内の詳細
アコーディオンブロック内の詳細

また【タブ】ブロックを使って、省スペースでカテゴリー別の記事を表示する方法もあります。

タブブロック(投稿リスト)
タブブロック

タブブロック内に、カテゴリーごとの投稿リストを入れるとこのような表示が可能です。

ギャラリーエリア
ギャラリーエリア

写真を多く使っているブログなので、写真をメインにしたエリアがあってもいいかなと思い作りました。

【フルワイド】ブロック(フルワイドセクション)を追加後、【見出し】にインライン画像を設定。

フルワイド設定項目
  • コンテンツ横幅:サイト幅
  • 上下のpadding量:PC40・SP20
  • 背景色:白
  • 上部の境界線:斜線、高さレベル:0
  • 下部の境界線:斜線、高さレベル:0
ギャラリーエリア編集画面
ギャラリーエリア編集画面
  1. 【リッチカラム】を追加し、好みの列数にする
    1. 当ブログは「横スクロールで表示する」にチェック
    2. 横幅はPCタブレットは220px、スマホは180px
    3. カラム間の余白は左右0.3rem
  2. 各列に【バナーリンク】を追加し、画像とリンク先を設定する
くうか

イメージはインスタグラムなので、バナーリンクの画像サイズを正方形に近づけるとそれっぽくなります♪

⑥サイト紹介エリアの作り方

アバウトエリア
アバウトエリア

【フルワイド】ブロック(フルワイドセクション)を追加後、【見出し】にインライン画像を設定。

フルワイド設定項目
  • コンテンツ横幅:記事
  • 上下のpadding量:PC40・SP20
  • オーバーレイの透明度:73
  • 画像:任意の写真を設定、背景効果:Fixed BackgroundをON

【見出し】設定後、【リッチカラム】ブロックで2列のカラムを作成し、それぞれ以下の通りに設置。

左カラム

  1. 【バナーリンク】でプロフィール画像
  2. 【リスト】で軽く自己紹介
  3. 【SWELLボタン】で詳しいプロフィールページへリンク

右カラム

SWELLの紹介パーツエリアとし、バナー・テキスト・SWELLボタンを配置。

くうか

この背景画像があるエリアは上下の境界線の設定項目はありません!

⑦検索エリアの作り方

検索エリア
サイト内検索エリア

キーワードで検索できるエリアとなっています。

【フルワイド】ブロック(フルワイドセクション)を追加し、【見出し】にインライン画像を設定。

フルワイド設定項目
  • コンテンツ横幅:記事
  • 上下のpadding量:PC40・SP20
  • 背景色:白
  • 上部の境界線:斜線、高さレベル:0
  • 下部の境界線:斜線、高さレベル:0
  1. 【検索】ブロック:箱の中に任意のテキストを入力することができる
  2. 【タグクラウド】ブロック:タグ一覧の表示設定ができる
タグクラウドを選択
タグクラウドを選択

フルワイドのトップページにすると、サイドバーがなくなってしまうので、それを補うために表示させています。

タクソノミーを選択
タクソノミーを選択

タクソノミーに【タグ】が選択されていればOK。

【カテゴリー】なども選択肢に表示されるので注意。

\ウィジェット系ブロックの注意事項を了さんからご教授いただいた!/

くうか

ワードプレスのアップデート時は、ちゃんと変わらず使えているかチェックした方が良いようです!

STEP3. ホームページ設定(作成した固定ページの割り当て)

完成したら、最後にこの設定を行います。

①外観→カスタマイズ

外観→カスタマイズ
外観→カスタマイズ

②サイト全体設定

WordPress設定⇨サイト全体設定
WordPress設定→サイト全体設定

③ホームページ設定

サイト基本情報→ホームページ設定
サイト基本情報→ホームページ設定

【ホームページ設定】で、【ホームページ】【投稿ページ】部分に先ほど作成した固定ページ2つをそれぞれ割り当てる。

ホームページ設定
ページの割り当て
  1. ホームページ:③ホームページ(メインとして作成した固定ページ)
  2. 投稿ページ:①新着記事(空白で作成した固定ページ)
くうか

この2か所を割り当てることで自由なレイアウトのトップページが出来上がり!

妹分のゆずいろ

私にもできた!

参考にさせていただきました!

なお、フルワイドブロックを使う場合は、サイドバーを非表示にした方がダイナミックなトップページになります。

サイドバーを非表示にするには、【外観】→【カスタマイズ】→【サイドバー】にてトップページを非表示設定にしてください。
もしくは固定ページの【ホームページ】自体のSWELL設定でサイドバーを非表示にすることができます。

くうか

サイト型トップページの作り方はいったんここまで。
次は当ブログのヘッダーとフッターのカスタマイズ方法を紹介します。

\ 公式サイトを見てみる /

SWELLでヘッダーをカスタマイズする方法

SWELLでヘッダーをカスタマイズ

SWELLでは、ヘッダーだけでも様々なパターンに作ることが可能です。

グローバルナビゲーションの位置や、お知らせバーの色・配置などを変えると、同じテーマでもガラッと雰囲気を変えることができます。

ヘッダーロゴ設定:画像サイズ【1600×360】

ヘッダーは画像にすると、サイトの個性が出て一気にイメチェンに♪

いつもお世話になっているツール、Canva Proで作成しました。

参考までに、当ブログの画像サイズは【1600×360】

ヘッダーロゴ画像
画像サイズ【1600×360】

SWELL公式サイトがこのサイズだったので、同様にさせていただきました。

くうか

決まっているわけではないので、自身のサイトに合う、お好みのサイズにしてみてくださいね。

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

設定項目(例)
  • 画像サイズ(PC):55px
  • 画像サイズ(PC追従ヘッダー):48px
  • 画像サイズ(SP):70px

Canvaはオンラインで無料で使える、便利な画像編集ツール。

画像の透過は、有料版のProにて作成しています。(無料のお試し期間もあり)

\Proで簡単に画像の背景を消せる/

レイアウト・デザイン設定

ヘッダーに表示させるメニュー(いわゆるグローバルナビゲーション)を、あらかじめ作成しておきます。

グローバルナビゲーション
グローバルナビはここ

【外観】→【メニュー】から作成することができます。

当ブログのグローバルナビは、

  • 各カテゴリー(+サブカテゴリー)
  • サイトマップ

で構成しています。

グローバルナビのメニューの作成が終わったら、カスタマイザーでの設定を。

設定項目(例)
  • ヘッダーレイアウト(PC):ヘッダーナビロゴ横右寄せ
  • ヘッダーレイアウト(SP):ロゴ中央メニュー左
  • ヘッダー境界線:なし
  • ヘッダーの背景を透明にするか:する(文字色:黒)

メインビジュアルの設定

メインビジュアルとは、サイトのファーストビューとして設定できる、画像や動画のことです。

くうか

サイトの個性を出せる部分であると思っています。

準備として、

  • 画像or動画
  • リンクを設置するか

を、考えておきましょう。

当ブログでは、画像にブログパーツを組み合わせたメインビジュアルにしています。

メインビジュアルにブログパーツ
メインビジュアルにブログパーツ

画像の上にブログパーツでトップページメニューを載せたイメージです。

手順は、

  1. メニューのブログパーツを作る
    1. リッチカラムブロックを使って、配置したい場所にメニューや画像が来るように調整する
    2. メニューからトップページの各エリアへリンクする
  2. メインビジュアルにする背景画像を用意する
    1. 必要であればPCとSPで画像を分ける
  3. カスタマイザーでメインビジュアルの設定をする

となります。

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

設定項目設定内容
メインビジュアルの表示内容画像
表示設定Scrollボタンを表示させるにチェック
メインビジュアルの高さ設定ウィンドウにフィットさせる
スライド画像1(PC用)PC用に用意した画像を設定(サイズ例:1600×900px)
スライド画像1(SP用)SP用に用意した画像を設定(サイズ例:960×600px)
ブログパーツID1作成したブログパーツのIDのみ入力
当ブログの設定例

詳しい設置方法はこちらの記事に書いてあります。

くうか

背景画像の調整に手間取ったけど、トップページ内の好きな所へアクセスできる仕組みは面白いかなーと。

お知らせバーの設置方法

トップページの1番上にお知らせバーを設置しました。

ヘッダーの背景を透明にしている場合はトップページには表示されません。

お知らせバー
お知らせバー

お知らせバー設定箇所
【外観】→【カスタマイズ】→【サイト全体設定】→【お知らせバー】

設定項目(例)
  • お知らせバーの表示位置:ヘッダー上部に表示
  • お知らせバーの文字の大きさ:普通
  • 表示タイプ:テキスト位置固定(ボタンを設置)
  • お知らせ内容URLを入力
  • ボタンテキスト:CLICK!
  • お知らせバーの背景効果:なし

このトップページカスタマイズ記事へ、一発で遷移できるリンクを入れたくて設置しました。

くうか

モバイルでも表示されます!
目立つので、1番見てほしいことを入れるといいですね。

ピックアップバナーの設置方法(現在はなし)

現在のトップページにはピックアップバナーは設置していませんが、設置時の説明だけ記載しておきます。

ヘッダー部分には、記事がランダムでスライドするかっこいい【スライダー】を設置することもできますし、記事やカテゴリをピックアップ表示できる【ピックアップバナー】を設置することもできます。

SWELLではスライダーとピックアップバナー、両方を表示させることも可能

ピックアップバナー
赤で囲った部分がピックアップバナー

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

当ブログのピックアップバナーの画像サイズ【400×150】です。

設定項目(例)
  • バナーレイアウト:固定幅4列(PC)・固定幅2列(SP)
  • バナーデザイン:タイトル⇒表示しない、内側に白線をつけない、バナー画像を少し暗くしない

ピックアップバナーにはカテゴリーをあてるのも良いですが、テーマごとにバラバラになっている記事をまとめた”まとめ記事”をリンクさせるのもおすすめです。

くうか

記事内で各記事へ内部リンクしているので、色んな記事を見てもらえると嬉しいなという期待もこめて…♪

【外観】→【メニュー】で投稿ページやカテゴリーなどを追加し、【ピックアップバナー】として登録します。

ピックアップバナーの画像は、投稿ページなどで設定されているアイキャッチが適用されますが、【概要】に画像のURLを直接指定することにより、任意の画像にも指定できます。

ピックアップバナー:任意の画像の設定の仕方

ピックアップバナー設定画面
ピックアップバナー設定画面

画像URLは、ワードプレスの左メニュー内の【メディア】→【ライブラリ】で該当の画像のURLがわかります。

くうか

ピックアップバナーの画像は、雰囲気を揃えるといい感じになりますね!

ピックアップバナーに関する質問

トップページ以外の記事ページ等にもピックアップバナーを表示させたい場合はどうすればいいの?

【外観】→【カスタマイズ】→【トップページ】→【ピックアップバナー】→【その他】で、「トップページ以外の下層ページにも表示する」にチェックを入れます。

くうか

記事ページにもピックアップバナーが表示されるようになります!

タイトルロゴとピックアップバナーの間に余白が入ってしまう

【外観】→【カスタマイズ】→【トップページ】→【その他】で、「コンテンツ上の余白量」を標準から狭めやなしに設定します。

くうか

当ブログは「なし」です。

SWELLでフッターをカスタマイズ

フッターまで見てくれる人は果たしているのか?わかりませんので、見られなくてもいい・でも自分にはないと困るようなコンテンツを置いています。笑

フッターは1〜3まであり、【外観】→【ウィジェット】で設定することができます。

フッター
フッター
STEP
フッター1を作成

【ブログパーツ】にて、他サイトへのバナーリンク・自己紹介文・SWELLボタン等を配置し、作成しておく。

フッター(PC)1
フッター(PC)1

【外観】→【ウィジェット】→【フッター(PC)1】に、 テキスト追加→上記で作ったブログパーツIDを記述する。

くうか

さりげなく自分の別のブログを宣伝してます!

STEP
フッター2を作成

【ブログパーツ】にて、ブログ村などのリンクへ飛ぶ【SWELLボタン】を作成する。

フッター(PC)2
フッター(PC)2

この際、ボタンサイズを「大」にすると表示が揃います。

【外観】→【ウィジェット】→【フッター(PC)2】に、テキスト追加→上記で作ったブログパーツIDを記述する。

STEP
フッター3を作成
フッター(PC)3
フッター(PC)3

【外観】→【ウィジェット】→【フッター(PC)3】に、カスタムHTMLを追加し、ブログ村のパーツhtmlを記述する。

くうか

フッターは個々で必要なパーツは違うと思うので、お好きに作ってくださいね♪

サイト型トップページの作り方まとめ

カスタマイズおつかれさまでした
おつかれさまでした!

SWELLを使った、サイト型トップページのカスタマイズで行ったこと。

ブロックの組み合わせと設定だけで、ここまでできるテーマ「SWELL

ワードプレスを始めてすぐの私でもできて、このテーマを選んでよかった!と思いました。

検索からの流入がほとんどだとトップページはあまり見られないかもしれませんが、トップページはブログの顔!と私は考えています。

(余談:一応、当ブログは毎日トップページのアクセスが1番多い。)

ユーザーの気持ちになって、見やすさはこれからも追及し続けていきたい。(あと自己満足。笑)

くうか

わりと頻繁にリニューアルしてるので、ぜひまた見にきてくださいね。

色んなサイトのデザインを見たい!という方に、さとしんさんのSWELLサイト集がおすすめ。

カスタマイズの参考に、しらこさんとsuyaさんのSWELLお役立ち記事をブクマしておくと良いですよ。

最後に:この記事を紹介してくれたサイト

この記事を紹介してくれたサイトを、ありがとうリンク集にて掲載させていただいています。

くうか

ありがとうございます!
紹介してくださった方は教えてくださると嬉しいです。

ぽちっとしていただけると嬉しいです

にほんブログ村 ライフスタイルブログ ミニマリストへ

SWELLトップページサイト型カスタマイズ

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

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

コメント

コメント一覧 (14件)

    • 久野さん
      コメントありがとうございます!!
      そういって頂けてとても嬉しいです。
      サイトもこのカスタマイズを使っていただいて嬉しくなっちゃいました(^^♪

  • くうか様

    お世話になっております。
    英語やポイ活などについて情報発信しておりますぴろやんと申します。
    いつも有益な情報発信ありがとうございます。
    くうか様のサイトがとってもわかりやすかったので、貴サイトを参考にSWELLでサイト構築いたしました。
    当方のブログでもくうか様のサイトを参考にさせていただいた旨は、記載させていただいております。
    https://piroyan101.com/swell/

    引き続き、よろしくお願いいたします。

    • piroyan101さん
      コメントありがとうございます^^
      わかりやすいと言っていただけてとっても嬉しいです。
      サイトの紹介もしていただいて、ありがとうございました!!

  • お久しぶりです、くうかさん

    先日はSWELLのセール情報ありがとうございました
    おかげさまで無事にSWELL購入できました。
    くうかさんのブログから購入したいと言っておきながら
    購入せず申し訳ありませんでした。

    被リンクしていただいてありがとうございました。
    気づくのが遅れて申し訳ありません。
    僕のブログでもリンクさせて頂き、リンク先でくうかさんのブログを
    紹介させて頂きました。

    これからもお邪魔させて頂きます。
    今回は誠にありがとうございました。

    • ノブさん
      いえいえ。お安く買えた方が絶対良いですし!
      気にしないでくださいね。

      拝見させていただきました。
      ご紹介ありがとうございました!^^

  • くうかさん!

    こんばんは!Twitterでお世話になっているためです。

    勝手で恐縮ですが、カスタマイズを参考にいたしました。なので、ブログに記載し、リンクを貼らせていただきました。

    https://tamesanlog.com/swell-customization/
    (SWELLサイト型カスタマイズ⑥:カテゴリーコンテンツでリンクを貼っています)

    • ためさん
      参考にしてくださってありがとうございます!
      ためさんのカスタマイズはとっても丁寧な説明で色々と参考になりますね^^
      紹介してくださりありがとうございました。

  • 始めまして!
    ヨシマと言います。

    くうかさんのカスタマイズが気に入り、購入させていただきました。
    アフィンガー5からの移行で上手くできるか不安ですが、記事を参考に一つ一つやっていきます。

    • ヨシマさん
      SWELLを気に入っていただけて嬉しいです!
      カスタマイズを見てくださってさらに嬉しいです。
      移行は手間ではありますが、使いやすいテーマなので頑張ってください…!

  • 初めまして!
    やちゃ坊と申します。
    初めてのコメントでドキドキしています

    SWELLのサイト型トップページに憧れ、
    くうかさんのこの記事ならカスタマイズできる!
    と参考にさせてもらいました!
    みんなからも褒められ、すごく嬉しいです!感謝しています✌︎(‘ω’✌︎ )

    微力ながら記事にて紹介もさせてもらいました!今後ともよろしくお願いします!

    https://www.ena-laughday.com/cocoonswell/

    • やちゃ坊さん
      はじめまして!コメントありがとうございます^^
      素敵にカスタマイズされていますね!
      記事の紹介もありがとうございます。
      私の方からもお礼のリンクを後日させていただきますね~!

  • 初めまして。さくと申します。
    CSSを参考にさせていただきました。
    とても素晴らしいです☆
    ありがとうございます!

    記事にリンク貼らせていただきました。

    https://wgamelab.net/swell-top/

    今後ともよろしくお願いいたします。

    • さくさん
      はじめまして。コメントありがとうございます。
      記事を参考にしていただいたようで嬉しいです!
      リンクもありがとうございます。
      こちらからも時間が出来た時にリンクさせていただきますね^^

コメントする

CAPTCHA


目次