SWELLで、サイト型にカスタマイズするための設定内容。
SWELL：外観 ＞カスタマイズ
上部タブメニューから「カスタマイズ」か、
ダッシュボード ＞外観 ＞カスタマイズ
SWELLカスタマイズ設定へ
↓
SWELL外観カスタマイズ設定
サイト型カスタマイズで変更した項目、
- ■WordPress設定 ＞ホームページ設定
- ■ヘッダー
- ■フッター
- ■サイドバー
- ■トップページ
それぞれの設定です。
■WordPress設定 ＞ホームページ設定
■ヘッダー
■フッター
■サイドバー
■トップページ
- ・トップページ ＞メインビジュアル
- ・トップページ ＞記事スライダー
- ・トップページ ＞ピックアップバナー
- ・トップページ ＞その他
それぞれあります。
・トップページ ＞メインビジュアル
・トップページ ＞記事スライダー
↑記事スライダーは設置しないので、この下の画像は省略。
・トップページ ＞ピックアップバナー
※「表示しない」ので特に設定変更はしてません。
・トップページ ＞その他（メインビジュアル下の余白無しに）
メインビジュアル下の余白をなしにする。
メインビジュアル下の余白を無くす
↓
カスタムサイズ ＞「トップページ」はここまで。
SWELL：外観 ＞ウィジェット ＞フッター１,２,３
フッター123の設定
外観 ＞ウィジェット の「フッター（PC）１～３」を設定します。
外観＞ウィジェット＞フッター123
■ウィジェット ＞フッター(PC)１
フッター１に「カテゴリー」ウィジェットを追加。
↓フッター1_カテゴリーの設定
フッター1_カテゴリーの設定
■ウィジェット ＞フッター(PC)２
フッター２に「SWELL新着記事」ウィジェットを追加。
フッター2に新着記事を設置
↓ フッター２「SWELL新着記事」の設定
フッター2_新着記事の設定
■ウィジェット ＞フッター(PC)３
フッター３に「検索」と「カスタムHTML」を設置
フッター3に検索とカスタムHTMLを設置
↓「カスタムHTML」に、もしもアフィのSWELLバナー広告コードを入力。
フッター3のカスタムHTMLにもしもSWELLバナーを設置
ウィジェット ＞フッター１，２，３の設定は以上。
ダッシュボード ＞設定 ＞表示設定
ダッシュボードの「設定」＞「表示設定」で、ホームページの表示を固定ページ（作成しておいたトップ用固定ページ）に変更。
表示設定のホームページ設定を固定ページに
トップページ用の固定ページ（HOME）のサイドバー非表示
トップページ用の固定ページ（HOME）編集画面の右メニューで、サイドバーを「非表示」に変更。
固定ページのサイドバー非表示
ヘッダー・フッターのカスタマイズは以上です。
これでだいたい、トップページのレイアウトは整うと思います。
必ずしも私のカスタマイズそのまましなくてもOKですので、あとはお好みでアレンジしてみてください。
フルワイドブロック設置の基本手順：「New topics」の例
トップページ用に新規作成した「HOME」の固定ページを編集してください。
(1)フルワイドブロックを配置：「フルワイド」検索で出ます。
(2)見出しにコンテンツ名を入力。：「- New topics -」
↓
(3)改行して「投稿リスト」を配置：「投稿リスト」検索で出ます。
↓
(4)配置した「投稿リスト」を選択した状態で、
・右メニューの「レイアイトを選択」を「テキスト型」にチェック。
・表示する投稿数を「4」に変更（お好みで）。
(5)「フルワイドブロック」を選択した状態で右メニューで「背景色」をお好みに変更。
以上。
※アイコンの配置方法は、全体のコンテンツ配置が終わったら手順記事を作ります。
参考：「メディアとテキスト」をスマホ表示でPCと同じ横配置にする
カテゴリーは「画像とリスト」を使っていて、スマホ表示で「モバイルでは縦に並べる」になっていますが、スマホ表示だと「ピックアップ」と同じような見た目が続きます。
雰囲気を変えたければ、解除してテキストとボタン配置を左右寄せすると、PC表示に近くなります。
スマホ表示
★やり方
(1)「メディアとテキスト」を選択し「モバイルでは縦に並べる」のチェックを解除・
メディアとテキストのスマホ表示を変える
(2)テキストを選択 ＞配置コマンドで画像側に寄せる。
テキストを画像側に寄せる
(3)SWELLボタンも、画像側に寄せる。
ボタンも画像側に寄せる
PC表示が下記のようになります。
PC表示
スマホ表示で下記のようになります。
スマホ表示
それぞれの「メディアとテキスト」を同様に「画像側寄せ」に設定してくだい。
こういうレイアウトもできるので参考に。
参考：「メディアとテキスト」下の余白ゼロで、カドをくっつける
「メディアとテキスト」の下の余白をゼロにして、画像のカドをくっつけることもできます。
ブロック上下の余白あり
↓
上下余白なしでくっつける
★やり方
「メディアとテキスト」のブロックを選択し「ブロック下の余白量」をゼロに変更。
ブロック下の余白をゼロにする
各ブロックでそれぞれ同様に余白量を設定する。
余白ゼロでのスマホ表示
参考：「フルワイド」ブロックの上下余白量
「フルワイド」ブロック上下の余白量を調整できます。
フルワイドブロックの上下余白量
★やりかた
フルワイドブロックを選択し、右メニューの余白量ボタンで変更できます。
初期設定は、
- PC表示：60
- SP(スマホ)表示：40
上下内側の余白量
0 : 上下のpaddingが 0
20 : 上下のpaddingが 2em
40 : 上下のpaddingが 4em
60 : 上下のpaddingが 6em
80 : 上下のpaddingが 8em【SWELL公式】 -より引用
上下余白量の設定ボタン
上下余白量の設定ボタン_拡大
↓
上下余白ゼロ（PC）
スマホ表示の上下余白ゼロ
ゼロだとギリギリすぎるので、最低値は20までがいいかもしれません。
SWELL機能：「投稿画像を拡大表示する機能」を停止
SWELLの機能で「投稿画像を拡大表示する機能」があり、初期設定でオンになっています。
この機能がオンだと、リンクを埋め込んでない単純な画像でも、クリックすると拡大表示されます。
画像をクリック
↓
画像が拡大表示になる
画像を大きく見せることができて便利ですが、純粋な背景として扱いたい画像もあると思います。
この機能を停止させたいときの設定方法です。（クリックしても何もしないようにする）
やり方は2つあり、
- ❶ SWELL設定でサイト全体でオフにする
- ❷ 画像で個別にオフにする
おすすめめは、❶はオンのままで、❷（画像ごとに個別でオフ）をするのが良いと思います。
❶ SWELL設定でサイト全体でオフにする
ダッシュボード左メニューの「SWELL設定」＞「機能停止」タブにして、
にチェックを入れ「変更を保存」すると、サイト全体でこの機能がオフになります。
投稿画像を拡大表示する機能を停止
でも、ここは未チェック（機能オンのまま）でいいと思うので、設定メニューがあることだけ覚えておけばOKです。
❷ 画像で個別に「拡大機能」をオフにする
編集画面でオフにしたい画像を選択し、
右メニューの追加設定で「クリックして拡大する機能」が、
「全体設定に従う」になっているのを「オフ」に変更します。
クリックして拡大する機能をオフ
クリックして拡大する機能をオフ_拡大
これで、その画像はクリックしても拡大アクションが起きないようになります。
※「メディアとテキスト」の画像など、今回の「追加設定」メニューが出てこないのもあります。
トップページ：メインビジュアル画像をゆっくり「ズーム・スライド」する
カスタマイズ ＞トップページ ＞メインビジュアル
参考 メインビジュアルの設定方法 | WordPressテーマ SWELL
■各スライドの設定
(1)スライド画像(1)をアップロード ＞下にスクロール ＞スライド画像(2)をアップロードと、
スライド画像(1)
下にスクロールして、
↓
スライド画像(2)
スライド画像を、(1)、(2)と、２枚以上設定すると・・・
上にあった、「■記事スライダー設定」の設定項目が増える。
画像スライダー設定_項目なし
↓
画像スライダー設定_項目あり
スライドの切り替えかえアニメーションを「フェード」か「スライド」選択。
★スライドはせわしないので、フェードがおすすめ
画像スライドのアニメーションを有効化
スライド表示中アニメーションの「なし」を、
「ズームイン」か「左から右へ」に変更。
これで、メインビジュアルが一定時間で切り替わったり、ゆっくりスライドしたりします。
切り替わり・スライドの速さ、その他の表示設定は、その下にある各項目でお好みで設定してください。
画像スライダーその他の設定