SWELLテーマをとことん使いこなす！
読者に優しく、滞在時間をガッツリ伸ばすカスタマイズ術
「SWELLテーマをもっと使いこなしたいけど、あちこち設定が多くてわからない…」そんな風に悩んでいませんか？
この記事では、私自身が実際にSWELLをカスタマイズしてきた経験と、過去のやり取りで出てきたポイントを一挙にまとめました。サイドバーの使い方、PR表記、フォントや背景色の選び方まで、あなたが「今すぐ」行動に移せる具体的なヒントを盛りだくさんでお届けします。
1. ウィジェットは自由に動かしてOK！
ヘッダー内部からサイドバーへ
SWELLでは、デフォルトで「ヘッダー内部」にウィジェットが組み込まれる仕様があります。最近の投稿やコメントがヘッダー内部に表示されて、「スマホでは非表示」のパターンに戸惑う方も多いでしょう。ですが、
- サイドバーに配置したいなら、【外観】→【ウィジェット】から移動すればOK
- 必要に応じてテーマファイルを子テーマで編集して、独自のウィジェットエリアを追加しても◎
「人気の投稿」や「新着記事」をサイドバーに表示すれば、読者が記事を読み終えた後に別の記事へ流れやすくなり、結果として滞在時間アップが期待できます。
2. SNSシェアボタンが邪魔？ 非表示でスッキリさせよう
「良かったらシェアしてね！」というボタンが、サイトの雰囲気に合わない…なんてお悩みを持つ方もいるはず。SWELLではカスタマイザーのSNSシェア関連の項目で表示・非表示を切り替えられる場合が多いです。
不要なボタンを外して、読者が本文に集中できるように調整するだけで、驚くほど離脱率が下がることもあります。
3. サイドバーは「あり」か「なし」か？
滞在率を左右するレイアウト選び
ブログ記事の投稿ページを全幅レイアウトにするか、サイドバー付きにするかは悩みどころ。ここはサイトの目的次第です。
- 全幅レイアウト：本文に集中してもらいやすいので記事の読了率を上げたいならオススメ。
- サイドバーあり：関連記事や人気投稿をサイドに置いておけば、回遊率や滞在時間アップが狙えます。
要は記事本文を読み終えたあと、「他の記事も見たい！」と思わせる導線が用意されていれば、全幅でもサイドバーありでも効果は変わりません。テストしてみて数字で判断すると確実ですよ。
4. 記事スライダーはどうする？
動きのある演出で回遊率アップ
SWELL標準の「記事スライダー機能」を使って、トップページや上部エリアで複数の記事をクルクル表示させれば、読者の目を引きやすい反面、サイトが重くなるリスクも。
回遊率を上げるなら「導入すべき」ですが、ページ表示速度が落ちていないか、スマホで見にくくなっていないかは要チェック。
まず導入してA/Bテストで結果を見極めるのがベストです。
5. 法律遵守はマスト！
PR表記は入れて、でも目立ちすぎないように
アフィリエイトリンクや広告リンクが含まれているページには、「当ページのリンクには広告が含まれています。」という表記を入れるのが安全です。法令遵守の観点からも、読者との信頼関係構築の点からも必須と考えましょう。
ただし、枠線がド派手だとデザインを損ねる場合がありますね。
そんなときはカスタムCSSでスタイルを調整しましょう。例えば、当表記のHTML要素が.c-prNotationなら:
.c-prNotation {
border: none !important;
background-color: transparent;
padding: 0;
font-size: 0.8em !important;
color: #999 !important; /* グレーで控えめに */ } 
上記のように色味をグレーにしてあげれば、法律的にも安心しつつデザイン的には落ち着きが出ます。
6. 背景色と文字色で疲れにくさが激変
長時間読まれるブログを目指すなら、背景と文字色の選択はかなり重要。以下を参考にしてください。
- 背景色は#FDF6E3のような暖かみのあるオフホワイトがおすすめ。
- テキストカラーは#333333など、真っ黒すぎないダークグレーがベスト。
- 見出しの帯には、ブラウン系（#8D6E63 や #A1887Fなど）をアクセントにすると温かみアップ。
背景色をほんの少しクリーム色にするだけで、純白(#FFF)よりも目が疲れにくくなり、読者が記事を最後まで読んでくれる確率が上がります。ここは速攻で変えてみる価値アリです！
テキストカラー例
#000000 あいうえおかきけこさしすせそ０１２３４５６７８９亜伊宇絵尾夏季久家子
#333333 あいうえおかきけこさしすせそ０１２３４５６７８９亜伊宇絵尾夏季久家子
#2C2C2C あいうえおかきけこさしすせそ０１２３４５６７８９亜伊宇絵尾夏季久家子
背景色例
7. フォント選びで印象をがらりと変える
日本語フォントのデモ
日本語フォントの場合、ゴシック系が無難です。おすすめはメイリオやNoto Sans JPで、Windows、Mac、スマホなど様々な環境で見やすいのがメリットです。
8. パンくずリストはページ上部に置くべし！
「人生相談 > 恋愛 > ○○」などのパンくずリストは、基本的にページの上部に置くのが鉄板です。
理由は単純で、訪問者が最初に記事を開いた瞬間に「自分がサイトのどこにいるのか」把握できるから。これだけで離脱率の低減や回遊率の向上が期待できるのです。
まとめ：デザインや設定に悩む前に行動してみよう！
SWELLテーマは、カスタマイズできる幅が広いからこそ、まずは「試しにやってみる→数字を見る→微調整する」が最強のやり方です。
悩んで行動しないよりも、サクッと導入して読者の反応を見て判断したほうが、圧倒的に成長スピードが早いです。あなたも今日からどんどんカスタマイズして、読者にとって「居心地のいいブログ」を作り上げてみてください！
コメント