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

- サイト型トップページの基本をまるごとわかりやすく解説
- SWELLでヘッダーをカスタマイズする方法
- SWELLでフッターをカスタマイズする方法
- SWELLの高機能なブロックの使い方
こんにちは、SWELLというWordPressテーマを3年以上愛用している、くうかです。
この記事では、SWELLでサイト型トップページにするカスタマイズ方法を解説しています。
サイト型トップページにすることで、
- 運営者が読んでほしい記事をアピールできる
- ユーザーが読みたい記事を探しやすくなる
- サイトの個性を出せる
というメリットがあるので、記事が増えてきたタイミングでサイト型にすることを検討しても良いかもしれません。

初心者の私でもできるかな?



この記事を読めば、プログラミングの知識がなくてもサイト型トップページを作ることができます!
当ブログのようなサイト型トップページの作り方を、まるっとわかりやすく説明していくので、ぜひ最後まで読んでみてください。
- SWELLでサイト型トップページにカスタマイズしたい
- ブログのトップページをおしゃれにカスタマイズしたい
- SWELLでどんなトップページを作れるか知りたい
\ 公式サイトを見てみる /
サイト型トップページとは?
ブログのトップページには、「ブログ型」と「サイト型」があります。
ブログ型
記事が新しい順に並んでいる状態。


サイト型
記事が整理され、見やすく表示されている状態。




- ブログ型:ブログ作成時のデフォルトの状態で、記事が新しい順に並んでいる
- サイト型:記事がコンテンツごとに整理され、ユーザーに見やすく配置されている
実際に現在のサイト型トップページを見たい方はこちらから →トップページへ
サイト型にすることで、読者側と運営者側が得られるメリットを並べてみると…



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



そう。だから記事数が増えてきたらサイト型にするのをおすすめします!
SWELLではサイト型を作るのに適した高機能なブロックが揃っていて、私もSWELLに移行してすぐにサイト型トップページを作ることができました。
SWELL





サイト型トップページを作る工程は、大きく分けて3ステップ。読みたいところへ飛んでくださいね。
SWELLを使ったサイト型トップページのカスタマイズ【3つのステップ】


ヘッダーやフッターのカスタマイズはあとで説明していくので、まずはサイト型トップページの基本の作り方を解説していきます。
SWELLでは、固定ページで好きなようにブロックを組み合わせることで、自由なデザインのトップページを作れるようになります。



まずは事前準備!
固定ページを3つ作成していきます。(もしくは2つ)
- 新着記事ページ:タイトルを付けただけの空白ページ
- 人気記事ページ:人気記事を配置したページ(省略可能)
- ホームページ:メインとなるページ
STEP1. 【事前準備】固定ページで①新着記事ページ②人気記事ページを作成


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



サイト型にするとデフォルトの新着記事ページが非表示になるため、固定ページを使って代用を作ってあげましょう。
ワードプレスのメニューから「固定ページ」→「新規追加」します。




- タイトル(自分がわかりやすいもの)→「新着記事」としました。
- URLスラッグ(URLとなるので英語推奨)→「new-post」としました。
- 公開する
ページの中身は空白ですが、最後のWordPressでの設定をおこなうことで、以下のような新着一覧ページとなります。





後ほどこのページをメインとなる③ホームページからリンクするので、パーマリンク(new-post)をコピペするか覚えておいてくださいね。
②【人気記事ページ】は、設置したい場合のみでOKで省略可能です。
投稿リストブロックを配置して、読んでほしい記事をピックアップして表示させるページ。
ワードプレスのメニューから「固定ページ」→「新規追加」します。




- タイトル(自分がわかりやすいもの)→「人気の記事」としました。
- URLスラッグ(URLとなるので英語推奨)→「popular」としました。
- 投稿リストブロックを追加する
- 投稿数:6、レイアウト:カード型、抜粋文:お好みで
- Pickupタブの投稿IDに6記事文のIDを記載
- 公開する
本当の人気記事順に並べたい場合は、投稿IDを指定せず、表示順序を「人気順」にしてください。



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



そうなんだよね。
ではこれで事前準備完了!続いてついに実際の見た目を作っていきます。
STEP2. 【メイン】固定ページで③ホームページを作り込む


このステップがサイト型の1番のメインとなります。
実際の見た目となるメインの③【ホームページ】全体像はこんな感じ!
それでは、ようやくトップページのメインとなる③【ホームページ】を作っていきます。
※ホームページもしくはフロントページとも呼ばれます。
ワードプレスのメニューから「固定ページ」→「新規追加」します。




- タイトル(自分がわかりやすいもの)→「Home」としました。
- URLスラッグ(URLとなるので英語推奨)→「home」としました。
- 下書き保存または公開する。(公開は完成後でもOK)
そして、トップページに入れたい以下の内容を作り込んでいきます。



それぞれのエリアごとに説明していきますね。
①新着記事エリアの作り方
サイトによって新着記事の位置は様々ですが、私は1番はじめに持ってきています。
それは、リピーターの方のために新着記事がぱっと見でわかると、すぐにアクセスできるため。
見た目はこのように作りました。


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



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



パッと見て新しい記事がわかるね!
以下、作成の手順です。
ブロックパターンから、見出しがあらかじめ付属している【フルワイドセクション】を選択します。


見出しに注釈がはじめから入っているのが便利なので、フルワイドセクションを使っています。
- コンテンツ横幅:記事
- 上下のpadding量:PC40・SP20
- 背景色:白
- 上下の境界線の形状:斜線、高さ:0
【見出し】はブロックパターンで付属していたものをそのまま使用しています。
見た目はセクション用。
テキスト(または画像)・注釈はお好みで設定してください。


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


【投稿リスト】ブロックを追加。
- 投稿数:2
- レイアウト:カード型
- 表示順序:新着
- 抜粋文:40
【投稿リスト】ブロックで3記事め以降をテキスト型で表示


【投稿リスト】ブロックを追加。
- 投稿数:5(CSSで2記事非表示にするため5に)
- レイアウト:テキスト型
- 表示順序:新着
- 抜粋文:0
- MOREリンク:new-post(STEP1で作成した空白の新着記事ページのURLスラッグを入力)
※なおMOREリンクボタンの見た目は、丸みか四角しか選ぶことができません。カスタマイザーで全体の質感を「丸みをもたせる」にすると丸くなり、そうでなければ四角のボタンになります。
1.投稿リストブロックを選択した状態で、Settingタブ内の【高度な設定】に追加CSS名「li-2nd-none」を入力する。




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


\コピペ用CSSコード/
.li-2nd-none li:nth-child(-n+2) {
display: none;
}
すると、このようになります。(一文字でも違うと動作しませんので要確認)


- コードを追加する場合は自己責任の上おこなってください。
- 表示される記事数が2つ減るので、記事数をお好みで調整してください。
カスタマイザーの追加CSSではなく、固定ページ下部のカスタムCSSに記載するようにしました。(2022年3月)
このページのみでCSSを使う場合は、この方が速度的にも良いと判断。
1〜2番目の記事を非表示、だけでなくカッコ内の「(-n+2)」の2の部分を他の数字に変えると、その数字の数だけ記事を非表示にすることができます!



しらこさん、ヤモヲさん、ご協力ありがとうございました♪
CSSを使う方法を教えてくれたしおさださん、Thanks!(@bloger_siosada)



新着記事の最新だけアイキャッチ付きで目立たせたかった!
お風呂で思いついたレイアウトなんだけど、いい感じで気に入ってます♪
他にもこのような表示方法もできます。(当ブログの旧バージョンより)
1記事めカード型
2記事め以降テキスト型


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





新着記事は1記事めを目立たせると目を引きますね!
これら旧バージョンのレイアウトは、以下の記事で詳しく解説しています。
②コンセプトエリアの作り方
サイトのコンセプトを表示するエリアです。


【フルワイド】ブロック(フルワイドセクション)を追加後、【見出し】にインライン画像を設定。
- コンテンツ横幅:サイト幅
- 上下のpadding量:PC40・SP20
- 背景色:白
- 上部の境界線:斜線、高さレベル:0
- 下部の境界線:斜線、高さレベル:0
【リッチカラム】ブロックを追加し、列数を決めます。
PC・タブレットは2列、SPは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
【リッチカラム】ブロックを追加し、好みの列数に設定する。(当サイトはPC3列)


- カテゴリーのイメージ画像を追加する
- 【リンクリスト】ブロックを追加する


SWELLテーマ側で、あらかじめブロックパターンが2種類用意されています。(青枠部分)
トップページに使いやすいレイアウトなので、こちらを使う方法も良いかもしれません。
- 一括作成でサブカテゴリーを追加する(サブカテがある場合)


カテゴリーやサブカテゴリーをリストに追加したい場合は、「一括作成」するととってもラクです。
カテゴリー一覧画面が表示されるので、追加したいカテゴリーまたはサブカテゴリーを選択します。


選択し終えたら、追加または入れ替えボタンを押します。
追加するを選択した場合


入れ替えるを選択した場合


追加した場合は、あらかじめ作られたリスト項目の下に追加されます。
入れ替えの場合は、あらかじめ作られたリスト項目に上書きされます。
リストが作られたら、リンクリストの見た目(スタイル)を設定していきます。


ボーダーを付けたり、アイコンを替えたり。お好みでカスタマイズしてみてくださいね。
- テキストを追加し、該当カテゴリーページへリンクする(ボタンでも良い)
また【タブ】ブロックを使って、省スペースでカテゴリー別の記事を表示する方法もあります。


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


写真を多く使っているブログなので、写真をメインにしたエリアがあってもいいかなと思い作りました。
【フルワイド】ブロック(フルワイドセクション)を追加後、【見出し】にインライン画像を設定。
- コンテンツ横幅:サイト幅
- 上下のpadding量:PC40・SP20
- 背景色:白
- 上部の境界線:斜線、高さレベル:0
- 下部の境界線:斜線、高さレベル:0


- 【リッチカラム】を追加し、好みの列数にする
- 当ブログは「横スクロールで表示する」にチェック
- 横幅はPCタブレットは220px、スマホは180px
- カラム間の余白は左右0.3rem
- 各列に【バナーリンク】を追加し、画像とリンク先を設定する



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


【フルワイド】ブロック(フルワイドセクション)を追加後、【見出し】にインライン画像を設定。
- コンテンツ横幅:記事
- 上下のpadding量:PC40・SP20
- オーバーレイの透明度:73
- 画像:任意の写真を設定、背景効果:Fixed BackgroundをON
【見出し】設定後、【リッチカラム】ブロックで2列のカラムを作成し、それぞれ以下の通りに設置。
左カラム
- 【バナーリンク】でプロフィール画像
- 【リスト】で軽く自己紹介
- 【SWELLボタン】で詳しいプロフィールページへリンク
右カラム
SWELLの紹介パーツエリアとし、バナー・テキスト・SWELLボタンを配置。



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


キーワードで検索できるエリアとなっています。
【フルワイド】ブロック(フルワイドセクション)を追加し、【見出し】にインライン画像を設定。
- コンテンツ横幅:記事
- 上下のpadding量:PC40・SP20
- 背景色:白
- 上部の境界線:斜線、高さレベル:0
- 下部の境界線:斜線、高さレベル:0
- 【検索】ブロック:箱の中に任意のテキストを入力することができる
- 【タグクラウド】ブロック:タグ一覧の表示設定ができる


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


タクソノミーに【タグ】が選択されていればOK。
\ウィジェット系ブロックの注意事項を了さんからご教授いただいた!/
ウィジェット系のブロックはWordPress自体のアップデート時(既存のウィジェット機能自体がブロックベースに変わる時)に大幅に仕様変更される危険性があるので、一応そのことは頭の片隅に置いておいた方がいいかと思います🙆♂️
— 了🌊SWELL・Arkhe 開発者 (@ddryo_loos) March 24, 2021



ワードプレスのアップデート時は、ちゃんと変わらず使えているかチェックした方が良いようです!
STEP3. 【最後の仕事】ホームページ設定(作成した固定ページをトップページに表示)


固定ページで新着記事やメインページが完成したら、最後に以下の設定を行います。
①外観→カスタマイズ


②サイト全体設定


③ホームページ設定




【ホームページの表示】を【◎固定ページ】にチェック。
【ホームページ】を作成した固定ページにします。
- ホームページ:③ホームページ(メインとして作成した固定ページ)
- 投稿ページ:①新着記事(空白で作成した固定ページ)



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



私でもできた!
ホームページ設定を参考にさせていただきました!


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



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


SWELL
ヘッダーはサイトを開いた時に最初に目につく場所で、1番目立ちます。以下の各種設定をおこなってサイトの雰囲気を決めていきましょう。
- ロゴ画像
- グローバルナビ
- メインビジュアル
- お知らせバー
- ピックアップバナー(当ブログでは未使用)
- 記事スライダー(当ブログでは未使用)
ヘッダーロゴ設定:画像サイズ【1600×360】
ヘッダーは画像にすると、サイトの個性が出て一気にイメチェンに♪
いつもお世話になっているツール、Canva Proで作成しました。
参考までに、当ブログの画像サイズは【1600×360】。SWELL公式サイトがこのサイズだったので、同様にさせていただきました。


サイトの雰囲気と合わせてシンプルに作りました。



サイズは決まっているわけではないので、自身のサイトに合わせたお好みのサイズにしてみてくださいね。
- 画像サイズ(PC):55px
- 画像サイズ(PC追従ヘッダー):48px
- 画像サイズ(SP):70px
Canvaはオンラインで無料で使える、便利な画像編集ツール。
画像の透過は、有料版のProにて作成しています。(無料のお試し期間もあり)
\Proで簡単に画像の背景を消せる/
グローバルナビとレイアウト・デザイン設定
ヘッダーに表示させるメニュー(いわゆるグローバルナビゲーション)を、あらかじめ作成しておきます。




当ブログのグローバルナビは、
- 各カテゴリー(+サブカテゴリー)
- サイトマップ
で構成しています。
グローバルナビのメニューの作成が終わったら、カスタマイザーでの設定を。
- ヘッダーレイアウト(PC):ヘッダーナビロゴ横右寄せ
- ヘッダーレイアウト(SP):ロゴ中央メニュー左
- ヘッダー境界線:なし
- ヘッダーの背景を透明にするか:する(文字色:黒)
メインビジュアルの設定
メインビジュアルとは、サイトのファーストビューとして設定できる、画像や動画のことです。



もちろんなくても大丈夫ですが、メインビジュアルがあるとサイトの個性を出すことができます。
準備として、
- 画像or動画
- リンクを設置するか
を、考えておきましょう。
当ブログでは、動画にブログパーツを組み合わせたメインビジュアルにしています。


Canvaで作成した動画の上に、ブログパーツでトップページメニューと画像をのせたイメージです。
手順は、
- メニューのブログパーツを作る
- リッチカラムブロックを使って、配置したい場所にメニューや画像が来るように調整する
- メニューからトップページの各エリアへアンカーリンクをする
- メインビジュアルにする背景動画(または画像)を用意する
- 必要であればPCとSPで動画(画像)を分ける
- カスタマイザーでメインビジュアルの設定をする
となります。
設定項目 | 設定内容 |
---|---|
メインビジュアルの表示内容 | 動画 |
表示設定 | Scrollボタンを表示させるにチェック |
メインビジュアルの高さ設定 | ウィンドウサイズにフィットさせる |
動画(PC用) | 用意した動画を設定(サイズ例:1600×900px) |
ブログパーツID1 | 作成したブログパーツのIDのみ入力 |
詳しい設置方法は、以下の記事にまとめています。



表示位置の調整に手間取ったけど、トップページ内の好きな所へアクセスできる仕組みは面白いかなーと。
お知らせバーの設置方法
トップページの1番上にお知らせバーを設置しました。


- お知らせバーの表示位置:ヘッダー上部に表示
- お知らせバーの文字の大きさ:普通
- 表示タイプ:テキスト位置固定(ボタンを設置)
- お知らせ内容・URLを入力
- ボタンテキスト:CLICK!
- お知らせバーの背景効果:なし
このトップページカスタマイズ記事へ、一発で遷移できるリンクを入れたくて設置しました。



モバイルでも表示されます!
目立つので、1番見てほしいことを入れるといいですね。
ピックアップバナーの設置方法(当ブログは未使用)
現在のトップページにはピックアップバナーは設置していませんが、設置時の説明だけ記載しておきます。
ヘッダー部分には、記事がランダムでスライドするかっこいい【スライダー】を設置することもできますし、記事やカテゴリをピックアップ表示できる【ピックアップバナー】を設置することもできます。


当ブログのピックアップバナーの画像サイズは【400×150】です。
- バナーレイアウト:固定幅4列(PC)・固定幅2列(SP)
- バナーデザイン:タイトル⇒表示しない、内側に白線をつけない、バナー画像を少し暗くしない
ピックアップバナーにはカテゴリーをあてるのも良いですが、テーマごとにバラバラになっている記事をまとめた”まとめ記事”をリンクさせるのもおすすめです。



記事内で各記事へ内部リンクしているので、色んな記事を見てもらえると嬉しいなという期待もこめて…♪
ピックアップバナーの画像は、投稿ページなどで設定されているアイキャッチが適用されますが、【概要】に画像のURLを直接指定することにより、任意の画像にも指定できます。
ピックアップバナー:任意の画像の設定の仕方





ピックアップバナーの画像は、雰囲気を揃えるといい感じになりますね!
ピックアップバナーに関する質問
記事スライダーの設定(当ブログは未使用)
記事スライダーも現在のトップページでは未使用となっていますが、設定内容だけ記載しておきます。


記事をスライドさせながら表示ができる記事スライダー。
設置するとメインビジュアルの下に表示されます。
とても目を引くので、見たい記事があればユーザーが回遊してくれるはず。
- カテゴリーまたはタグで絞る
- 並び順
- 表示の設定
- スライドの枚数・速度・間隔の設定
などを設定することができます。
SWELLでフッターをカスタマイズする方法


フッターまで見てくれる人は果たしているのか?わかりませんので、見られなくてもいい・でも自分にはないと困るようなコンテンツを置いています。笑
フッターは1〜3まであり、【外観】→【ウィジェット】で設定することができます。


フッター1には内部リンクを設置しました。まとめ記事を配置するのが個人的におすすめ。


【ブログパーツ】にて、【ボックスメニュー】ブロックで入れたい内部リンクを作成しておく。(アイコンとテキストの並びを横並びにすると、リストのようになるので私は好み。)
【外観】→【ウィジェット】→【フッター(PC)1】に、 テキスト追加→上記で作ったブログパーツIDを記述する。



さりげなく自分の姉妹サイトも宣伝してます!
フッター2には、ブログ村などの外部サイトへの応援ありがとうリンクを入れています。


【ブログパーツ】にて、ブログ村などのリンクへ飛ぶ【SWELLボタン】を作成する。
※SWELLボタンではなく、【リンクリスト】ブロックでボタン表示にしても似たイメージになりますよ。
【外観】→【ウィジェット】→【フッター(PC)2】に、テキスト追加→上記で作ったブログパーツIDを記述する。


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



フッターは個々で必要なパーツは違うと思うので、お好きに作ってくださいね♪
ブログのトップページをおしゃれにするために意識していること
ブログのトップページを少しでもおしゃれだったり、可愛くしたい。
そのために私が意識していることは3つ。
- 色の数をなるべく抑える
- 一般的に3〜4色程度に抑えると良いといいます。当ブログは、黒・ピンク・ベージュ(■■■)を使っています。カラフルにならないように。
- 装飾はシンプルに
- ブロックの装飾は派手にならないよう、シンプルなタイプを選ぶようにしています。例えば、リンクリストは「>」を選択してみたり。
- 詰め込みすぎない
- 余白があると美しい印象を受けます。情報を詰め込みすぎないように…。



この中では色が1番重要かなと考えています。
SWELLを使ったサイト型トップページの作り方まとめ


SWELL
ブロックの組み合わせと設定だけで、ここまでできるテーマ「SWELL」
ワードプレスを始めてすぐの私でもできて、このテーマを選んでよかった!と感じました。
検索からの流入がほとんどだとトップページはあまり見られないかもしれませんが、トップページはブログの顔!と私は考えています。
(余談:一応、当ブログは毎日トップページのアクセスが1番多い。)
ユーザーの気持ちになって、見やすさはこれからも追及し続けていきたい。(あと自己満足。笑)



わりと頻繁にリニューアルしてるので、ぜひまた見にきてくださいね。
色んなサイトのデザインを見たい!という方に、さとしんさんのSWELLサイト集がおすすめ。


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


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





ありがとうございます!
紹介してくださった方は教えてくださると嬉しいです。
コメント
コメント一覧 (16件)
とても丁寧に説明されており、とても参考になりました。
ありがとうございます!
久野さん
コメントありがとうございます!!
そういって頂けてとても嬉しいです。
サイトもこのカスタマイズを使っていただいて嬉しくなっちゃいました(^^♪
くうか様
お世話になっております。
英語やポイ活などについて情報発信しておりますぴろやんと申します。
いつも有益な情報発信ありがとうございます。
くうか様のサイトがとってもわかりやすかったので、貴サイトを参考に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/
今後ともよろしくお願いいたします。
さくさん
はじめまして。コメントありがとうございます。
記事を参考にしていただいたようで嬉しいです!
リンクもありがとうございます。
こちらからも時間が出来た時にリンクさせていただきますね^^
くうかさん
初めまして
このたび、自分のサイトをデフォルトのブログ型からサイト方にしたいと考えてこちらのサイトに行きつきました。
1点質問なのですがCSSを用いて投稿リストの先頭記事の表示を調整されているのですが、これは現在のSWELLでも可能なのでしょうか?
いくつかパターンを試してみたのですが、1記事目から普通に表示されてしまうのです。
何か陥りやすいパターンだったり情報をご存知ならご教授いただけないでしょうか。
トリダイさん
はじめまして!記事を参考にしていただきありがとうございます。
当ブログは最新バージョンのSWELLを使用しています。
なので、別の要因がありそうですね。
現在の実際の画面ではブログ型なので、想像でいくつか挙げてみると、
・CSSのクラス名を、調整したい投稿リストの設定項目「追加CSSクラス名」に入力していない
・CSSにて作ったクラス名と追加CSSクラス名が一致していない
など、チェックしてみてください^^