SWELL設定項目【逆引き辞典】WordPress初心者向け!

SWELL逆引き辞典

の機能やデザインの設定場所を紹介しています。

  1. SWELLの基本の設定
  2. トップページのカスタマイズ
  3. サイト全体のデザイン
  4. エリア別の設定項目
  5. ウィジェットの設定
  6. 設定が反映されない時

※SWELLの設定ですが、WordPressに関わる部分も含まれます。

記事の構成

  • SWELLの設定項目の場所
  • 公式サイトのマニュアルページ
    SWELL公式サイト該当ページ
  • 小さなヒント
    ★…当サイトの該当記事

\すご~く使いやすい傑作テーマ/

記事の内容(もくじ)

基本的な設定項目

画面には表示されないけれど、ブログを高速化したり、広告を入れたり、執筆を助けたり…とても重要な項目です。

SWELL機能面の基本設定

左メニュー → SWELL設定 → SWELL設定

または

ツールバーのプルダウンメニュー → SWELL設定 → 設定ページへ

  1. 高速化
    特別な場合以外、全てオン
    SWELLでできるキャッシュ機能
  2. Font Awesome
    ファイルの読み込みが必要(やり方は公式サイトで)
    SWELLでFont Awesome(アイコン)を使う
  3. 機能停止
    余分な機能を排除し、WordPressを軽くします。
    「停止」した事を忘れずに! 標準的な機能が動かない時は再確認
  4. 広告コードの設定
    記事内、目次前後、自動、インフィード
    広告2つ横並び、PC・SP別々など
    AdSense関連
    【SWELLの広告設定】PC・SPで別広告を表示&見出し毎に広告挿入の方法
  5. リセット
    キャッシュ・カスタマイザー・PVのリセット
    リセットすると元に戻せない
    キャッシュクリアはツールバー
    プルダウンメニューからも可(ワンクリック)

【ブログカードの注意点】
ブログカードで読み込んでいる記事のタイトルやアイキャッチ画像を変更した時は、ツールバーのプルダウンメニュー「キャッシュクリア(ブログカード)」をクリック。
クリアしないと、情報が長い時間更新されない!

SWELLデザインのベースになる設定

左メニュー → SWELL設定 → エディター設定

または

ツールバーのプルダウンメニュー → SWELL設定 → エディター設定

  1. カラーセット
    カラーパレットに好みの色を設定
    カラーパレットの設定
  2. ボーダーセット
    囲み枠の色、スタイル、太さを設定
    ボーダーセット登録と使い方
  3. マーカー
    マーカーの色、スタイルを設定
    マーカー線のデザイン設定
  4. ボタン
    ボタンの色、丸みを設定
    ボタンのデザイン設定
  5. アイコンボックス
    スタイル、アイコン色、背景色を設定
    アイコン付きボックスのデザイン設定
  6. ふきだし
    ふきだしのカラー設定
    ふきだしそのものは「左メニュー → ふきだし」で作る

    ふきだしカラーセットの登録
  7. カスタム書式
    テキストの装飾をあらかじめ登録
    「赤文字ボールドサイズ大き目」とか作っておくと便利

    カスタム書式セットの登録
    SWELLカスタム書式 テキストの装飾が1クリックで完了!
  8. その他
    ブログカード(内部・外部)、引用の各スタイル
    ブログカードのデザイン設定
    ブログカードを少しカスタマイズ
    引用文のデザイン設定

トップページをデザインする

トップページのデザイン設定

左メニュー → 外観 → カスタマイズ → トップページ

どの機能をどのように使うか自由に組み合わせできます。

  1. メインビジュアルの使い方
    ダイナミックなトップページが作れます。
    メインビジュアルの設定方法
    メインビジュアル
  2. 記事スライダー
    表示記事の対象や並び順などを設定
    記事スライダーの説明
    記事スライダーの使い方
  3. ピックアップバナー
    個数やバナータイトルなどを設定
    ピックアップバナー
    ピックアップバナーの作り方
    下層ページにも表示か選べる
  4. その他「コンテンツ上の余白量」
    メインビジュアル・記事スライダーとコンテンツ部分の間の余白量
    SWELLらしい配慮

トップページのカスタマイズ例

サイト型のトップページを作ることもSWELLならノーコードでできます。

また、SWELL公式サイトには6つのデモデザインが紹介されていて、その着せ替えファイルもSWELL購入者は無料でダウンロードできます。

SWELLデモサイト一覧

着せ替えファイルはおしゃれなトップページを作る近道ですが、WordPress初心者さんにはおすすめしたくないです。

地道に一歩ずつWordPressやテーマを理解していった方が柔軟なサイト作りができると思うから…。

参考までに…

サイト全体のデザイン

左メニュー → 外観 → カスタマイズ → サイト全体設定

  1. サイトアイコンの設定
    サイトアイコン(ファビコン)の設定
    SWELLではなくWordPressの基本機能
  2. 基本カラー
    メインカラー、テキストカラー、リンクカラー、背景色の設定
    基本カラーの設定方法
  3. 基本デザイン
    質感、フォント、サイト幅、背景画像などの設定
    基本デザインの設定
  4. NO IMAGE画像
    アイキャッチ画像がない時に表示される画像
    NO IMAGE画像の設定
  5. タイトルデザイン
    タイトルデザインの設定
  6. コンテンツヘッダー
    コンテンツヘッダーの設定
  7. お知らせバー
    ヘッダー上下に設置できる目立つ告知リンク
    お知らせバーの設定
  8. パンくずリスト
    表示記事がサイト内のどの位置かを視覚的に見せる
    パンくずリストの設定
  9. ページャー
    ページネーションの表示非表示やスタイルを設定
    ページャーのデザイン設定
  10. スマホ開閉メニュー
    SWELLの場合は左から右に開閉
    スマホ開閉メニューの設定
  11. 下部固定ボタン・メニュー
    PCの時、右下に表示される「目次」「ページトップボタン」
    固定目次ボタンの設定
    固定目次ボタンのカスタマイズ
    スマホ最下段の固定メニュー
    スマホ固定フッターメニューの設定

エリア別の設定項目

ヘッダーの基本設定とデザイン

左メニュー → 外観 → カスタマイズ → ヘッダー

ヘッダー
  1. カラー設定
    ヘッダー背景色と文字色を指定
  2. ロゴの設定
    ヘッダーロゴ画像の設定
    ロゴの配置
  3. ヘッダーの追従設定
    ヘッダーの追従設定
  4. ヘッダーバー設定
    ページ最上段の帯。PCのみ表示
    ヘッダーバー設定
  5. キャッチフレーズ設定
    ヘッダーバー内に表示
    キャッチフレーズ設定
    キャッチフレーズは下記のどちらか(同期)
    ・カスタマイズ → WordPress設定 → サイト基本情報
    ・左メニュー → 設定 → 一般設定
  6. ヘッダーメニュー(グローバルナビ)
    グローバルナビ(ヘッダーメニュー)の設定
    グローバルナビを設定
    メニューの作り方は
    ・左メニュー → 外観 → メニュー
  7. スマホ メニューボタンの設定
    ハンバーガーメニューが目立つように背景色を設定
    メニューボタンの設定

ヘッダー右端を活かす(ヘッダー内部)
ヘッダーに設置できるウィジェットエリア
【ヘッダー内部】ブログパーツで有効活用

コンテンツ(記事)の設定と機能・装飾

左メニュー → 外観 → カスタマイズ → 投稿・固定ページ

コンテンツ
  1. 記事タイトルの設定
    位置や日付、タイトル下の情報など
    記事タイトルの基本設定
  2. アイキャッチ画像
    本文初めにアイキャッチを表示・非表示
    アイキャッチ画像の表示方法
    私は入れない派
  3. コンテンツのデザイン設定
    見出し2、3、4のデザイン選択
    テキストリンクのライン設定

    記事内コンテンツのデザイン設定
  4. 目次
    目次のデザイン選択
    目次広告の前後位置設定

    目次の設定
    目次前後の広告の表示方法
    ・広告コードの設定は
     SWELL設定 → 広告コード
  5. SNSシェアボタン
    ボタンの位置、種類、デザインなど
    SNSシェアボタンの設定
  6. 記事下エリア
    SNS、前後記事へのリンク、著者情報エリア、関連記事、コメント欄の各設定
    記事下エリアの各コンテンツ設定

サイドバーの設定

位置と表示設定

左メニュー → 外観 → カスタマイズ → サイドバー

サイドバーの設定

表示項目を設定

左メニュー → 外観 → ウィジェット

サイドバー用ウィジェット
サイドバーの設定

サイドバー
  1. 共通サイドバー
    全ページ共通で表示
  2. トップページ専用サイドバー
    トップページのみ(共通サイドバーの上部)表示。
  3. 共通サイドバー【スマホ版】
    スマホ専用。空の時は「共通サイドバー」を表示
  4. 追尾サイドバー
    追尾サイドバー

フッターの設定

フッター周りの設定
フッターの設定

フッターの基本設定

左メニュー → 外観 → カスタマイズ → フッター

  1. カラー設定
  2. コピーライト設定
  3. その他の設定
    フッター直前の余白をなくす
    フッターにSNSアイコンリスト

表示項目を設定

左メニュー → 外観 → ウィジェット

フッターで使用するウィジェット

フッター
  1. フッター直前
    フッター直前の記事幅いっぱいのエリア
  2. フッター(PC)1、2、3
    3枠すべて使わない場合もキレイに配置されます。
    1要素:記事幅
    2要素:2分割
    3要素:3分割

    フッター(PC)ウィジェット1〜3
  3. フッター(スマホ)
    項目を設定すると上記PCのフッターは非表示
    項目ナシの時はPCのフッターが縦並びで表示

    フッター(スマホ)ウィジェット

【番外】ウィジェットの使い方や反映場所

左メニュー → 外観 → ウィジェット

SWELLのウィジェットエリア一覧

ウィジェット
  1. ヘッダー内部
    ヘッダー右端
    当サイトでは右上のハート
  2. 共通サイドバー
    トップ、記事などすべてのページに表示
  3. 共通サイドバー【スマホ版】
    スマホ専用。無視すると「共通サイドバー」の内容が表示される
  4. トップページ専用サイドバー
    トップページでみ表示(共通サイドバーの上)
  5. 追尾サイドバー
    共通サイドバー下部に表示。画面をスクロールしていってもサイドバーに留まる
  6. スマホ開閉メニュー下
  7. トップページ上部
    コンテンツ上
  8. トップページ下部
    コンテンツ下
  9. 固定ページ上部
    タイトルまたはアイキャッチ画像と記事の間
  10. 固定ページ下部
    コンテンツ下
  11. 記事上部
    タイトルまたはアイキャッチ画像と記事の間
  12. 記事下部
    コンテンツ下
  13. CTAウィジェット
    前後の記事リンクの下
  14. 関連記事上
  15. 関連記事下
  16. フッター直前
  17. フッター(PC)1
  18. フッター(PC)2
  19. フッター(PC)3
  20. フッター(スマホ)

設定や変更が反映されない時

設定や変更、記事の更新などをした時はキャッシュのクリアをしましょう。

管理画面で保存をしても、表示画面が古いままの時はキャッシュが残っているからです(キャッシュは高速化のために必要)。

ショートカットキー

とりあえず、これ。記事を修正したり、画像を替えたり…私はもう反射的に手が動くwww

Ctrl+F5

キャッシュクリア(コンテンツ)

SWELLが用意してくれているキャッシュクリア。

ツールバー → SWELL設定 →(プルダウンメニュー)→ キャッシュクリア(コンテンツ)

内部リンクでブログカード(SWELLブロックの関連記事)を使っているなら、アイキャッチ画像や記事タイトルを替えた時は、ブログカードのキャッシュをクリア。

何もしないと、設定期間(デフォルトで30日)キャッシュされたまま。

ツールバー → SWELL設定 →(プルダウンメニュー)→ キャッシュクリア(ブログカード)

どうしても思うような結果にならない時

カスタマイザーの設定で「何かうまくいかなかったようです。」というエラーが表示される場合の対処法

レンタルサーバーが、ConoHaやロリポップなら「WAF」を疑ってみてください。

WAFの設定をする|ConoHa WINGサポート

WAFを一旦OFFにして、表示確認(改善してもしなくても、ONに戻しておきましょう)。

エックスサーバーのWAFはうまい対応で特に引っかかることはないようです。

プラグインを見直す

WordPressには便利なプラグインがたくさんありますが、全てがWordPressで問題なく動くわけではありません

WordPressの最新版と2年も前に開発が終了したプラグインが仲良く動くなんて…と思いません?

WordPressを使い慣れていない間は、SWELLが推奨しているプラグインに留め、あとからゆっくり機能を足していく方が安全です。

SWELLで非推奨・不必要なプラグインと、推奨プラグインについて

\ 断トツ!一押しのテーマ /

記事の内容(もくじ)