自転車屋で安いのは? 大手9店を比較! 記事を読む

SWELLの初期設定と基本的な使い方は?

URLをコピーする
URLをコピーしました!

テーマ選びに迷っている方へ

SWELL

「SWELL」は、当ブログで活用しているWordPressテーマです。

いくつかのテーマを使った私が、最終的にSWELLを選んだ理由をまとめました。

WordPressのテーマ選びに迷っている人は、上記リンクページを参照してください。

\ SWELLの詳細を今すぐ見る /

画像に alt 属性が指定されていません。ファイル名: 1-18-400x333.jpg

\ SWELLの詳細を今すぐ見る/
シンプルなのに高機能


■「SWELL」を購入した人は、最初に「テーマ購入後の3ステップ」に従い、テーマ利用のための準備を行ってください。

■SWELLカスタマイザーの内部構造については、下記を参照してください。

■各種機能の設定については、下記を参照してください。

公式サイトに「設定マニュアル」があります!

SWELL
SWELL | シンプル美と機能性の両立 - 圧倒的な使い心地を追求するWordPressテーマ
SWELL | シンプル美と機能性の両立 - 圧倒的な使い心地を追求するWordPressテーマシンプル美と機能性の両立させ、圧倒的な使い心地を追求するWordPressテーマ - 『SWELL』の公式販売サイト。 最新のブロックエディター『Gutenberg』にも完全対応。プログ...
目次

SWELL購入後の3ステップ

STEP
テーマをインストールする
  1. 最初に、購入済みの親テーマをインストールします。
  1. 続いて、子テーマをインストールし、子テーマを有効化します。

子テーマは、無料で提供されています。

親テーマ、子テーマのインストール手順の詳細については、公式ページに書かれています。

SWELL
WordPressテーマ「SWELL」をインストールする方法 | WordPressテーマ SWELL
WordPressテーマ「SWELL」をインストールする方法 | WordPressテーマ SWELLこの記事では、「SWELL」をインストールする方法を解説していきます。 この記事で解説している設定をすませることで、WordPressテーマ「SWELL」を使い始めることができます...

以降、SWELLのテーマカスタマイザーを使って設定を行います。

カスタマイザーの使い方については、公式ページに書かれています。

SWELL
【SWELLの設定】「テーマカスタマイザー」の使用方法 | WordPressテーマ SWELL
【SWELLの設定】「テーマカスタマイザー」の使用方法 | WordPressテーマ SWELLSWELLでは、カスタマイズ項目の多くが「テーマカスタマイザー」機能で行うことができるようになっています。 この「テーマカスタマイザー」機能はリアルタイムで設定が反映...

また、バージョンアップさせる方法についても、公式ページに書かれています。

SWELL
SWELLのバージョンアップデートに伴うテーマの更新方法 | WordPressテーマ SWELL
SWELLのバージョンアップデートに伴うテーマの更新方法 | WordPressテーマ SWELLここでは、SWELLがバージョンアップデートされた時に、ご利用のサイトでSWELLを最新版に更新する方法を説明していきます。 最新バージョンが更新されたかどうかの確認方法 ...
STEP
プラグインを導入する

WordPressの機能を拡張してくれるプラグインは、とても便利なものです。

その一方、多くのトラブルがプラグインによって引き起こされています。

SWELLユーザーは、なるべくSWELL推奨のプラグインをインストールしましょう。

SWELL
SWELLで非推奨・不必要なプラグインと、推奨プラグインについて | WordPressテーマ SWELL
SWELLで非推奨・不必要なプラグインと、推奨プラグインについて | WordPressテーマ SWELLこのページでは、WordPressテーマ「SWELL」でどんなプラグインを使えばいいか、使わない方がいいのかを説明していきます。 SWELLと機能が重複していて不具合を起こすプラグ...

個人的によく使っているSWELL推奨プラグインについて、別記事でまとめました。

「SEO SIMPLE PACK」はアクセス分析に便利!

ブログを運用する際は、アクセス分析が欠かせません。

その際、プラグイン「SEO SIMPLE PACK」を活用すると「Google Analytics」の導入が簡単に行なえます。

「SEO SIMPLE PACK」での設定方法は、以下のとおりです。

  1. プラグイン「SEO SIMPLE PACK」をインストールします。
  2. ダッシュボードの「SEO PACK」→「一般設定」で「Googleアナリティクス」タブをクリックします。
  3. Googleアナリティクスで調べた「トラッキングID」を貼り付け、「設定を保存する」をクリックします。

なお、「SEO SIMPLE PACK」の詳細については、SWELLの開発者でもあり、このプラグインの開発者でもある了さんがまとめておられます。

また、「UA」から始まる「トラッキングID」の代わりに、「G」から始まる「測定ID」でも大丈夫です。

その場合、アナリティクスの管理画面を開き、「管理(歯車マーク)」の「データストリーム」をクリックします。

「ウェブ」タブをクリックした後、当該サイトをクリックすると、右上に「G」から始まる「測定ID」が表示されます。

なお、「Google Analytics」へのサイト登録と「Search Console」との関連付けについては、別記事でまとめています。

あわせて読みたい
「Google Analytics」の導入と「Search Console」との関連付けの方法は?
「Google Analytics」の導入と「Search Console」との関連付けの方法は?【トラッキングコードの取得と設定】Google Analyticsでは、詳細にわたるアクセス分析が行えます。Google Analyticsの詳細について[こちら]をご覧ください(Googleのペ...
STEP
アドセンスの広告を貼る(アドセンス利用者のみ)
  • アドセンスを使う場合は、ダッシュボードの「SWELL設定」をクリックします。

「広告コード」タブをクリックした後、「記事内広告」と「自動広告」の欄に広告コードを貼り付けます。

「記事内広告コード」 に関しては、記事内でショートコード [ad](※adは小文字で入力)と入力することによって表示させることができます。

また、「目次広告」に広告コードを入れると、目次の直前または直後に広告を貼ることができます。

カスタマイザーの概要

ダッシュボードから起動する場合は、「外観」の「カスタマイズ」をクリックします。

SWELL設定の概要

上記の他、ダッシュボードの「SWELL設定」から、以下の設定が行なえます。

基本的なデザインと各種機能

ここからは、レイアウトや各機能の説明になります。

サイト全体のレイアウトを整える

投稿・固定ページをデザインする

記事内パーツ、役立つ機能

①サイト全体のカラー設定

「外観」→「カスタマイズ」→「サイト全体設定」で「基本カラー」をクリックします。

「メインカラー」「テキストカラー」「リンクの色」「背景色」を好みの色に設定できます。

これがサイト全体のベースカラーになります。

デフォルトのメインカラーは紺色のため、h2、h3などの見出しの色も紺色に統一されています。

メインカラーを紫にすると、上記同様、見出し部分は紫に統一されます。

「テキストカラー」の設定では、サイト全体のテキストの色を変更できます。

「リンクカラー」の設定でも同様に、サイト全体のリンクの色を変更できます。

「背景色」の設定では、サイト全体の背景色を変更できます。

デフォルトの「背景色」は「白」になっています。

このように、任意の背景色へ変更することができます。

ただし、「外観」→「カスタマイズ」→「サイト全体設計」→「基本デザイン」で「コンテンツの背景を白にする」が「ON」になっている場合、例えば、背景色を赤に変更してもコンテンツ背景は白のままです。

サイト全体の基本カラーについては、公式ページにも書かれています。

SWELL
サイト全体の基本カラーの設定方法 | WordPressテーマ SWELL
サイト全体の基本カラーの設定方法 | WordPressテーマ SWELLSWELLでは、様々な部分で色を自由に設定することができます。 このページでは、その中でもサイトのベースとして重要になってくる基本的なカラーの設定方法について説明して...

スマホメニューの色

スマホメニューについては、「外観」→「カスタマイズ」→「サイト全体設計」→「スマホ開閉メニュー」で「文字色」と「背景色」を変えることができます。

デフォルトでは、「文字色」は黒色、「背景色」は白色になっています。

「文字色」を黄色、「背景色」を青色にすると、このように変わります。

②カラーパレットの設定

公式サイトの解説ページ:②カラーパレットの配色をカスタマイズする方法

カラーパレットの「文字色」と「背景色」は、ブロックのサイドバーで表示されます。

いずれの一列目も固定で5色になっていますが、それ以外の8色については好きな色に設定できます。

デフォルトでは、赤、青、緑、橙の濃い色と薄い色になっていますが、任意のカラーへ変更可能です。

記事内で実際に使ってみます。

このように、美しい配色にすることができます。

③ヘッダー周りの設定

SWELL公式の解説ページ:③ヘッダーの設定をしよう

ヘッダーロゴ画像の設定

ヘッダーロゴ画像については、「外観」→「カスタマイズ」→「ヘッダー」の「ヘッダーロゴの設定」で行います。

デフォルトでは、テキストでブログタイトル名が文字色が黒、背景色が白で表示されています。

「ロゴ画像」をアップすると、テキストの代わりに画像が表示されます。画像制作時に文字も埋め込みましょう。

「画像サイズ」では、縦のサイズを入れます。縦横比一定で幅も拡大・縮小されます。

スマホでは、ロゴ画像は上のように表示されます。

ロゴ画像の大きさは任意ですが、パソコンの場合は縦が最大120px、スマホの場合は最大80pxのため、縦120px/幅600~1000pxくらいにするのが良いと思えます。

ヘッダーメニューの位置(PC)

【ヘッダーのレイアウト設定(PC)】

ヘッダーメニューの位置については、4つの中から選択できます。

  • ロゴ画像(※ロゴ画像は左端)の右側(右寄せ)
  • ロゴ画像(※ロゴ画像は左端)の右側(左寄せ)
  • ロゴ画像(※ロゴ画像は中央)の下側
  • ロゴ画像(※ロゴ画像は中央)の上側

詳細については、公式サイトの解説ページに画像付きで書かれています。

ヘッダーメニューの位置(SP)

【ヘッダーのレイアウト設定(SP)】

スマホの場合、ヘッダーメニューは三本線の中に収まっています。

ヘッダーメニューの位置については、3つの中から選択できます。

  • ロゴ画像(※ロゴ画像は左端)の右側(右寄せ)
  • ロゴ画像(※ロゴ画像は中央)の右側(右寄せ)
  • ロゴ画像(※ロゴ画像は中央)の左側(左寄せ)

詳細については、公式サイトの解説ページに画像付きで書かれています。

メインビジュアルの上にヘッダーメニューをかぶせる

【トップページでの特別設定】

メインビジュアルの上にヘッダーメニューをかぶせることもできます。

ロゴ画像を使っても、テキストのみでもこの設定は行なえます。テキスト色は白色か黒色かを選べます。

ただし、パソコンのヘッダーレイアウトは横並びにする必要があります。

詳細については、公式サイトの解説ページに画像付きで書かれています。

ヘッダーの追従設定

通情は、ヘッダーを追従させるようにしておくと便利です。

上の画像のように、ページを下の方へスクロールしても、ヘッダーがしっかり表示されたままになっています。

スマホの場合も同様です。

「追従ヘッダー(PC)の背景不透明度」のデフォルト値は1です。通常はデフォルトのままで大丈夫です。

この値を例えば「0.1」にすると、上の画像のように、ヘッダーエリア内でも本文が透けて見えるようになります。

ヘッダーバーの設定

ヘッダーバーとは、上の画像の場合、一番上のオレンジ色エリアのことです。デフォルトでは単色(メインカラー)の細いバーが表示されているだけです。

「外観」→「カスタマイズ」→「ヘッダー」で「ヘッダーバー背景色」「ヘッダーバー文字色」を任意のカラーへ変更することもできます。

ヘッダーバーの右端には、デフォルトでは「RSSページ」へのリンクアイコンがついているだけです。

「外観」→「カスタマイズ」→「SNS情報」で、ツイッターへのリンクを貼ってみます。

ヘッダーバーに、ツイッターページへのリンクアイコンが追加されました。

キャッチフレーズ設定

「キャッチフレーズ」は、WordPressのダッシュボードの「設定」→「一般設定」の「キャッチフレーズ」で設定します。

「ヘッダーバーに表示」にすると、ヘッダーバーに表示されます。

その下の欄にチェックを入れると、サイトのタイトルも加えることができます。

また、「ヘッダーロゴの近くに表示」にすると、ヘッダーロゴの右横、もしくは下に表示されます。

その下の欄にチェックを入れると、サイトのタイトルも加えることができます。

ヘッダーメニュー(グローバルナビ)設定

ヘッダーメニュー(グローバルメニュー)とは、上の画像のように、ヘッダーエリアに表示されるメニューのことです。

ヘッダーメニューでマウスをホバーした時のエフェクトには、以下の5種類があります。

  • ラインの出現(中央から)
  • ラインの出現(左から)
  • ブロックの出現
  • 背景グレー
  • 背景明るく

ヘッダーメニューをロゴの上または下に表示させた時も、同様のエフェクト設定が行えます。

「ラインの出現」にすると、マウスホバー時に、上の画像のような細いラインが出現します。

「ブロックの出現」にすると、マウスホバー時に、上の画像のような太い線が出現します。

「背景グレー」にすると、マウスホバー時に、上の画像のようなグレーが出現します。

「背景明るく」にすると、マウスホバー時に、背景が明るくなります。

また、サブメニューを設定している際は、サブメニューの背景色を「ホワイト」もしくは「メインカラー」にすることができます、

さらに、ヘッダーメニューがヘッダーロゴの上もしくは下にある場合、ヘッダーメニューの色を任意のカラーにすることもできます。

スマホ用ヘッダーメニューの設定

スマホ用のヘッダーメニュー設定としては、「ヘッダーメニューをループさせる」ことができます。

ヘッダーでの「検索ボタン」設置

「検索ボタン」は自サイト内での検索を行うツールです。

パソコンでは、「ヘッダー内のアイコンリストに表示」もしくは「ヘッダーメニューに表示」させることができます。

「ヘッダー内のアイコンリストに表示」させた場合、上の画像のように、アイコン横に「検索ボタン」が設置されます。

「ヘッダーメニューに表示」させた場合、上の画像のように、ヘッダーメニュー横に「検索ボタン」が設置されます。

スマホの場合、「カスタムボタンに設置」させることができます。

「カスタムボタンに設置」した場合、上の画像のように、サイトのタイトル横に「検索ボタン」が設置されます。

スマホヘッダーに表示するボタンの設定

スマホのヘッダーには、「メニューボタン」と「カスタムボタン」の2つを設置することができます。

メニューボタンは「≡」で表示されているメニューのことです。

「アイコン下に表示するテキスト」はデフォルトでは空欄で何も表示されませんが、「≡」の下に「MENU」などの文字を表示させることが可能です。

また、「メニューボタンの背景色」によって、メニューボタンの背景色を変えることができます。

「カスタムメニュー」に関しては、デフォルトで「検索ボタン」が表示されていますが、別のものへ変更することが可能です。

上記の例では、問い合わせページへのリンクボタンに変更しています。アイコンや、アイコン下のテキスト、カスタムボタンの背景色、リンク先を任意のものに変更することが可能です。

ただし、リンク先を任意のものにしたい場合は、「検索ボタンの表示設定(SP)」を「表示しない」に設定してください。

④フッター周りの設定

SWELL公式の解説ページ:④フッター周りの設定方法

フッターのカラー設定

フッター周りの設定に関しては、「外観」→「カスタマイズ」→「フッター」で行います。

「フッター背景色」と「フッター文字色」については任意のカラーへ変更することができます。

こんな感じでアクセントになります。

コピーライトの直前のエリアが、フッターのウィジェットエリアです。

「ウィジェットエリアの背景色」から、カラーの変更が行なえます。

また、「ウィジェットエリアの文字色」を変更することもできます。

「コピーライト設定からは、「コピーライトのテキスト」の変更が行なえます。

「その他の設定」からは、「フッターとフッター直前ウィジェットの間の余白をなくす」設定や、「フッターにSNSアイコンリストを表示する」設定が行なえます。

フッターメニューの設定

ダッシュボードの「外観」→「メニュー」から、フッタメニューを作成することができます。

フッターメニューを初めて作る場合は、「新しいメニューを作成しましょう」をクリックします。

「メニュー名」に「フッターメニュー」と入力し、「メニュー設定」で「フッター」にチェックを入れ、「メニューを作成」をクリックします。

フッターメニューが出来上がると、上の画像のように、SNSアイコンとコピーライトの間に表示されます。

フッター周りで使用できるウィジェット

フッター周りで使用できるウィジェットについては、5種類あります。

ダッシュボードの「外観」の「ウィジェット」から設定を行います。

詳細については、SWELL公式ページの解説を参照してください。

⑤サイドバーの設定

SWELL公式の解説ページ:⑤サイドバーの設定

最初に「外観」→「カスタマイズ」→「サイドバー」を開きます。

サイドバーを表示するかどうか、サイドバーの位置(右・左)をどうするか設定が行えます。

また、「外観」→「カスタマイズ」→「サイト全体設定」→「タイトルデザイン」から、ウィジェットのタイトルのデザインを設定することができます。

例えば、「サイドバーのタイトルデザイン」を「左に縦線」にしてみます。

上の画像のように、ウィジェットのタイトルにメインカラーの縦線が入ります。

⑥スマホメニューの設定

SWELL公式の解説ページ:⑤スマホメニューの設定方法

スマホメニューとは、スマホの「≡」ボタンをタップすることで表示されるメニューのことです。

最初に「外観」→「カスタマイズ」→「サイト全体設計」→「スマホ開閉メニュー」を開きます。

カラー設定

「カラー設定」では、「文字色」「背景色」などを変更することができます。

デフォルトの「文字色」は黒、「背景色」は白ですが、例えば「文字色」を紫、「背景色」を淡黄にすると、上の画像のようになります。

表示設定

「表示設定」では、「メインメニュー上に表示するタイトル」をつけることができます。

例えば「メニュー」とすると、上の画像のように表示されます。

また、「メインメニュー上に表示するタイトル」のデザインを変える場合は、「外観」→「カスタマイズ」→「サイト全体設計」で「タイトルデザイン」をクリックします。

一番下に「スマホメニュー内のタイトルデザイン」という項目があります。

例えば「左に縦線」を選ぶと、上の画像のように表示されます。

スマホメニューの内容をグローバルナビと異なるものにしたい場合は?

デフォルトでは、グローバルナビと同じものがスマホメニューにも表示されるようになっています。

グローバルナビと異なる内容のものをスマホメニューに表示する方法については、公式ページに書かれています。

投稿記事一覧の表示設定|モバイルで投稿リストを2列表示にする方法、カテゴリーを非表示にする方法は?

トップページに投稿記事一覧を表示させるような場合、カード形式で表示させると美しいビジュアルになります。

スマホ画面でも、2列表示にすることが可能です。

「外観」→「カスタマイズ」→「記事一覧リスト」の「リストのレイアウト設定」を開きます。

モバイルで2列表示させたい場合は、「2カラム」を選択します。

カテゴリーの表示・非表示も選択できます。

また、サムネイル画像の縦横比率も変更できます。

サイト名・検索バーの位置

「外観」→「カスタマイズ」 で「ヘッダー」をクリックします。

「レイアウト・デザイン設定」の「ヘッダーナビ」を変更するとブログサイト名・ナビの位置を変更できます。

さらに下へスクロールし、「検索ボタン設定」で検索バーの位置を変更することもできます。

公式ページでは、
「ヘッダーカラーの設定」「ヘッダーロゴ画像の設定」「ヘッダーのレイアウト・デザイン設定」「トップページでの特別設定」「ヘッダーの追従設定」「ヘッダーバーの設定」「SNSアイコンリストについて」「キャッチフレーズ設定」「ヘッダーメニュー(グローバルメニュー)設定」「検索ボタンの設定」「スマホヘッダーに表示するボタンの設定」「お知らせバーの設定」
について詳しく書かれています。

フッター周りの設定についても、公式ページに書かれています。

サイドバーの設定についても、公式ページに書かれています。各ページごとに、表示・非表示にすることも可能です。

スマホメニューの設定についても、公式ページに書かれています。

公式ページの「サイトのベースとなるデザイン・レイアウトの設定方法」の項目では、「基本デザインの設定(「フォント設定」「コンテンツ幅の設定」など)」「NO IMAGE 画像の設定」「タイトルデザインの設定」「コンテンツヘッダーの設定」「お知らせバーの設定(下記も参照)」「パンくずリストの設定(下記も参照)」「ページャーのデザイン設定(下記も参照)」「サイドバーの表示設定」について書かれています。

お知らせバーの表示と設定

「外観」→「カスタマイズ」 の 「サイト全体設計」で「お知らせバー」をクリックします。

バーの配置場所やカラーなどを任意のものへ変更できます。

パンくずリストのレイアウト変更

「外観」→「カスタマイズ」 の 「サイト全体設計」で「パンくずリスト」をクリックします。

パンくずリストの位置や、背景表示などを変更できます。

ページャーのデザイン

「外観」→「カスタマイズ」 の 「サイト全体設計」で「ページャー」をクリックします。

ページャーのデザインを変更できます。

トップページのメインビジュアルと記事スライダー

「外観」→「カスタマイズ」 の「トップページ」で「メインビジュアル」をクリックします。

「メインビジュアルの表示内容」で「表示しない」にチェックを入れると、デフォルトの画像が非表示になります。

また、「トップページ」で「記事スライダー」をクリックすると、記事スライダーの設置・非設置を選択できます。

記事スライダーの詳細については、公式マニュアルに書かれています。

公式マニュアルではピックアップした記事のみを記事スライダーに載せる方法について触れられていません。

しかし、特定「タグ」の記事のみを指定することができるため、このタグ指定を行えば、掲載記事をピックアップすることが可能です。

画面右下の「トップへ戻る」「目次」ボタンの設置

「外観」→「カスタマイズ」 の 「サイト全体設計」 で「下部固定ボタン・メニュー」をクリックします。

パソコンやスマホ画面右下に、トップへ戻るボタンと「目次」ボタンを設置することができます。

Font Awesomeの読み込み

ダッシュボードの「SWELL設定」の「SWELL設定」で「Font Awesome」タブをクリックします。

Font Awesomeの読み込み方法について選択できます。

サイト運営者のSNSアカウント情報を設定する方法

「サイト運営者のSNSアカウント情報を設定する方法」については、公式ページに書かれています。

フォント基本サイズの変更

「外観」→「カスタマイズ」→「サイト全体設計」→「基本デザイン」の中にある「フォント設定」で調整できます。

メニュー画面(グローバルメニュー)のデザイン

グルーバルメニューは、トップページの上部に表示されるナビゲーションメニューのことです。

ここでは「問い合わせ」という文字のみが表示されています。

ダッシュボードの「外観」→「メニュー」で、最初に右上の「表示オプション」パネルを開きます。

「説明」にチェックを入れます。

「説明」欄に英語を書き加えます。

グローバルメニューに英語が併記されるようになりました。

ピックアップバナーの設置

トップページに表示させたいリンクをカード形式で並べることができます。

詳細については、公式マニューアルに書かれています。

投稿・固定ページのデザイン

投稿・固定ページのデザインに関する主なものをまとめました。

著者情報の表示・非表示

「外観」→「カスタマイズ」 の 「投稿・固定ページ」 の「記事下エリア」をクリックします。

記事下に、著者情報(「この記事を書いた人」)の表示をつけることができます。

著者情報が不要な場合は、「著者情報を表示」のチェックを外します。

記事タイトル上のアイキャッチ画像の表示・非表示

「外観」→「カスタマイズ」 → 「投稿・固定ページ」の 「アイキャッチ画像」を開きます。

「本文の始めにアイキャッチ画像を表示」のチェック有無で表示・非表示の変更が行なえます。

リンクを貼ったテキストにアンダーバーをつけたい時は?

「外観」→「カスタマイズ」 の 「投稿・固定ページ」の「コンテンツのデザイン」から変更が行なえます。

「テキストリンクにアンダーラインを付ける」にチェックをします。

記事に表示されるSNSシェアボタンの変更

「外観」→「カスタマイズ」で「投稿・固定ページ」をクリックします。

「SNSシェアボタン」をクリックすると、シェアボタンの変更が行なえます。

なお、SNSボタンの飛び先については、「外観」→「カスタマイズ」の「SNS情報」で指定することができます。

目次スタイルを変える方法

デフォルトでは、目次に自動で番号が振られるようになっています。

「外観」→「カスタマイズ」 → 「投稿・固定ページ」の「目次」を開きます。

「ulタグ」に変更すると、番号がなくなり、すっきりします。

フロントページに目次を表示する方法は?

「固定ページ」に目次が表示されるよう設定しても、トップページの固定ページには目次が表示されません。

その場合、目次を貼りたい場所へ以下のコードを貼りつけると、そこに目次が表示されます。

<div class="p-toc -simple"><span class="p-toc__ttl">目次</span></div>

また、「ボックス」にする場合は「-simple」の部分を「-capbox」へ、「上下2重線」にする場合は「-double」へ変更します。

前後記事へのページリンク・関連記事の表示・非表示

「外観」→「カスタマイズ」で「投稿・固定ページ」をクリックします。

「前後記事へのページリンクを表示」や「関連記事を表示」のチェックの有無で表示・非表示を変更することができます。

ツイッター・Facebookのフォロワーを増やす方法

投稿ページの末尾に、ツイッターやFacebookへのフォローを促す文言を加えることができます。

「外観」→「カスタマイズ」の「投稿・固定ページ」で「記事下エリア」をクリックします。

「Twitterフォローボタン」や「Facebookいいねボタン」にチェックを入れると、リンク先URLを入力する画面が開きます。

こんな感じでフォローを促すバナーが自動作成されるので便利ですね。

記事内パーツのデザイン

記事内のパーツのデザインについてまとめました。

表デザインのスタイル変更

「スタイル」や「表の設定」から、好みのレイアウトへ変更できます。

ブログカード(リンク)のスタイル変更

SWELLの機能の中で個人的に好きな機能の一つがブログカードです。

他の有料テーマではブログカードをオリジナルコードで作成しているものが多く見られますが、SWELLでは、URLを記事本文にペーストするだけでブログカードが完成します。

また、ブログカードのデザインを変更することもできます。

ダッシュボードの「SWELL設定」の「エディター設定」で「その他」タブをクリックします。

ブログカード(内部)・ブログカード(外部)ともに、デザイン変更が可能です。

ふきだしの作り方

シンプルなふきだしの作り方や、アイコン画像付きのふきだしの作り方については、[マニュアル]に詳しく書かれています。

Q&Aの作り方は?

投稿画面で「+」マークをクリックし、「SWELLブロック」の「FAQ」をクリックします。

本文を入力します。

右端の線上をクリックし、ブロック全体を選択します。

「Q]と「A」の形状や、カラーを変更することができます。

アイコンの使い方は?

SWELLでは、簡単なショートコードでアイコンを使うことができます。

アイコンの使い方については公式ページで説明されています。

SWELLで使えるアイコン一覧についても、公式ページで説明されています。

SWELLボタンの使い方は?

「SWELLボタン」を使用する際は、投稿記事内の「ブロック」で画面下へスクロールし、「SWELLボタン」をクリックします。

画面右に表示される「設定」(表示されていない場合は「歯車」マークをクリック)の「ブロック」から「SWELLボタン」の「スタイル」を選択します。

「設定」画面を下へスクロールすると、「SWELLボタン」の「カラー」「サイズ」などを変更することもできます。

最後にボタン内へテキストを入力し、リンク先のURLをコピペすれば完成です。

なお、ダッシュボード内「SWELL設定」の「ボタン」から、「SWELLボタン」のカスタマイズが可能です。

SWELLボタンを【2カラム】にしたい場合は?

「SWELLボタン」を2カラムにしたい場合は、記事内の「ブロック」で「カラム」を選択します。

画面右の「設定」内で「スマホでの列数設定」などを選択してから、カラムの「パターン」をクリックします。

「+」マークをクリックした後、「ブロック」内の「SWELLボタン」をクリックするとカラム内にボタンを挿入できます。

なお、同様の「SWELLボタン」をすでに作ったボタンの下に追加したい場合、「複製」を利用すると便利です。

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる