MENU

【テーマ機能】SWELL カスタマイズ紹介

①:記事装飾ブロック
STEP
記事装飾ブロックの確認

記事を装飾するブロックがたくさん!

STEP
記事装飾ブロック:方法①

記事装飾ブロックを呼び出す方法:①

記事装飾ブロックは「2つ」の方法で呼び出せる

  1. 「⚙(歯車)」ボタン
  2. 「ブロック」
  3. 各種装飾ブロック
STEP
記事装飾ブロック:方法②

記事装飾ブロックを呼び出す方法:②

記事装飾ブロックは「2つ」の方法で呼び出せる

  1. 「装飾ブロックを入れたい場所」「記事装飾ブロックを入れたいテキスト」をクリック
  2. 「+」マーク
STEP
記事装飾ブロック:方法②-2
  1. 「ブロック」
  2. 「SWELLブロック」
  3. 好きな装飾ブロックを選択して挿入
②:グローバルナビ(ヘッダーメニュー)
STEP
グローバルナビ(ヘッダーメニュー)の確認

スマホ表示

PC表示

STEP
「カスタマイズ」
  1. 「W」ボタン
  2. 「外観」
  3. 「カスタマイズ」
STEP
「メニュー」
  1. 「メニュー」
STEP
「グローバルナビ」
  1. 「グローバルナビ」
STEP
「項目を追加」して、「公開」
  1. 「項目を追加」
  2. 「固定ページ」「投稿ページ」「カスタムリンク」などから好きなものを選択
  3. 「公開」で保存
③:お知らせバー
STEP
お知らせバーの確認

スマホ表示

PC表示

STEP
「カスタマイズ」
  1. 「W」ボタン
  2. 「外観」
  3. 「カスタマイズ」
STEP
「サイト全体設定」
  1. 「サイト全体設定」
STEP
「お知らせバー」
  1. 「お知らせバー」
STEP
お知らせバーの設定
  1. 「お知らせバーの表示位置」
    • 「ヘッダー下部に表示」
  2. 「表示タイプ」
    • 「テキスト位置固定(バー全体がリンク)」
  3. 「お知らせ内容」
    • 好きなテキストを入力
  4. 「リンク先のURL」
    • 好きなURLを入力
  5. 「公開」して保存
STEP
お知らせバーの色変更

少し下にスクロール

  1. 「お知らせバー文字色」
  2. 「お知らせバー背景色」
  3. 「公開」して保存
④:メインビジュアル
STEP
「メインビジュアル」を確認
  1. サイトのイメージとなる画像を設定
  2. 画像にURLを設定することも可能
  3. 最大5枚まで設定可能
  4. 画像は全て同じサイズにて作成
    1. 横1,600px :縦800px がオススメ
STEP
「カスタマイズ」
  1. 「W」ボタン
  2. 「外観」
  3. 「カスタマイズ」
STEP
「トップページ」
  1. 「トップページ」
STEP
「メインビジュアル」
  1. 「メインビジュアル」
STEP
スライド画像を設定

少し下にスクロール

以下の設定を画像枚数分(最大5枚分)行う

  1. 「スライド画像【1】(PC)」
    • 「画像を選択」
  2. 「スライド画像【1】(SPスマホ)」
    • 「画像を選択」
  3. 「リンク先URL【1】」
  4. 「公開」で保存

「PC」と「SPスマホ」の画像は同じ画像を設定するのがオススメ。

「PC」を設定して「SPスマホ」を特に設定しなかった場合、「PC」の設定が「SPスマホ」に反映されます。

画像は最大5枚まで設定可能ですが、全ての画像サイズを同じサイズに統一してください。

STEP
さらに細かいスライド画像設定

以下の設定がオススメ

  1. 「メインビジュアルの表示内容」
    • 「画像」
  2. 「表示設定」
    • 全てのチェックを外す
  3. 「メインビジュアルの高さ設定」
    • 「画像・動画サイズのまま」
  4. 「画像(動画)の上に表示されるボタンの丸み」
    • 「なし」
  5. 「フィルター処理」
    • 「なし」
  6. 「オーバレイカラー」
    • 「デフォルト」
  7. 「オーバレイカラーの不透明度」
    • 「0」
  8. 「画像スライダー設定」
    • 「スライドの切り替えアニメーション」→「フェード」
    • 「スライドの表示中のアニメーション」→「なし」
    • 「スライドの切り替わり速度」→「1,500」
    • 「スライドが切り替わる間隔」→「5,300」
    • 「スライドの表示枚数」→「1」
    • 「スライドの表示枚数(SP)」→「1」
  9. 「ナビゲーションの表示設定」
    • 「ページネーションを表示する」をチェック
  10. 「テキストの固定表示設定」
    • チェックを外す
  11. 「公開」で保存
⑤:記事スライダー
STEP
「記事スライダー」の確認
  1. 「完全ランダム」「特定カテゴリー」など指定して記事スライダーを設定可能
STEP
「カスタマイズ」
  1. 「W」ボタン
  2. 「外観」
  3. 「カスタマイズ」
STEP
「トップページ」
  1. 「トップページ」
STEP
「記事スライダー」
  1. 「記事スライダー」
STEP
記事スライダーの設定
  1. 「記事スライダーを設置するかどうか」
    • 「設置する」
  2. 「ピックアップ対象」
    • 空欄なら全記事が対処
    • カテゴリーIDを設定したら、そのカテゴリーが対象
  3. 「並び順」
    • 「ランダム」「投稿日」「更新日」「人気順」から選択可能
  4. 「公開」で保存
STEP
さらに細かい記事スライダー設定

以下の設定がオススメ

  1. 「タイトルや日時などの表示位置」
    • 「画像の下側」
  2. 「カテゴリー表示位置」
    • 「表示しない」
  3. 「日時の表示設定」・「著者の表示設定」
    • 全てのチェックを外す
  4. 「スライド設定」
    • 「スライダーの枚数設定(PC)」→「5」
    • 「スライダーの枚数設定(SP(スマホ))」→「2」
    • 「スライドのアニメーション速度」→「1,500」
    • 「スライドが切り替わる感覚」→「5,000」
  5. 「その他の設定」
    • 「ページネーションを表示する」のみチェック
    • 他は外す
  6. 「記事スライダーエリアのタイトル」
    • 空欄
  7. 「上下の余白量」
    • 「大」
  8. 「左右の幅」
    • 「コンテンツ幅に収める」
  9. 「公開」で保存
⑥:ピックアップバナー
STEP
ピックアップバナーの確認

特にアピールしたい収益記事などを設定

STEP
「カスタマイズ」
  1. 「W」ボタン
  2. 「外観」
  3. 「カスタマイズ」
STEP
「メニュー」
  1. 「メニュー」
STEP
「ピックアップバナー」
  1. 「ピックアップバナー」
STEP
「項目追加」して、「公開」
  1. 「項目を追加」
  2. 「固定ページ」「投稿ページ」「カスタムリンク」などから、好きなものを選択
  3. 「公開」で保存
⑦:タブ切り替え設定(カテゴリータブ)
STEP
タブ切り替え設定(カテゴリータブ)の確認

「新着記事」+任意の3つカテゴリーの設定がオススメ

STEP
「カスタマイズ」
  1. 「W」ボタン
  2. 「外観」
  3. 「カスタマイズ」
STEP
「記事一覧リスト」
  1. 「記事一覧リスト」
STEP
「タブ切り替え設定」
  1. 「新着記事タブ」
    • 追加するをチェック
  2. 「カテゴリーID」を指定
    • 4,6,11…など、半角数字の間に「 , 」を入れる
    • カテゴリーID調べ方ステップ5で解説中
  3. 「新着記事タブ」の表示名
    • 「新着記事」
  4. 「タブデザイン」
    • 「標準」
  5. 「公開」で保存
STEP
カテゴリーIDの調べ方
  1. 「W」ボタン
  2. 「投稿」
  3. 「カテゴリー」
  4. 「カテゴリーID」
⑧:プロフィール(サイドバー)
STEP
プロフィール(サイドバー)を確認

サイドバーに載せることができるプロフィール欄

「自己紹介」「ボタン」などを設定できる

STEP
「ウィジェット」
  1. 「W」ボタン
  2. 「外観」
  3. 「ウィジェット」
STEP
「SWELL プロフィール」
  1. 「共通サイドバー」
  2. 「SWELL プロフィール」
STEP
プロフィール設定
  1. 「名前」
  2. 「役職(肩書き)」
  3. 「プロフィール文」
  4. 「アイコン画像」→「画像を選択」
    • 正方形の画像を選択した方が綺麗に収まる
  5. 「ボタンリンク先」
    • 特別アピールしたいこと、記事などがあれば設定
    • 「ボタンリンク先」
    • 「ボタンテキスト」
    • 「ボタンの色」
  6. 「アイコンを丸枠で囲む」→チェック
  7. 「保存」
⑨:SNSアカウント設定
STEP
SNSアカウント設定(連携)の確認

プロフィールサイドバーに各種SNSを設定できる

STEP
「カスタマイズ」
  1. 「W」ボタン
  2. 「外観」
  3. 「カスタマイズ」
STEP
「SNS情報」
  1. 「SNS情報」
STEP
「SNSリンク設定」→「公開」
  1. Facebook
  2. Twitter
  3. Instagram
  4. TikTok
  5. 楽天ROOM
  6. LINE
  7. Pinterest
  8. Github
  9. YouTube
  10. Amazon欲しいものリスト
  11. Feedly
  12. RSSページ
  13. お問い合わせページ

各種SNSのURLを設定して、「公開」にて保存

STEP
「ウィジェット」
  1. 「W」ボタン
  2. 「外観」
  3. 「ウィジェット」
STEP
「SWELL プロフィール」
  1. 「SWELL プロフィール」
  2. 「共通サイドバー」
    • へ、ドラックアンドドロップ
STEP
「SNSアイコンリストを表示する」
  1. 「SWELL プロフィール」
  2. 「SNS アイコンリストを表示する」
    • をチェック
  3. 「保存」
⑩:ふきだし設定
素人キャンパー

こんな感じの「ふきだし」設定

STEP
ふきだし設定:登録
  1. 「W」ボタン
  2. 「ふきだし」をクリック
  3. 「新規ふきだし追加」をクリック
STEP
ふきだし設定:登録
  1. 「ふきだしセットのタイトルを入力」
    • 外部には表示されないので自分が分かりやすいタイトルを設定
  2. 「画像を選択」「アイコン名」それぞれ設定
  3. アイコンの「色」「枠」など装飾設定
  4. 「登録」ボタンをクリックして保存
    • 登録後に編集するときには「更新」と表示されている
STEP
記事内に「ふきだし」を呼び出す
  1. 「ふきだし」挿入したい箇所をクリック
  2. 「+」マークをクリック
  3. 「ふきだし」と検索
  4. 「ふきだし」ボタンをクリック
STEP
記事内に「ふきだし」を呼び出す
  1. 空の「ふきだし」ブロックが出るのでクリック
  2. 「ふきだしセット」から登録している「ふきだし」を選択クリック
    • 「ふきだしセット」に登録している内容を変更しても今までのに自動で更新されるので便利
素人キャンパー

このような「ふきだし」を呼び出せます

【11】:記事装飾テンプレート挿入(有料オプション依頼者)

デモサイトでも記事テンプレートについて少し触れているので、»まずはこちらを見てから以下を読み進めてください。

SWELL公式サイトより引用

記事投稿画面にて

  1. 「+」ボタンをクリック
  2. 「パターン」をクリック
  3. 「SWELL カスタムパターン」をクリック
    • 「記事テンプレート」を挿入

「記事テンプレート」とは、上記画像の「ブログパーツ」のこと。

あらかじめ設定しているブログパーツをワンクリックで呼び出すことができるので、執筆時間を短縮するために有効活用しましょう。

「記事執筆画面」で、画像の手順でブログパーツを呼び出すことができます。

オプション依頼してくださった方には、あらかじめ記事テンプレート設定をしていますので執筆時に使用してください。

「記事テンプレート」自体を変更・追記・修正したい場合は、「画像1枚目」ブログパーツの「タイトルにカーソルを合わせ→編集」にて自由に編集できます。

【12】:関連記事リンク(ブログカード等リンク)
STEP
関連記事リンク(内部リンク)
  1. 「関連記事」挿入したい箇所をクリック
  2. 「+」マークをクリック
  3. 「関連記事」と検索
  4. 「関連記事」ボタンをクリック
STEP
挿入したい記事を選択
  1. 「内部リンク」を選択
  2. サイト内にある「記事タイトル」「キーワード」を入力
  3. 該当する記事を選択

内部リンクをテキストリンクにしたい場合は、右のオレンジ「テキストリンクで表示する」をチェック。

STEP
内部リンク挿入完了
  1. このような画像(ブログカード)付きの内部リンクになる
【12】:ブロック”下”に余白(小さい余白)
  1. 下に余白をつけたいブロックをクリック
  2. 「ブロック下の余白量」にて、「0〜6」を選択
    • 1=小さい余白
    • 6=大きい余白

「画像」「文章」など、何のブロックでも「ブロック下の余白量」にて、余白の調整可能です。

【13】:SWELLERS:コミュニティについて

SWELL使用者が集まるコミュニティ(SWELLERS)は購入者・契約者限定のコミュニティなので、参加したい場合はご自身で直接SWELLを購入する必要があります。

WEBサイト・ブログを運営するにあたってコミュニティは参加しなくても大丈夫ですが、同じようにサイト・ブログを始めた人と交流したい場合は検討してみてください。

コミュニティ内でSWELLに関する質問もできます。(必ずしも回答・解決してもらえるわけではありませんが。)

…個人的には、わざわざ新しく買ってまで必要なモノでは無いと考えています。

»SWELL公式ページ

»SWELLERS(コミュニティ)
SWELL正式購入後に入れるコミュニティ

当方とSWELL販売元「株式会社LOOS」にてSWELLを直接購入することで、第三者へのサイト制作にあたってテーマ使用が許可されています。

そのため、皆さんは新しく「SWELL」を買う必要ありせんが、コミュニティに参加したい場合のみ直接購入をご検討ください。

サイトを運営にあたって必ずしもコミュニティに入る必要はなく、皆様もサイトテーマ直接購入者と同じように使えます。

今後SWELLERS限定サービスやアップデートがある可能性もあるかと思いますが、それはその時に検討したら良いでしょう。

なおコミュニティに入るためにSWELLをご自身で購入した場合でも、新しくサイトを作り直さなくてはいけない…といったことはありません。

目次