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

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

SWELLトップページサイト型カスタマイズ
URLをコピーする
URLをコピーしました!

こんにちは、SWELLを2年以上使用しているブロガーのくうかです。

この記事では、SWELLを使ったサイト型デザインのトップページの作り方を解説しています。

この記事の内容(クリックで飛びます)
妹分のゆずいろ

SWELLはサイト型のトップページが作りやすいって聞いたけど本当?

くうか

本当だよ!私もずっと憧れてたけど作れなかったサイト型が、SWELLにしたら作れたの。

SWELLの高機能なブロックのおかげで、ワードプレス初心者でも作れたサイト型トップページ。

この記事はこんな人におすすめ
  • サイト型のトップページにしたい
  • おしゃれなトップページにしたい
  • SWELLの機能を知りたい
くうか

詳しく、なるべくわかりやすく説明していきます…!

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

目次

サイト型のトップページとは

まず、トップページをサイト型にカスタマイズした完成形がこちらになります。(画面を開いた時の状態)

トップページのファーストビュー
トップページのファーストビュー
妹分のゆずいろ

なんだか印象的でおしゃれだね!

くうか

SWELLにしたらこんな風にしたいが叶ったんだよ~!

ブログを運営していて、ずっとサイト型というトップページに憧れていました。

ブログはデフォルトだと新しい順に記事が並んでいます。

それをゲーム攻略サイトのような、情報が整理された状態で表示され、

  • ユーザーが知りたい情報を見つけやすい

というイメージがサイト型。(※私のイメージです)

サイト型にするメリット
  • 読んでほしい記事をアピールできる
  • 読者が読みたい記事を探せるように促すことができる
  • 見た目が良い!
妹分のゆずいろ

なるほど!それは読者にも自分にも良いメリットだね。

記事数が増えると古い記事がどんどん埋もれていってしまいます。

そこで、おすすめしたい記事カテゴリー別に記事を表示できたら良いのでは…と構想は膨らむ。

くうか

SWELLではわりと簡単にサイト型が作れる!しかもおしゃれになります!!(SWELLはデフォルトでおしゃれですがさらに!)

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

あわせて読みたい

くうか

工程は大きく分けて3ステップ。

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

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

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

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

ヘッダーロゴ画像を用意する:サイズ【1600×360】

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

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

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

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

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

くうか

自身のサイトに合う、お好みのサイズにしてみてくださいね。

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

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

Canvaは無料で使える便利なツール。

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

メインビジュアルの設定

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

くうか

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

準備として、

  • 画像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がわかります。

くうか

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

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

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

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

くうか

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

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

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

くうか

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

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

2. SWELLで固定ページ(ホームページ)をカスタマイズ

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

ここからはヘッダー下のメインとなる部分です。

固定ページで好きにコンテンツを組み合わせることで、自由なデザインを作れるようになります。

くうか

まずは事前準備!

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

  1. ホームページ:実際の見た目となるページ(フロントページ)
  2. 新着記事ページ:タイトルを付けただけの空白ページ
  3. 人気記事ページ:人気記事を配置したページ

1番の【ホームページ】は、実際の見た目として作っていきますが詳しくは後述します。

2番の【新着記事ページ】は、タイトルとスラッグ(URL)のみを設定した空白のページを、固定ページで新規作成します。

新着記事の作成画面
新着記事の作成画面

ページの中身は空白ですが、最終的な設定で以下のような新着一覧ページとなります。

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

3番の【人気記事ページ】は、投稿リストブロックを配置したページを、固定ページで新規作成します。

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

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

妹分のゆずいろ

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

くうか

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

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

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

新着記事エリア

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

ピックアップエリア

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

人気記事エリア

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

カテゴリーエリア

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

ギャラリーエリア

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

アバウトエリア

⑦検索エリア→解説へ

検索エリア

それでは、ようやく1番の【ホームページ】を作っていきます。

まず固定ページを新規作成します。

ホームページの作成画面
ホームページの作成画面
  • タイトル(自分がわかりやすいもの)→「Home」としました。
  • URLスラッグ(URLとなるので英語推奨)→「home」としました。

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

くうか

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

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

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

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

見た目はこのようになっています。

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

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

くうか

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

妹分のゆずいろ

確かに目立つね!

以下、作成の手順です。

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

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

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

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

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

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

見た目はセクション用。

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

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

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

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

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

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

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

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

その分表示される記事数が2つ減るので、記事数を調整してください。

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

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

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

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

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

1.Settingタブ内の【高度な設定】に追加CSS名「li-2nd-none」を入力する。

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

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

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

\コピペ用CSSコード/

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

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

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

Special thanks → しらこさん

くうか

カッコ内の数値がn番目を表しています。
応用する時はそこに注目…!

CSSを使う方法を教えてくれたしおさださん、Thanks!(@bloger_siosada

くうか

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

他にもこのような表示方法もできます。(以前のトップページのバージョンより)

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
STEP
【リッチカラム】ブロックを追加

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

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

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

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

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

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

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

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

フルワイド設定項目
  • コンテンツ横幅:サイト幅
  • 上下のpadding量:PC40・SP20
  • 背景色:白
  • 上部の境界線:斜線、高さレベル:0
  • 下部の境界線:斜線、高さレベル:0
ギャラリーエリア編集画面
ギャラリーエリア編集画面
  1. 【リッチカラム】を追加し、好みの列数にする
    1. 当ブログはPC6列・タブ3列・SP2列
    2. カラム間の余白は上下左右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。

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

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

くうか

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

ホームページ部分が完成したら、作成した固定ページの割り当て

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

【外観】→【カスタマイズ】→【WordPress設定】→【ホームページ設定】で、【ホームページ】【投稿ページ】部分に先ほど作成した固定ページをそれぞれ割り当てる。

  1. ホームページ:①ヘッダー下のメインとなる固定ページ
  2. 投稿ページ:②新着記事の固定ページ
ホームページ設定
ページの割り当て
くうか

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

妹分のゆずいろ

私にもできた!

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

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

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

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

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

フッター
フッター
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

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

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

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

この度SWELL開発者の了さんからお声がけいただき、公式サイトの利用者紹介ページに、当ブログを掲載させて頂いています!

くうか

ありがたき幸せ…
さらにSWELLと仲良くなって、使いこなせるようになりたい!

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

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

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

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

くうか

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

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

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

フォロー待ってます

くうかんしんぷるライフ - にほんブログ村

楽天ROOMに愛用品を登録しています

楽天ROOM

ライフスタイルまとめメディアへ

トップページへ戻る

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

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

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
  • 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


目次
トップへ
目次
閉じる