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

- おしゃれなサイト型トップページの作り方
- ヘッダーをカスタマイズする方法
- フッターをカスタマイズする方法
- SWELLの使い方
こんにちは、SWELLというWordPressテーマを2年以上愛用している、くうかです…!
この記事では、ブログをサイト型トップページにするカスタマイズ方法を解説しています。

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



それならブログのトップページをサイト型にするのがおすすめだよ!
サイト型トップページにすると、
- 読んでほしい記事をアピールできる
- 読者が読みたい記事を探しやすくなる
- サイトの個性を出せる
という、メリットがあります。
この記事を読めば、プログラミングの知識がなくてもサイト型トップページを作ることができます。



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


サイト型






- ブログ型:記事が新しい順に並んでいる状態。(デフォルトの状態)
- サイト型:記事が整理され、見やすく表示されている状態。
実際にサイト型トップページを見てみたい方はこちらから →トップページへ
読者側と運営者側のメリットを並べてみると…



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



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



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


サイト型トップページを作る手順を説明していきます。
SWELLでは、固定ページで好きなようにブロックを組み合わせることで、自由なデザインを作れるようになります。



まずは事前準備!
固定ページを3つ作成していきます。
- 新着記事ページ:タイトルを付けただけの空白ページ
- 人気記事ページ:人気記事を配置したページ(設置したい場合のみ)
- ホームページ:メインとなるページ
STEP1. 新着記事ページを作成
①【新着記事ページ】は、タイトルとパーマリンク(URL)のみを設定した空白のページを作ります。
ワードプレスのメニューから「固定ページ」→「新規追加」します。




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





後ほどこのページをトップページからリンクするので、パーマリンクを頭のどこかに入れておいてくださいね。
②【人気記事ページ】は、設置したい場合のみでOKです。
投稿リストブロックを配置して、読んでほしい記事を表示させるページ。
ワードプレスのメニューから「固定ページ」→「新規追加」します。




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



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



そうなんだよね。
ではこれで事前準備完了!続いてついに実際の見た目を作っていきます。
STEP2. ホームページ(トップページのメイン部分)を作成
\実際の見た目となる③【ホームページ】全体像はこんな感じ!/



解説へすぐに飛べるようにしてあるので、見たいところがあれば飛んでくださいね。
それでは、ようやくトップページのメインとなる③【ホームページ】を作っていきます。
ワードプレスのメニューから「固定ページ」→「新規追加」します。




- タイトル(自分がわかりやすいもの)→「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スラッグを入力)
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
そして【メディアとテキスト】ブロックを追加。
メディアとテキストブロックは、画像と文字の組み合わせで通常のブロックにはないレイアウトが楽しめます。
今回は「ブロークングリッド」という、SWELL独自のレイアウトを使ってみました。
- スタイル:ブロークングリッド
- モバイルでは縦に並べる:ON
- 画像サイズ:フルサイズ
テキスト側には様々なブロックを入れることができますが、今回は
- 【段落】
- 【SWELLボタン】
のブロックを入れて、関連する記事にリンクさせています。


テキスト側の背景色や装飾は、段落などのブロックをすべて選択した状態で【グループ化】するとできます。
余談ですが、背景色を「グレー」に設定すると、CSSを使わずに透過されますよ。



写真を目立たせつつコンテンツを入れられるブロックで、おしゃれで気に入っています♪
とても簡単なブロックですが、こちらの記事で使い方を解説しています。
③人気記事エリアの作り方
ブログの人気記事を紹介しているエリアです。


【フルワイド】ブロック(フルワイドセクション)を追加後、【見出し】 にインライン画像を設定。
- コンテンツ横幅:サイト幅
- 上下のpadding量:PC40・SP20
- 背景色:白
- 上部の境界線の形状:斜線、高さレベル:0
- 下部の境界線の形状:斜線、高さレベル:0
そして【投稿リスト】ブロックを追加。
- 投稿数:3
- レイアウト:カード型
- 表示順序:新着
- 抜粋文:0
- MOREリンク:popular(事前準備で作成した人気記事のURLスラッグを入力)
- Pickupタブの投稿IDを直接指定:読んでほしい記事ID



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



そう。実はこのアイデアを教えてもらって今回初めてやってみたよ!
④カテゴリーエリアの作り方


【フルワイド】ブロック(フルワイドセクション)を追加後、【見出し】 にインライン画像を設定。
- コンテンツ横幅:サイト幅
- 上下のpadding量:PC40・SP20
- 背景色:白
- 上部の境界線の形状:斜線、高さレベル:0
- 下部の境界線の形状:斜線、高さレベル:0
【リッチカラム】ブロックを追加し、好みの列数に設定する。


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


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


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


写真を多く使っているブログなので、写真をメインにしたエリアがあってもいいかなと思い作りました。
【フルワイド】ブロック(フルワイドセクション)を追加後、【見出し】にインライン画像を設定。
- コンテンツ横幅:サイト幅
- 上下の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
グローバルナビゲーションの位置や、お知らせバーの色・配置などを変えると、同じテーマでもガラッと雰囲気を変えることができます。
ヘッダーロゴ設定:画像サイズ【1600×360】
ヘッダーは画像にすると、サイトの個性が出て一気にイメチェンに♪
いつもお世話になっているツール、Canva Proで作成しました。
参考までに、当ブログの画像サイズは【1600×360】。


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



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




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



サイトの個性を出せる部分であると思っています。
準備として、
- 画像or動画
- リンクを設置するか
を、考えておきましょう。
当ブログでは、画像にブログパーツを組み合わせたメインビジュアルにしています。


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



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


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



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


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



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





ピックアップバナーの画像は、雰囲気を揃えるといい感じになりますね!
ピックアップバナーに関する質問
SWELLでフッターをカスタマイズする方法


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


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


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



さりげなく自分の別のブログを宣伝してます!
【ブログパーツ】にて、ブログ村などのリンクへ飛ぶ【SWELLボタン】を作成する。


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


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



フッターは個々で必要なパーツは違うと思うので、お好きに作ってくださいね♪
サイト型トップページの作り方まとめ


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クラス名が一致していない
など、チェックしてみてください^^