サイト全体設定の基本デザインの設定方法|WordPressテーマSWELLカスタマイズのやり方

• サイト全体に及ぶデザイン
• コンテンツの背景や幅、
• フォントに関する事
• グローバルナビなどにサブメニューを追加しアコーディオン式にする
• 背景を画像にする

この記事に関連する【SWELL公式サイト】

【SWELLカスタマイズ】サイト全体設定/基本デザインのやり方

では、ダッシュボードの方から、外観にあるカスタマイズを、クリックしてください

コチラのカスタマイズの画面が開きましたら、サイト全体設定をクリック

サイト全体設定が開きます

サイト全体設定が開きましたら、基本デザインをクリックしてください

サイト全体の見た目

まずは、サイト全体の見た目の見出しの場所ですね

ここでは、全体の質感と、コンテンツの背景を白にするを設定していけます

実演していきますね

全体をフラットにする

そうね、ちょっと分かりにくいですが…

投稿リストのサムネイル画像部分など、デフォルトで影のついている箇所の多くで影がなくなります。

因みに、追加CSSの項目の所から、設定できなくはないのですが、CSSの知識が必要になります

全体に丸みをもたせる

こちらは、分かりやすいですね。いろいろな箇所が丸みを帯びたデザインに変化します。

一旦元に戻しておきますね

コンテンツの背景を白にする

コンテンツの背景を白にするの項目に行きます

まずは、オンにしてみます

メインエリアや、サイドバーの背景が白になりましたね

今度は、メインエリアのみオンにしてみます

メインエリアのみ背景色が白になりました

どのページに適用するか

そして、コンテンツの背景を白にするをオンにすると現れる項目がありますが、どのページに適用するかでは、適応させる場所を選択できます

現在は、全てのページに設定されていますが　投稿ページのみ　固定ページのみ　投稿固定ページ　フロントページ以外の5つの中から選べます

お好みで使い分けてみてください

さらに、コンテンツを線で囲む

その下のさらにコンテンツを線で囲むにチェックを入れますと、少し確認しにくいですが、なんとなく印象が変わったのが分かるでしょうか？

フォント設定

フォント設定の見出しの所でできる事について解説します

ベースとなるフォント

こちらのベースとなるフォントで４種類からフォントを選べるのですが、サイトのイメージやブランディングに強いこだわりがなければ、フォントはデフォルトのままがいいと聞いてます。

大きな差ではないのですが、デフォルトよりもやや表示速度が下がる様ですね

ただ、私がWordPressを使い始めた頃はそういわれていましたが、端末の性能や通信環境が良くなってる面を考えると、最近の端末ですと影響は誤差程度です

フォントサイズ(PC・Tab)

フォントのサイズも選ぶことが出来ます

デフォルトは、１６pxになっています。5段階のサイズの中から選べますね

コチラもお好みや、視聴者層を考えて選択するといいですね

ただ14px 15pxは小さくてやや見にくいですね

ブロガーさんの多くは、16pxが多いようです

ただ私は、基本的に趣味の情報発信したい人向けだったり、副業を始めたいなど初学者向けなのでなるべく視認性を高められるように、文字は大きく、ひとぶんは短く書くのをコンセプトにしてます

因みに、yahoo!のサイトもやや大きめの文字を使っているようですね

フォントサイズ(Mobile)

その下の項目ですが、SWELLはパソコン向けとは別に、モバイル端末向けに文字の大きさを設定することが出来ます

6種類の中から選ぶことが出来ます

文字の大きさを優先したい場合は固定サイズの3つの中から選ぶことも出来ます

また、1行の文字数を優先する事で、文字の並びや改行の位置を安定させたい場合は、デバイス可変を選ぶといいですね

表示崩れを防ぐ分、フォントの大きさで調整するので、端末によっては文字が小さくなります

デバイス可変も３つの中から選べます

ちなみに私は、デバイス可変中にしてます

字間(letter-spacing)

字間の項目では、４つの中から文字の間隔を選ぶことが出来ます

選択を変えてみると、1行の文字数が変わっているのが分かるかと思います

コチラは、標準でいいかと思いいますが、みなさんのサイトに適するように設定してみてください

コンテンツ幅の設定

次は、コンテンツ幅の設定の見出しの所を解説します

サイト幅

サイト幅は、こちらの数字を変えると右側にプレビューされるので分かりやすいですね

こちらは、メインエリア と サイドバーの合計が幾つにするかという設定になります

小さくしたいのであれば、見やすさの下限は940PXくらいまでにしておいた方がいいですピクセル

1200pxにしますとメインエリアは900pxになります。

900pxはだいたい1行が３５文字から40文字くらいになりますので、長すぎず短かすぎず、読者さんにとっても見やすい長さになります

１カラム時の記事コンテンツ幅

こちらはですね、この様にサイドバーを無くした時に、メインコンテンツエリアのサイト幅をいくつにしますか？という設定ですね

こちらも特に強い希望がなければ、９００pxでいいですね　下限は640pxくらいになります

サブメニューの表示形式

コチラは、後からから追加された機能になりますね。

WordPress以外で、サイトを作られた経験がある方ならご存じのかたも多いと思うんですが、実に便利な機能なんですよ。

どういうことかと言いますと、

SWELL公式サイトの方で、とても分かりやすい例があるのでご紹介させて頂きます

引用　SWELL公式サイト　サイトのベースとなるデザイン・レイアウトの設定方法https://swell-theme.com/basic-setting/2318/

ページ背景

ページ背景は、設定できる項目的には2つに見えますが、画像を設定すると、いろいろ選択が出来まして、デザインの幅もかなり広げていけます

このページ背景は、静止画だけだと分かりにくいので、自分でお試ししてみるか、動画を用意しましたので良かったら見てください（12分10秒あたりから、この項目の動画解説があります）

まずは、パソコン向けのページ背景画像から実演解説します

ページ背景画像の項目の、画像を選択をクリックして、背景に使う画像を選択していきます

今回は分かりやすい様に、あえて小さい画像を貼って解説しますね

下にスクロールしますと、背景の画像もスクロールしながら、画像がループします

画像位置の項目を見てください

現在は左と上に設定されていまして、ここの画像を基準に横や縦にループしている感じになります

【その他の設定】の所に、チェックボックスが2つあります

画像のループを無効にするという所にチェックを入れますと…

この様に、ループが止まり、1枚だけ表示されてます

これだと、ちょっと変なので、画像サイズの項目を見てください

こちらで、画像をどのように表示するのか設定できます

まずは、横１００％にしてみます

そうしますと、画像が表示画面のサイズに合う様に設定されます

また、縦100％にしますと、ちょっとわかりにくくなりますが縦100％になる様に表示されます

元の大きさに戻しまして

画像の位置を、変えてみますね

中央にしますと、中央に画像が移動します

ループを有効にしますと、中央からのループになってますね

また、右にすると、右側を基準として、画像を横１００％にしたり、縦1００％にしたり、ループにしたりすると、画像の使われる位置が変わりますので、お好みで試してみてください

いったんもとにもどしますね

基本デザインで設定できる機能を 組み合わせてサイトを素敵に

その他の設定の所にある　固定表示にするにしますと、スクロールした時に画像が動かなくなります

同じように、スマホ向けのページ背景用画像の設定は、コチラの項目から画像を選択しますと、設定していけますのでやってみてくださいね

全ての設定が終わりましたら、カスタマイズを離れる前に、公開をしておきましょう

公開しておかないと、設定が保存されていませんので、せっかく設定したものが消えてしまいます

【動画版】 基本デザインのやり方　も作ってあります

この記事に関連する【SWELL公式サイト】

WordPressを運営していると、WordPressやSWELLのデザインや設定を少し変えたい時があると思いますよね？でも、だけど、あれ？この機能の設定ってどこで設定するんだっけ？って思う事ありませんか？

そんな時に、すぐに解決できるように、私のチャンネル内検索で答えが見つけられる様に、一問一答的な動画も作って行こうかと思います

SWELLの設定で困った時には、辞書の様に使えるYouTubeチャンネルにしていきますので、是非、今のうちにチャンネル登録していただけると嬉しいです