【 SWELLマニュアル】カスタマイザーでできる失敗しないための初期設定

ここではサイト名を変更できます。表示部分はもちろん、ヘッダーロゴの設定でロゴ画像を設定できますが、「このサイトの名前」として設定する大事な場所です。

会社名・サイト名・サービス名など想いを込めて設定しましょう。

表示部分も変更されますが、キャッチフレーズ設定で非表示にもできます。SWELLではここで設定したキャッチフレーズが<title>タグにも入ります。

タグについての解説は省きますがSEOにおいても非常に重要です。わかりやすく簡潔で、なるべく重要なキーワードを入れて設定しましょう。

これは「ファビコン」と呼ばれています。このアイコンはブラウザのタブやブックマークにも表示されます。

また、スマホでブックマークのために「ホーム画面に追加」といったことをした場合、アプリアイコンのように表示されるのもこのファビコンです。ファビコン画像は512px × 512px以上の正方形で作りましょう。

ファビコンの設定はさほど重要ではありません。画像がない場合は画像を作成するよりも先に次のステップへ進みましょう。

【ホームページの表示】の項目で「固定ページ」を選択し、それぞれ作成したトップページ用とブログ一覧ページ用の固定ページを選択します。トップページ用とブログ一覧ページ用の固定ページを作成していない場合は、別記事で解説しています。

カスタマイズ用トップページとブログ一覧ページの作成方法

作成したカスタム用のトップページに何も入力していない場合は、トップページから新着記事が消えてしまいますが問題ありません。そのまま作業を続けてください。

それぞれの色はカラーピッカーで自由に指定できます。このとき初心者に気をつけてほしいことは「色を感覚で決めないこと」です。

「サイトのデザインがイケてない……」という場合のほとんどは配色がイケてない状態が多いです。もっともおすすめのやりかたは「プロの配色をまねること」です。

SANKOU!のようなWEBデザインの参考サイトを開き、「これがいけてる」と感じたサイトの配色をまねてください。このときGoogle Chromeのアドオン『ColorPick Eyedropper』があると非常に便利です。

WEB色見本原色大辞典のようなサイトを参考にするなど、とにかく「自分のセンスで決めない」ようにすると失敗が少ないです。

デフォルト

デフォルトの状態ではヘッダーや画像の周りにうっすらとシャドウが入っていて立体感があります。また、アイキャッチ画像やその上のカテゴリー表記の背景は直角の四角形となっています。

全体をフラットにする

【全体をフラットにする】にチェックを入れるとシャドウが消えます。これは “フラットデザイン” といって、このフラットデザインを取り入れたiPhoneのiOS７がリリースされた2013年頃からWeb業界でも流行り始めたデザインになります。

全体に丸みをもたせる

【全体に丸みをもたせる】にチェックを入れると角が取れて全体的に丸みのあるデザインになります。

基本カラーの設定で背景を真っ白（#ffffff）にしている場合はわかりにくいので、サンプルでグレーにしてみました。

オフ

オン

オン（メインエリアのみ）

「コンテンツの背景を白にする」をオンにした場合、どのページに適用させるかも設定することができます。

さらに白背景を線で囲むこともできます。ただし、線はかなり細いので色つき背景の場合はほとんどわかりません。

コンテンツが何もないとわかりづらいのでトップページに「投稿リストブロック」を挿入しました。

今度は背景色を白にして、コンテンツも白に、さらに線で囲むといった設定にする場合に効果が見られます。「全部白だと境界線がなくてのっぺりに感じる」と思ったら設定してみてください。

フォントの設定をするときになにもブログ記事がないとわかりづらいです。すでに投稿した記事がある場合はその記事を開きながら、なにも投稿していない場合は、画像のようなサンプル文章でもいいので1記事投稿してみましょう。

余談も含めた話になりますが、前提の話としてすべての人に共通であなたが見ているデザインが表示されているわけではありません。

MacかWindowsか、iPhoneかAndoridか、使っているブラウザやそのバージョンなどの環境によって表示されるフォントは変わるんです。

游ゴシック

デフォルトの游ゴシックは多くのデバイスに搭載されているフォントですので、不特定多数の環境で同じように表示ができます。もっともオーソドックスでくせのない読みやすいフォントですので迷ったらこれでOKです。

ヒラギノゴシック ＞ メイリオ

2種類あるので不思議に思う人もいるかもしれませんが、簡単に言うなら「MacとiPhoneの人にはヒラギノゴシック、Windows PCとAndroidの人にはメイリオで表示」という設定です。

さきほどの游ゴシックはすべてのデバイスに搭載されていますが、こちらの「ヒラギノゴシック」はMacでは純正でインストールされていますが、Windowsでは購入しないと利用できない（しかも数万円する）フォントです。

つまりヒラギノゴシックの入っていないWindows PCのユーザーにはヒラギノゴシックで表示させられませんので、代替フォントで表示されます。このとき意図しないフォントで表示されるのを防ぐため「第一希望はヒラギノゴシック、ヒラギノゴシックの入っていないデバイスの場合は第二希望のメイリオで表示」という設定になります。

Noto Sans JP

パソコンやスマホで指定されたフォントがないなど表示のできない文字があるとき、□□□など文字の代わりに小さな四角が表示されますが、これを通称 “豆腐” と呼びます。このフォントは「すべての言語に対応したフォントを作る = 豆腐を表示させない = No 豆腐 = Noto」というコンセプトで生まれたフォントになります。

非常に美しく読みやすいフォントなのですが、このNoto Sansは「Webフォント」と言ってSWELLにインストールされているのではなく、インターネット上から読み込んで表示するフォントです。豆腐を表示させないためすべての言語に対応していることもあり、そのデータ量は膨大です。

つまり「大量のフォントデータを常に読み込む必要があるのでサイトの表示スピードが遅くなる」というデメリットがあります。サイトスピードはユーザビリティにも直結しますので、慎重に考えたいですね。

明朝体（Noto Serif JP）

唯一の明朝体のフォントです。こちらもNotoなので先ほどと同じくサイトスピードが遅くなるデメリットがあります。

また、印刷紙面での読みやすさを追求した明朝体は、Web媒体においては少し読みにくく、あまり推奨されません。「高級感」を演出できるといえば僕もそう思いますが、使うなら「見出し」などのスポットのみにとどめ、本文はゴシック体のほうがいいかなと思います。

旅館や和食屋のサイトなども同様です。もちろん「絶対ダメ」ではありませんのでお好みで使用してください。

表示させる文字サイズを設定できます。サイトのコンセプトやターゲットに合わせて設定しましょう。

カラムの幅にも気をつけ「一行で表示させる文字数」なんかにも注目したいところです。

• 極小
• 小
• 中
• 大
• 極大

モバイル（スマホ）での文字サイズを設定できます。パソコンと違って画面も小さく、一行で表示させられる文字数も違います。

「パソコンでは大きくしたいけど、スマホだと大きすぎる」といった場合に便利ですね。設定できるサイズは大きく2種類、「固定」と「可変」です。

固定の場合はどのデバイス、どの画面サイズでもスマホであれば同じ文字サイズで表示させますが、可変の場合は画面サイズに合わせて文字の大きさが変わります。

letter-spacingとは文字間の調整のこと

letter-spacingとは文字同士の間のスペースのことです。近すぎても遠すぎても読みづらくなりますので、フォントサイズと合わせて考えましょう。

文字間に余裕があるとやわらかで落ち着いたイメージなります。

上のコンテンツ幅が「サイト幅」です。デフォルトでは1,200pxに設定されています。

バナーなどの内部コンテンツを4つ以上並べたいなどある場合は1,200pxはほしいところです。単純にメディアサイトでしたら、あまり広いと逆に読みづらいので1,000 〜 1,100pxほどがいいかなと思います。

最近ではPCでもサイドバーをなくした1カラムのサイトがかなり増えました。スマホと同じような表示ができ、余計な情報を表示させず記事内容に集中させることが可能です。

このとき横幅が1,200pxもあると、一行の文字数が多くて読みづらいです。ですので記事幅を小さくすることで可読性を上げることができます。

ページの背景に画像を設定することができます。画像のように暗い背景を設定する場合は黒文字だと読みづらくなってしまいますので、基本カラーの設定で文字色を白にしたり、サイト全体の見た目の設定でコンテンツの背景を白にするなどして可読性を上げましょう。

また、背景画像を設定する場合はたくさんの設定項目があるのでお好みでデザインできます。

NO IMAGE画像とはアイキャッチ画像を設定していない記事があった場合に表示する画像のことです。画像サイズは「横幅1,600px以上を推奨」となっています。

本来アイキャッチだけでしたら800px程度で問題ないのですが、SWELLではタイトルの背景画像としてアイキャッチを画面の横幅いっぱいに表示する設定があるためです。小さい画像を横幅いっぱいにまで表示すると引き伸ばされて荒くなってしまいますからね。

また、MacのRetina Displayのような高解像度ディスプレイも同様に引き伸ばされて荒くなってしまうため、約2倍程度の画像サイズが推奨されています。サイトスピードを最大限上げたいなど画像を大きくしたくない場合もあるでしょうから状況に応じて設定してください。

サブコンテンツのタイトルとは、記事下の「この記事を書いた人」、「関連記事」、「コメント」のことです。また、メインコンテンツ内にウィジェットを挿入した場合のウィジェットタイトルもサブコンテンツとなります。

• 装飾なし
• 下線
• 左に縦線
• 左右に横線

サイドバーを表示する設定にしている場合、サイドバーのコンテンツのタイトルデザインを変更できます。

• 下線
• 左に縦線
• 左右に横線
• 塗り

サイドバーのタイトルはPCとスマホでデザインをわけることができます。スマホではサイドバーは表示されませんので、ページ下部の記事の下に表示されます。

フッターにウィジェットを配置している場合は、タイトルデザインの変更ができます。

• 装飾なし
• 下線
• 左右に横線

スマホで開くメニューのタイトルデザインを変更できます。

• 下線
• 左に縦線
• 左右に横線
• 塗り

たとえばアイキャッチをYouTubeのサムネイルのような文字入りの画像を作成した場合、「タイトル上」に同じアイキャッチ画像が入ってしまうと見栄えが悪いです。

そこで文字などの入っていない別の画像をここで設定することで解消することができます。

画像を設定する場合はフィルターをかけることもできます。

• なし
• ブラー
• グレースケール
• ドット
• ブラシ

背景画像によってはタイトルなどの文字が読みにくい場合があります。フィルターをかけることで多少はよくなりますが、さらに上に色つきのフィルターをかけることで読みやすくできます。

サンプル画像では「ドット」の画像フィルターに真っ黒（#000000）のカラーオーバーレイを「0.3」の不透明度でかけた状態です。だいぶ可読性が上がりましたよね。

色も不透明度も自由に選択できます。

ホームページ設定で「ブログ」などのページを設定している場合は、そのページを間に入れることができます。コーポレートサイトなどでは表示させておきたいですね。

デフォルトではパンくずリストの背景はグレーで、立体感のあるシャドウが入っています（サイト全体の見た目の設定で「全体をフラットにする」にしている場合はシャドウは表示されません）。

背景効果をなくすと無地の白になります。

設定に迷ったら……

お好みで設定して大丈夫です。僕の好みは「チェックなし（背景効果あり）」です。

ただし、お知らせバーの設定でお知らせバーの表示位置を「ヘッダー下部に表示」を設定している場合は背景効果はなくなります。

カスタマイザー左下のスマホアイコンをクリック。

3本線のメニューアイコンは「ハンバーガーメニュー」と言います。

このメニューのデザインを設定できます。

デフォルトでは「MENU」になっています。サイト名やコンセプトに変更してもいいですね。

また、ウィジェットタイトルの設定でタイトルのデザインを変更することができます。

サブメニューの表示形式の設定で「サブメニューをアコーディオン化する」に設定するとサブメニューをクリック開閉式に変更できます。

• 四角形
• 円形

表示させる場合はアイコンの下にテキストを入れることも可能です。

• 四角形
• 円形

目次と同様にアイコンの下にテキストを入れられます。

メニュー開閉ボタンを表示する

固定フッターに「メニュー」が追加されます。スマホ開閉メニューで設定した上部のアイコンと同じメニューが開きます。

検索ボタンを表示する

固定フッターに「検索」が追加されます。

ページトップボタンを表示する

固定フッターに「トップへ」が追加されます。右下固定ボタンの設定で入れた右下のアイコンは消えます。

目次メニューを表示する

固定フッターに「目次」が追加されます。右下固定ボタンの設定で入れた右下のアイコンは消えます。

自動挿入される4つのメニューの名前を変更することができます。

固定メニューは背景の色や不透明度、文字色を変更することも可能です。

SWELLで使用できるアイコンは公式サイトの「SWELLで使えるアイコンの一覧」をご確認ください。

【説明】の欄がない場合は

ページ上部の【表示オプション】→【説明】にチェック

【カスタムリンク】で【URL】に

tel:半角ハイフンなしで電話番号

と入力します。リンク文字列は【TEL】や【電話】と入力します。

スマホ用固定フッターメニューにアイコンを入れる方法と同じくアイコンを挿入します。

基本カラーの設定でも話しましたが、初心者に気をつけてほしいことは「色を感覚で決めないこと」です。「サイトのデザインがイケてない……」という場合のほとんどは配色がイケてない状態が多いです。

今回はこのような画像を作成してみました。

作成した画像を設定します。

白抜きのロゴ画像の場合はヘッダー背景と文字色を調整しましょう。

作ったロゴ画像に合わせてサイズの調整が可能です。

追従ヘッダーとはスクロールしたときにページ上部に固定されるヘッダーのことです。「通常は大きく表示させておきたいけど、スクロール時に大きいと邪魔だから小さくしたい」といった場合などに有効です。

そもそも追従させるかどうかはヘッダーの追従設定で設定できます。

スマホでのロゴ画像のサイズを設定できます。

スマホ用固定フッターメニューの設定をしている場合はページの専有率に注意しましょう。「肝心のコンテンツが読みにくい」では元も子もないです。

ヘッダー境界線とはヘッダーとその下のコンテンツとの境界線部分です。

ヘッダー背景色が色つきの場合はわかりにくいので、ヘッダー背景色が白の人向けの設定項目です。

• なし
• 線
• 影

「背景を透過する」にした場合のみの設定です。背景を透明にしてヘッダーの追従設定を「追従する」にしたときに、スクロール時のロゴの色が合わない場合があります。

スクロール時の追従メニューは背景が白です。ですのでロゴ画像は色つきである必要があるのですが、これだとあまりイケてないですよね。

こんなときに「通常は白文字のロゴ画像」だけど、「スクロール時（白背景）では色つきのロゴ画像」を設定することで見栄えが良くなります。

追従させる場合は背景の不透明度も設定できます。

ヘッダーバーとはページ上部に表示される部分のことです。キャッチコピーやSNSへのリンクボタンなどを表示できます。

黒だとキツすぎるので、背景を薄いグレー、文字を濃いグレーに設定してみました。

あまり多くの色を使いすぎないようにしましょう。

SNSのアイコンが不要の場合はチェックを外すことで非表示にさせられます。

SNSアイコンを非表示の状態で、さらにキャッチフレーズの設定を「表示しない」にして、「コンテンツが空でもボーダーとして表示する」にすると線のみを表示させられます。

サイトのアクセントとしてデザインの幅が広がります。

サイト基本情報の設定で設定したキャッチフレーズを表示させられます。

• ヘッダーバー
• ロゴの近く

キャッチフレーズの長さや、グローバルメニューの数に注意しましょう。

さらにサイト基本情報の設定で設定したサイトタイトルも表示させるかどうかも設定できます。

レイアウト・デザイン設定で縦並び（ナビを下または上）にしている場合は、メニューの背景色を変更することができます。

サブメニューの色は白かメインカラーを選択できます。

この設定をするには「スマホ用ヘッダーメニュー」を設定している必要があります。グローバルナビをPCと同様に表示させたい場合は「スマホ用ヘッダー」にもチェックを入れましょう。

スマホ用ヘッダーを個別で設定したい場合は新規で専用のメニューを作成して「スマホ用ヘッダー」にチェックを入れてください。

「ヘッダーメニューをループさせる」にチェックを入れるとサブメニューも含めてループで表示させられます。

カスタムボタンはデフォルトでは「サイト内検索」になっています。ここは自由に変更することが可能です。

フッターとはサイト最下部のコンテンツです。このエリアを設定する場合は、事前にフッターウィジェットを配置している方がわかりやすいです。

コピーライトはデフォルトではサイトタイトルが入ります。HTMLの使用も可能ですのでリンクを貼ることもできます。

フッター直前にバナー画像を貼ってリンクを並べたいと思ったとします。なにもないとわかりにくいのでサンプルでフッター直前ウィジェットを配置しました。

直前ウィジェットとフッターの間に白い余白が入っています。

不要だと思った場合はチェックを入れることで余白がなくなります。

チェックを入れるとSNSリンク設定で設定したSNSのアイコンが表示されリンクが貼られます。

投稿ページは「表示あり」のサイトが多かったですが、最近は非表示のサイトも増えてきました。サイドバーをなくすことで記事コンテンツに集中させられるメリットはありますが、その他のページやバナーなどのリンクを貼れなくなるデメリットがあります。

• 表示する
• 表示しない

チェックを入れると指定した画像や動画の周りに白い枠が入ります。

チェックを入れると下にスクロールできる案内アイコンが表示されます。

コンテンツヘッダーの設定と同じく画像にフィルターをかけることができます。

• なし
• ブラー
• グレースケール
• ドット
• ブラシ

ここも同じくオーバーレイカラーと不透明度を設定できます。

画像がどれぐらいの時間をかけて切り替わっていくのか、1枚の画像をどれぐらい表示させるのかを設定できます。

未設定であればPC用の画像が表示されますが、画像によっては見切れてしまうこともあります。

そんなときにスマホ用の画像を設定することができます。

メインテキストとサブテキスト、ボタンを表示する場合はリンク先のURLとボタンのテキストを入力します。

SWELL独自の機能でブログパーツを作って呼び出すことができます。

ブログパーツの作り方

STEP

ブログパーツを新規作成

STEP

登録したいデザインを作成して公開

STEP

ブログパーツIDを入力

作成したブログパーツを簡単に呼び出すことができます。メインテキスト・サブテキスト・リンクボタン以外に表示させたい情報があるときなど重宝する機能です。

左右の矢印ナビやページネーションを表示することができます。

不要であれば非表示できます。

ピックアップ対象

スライダーに表示させる記事を選定する場合、カテゴリーからなのかタグからなのか選択できます。

ピックアップ対象の名前

さらに選定するカテゴリーやタグを選択できます。設定しない場合は全記事が対象となります。

並び順

スライダーの並び順を選択できます。

• ランダム
• 投稿日
• 更新日
• 人気順

公開日・更新日・著者名の表示有無を選択できます。

たとえば「制作実績」といったタイトルをつけ、ピックアップ対象の設定で表示カテゴリーを絞り込むといった設定が可能です。

記事スライダーエリアの背景色を設定できます。ダーク系の背景にする場合は文字色を白などにすることで可読性を上げられます。

バナー系のアイキャッチの場合は画像にかぶせたり余計な情報を非表示にすることですっきりとさせられます。

背景は画像を設定することもできます。不透明度の調整も可能です。

新規メニュー作成で「ピックアップバナー」のメニューを作成します。

1. メニュー名に「ピックアップバナー」と入力
2. メニューの位置で「ピックアップバナー」にチェック
3. メニューを作成する

選択したページのアイキャッチ画像がバナーリンクとして表示されます。

ページに設定したアイキャッチの画像サイズで表示されてしまいます。アイキャッチ画像のサイズを統一しましょう。

アイキャッチ画像のサイズを統一することできれいに表示できます。

アイキャッチ画像のサイズは16：9がおすすめです。

バナーの表示カラムを設定できます。メニューが3つの場合は3列にすることで綺麗に表示できます。

スマホの場合も設定できます。

チェックを入れると投稿ページや固定ページなど、トップページ以外にも表示させられます。

特定のページのみ非表示にさせたい場合は個別に設定もできます。

Lazyloadとはページを表示するときに画像の読み込みをあえて遅らせることで、コンテンツの表示を早める設定です。基本的にLazyloadはオンにしておくべきですが、クローラーによるSEO的デメリットが気になるなどどうしても外したい場合はオフにできます。

スマホでの表示も確認しましょう。詰め込みすぎると見栄えが悪くなることもあります。

アイキャッチ画像は非表示の状態。タイトルの背景はコンテンツヘッダーで設定した画像です。

アイキャッチ画像を表示させた状態。ページ上部に設定したアイキャッチ画像が挿入されます。

固定ページ同様に先頭に自動でアイキャッチ画像が入ります。

表示確認のためアイキャッチ画像の指定を外しました。「NO IMAGE画像を表示する」にチェックを入れない場合はアイキャッチ画像が非表示となります。

チェックを入れるとアイキャッチ画像が表示されます。この画像はNO IMAGE画像で設定した画像が表示されます。

すべての見出しに共通するキーカラーを設定できます。デフォルトでは基本カラーで設定したメインカラーになっています。

見出し2のデザインはなんと12種類から選択可能です。

帯

塗り潰し

左に縦線

左に2色のブロック

付箋風

付箋風（ストライプ）

ステッチ

ステッチ（薄）

ふきだし風

上下に線

1文字目にアクセント

装飾なし

見出し3のデザインも8種類から選択可能です。

2色の下線（メイン・グレー）

2色の下線（メイン・薄メイン）

下線（メインカラー）

下線（グラデーション）

下線（ストライプ）

左に縦線

左に2色のブロック

装飾なし

見出し4のデザインも3種類から選択可能です。

左に縦線

チェックアイコン

装飾なし

セクション用見出し2のデザインも3種類から選択可能です。

装飾なし

下に線

左右に線

太字をテスト入力してみました。「太字の下に点線をつける」のチェックは外れています。

チェックを入れると点線のアンダーラインが入ります。太文字は強調したいときに使用することが多いのでより目立たせることができますね。

「<p>タグ直下のみ」というのは、本文の太文字だけ有効で、見出しなどは太文字でも点線は入らないということです。

テキストリンクをテスト入力してみました。「テキストリンクにアンダーラインをつける」のチェックは外れています。

チェックを入れるとアンダーラインが入ります。下線はリンクのイメージが強いので「クリックできるテキストですよ」とわからせやすくなります。

逆にリンクではないテキストに強調のために下線を入れると、リンクに見えてまぎらわしいのでおすすめしません。

目次は投稿ページと固定ページそれぞれに表示の有無を設定できます。

「目次」の部分は好きなテキストに変更可能です。

目次は4種類のデザインから選択できます。

• シンプル
• ボックス
• ボーダー
• ストライプ

タグについての細かな説明は省略しますが、「番号リスト」か「箇条書き」かという選択になります。

• ol（番号リスト）
• ul（箇条書き）

見出しが最低いくつあれば目次を表示するかの設定です。あまりにも短い記事であれば目次は不要の場合もありますのでサイトの状況に合わせて設定してください。

ダッシュボード ＞ SWELL設定 ＞ 広告コード ＞ 目次広告

に、アフィリエイトコードをコピペします。

目次広告の表示設定の見出しの最低数に達していないと目次が表示されません。「目次は表示しないけど広告は表示させたい」といった場合の設定です。

• 上部
• 下部
• 画面端

画面端のシェアボタンはスマホでは表示されません。

全部表示させることも可能です。

サイトのコンセプトや、ユーザー層、自分の使用しているSNSなどに合わせて選択できます。

デフォルトでは「よかったらシェアしてね！」となっています。

任意のテキストに変更可能です。

Twitterシェアボタンからシェアされたときにハッシュタグや自分へのメンションなどを入れることができます。

【Facebookいいねボタンに使用するappID】に入力するIDの取得方法は『FacebookのアプリIDの取得手順』で解説しています。

前後記事へのページリンクを表示

チェックを入れると記事の前後へのリンクが表示されます。

ページリンクにサムネイル画像を表示する

チェックを入れると前後のページのアイキャッチ画像が表示されます。

同じカテゴリーの記事を取得する

デフォルトでの前後記事はカテゴリーに関係なく公開日順ですが、チェックを入れると同じカテゴリーの投稿順になります。

ダッシュボード ＞ ユーザー ＞プロフィール

ページ中央に項目があるので必要に応じて入力します。プロフィール写真はここで設定すると面倒なのでしなくてOKです。

SWELL独自の設定項目があるので入力します。プロフィール写真は【カスタムアバター】で設定するのが圧倒的に楽です。

設定した情報が「この記事を書いた人」に反映されます。

【この著者の記事一覧へ】というリンクボタンが表示されます社内スタッフ複数でブログを書いたり、外注ライターに寄稿してもらったときなどに便利です。

著者紹介部分のタイトルは変更も可能です。

関連記事を表示させるかどうかの設定です。

チェックを外せば非表示になります。

記事の公開日・更新日それぞれを表示させるかどうかの設定です。

関連記事エリアのタイトルは変更可能です。

コメントエリアを表示させるかどうかの設定です。

チェックを外せば非表示になります。

コメントエリアのタイトルは変更可能です。

コンテンツ内の場合はタイトルのデザインを2種類から選択できます。

「タームナビゲーション」とはパンくずリストのようなものです。カテゴリーページに不要の場合はチェックを外すことで非表示にできます。

リストレイアウトの設定が「カード型」または「サムネイル型」のみ有効です。

カード型

• 1カラム
• 2カラム
• 3カラム

サムネイル型

• 1カラム
• 2カラム
• 3カラム

リストレイアウトの設定が「カード型」または「サムネイル型」のみ有効です。

カード型

• 1カラム
• 2カラム

サムネイル型

• 1カラム
• 2カラム

アイキャッチ画像に文字を入れたサムネイル型では情報を非表示にすることできれいに見せることができます。

欲張りすぎると情報のノイズが多くなる可能性がありますので注意しましょう。

抜粋文を表示する場合は「クリックして続きを読みたくなるような」抜粋文の作成を心がけましょう。

抜粋文を表示する場合は「クリックして続きを読みたくなるような」抜粋文の作成を心がけましょう。

カード型、リスト型、サムネイル型、ブログ型、それぞれ個別でサイズを設定できます。

• 白銀
• 黄金
• 一眼
• ワイド
• 横長
• 超横長
• 正方形

2色を選択することでマウスホバー時のグラデーションカラーを設定できます。

チェックを入れるとブログ一覧ページにタブの切り替えを追加できます。

「トップページ」とありますがホームページ設定で投稿ページ（ブログ一覧ページ）を設定している場合は、ブログ一覧ページに適用されます。

指定したカテゴリーをタブに追加できます。

カテゴリーIDの調べ方

ダッシュボード ＞ 投稿 ＞ カテゴリー

カテゴリー一覧にIDが表示されています。

IDが表示されていない場合は

画面右上の【表示オプション】からIDにチェックを入れれば表示されます。

それぞれ任意のテキストに変更できます。

チェックを入れることで、カテゴリーページに「人気記事タブ」を表示させることができます。

カテゴリーページ個別で設定もできます

ダッシュボード ＞ 投稿 ＞ カテゴリー

SWELLではそれぞれのカテゴリーに個別で細かな設定が可能です。

著者情報エリアの設定で【著者ページへのリンクを表示する】をオンにしている場合は「この著者の記事一覧」といったページを表示できます。このページにもタブを追加できます。

記事一覧から外したいカテゴリーやタグのIDを入力することで非表示にできます。

ヘッダーバー設定で【SNSアイコンリストを表示する】にチェックを入れている場合は設定したSNSアイコンが表示されます。

サイドバーやフッターなどに【[SWELL]プロフィール】のウィジェットを配置している場合はプロフィール内にアイコンが表示されます。

GoogleアドセンスやGoogleアナリティクス、サーチコンソールなどの認証コードや外部ファイルの読み込みなどheadタグ内にコードを入れる必要がある場合、SWELLではこの箇所に入力することで設定ができます。

「高度な設定」というだけあって本来は初心者には少しハードルの高い項目でしたが、SWELLのこの機能によって「必要になったらここにコピペするだけ」になりました。

CSSとはデザインを決めるためのコードです。これまで見てきたようにSWELLには非常に膨大な設定項目があり柔軟なカスタマイズが可能です。さらにブロックエディタ完全対応でSWELL独自のエディタ機能も超豊富です。

したがって、よっぽど「どうしても」というこだわりがない限りCSSを入力してのデザインカスタマイズはほぼ不要となりました。

僕が「高いお金を払って制作を依頼しなくともオシャレでいけてるホームページは自作できる」と言うのはこのためです。