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

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

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

■準備が完了した方は「基本的なデザイン・機能説明」の項に従い、短時間で最低限のサイト体裁を整えましょう。

目次

SWELL購入後の3ステップ

STEP
テーマをインストールする
  1. 最初に、購入済みの親テーマをインストールします。

インストール手順の詳細が知りたい方は、公式ページを参照してください。

  1. 続いて、子テーマをインストールし、子テーマを有効化します。

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

STEP
プラグインを導入する
  1. 最初に、公式サイトのSWELL推奨・非推奨プラグインを一読します。相性の悪いプラグインを使うと、不具合やページ表示が遅れる原因になります。
  2. プラグイン「SEO SIMPLE PACK」をインストールし、アナリティクス設定を行います。

ダッシュボードの「SEO PACK」→「一般設定」で「Googleアナリティクス」タブをクリックします。

Googleアナリティクスで調べた「トラッキングID」を貼り付け、「設定を保存する」をクリックします。

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

  1. その他、私が愛用しているいくつかのプラグインについては、別途、解説記事を書きました。
STEP
アドセンスの広告を貼る
  • アドセンスを使う場合は、ダッシュボードで最初に「SWELL設定」をクリックします。

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

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

基本的な機能と設定方法は?

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

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

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

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

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

公式サイトの解説ページ:①サイト全体の基本カラーの設定方法

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

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

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

例えば、メインカラーを変更すると、h2、h3などの見出しの色も変更されます。

デフォルトでは、上のような紺がメインカラーになっています。

メインカラーを紫にすると、上のように見出し部分も紫に統一されます。

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

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

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

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

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

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

ヘッダー周りの色

「外観」→「カスタマイズ」→「ヘッダー」で「ヘッダー背景色」と「ヘッダー文字色」を変更することができます。

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

例えば、「ヘッダー背景色」を青色、「ヘッダー文字色」を黄色にすると、このように変わります。

フッター周りの色

「外観」→「カスタマイズ」→「ヘッダー」で「フッター背景色」と「フッター文字色」を変更することができます。

デフォルトでは、「フッター背景色」は白色、「フッター文字色」は黒色です。

例えば、「フッター背景色」を青色、「フッター文字色」を黄色にすると、このように変わります。

スマホメニューの色

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

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

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

②カラーパレットの設定

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

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

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

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

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

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

③ヘッダー周りの設定

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

ヘッダーロゴ画像の設定

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ヘッダーの追従設定

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

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

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

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

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

投稿記事一覧の表示設定|モバイルで投稿リストを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」の形状や、カラーを変更することができます。

よかったらシェアしてね!
目次
閉じる