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

SWELLカスタマイズ|トップページをサイト型でおしゃれにする方法

URLをコピーする
URLをコピーしました!

こんにちは、ゆるミニマリスト主婦のくうかです。

この記事の内容(クリックで飛びます)

SWELLで憧れのサイト型トップページの作り方がわかります!

当ブログが使用しているワードプレステーマはSWELLです。

くうか

ブロックエディタが非常に使いやすく作られていて、ブログを書くことがラクで楽しいテーマなんです!

妹分のゆずいろ

へぇ。ところでサイト型のトップページが作りたいんだけどできるかな?

くうか

この記事を読めば、ちょっとおしゃれなサイト型トップページの作り方がわかるよ!

CSSなどプログラミングの知識がなくても、SWELLならブロックの組み合わせ次第で当ブログのようなサイト型デザインのトップページを作ることができます。

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

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

くうか

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

頻繁にトップページをいじっているため、この記事の内容と多少ずれがあるかもしれませんがご了承ください。(後日修正します)

Contents

SWELLでカスタマイズするサイト型のトップページとは

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

PCでの表示

トップページ(PC)
PC

モバイルでの表示

トップページ(モバイル)
モバイル
妹分のゆずいろ

なんだかおしゃれだね!

くうか

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

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

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

それをゲーム攻略サイトのような、情報が整理された状態で表示されていて、ユーザーが知りたい情報を的確に見つけて読みにいけるようなイメージがサイト型。(※私のイメージです)

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

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

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

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

くうか

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

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

あわせて読みたい

くうか

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

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

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

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

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

SWELL公式サイトのような、「メインビジュアル」を入れるのも素敵ですよね。

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

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

いつもお世話になっているツールCanvaで作成。当ブログの画像サイズは【1600×360】

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

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

くうか

お好みのサイズにしてみてくださいね。

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

設定項目(当ブログの例)
  • 画像サイズ(PC):55px
  • 画像サイズ(PC追従ヘッダー):48px
  • 画像サイズ(SP):70px
  • ヘッダーレイアウト(PC):ヘッダーナビロゴ横右寄せ
  • ヘッダーレイアウト(SP):ロゴ中央メニュー左
  • ヘッダー境界線:なし

Canvaは無料で使える便利なツール。アイキャッチもCanvaで作成しています!

あわせて読みたい

お知らせバーの設置方法

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

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

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

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

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

くうか

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

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

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

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

くうか

私は、見せたい部分をギュギュっと凝縮できる【ピックアップバナー】を表示させることにしました。

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

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

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

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

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

くうか

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

当ブログでは、ピックアップバナーに以下の4つを表示させています。

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

4の無印良品はカテゴリーではないですが需要がありそうなので、無印良品のタグを付けた記事の一覧ページにしました。

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

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

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

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

くうか

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

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

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

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

くうか

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

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

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

くうか

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

\ おすすめのテーマ /

テーマSWELL

シンプルでスタイリッシュなデザインと高機能が備わったテーマ
快適すぎてびっくりしちゃうかも!?

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

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

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

くうか

固定ページで作ることによって、自分の好きなデザインが自由に楽しめるように♪

まずは固定ページで、

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

を、作成します。

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

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

新着記事の作成画面
新着記事の作成画面
  • タイトル(自分がわかりやすいもの)→「新着記事」としました。
  • URLスラッグ(URLとなるので英語推奨)→「new-post」としました。
くうか

事前準備ができました!続いてついに実際の見た目を作っていきます。

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

ホームページ1~4
ホームページ5~7

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

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

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

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

  1. 新着/人気記事
  2. あいさつ文
  3. 項目別ピックアップ
  4. カテゴリー別記事
  5. キーワード検索
  6. SWELL紹介
  7. 他サイトへのリンク
くうか

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

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

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

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

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

新着人気記事エリア
新着記事と人気記事

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

くうか

カード型だと、左右どちらが最新なのかわかりづらいんだよね。

妹分のゆずいろ

え!?それはくうかだけじゃない!?

以下、作成の手順です。

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

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

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

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

フルワイド設定項目
  • コンテンツ横幅:記事
  • 上下のpadding量:PC・SPともに40
  • 背景色:ピンクベージュ
  • 上下の境界線の形状:波、高さ:4
STEP
【見出し(H2)】と【カラム】ブロックを配置する

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

見た目はセクション用。テキスト・注釈はお好みで設定してください。

見出しに画像を入れたい場合は、【インライン画像】で入れると良い。

【カラム】は(50/50)で追加する。(【リッチカラム】ブロックでも可能)

STEP
各カラムに【投稿リスト】【タブ】ブロックを挿入する

STEP2で作成したカラムの中身を作ります。

左カラムは【投稿リスト】ブロックで1記事のみ表示

まず【段落】を追加し、「\ New arrival /」の文字を入れる。(お好みのテキストを入れてね)

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

新着記事をカード型で追加
新着記事をカード型で追加
設定項目
  • 投稿数:1
  • レイアウト:カード型
  • 表示順序:新着
  • 抜粋文:40

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

右カラムは【タブ】ブロック→【投稿リスト】ブロック

【タブ】ブロックを追加。

タブブロックを追加
タブブロックを追加

【新着順】・【人気順】というタブを作成し、それぞれに【投稿リスト】ブロックを追加。

新着順タブ設定項目
  • 投稿数:3
  • レイアウト:テキスト型
  • 表示順序:新着
  • 抜粋文:0
  • MOREリンク:new-post(先ほど作成した空白の新着記事ページのURLスラッグを入力)
  • 除外する投稿ID:最新記事の投稿ID
人気順タブ設定項目
  • 投稿数:3
  • レイアウト:リスト型
  • 表示順序:人気順
  • 抜粋文:0
  • MOREリンク:なし(入れたい場合は人気記事ページを自作しましょう)

【タブ】ブロックを使い新着と人気の記事を表示させました。

両者をぱっと見でわかりやすくするため、人気順は【リスト型】に

人気記事はリスト型に
人気記事はリスト型に

ここからは、投稿リストの新着記事の2番目の記事から表示させる方法を2通り説明します。

手作業による最新記事の非表示方法

新着記事のPickupタブに除外する投稿IDという設定項目があります。

除外ID設定
除外ID設定

こちらに最新記事のIDを入力することで、該当記事が表示されなくなり、2記事目からの表示になります。

くうか

ただ、記事が増えるたびに発生するアナログな作業となるので、お好みで…!

毎回のアナログ作業は面倒…という方には、CSSコードで自動化する方法を次に記載しておきます。

コードの追加は自己責任でお願いいたします。

CSSによる最新記事を自動で非表示する方法

STEP
右カラムのテキスト型投稿リストブロックの【高度な設定】に追加CSS名を入力
高度な設定
高度な設定

「li-first-none」と入力する。

STEP
【外観】→【カスタマイズ】→【追加CSS】に以下のコードを追加
追加CSS
追加CSS
.li-first-none > ul >li:first-child {
    display: none;
}

これで自動的に1番最新の記事が表示されなくなります。

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

Special Thanks!!しおさださん(@bloger_siosada

自動化について教えていただきました。ありがとうございました!

くうか

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

応用すると、他にこのような表示方法もできます。(私の別サイトより)

PC:1記事めリスト型、
以下カード型

新着記事応用(PC版)

スマホ:1記事めカード型1列、
以下カード型2列

新着記事応用(SP版)

ちょっとひと手間を入れると、PCとスマホで投稿リストのタイプを変えることもできるんです。

くうか

PCのみ表示/SPのみ表示、のデバイスコントロール+グループ化を利用しました。
新着記事は1記事めを目立たせると目を引きますね!

詳しくはこちらの記事で解説しています。
他にも今まで作ってきた過去デザインも掲載していますよ。

あわせて読みたい

②あいさつ文の作り方

背景をわが家のリビングとしたあいさつ文を入れています。

サイトのあいさつ文
背景に写真を入れたあいさつ文

【フルワイド】ブロックを追加。(フルワイドセクション)

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

【見出し】設定後、【カラム】ブロックで2列のカラム(30/70)を作成し、それぞれに

  • 左カラム:【バナーリンク】でプロフィール画像・【段落】で肩書など
  • 右カラム:【段落】であいさつ文・【リスト】でプロフィール等へのリンク

を追加。

くうか

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

あわせて読みたい

③項目別ピックアップの作り方

当ブログの、ピックアップしたい3項目ごとに記事をリストアップしました。

項目別ピックアップ記事
メディアとテキストブロックを使ったエリア

【フルワイド】ブロック(フルワイドセクション)を追加後、【見出し】・【メディアとテキスト】ブロックを配置しています。

フルワイド設定項目
  • コンテンツ横幅:記事
  • 上下のpadding量:40
  • 背景色:ピンクベージュ
  • 上部の境界線:波、高さレベル:4
  • 下部の境界線:斜線、高さレベル:0

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

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

テキスト側には様々なブロックを入れることができますが、今回は【リスト】ブロックを入れて、関連する記事にリンクさせています。

くうか

他にもSWELL独自のレイアウトがあるので、気になったら使ってみてくださいね♪

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

あわせて読みたい

④カテゴリ別記事エリアの作り方

カテゴリ別に4記事ずつカード型表示をしています。

子カテゴリーが充実しているカテゴリーは、子カテゴリーもリスト表示させて記事を探しやすく♪

子カテゴリー付きのカテゴリーエリア説明
子カテゴリーあり
STEP
【フルワイド】ブロック(フルワイドセクション)を追加

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

フルワイド設定項目
  • コンテンツ横幅:記事
  • 上下のpadding量:40
  • 背景色:ピンクベージュ
  • 上部の境界線:波、高さレベル:4
  • 下部の境界線:斜線、高さレベル:0
STEP
カテゴリーバナーの作成

【カラム】ブロックを配置し、設定を6列に変更

カラム数の変更
使い回しているためブログパーツ使用

あらかじめCanva等で作成しておいた画像を【バナーリンク】として配置し、各カテゴリーのURLへリンクするよう設定する。

モバイルでは通常2列までの表示しかできませんが、CSSで3列にしています。

参考 スマホのカラム列数を3列にするCSS|SWELLフォーラム

補足情報

【リッチカラム】ブロックを使うと、CSSを使わずともモバイル3列が叶うようになりました!!

※SWELLのバージョンを最新状態にしてご利用ください。

STEP
見出しを追加

カテゴリー名の見出し(H3)を追加し、説明を注釈で入れました。

見出し・注釈
STEP
【カラム】ブロックを配置

【カラム】(70/30)ブロックを追加する。

STEP
【カラム】に【投稿リスト】ブロックを入れる
左右のカラム
左右のカラム

左カラム

【投稿リスト】を追加。

設定項目
  • 投稿数:4
  • レイアウト:カード型
  • 表示順序:ランダム
  • 抜粋文:0
  • カラム数:2列
  • Pickupタブ:該当カテゴリー

右カラム

右カラムの設定
右カラムの設定
  1. 【段落】を挿入しタイトルを付け、装飾する。
  2. 【リスト】ブロックで子カテゴリー名のリストを作り、各カテゴリーページへリンクする。
  3. 【SWELLボタン】を挿入し、該当カテゴリーページをリンクする。

子カテゴリーをアコーディオン表示したカテゴリー

子カテゴリーをアコーディオン表示したカテゴリー
子カテゴリーをアコーディオン表示に
  1. 【カラム】ブロック追加→50/50
  2. 見出し(H3)を追加し、カテゴリー名と説明の注釈を入れる
  3. 左右それぞれのカラムに【アコーディオン】ブロックを入れ、サブカテゴリーにリンクさせる
  4. 左右それぞれのカラムに【投稿リスト】ブロックを入れる
    • 投稿数:3
    • レイアウト:リスト型
    • 表示順序:ランダム
    • 抜粋文:0
    • Pickupタブ:該当カテゴリー
くうか

念願の、カテゴリ別記事エリアが完成!
ブロックの組み合わせと設定だけでできて超簡単!

表示順序:ランダムは、ページを開くたびにいつも違う記事が表示されて偏らないので神機能です…!

ブロック下の余白調整も、それぞれのエリアや画像ごとに行いました。

くうか

余白調整は大事!
見た目がきれいになるよ♪

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

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

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

⑤キーワード検索エリアの作り方

キーワード検索エリア
キーワード検索エリア

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

【フルワイド】ブロック(フルワイドセクション)追加。

フルワイド設定項目
  • コンテンツ横幅:記事
  • 上下のpadding量:40
  • 背景色:白
  • 上部の境界線:波、高さレベル:4
  • 下部の境界線:波、高さレベル:0

そして、【タグクラウド】ブロックを追加します。

タグクラウドを選択
タグクラウドを選択

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

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

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

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

直接ワード入力で検索できる【検索】ブロックもあるので、お好みで追加してみてください。

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

くうか

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

⑥SWELL紹介エリアの作り方

SWELL紹介エリア
SWELL紹介エリア

当ブログが使用しているワードプレステーマ「SWELL」の紹介エリアとなっています。

ここは簡単。

【フルワイド】ブロック(フルワイドセクション)追加後、【カラム】(70/30)ブロックにあらかじめ作ってあったブログパーツを2つ(SWELL紹介・SWELL関連記事)配置しただけです!

フルワイド設定項目
  • コンテンツ横幅:記事
  • 上下のpadding量:40
  • 背景色:ピンクベージュ
  • 上部の境界線:波、高さレベル:4
  • 下部の境界線:波、高さレベル:0
くうか

さりげなくSWELLを紹介しちゃいましょう!

⑦外部リンクエリアの作り方

外部リンクエリア

私のサブブログを紹介しているエリアとなっています。

ここも同じく簡単。

【フルワイド】ブロック(フルワイドセクション)追加後、【カラム】(50/50)ブロックにバナーリンクと説明文の段落を入れました。

フルワイド設定項目
  • コンテンツ横幅:記事
  • 上下のpadding量:40
  • 背景色:白
  • 上部の境界線:波、高さレベル:4
  • 下部の境界線:斜線、高さレベル:0

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

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

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

ホームページ設定
ページの割り当て
くうか

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

妹分のゆずいろ

私にもできた!

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

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

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

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

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

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

【外観】→【ウィジェット】→【フッター(PC)1】に、[SWELL]プロフィールを追加する。

(現在はプロフィール→サイドバーへ。フッター1には人気記事を配置中)

STEP
フッター2を作成

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

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

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

STEP
フッター3を作成

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

くうか

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

SWELLカスタマイズ|トップページをサイト型でおしゃれにする方法まとめ

サイト型トップページおつかれさまでした
ガッツポーズ

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

  1. ヘッダーのカスタマイズ
  2. ホームページのカスタマイズ
  3. フッターのカスタマイズ

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

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

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

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

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

くうか

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

なお、SWELLで好きなデザインだなと思っているのがしょーきちさんのブログ♪
参考になります!

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

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

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

くうか

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

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

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

フォロー待ってます

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

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

楽天ROOM

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

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

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

関連キーワード #SWELL #ワードプレス #はてなブログ

この記事を書いた人

ゆるくミニマリストを目指している中1小5兄妹のママ。
整理収納アドバイザー2級、元システムエンジニア。
小さなおうちに引っ越して収納が減っちゃった!少しずつ物を減らしてシンプルな空間にしたいと思っています。

コメント

コメント一覧 (12件)

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

  • くうか様

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

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

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

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

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

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

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

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

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

  • くうかさん!

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

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

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

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

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

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

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

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

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

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

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

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

コメントする

CAPTCHA


Contents
閉じる