広告

AFFINGER6 サイトの幅を設定【初期設定値1060pxは狭すぎる!ベストな設定値は?】

14023_affunger6-customize-post-wide

こんにちは "osaboo"です。"@osaboo_Bot"

Question

サイトの幅が狭まくて、なんかちょっと見にくいなぁ…でも「サイトの幅」ってどのくらいにしたらいいの?
AFFINGER6で簡単に設定できないの?

\\ このような「疑問を解決する」お手伝いをします!//

AFFINGER6なら!標準設定で超簡単にサイトの幅が変更できるよ。\^^/

osaboo

こんな方におすすめ!

  • WordPressテーマ ▶︎ AFFINGER6を使っている。
  • AFFINGER6でサイトの幅を広げる設定方法を知りたい。
  • そもそもサイト幅の適切なサイズは?

という事で、今回の記事では…

AFFINGER6の標準設定を使った「サイトの幅」の設定方法と、記事の幅(書き代)を広げる設定をご紹介します。また、AFFINGER6でのサイトの適切な幅についても解説します。

それではご覧ください。

\ 初心者でも安心」!コスパ最強の洗練されたWordPressテーマ /

AFFINGER6 購入 ▶︎ 詳しくはこちら

AFFINGER6におけるサイトの幅

AFFINGER6に於いて、PC閲覧時のサイトの幅(width※デフォルトは1060px)に設定されています。

サイト幅の適正サイズは「1114〜1300 px」の間で設定するのが、おすすめです。

ポイント

  1. ウィジェット「広告・Googleアドセンス用 336px(A)/(B)」を横並びにするには「1114px」以上の幅が必要。
    • Googleアドセンス用336px(A)/(B)の広告は左詰で自動表示されるため、広告の見栄えを重視するのであれば「1160px」前後が良好です。
  2. サイトに表示するメディアのサイズを考慮すると 「1200px」以上。
    • アイキャッチ画像「推進寸法;1200x630 px」を考慮すると「1200px」以上が良好です。
    • サムネイル画像を大きく表示したい場合も 幅を大きく取るのが有効です。◀︎ レスポンシブ(追従)設定等で画像を大きく表示できます。

※ 当サイトでは、サンプル画像でもご紹介する「1280px」に設定しています。

それでは表示イメージを確認していきます。

まずは、トップページの表示イメージから確認していきましょう。

トップページヘッダーエリアの表示イメージ

トップページヘッダーエリアの表示イメージ「デフォルト:1060px」は、以下の画面になります。(参照:当サイトのトップページをサンプル)

トップページヘッダーエリア「1060px」の幅と「menu=960px」の幅の差は50x2=100pxです。

14023-2b
トップページサンプル「1060px」

トップページヘッダーエリアの表示イメージ「適正サイズ:1280px」は、以下の画面になります。(参照:当サイトのトップページをサンプル)

トップページヘッダーエリア「1280px」の幅と「menu=960px」の幅の差は160x2=320pxです。

14023-1c
トップページサンプル「1280px」

※ 着目すべき点は、PC閲覧時のサイトの幅を1060pxから1280pxに広げたことで、サムネイル画像とヘッダーカードの表示が大きくなっている事です。また、メニューの余白も50pxから160pxと大きくなるのでメニューの項目を一列で増やせる余裕ができました。(メニュータブの幅は120pxなので、2つ追加しても一列で表示が可能。)

次に、mainエリアの表示イメージを確認してみましょう。

mainエリアの表示イメージ

※ サイドバーの幅「300px」と余白「20px」は、サイトの幅を変更しても変更されません。

mainエリアの表示イメージ「デフォルト:1060px」は、以下の画面になります。

サイト全体「1060px」の幅とmainエリア「640px」と余白「50px」x2です。

14023-4a

mainエリアの表示イメージ「適正サイズ:1280px」は、以下の画面になります。

サイト全体「1280px」の幅とmainエリア「860px」と余白「50px」x2です。

14023-3a

※ 当サイトでは、右画面の設定を使用しています。^^

余白を少なくしたい!▶︎ mainエリヤをもっと広く!!

mainエリアの表示イメージ「適正サイズ:1280px」で、mainエリアをデフォルトの「640」から「700」に広げた画面になります。

osaboo

記事を書く範囲を最大限に広げたい方にはこちらが良いかと…設定方法は次の章で!

サイト全体「1280px」の幅とmainエリア「920px」と余白「20px」x2です。(ワイドタイプ ▶︎ 記事エリアを広げた設定)

14023-5a

表示イメージは以上です。サイトに合わせて色々調整してみましょう。きっとサイトに合った配置が見つかると思います。

\ 初心者でも安心」!コスパ最強の洗練されたWordPressテーマ /

AFFINGER6 購入 ▶︎ 詳しくはこちら

AFFINGER6 ▶︎ サイトの幅を設定

この章での設定は、サイト全体の設定が2カラムのレイアウト設定となります。

まずは、サイト全体の設定が2カラムになっている事を確認しましょう。

『AFFINGER管理>全体設定>サイト全体のレイアウト一括設定』をクリックします。

『サイト全体のレイアウトをリセットする』に チェックが入っている事を確認します。

14023-8-1a

※ この章の設定では『AFFINGER管理』のメニューを編集します。

ロリポップレンタルサーバーをお使いの方は、ドメインの『WAFの設定』を一時的に無効 にしてください。
◀︎『403 Error』が出た場合。



PC閲覧時のサイトの幅(width※デフォルトは1060px)を設定

PC閲覧時のサイトの幅を設定します。

デフォルト(1060px)のイメージ確認はこちら!

適正サイズ(1280px)のイメージ確認はこちら!

『AFFINGER管理>全体設定>サイト全体のレイアウト一括設定』をクリックします。

『PC閲覧時のサイトの幅(width※デフォルトは1060px)』の右側の枠(赤枠)に『1280』pxと入力します。◀︎ 半角数字

14023-7a

サイト幅 補足

  1. 当サイトで、設定している幅:1280px
  2. Googleアドセンス用▶︎336px(A)(B)広告を2列に表示するために必要は幅:1114px以上

※ おすすめのサイト幅:「1160px」or「1200px」or「1280px」◀︎ 参考にしてみてください。

『Save』をクリックして完了です。

14023-9

PC閲覧時に記事下のアドセンス広告を横並びにする

Googleアドセンス広告を横並びにできるように設定をご紹介します。

『AFFINGER管理>投稿・固定記事』をクリックします。▶︎『その他』(下側にスクロール)

14023-10a

『PC閲覧時に記事下のアドセンス広告を横並びにする』にチェックを入れます。

14023-6

『Save』をクリックして完了です。

14023-9

記事エリアの幅を広げる

記事エリアの幅を広げる設定します。

適正サイズ(1280px)ワイドタイプ(記事エリアを広げた設定) のイメージはこちら!

この設定は、記事エリアの余白を少なくする(記事エリアを広げる)設定です。「片側:30px 」「計:60px」の幅が広がります。当サイトでは採用していませんが、より広く記事エリアが欲しいという方にはおすすめの設定です。

設定はAFFINGER6の標準設定なのでとても簡単です。

以下をご覧ください。

『WordPress管理>外観>カスタマイズ>基本エリア設定>mainエリア(記事)』をクリックします。

『pc時の記事エリアの幅を広げる(640→700px)』にチェックを入れます。

14023-11a

以上で、設定はすべて完了です。お疲れ様でした!



「稼ぐ」に特化したWordPressテーマ

action-affinger6-ex-1

ACTION / AFFINGER6
コスパ最強のWordPressテーマ

価格:14,800円(税込)

今なら漏れなく特典付き!!

AFFINGER6 購入 ▶︎ 詳しくはこちら

「結果」を出すためのテーマ・プラグインが揃った戦略的セット

まとめ!AFFINGER6 サイトの横幅を設定 ▶︎ 初期設定値1060pxは狭すぎる!ベストな設定値は?

「サイト全体の幅」と「記事エリアのみの幅」を広くする設定をご紹介しました。今回ご紹介した方法で、「サイト・記事」のレイアウトの自由度がかなり広がったのではないでしょうか。設定方法もAFFINGER6の標準設定なのでとても簡単にできる方法だと思います。サイトの見た目は、とても大切だと思うので 是非!お役立てください。バランのの良い!格好いい「サイト・記事」を作っちゃいましょう。^^"

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。\^^/