＼ SWELLの詳細を今すぐ見る ／
＼ SWELLの詳細を今すぐ見る／
シンプルなのに高機能
－
SWELL購入後の3ステップ
- 最初に、公式サイトのSWELL推奨・非推奨プラグインを一読します。相性の悪いプラグインを使うと、不具合やページ表示が遅れる原因になります。
- プラグイン「SEO SIMPLE PACK」をインストールし、アナリティクス設定を行います。
ダッシュボードの「SEO PACK」→「一般設定」で「Googleアナリティクス」タブをクリックします。
Googleアナリティクスで調べた「トラッキングID」を貼り付け、「設定を保存する」をクリックします。
なお、「SEO SIMPLE PACK」の詳細については、SWELLの開発者でもあり、このプラグインの開発者でもある了さんがまとめておられます。
－
- その他、私が愛用しているいくつかのプラグインについては、別途、解説記事を書きました。
- 任意の記事内広告と、自動広告を記事内に貼ります。
ダッシュボードで「SWELL設定」をクリックし、「広告コード」タブをクリックします。
「記事内広告」と「自動広告」のコードを貼り付けます。
「記事内広告コード」 に関しては、記事内でショートコード「ad」を入れることによって表示させることができます。
基本的な機能と設定方法は？
ここからは、レイアウトや各機能の説明になります。
サイト全体のレイアウトを整える
投稿・固定ページをデザインする
記事内パーツ、役立つ機能
サイト全体のレイアウト
サイト全体のレイアウトを整えるための主な機能についてまとめました。
サイト全体のカラー設定
「外観」→「カスタマイズ」→「サイト全体設定」で「基本カラー」をクリックします。
メインカラー、リンクカラーなどを好みの色へ設定します。
メインカラーを変更すると、h2、h3などの見出しの色が変更されます。
モバイルで投稿リストを2列表示にする方法は？
記事一覧を表示させる際、スマホで2列表示させることができます。
「外観」→「カスタマイズ」→「記事一覧リスト」の「リストのレイアウト設定」を開きます。
モバイルで2列表示させたい場合は、「2カラム」を選択します。
カテゴリーの表示・非表示も選択できます。
また、サムネイル画像の縦横比率も変更できます。
サイト名・検索バーの位置
「外観」→「カスタマイズ」 で「ヘッダー」をクリックします。
「レイアウト・デザイン設定」の「ヘッダーナビ」を変更するとブログサイト名・ナビの位置を変更できます。
さらに下へスクロールし、「検索ボタン設定」で検索バーの位置を変更することもできます。
トップページのメインビジュアルと記事スライダー
「外観」→「カスタマイズ」 の「トップページ」で「メインビジュアル」をクリックします。
「メインビジュアルの表示内容」で「表示しない」にチェックを入れると、デフォルトの画像が非表示になります。
また、「トップページ」で「記事スライダー」をクリックすると、記事スライダーの設置・非設置を選択できます。
記事スタイだーの詳細については、公式マニュアルに書かれています。
公式マニュアルではピックアップした記事のみを記事スライダーに載せる方法について触れられていません。
しかし、特定「タグ」の記事のみを指定することができるため、このタグ指定を行えば、掲載記事をピックアップすることが可能です。
お知らせバーの表示と設定
「外観」→「カスタマイズ」 の 「サイト全体設計」で「お知らせバー」をクリックします。
バーの配置場所やカラーなどを任意のものへ変更できます。
パンくずリストのレイアウト変更
「外観」→「カスタマイズ」 の 「サイト全体設計」で「パンくずリスト」をクリックします。
パンくずリストの位置や、背景表示などを変更できます。
ページャーのデザイン
「外観」→「カスタマイズ」 の 「サイト全体設計」で「ページャー」をクリックします。
ページャーのデザインを変更できます。
画面右下の「トップへ戻る」「目次」ボタンの設置
「外観」→「カスタマイズ」 の 「サイト全体設計」 で「下部固定ボタン・メニュー」をクリックします。
パソコンやスマホ画面右下に、トップへ戻るボタンと「目次」ボタンを設置することができます。
Font Awesomeの読み込み
ダッシュボードの「SWELL設定」の「SWELL設定」で「Font Awesome」タブをクリックします。
Font Awesomeの読み込み方法について選択できます。
フォント基本サイズの変更
「外観」→「カスタマイズ」→「サイト全体設計」→「基本デザイン」の中にある「フォント設定」で調整できます。
メニュー画面（グローバルメニュー）のデザイン
グルーバルメニューは、トップページの上部に表示されるナビゲーションメニューのことです。
ここでは「問い合わせ」のみが表示されています。
ダッシュボードの「外観」→「メニュー」で、最初に右上の「表示オプション」パネルを開きます。
「説明」にチェックを入れます。
「説明」欄に英語を書き加えます。
グローバルメニューに英語が併記されるようになりました。
ピックアップバナーの設置
トップページに表示させたいリンクをカード形式で並べることができます。
詳細については、公式マニューアルに書かれています。
投稿・固定ページのデザイン
投稿・固定ページのデザインに関する主なものをまとめました。
著者情報の表示・非表示
「外観」→「カスタマイズ」 の 「投稿・固定ページ」 の「記事下エリア」をクリックします。
記事下に、著者情報（「この記事を書いた人」）の表示をつけることができます。
著者情報が不要な場合は、「著者情報を表示」のチェックを外します。
記事タイトル上のアイキャッチ画像の表示・非表示
「外観」→「カスタマイズ」 → 「投稿・固定ページ」の 「アイキャッチ画像」を開きます。
「本文の始めにアイキャッチ画像を表示」のチェック有無で表示・非表示の変更が行なえます。
リンクを貼ったテキストにアンダーバーをつけたい時は？
「外観」→「カスタマイズ」 の 「投稿・固定ページ」の「コンテンツのデザイン」から変更が行なえます。
「テキストリンクにアンダーラインを付ける」にチェックをします。
記事に表示されるSNSシェアボタンの変更
「外観」→「カスタマイズ」で「投稿・固定ページ」をクリックします。
「SNSシェアボタン」をクリックすると、シェアボタンの変更が行なえます。
なお、SNSボタンの飛び先については、「外観」→「カスタマイズ」の「SNS情報」で指定することができます。
目次スタイルを変える方法
デフォルトでは、目次に自動で番号が振られるようになっています。
「外観」→「カスタマイズ」 → 「投稿・固定ページ」の「目次」を開きます。
「ulタグ」に変更すると、番号がなくなり、すっきりします。
フロントページに目次を表示する方法は？
「固定ページ」に目次が表示されるよう設定しても、トップページの固定ページには目次が表示されません。
その場合、目次を貼りたい場所へ以下のコードを貼りつけると、そこに目次が表示されます。
<div class="p-toc -simple"><span class="p-toc__ttl">目次</span></div>また、「ボックス」にする場合は「-simple」の部分を「-capbox」へ、「上下２重線」にする場合は「-double」へ変更します。
前後記事へのページリンク・関連記事の表示・非表示
「外観」→「カスタマイズ」で「投稿・固定ページ」をクリックします。
「前後記事へのページリンクを表示」や「関連記事を表示」のチェックの有無で表示・非表示を変更することができます。
ツイッター・Facebookのフォロワーを増やす方法
投稿ページの末尾に、ツイッターやFacebookへのフォローを促す文言を加えることができます。
「外観」→「カスタマイズ」の「投稿・固定ページ」で「記事下エリア」をクリックします。
「Twitterフォローボタン」や「Facebookいいねボタン」にチェックを入れると、リンク先URLを入力する画面が開きます。
こんな感じでフォローを促すバナーが自動作成されるので便利ですね。
記事内パーツのデザイン
記事内のパーツのデザインについてまとめました。
表デザインのスタイル変更
記事で作成したテーブル内にカーセルを置き、右上の「︙」で「ブロック設定を表示」させると、テーブルのデザインを変更できるようになります。
「スタイル」や「表の設定」から、好みのレイアウトへ変更できます。
ブログカード（リンク）のスタイル変更
SWELLの機能の中で個人的に好きな機能の一つがブログカードです。
他の有料テーマではブログカードをオリジナルコードで作成しているものが多く見られますが、SWELLでは、URLを記事本文にペーストするだけでブログカードが完成します。
また、ブログカードのデザインを変更することもできます。
ダッシュボードの「SWELL設定」の「エディター設定」で「その他」タブをクリックします。
ブログカード（内部）・ブログカード（外部）ともに、デザイン変更が可能です。
ふきだしの作り方
シンプルなふきだしの作り方や、アイコン画像付きのふきだしの作り方については、[マニュアル]に詳しく書かれています。
Q&Aの作り方は？
投稿画面で「＋」マークをクリックし、「SWELLブロック」の「FAQ」をクリックします。
本文を入力します。
右端の線上をクリックし、ブロック全体を選択します。
「Q]と「A」の形状や、カラーを変更することができます。