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

3

SWELL逆引き辞典

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

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

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

記事の構成

＼すご～く使いやすい傑作テーマ／

基本的な設定項目

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

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. その他の設定
   フッター直前の余白をなくす
   フッターにSNSアイコンリスト

表示項目を設定

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

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

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

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

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

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

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

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

ショートカットキー

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

Ctrl＋F5

キャッシュクリア（コンテンツ）

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

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

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

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

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

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

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

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

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

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

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

プラグインを見直す

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

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

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

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

＼ 断トツ！一押しのテーマ ／