当ページのリンクには広告が含まれています。このような「疑問を解決する」お手伝いをします!//AFFINGER6なら!標準設定で超簡単にサイトの幅が変更できるよ。AFFINGER6を使っている。AFFINGER6でサイトの幅を広げる設定方法を知りたい。そもそもサイト幅の適切なサイズは?今回の記事では...AFFINGER6の標準設定を使った「サイトの幅」の設定方法と、記事の幅(書き代)を広げる設定をご紹介します。AFFINGER6でのサイトの適切な幅についても解説します。それではご覧ください。増え続ける当サイトオリジナル特典付!-購入方法で迷ったら...こちらで確認【特典付きを購入しよう!】AFFINGER6におけるサイトの幅AFFINGER6に於いて、PC閲覧時のサイトの幅(width※デフォルトは1060px)に設定されています。px」の間で設定するのが、おすすめです。336px(A)/(B)」を横並びにするには「1114px」以上の幅が必要。Googleアドセンス用336px(A)/(B)の広告は左詰で自動表示されるため、広告の見栄えを重視するのであれば「1160px」前後が良好です。「1200px」以上。px」を考慮すると「1200px」以上が良好です。幅を大きく取るのが有効です。レスポンシブ(追従)設定等で画像を大きく表示できます。当サイトでは、サンプル画像でもご紹介する「1280px」に設定しています。2022/10/12現在では、「1160px」で設定しています。それでは表示イメージを確認していきます。トップページの表示イメージから確認していきましょう。トップページヘッダーエリアの表示イメージトップページヘッダーエリアの表示イメージ「デフォルト:1060px」は、以下の画面になります。(参照:当サイトのトップページをサンプル)トップページヘッダーエリア「1060px」の幅と「menu=960px」の幅の差は50x2=100pxです。トップページサンプル「1060px」トップページヘッダーエリアの表示イメージ「適正サイズ:1280px」は、以下の画面になります。(参照:当サイトのトップページをサンプル)トップページヘッダーエリア「1280px」の幅と「menu=960px」の幅の差は160x2=320pxです。着目すべき点は、PC閲覧時のサイトの幅を1060pxから1280pxに広げたことで、サムネイル画像とヘッダーカードの表示が大きくなっている事です。メニューの余白も50pxから160pxと大きくなるのでメニューの項目を一列で増やせる余裕ができました。(メニュータブの幅は120pxなので、2つ追加しても一列で表示が可能。)メニューの詳しい設定方法を知りたい方はこちらをご覧ください。次に、mainエリアの表示イメージを確認してみましょう。サイドバーの幅「300px」と余白「20px」は、サイトの幅を変更しても変更されません。mainエリアの表示イメージ「デフォルト:1060px」は、以下の画面になります。サイト全体「1060px」の幅とmainエリア「640px」と余白「50px」x2です。mainエリアの表示イメージ「適正サイズ:1280px」は、以下の画面になります。サイト全体「1280px」の幅とmainエリア「860px」と余白「50px」x2です。当サイトでは、上画面の設定を使用しています。mainエリヤをもっと広く!!mainエリアの表示イメージ「適正サイズ:1280px」で、mainエリアをデフォルトの「640」から「700」に広げた画面になります。osaboo記事を書く範囲を最大限に広げたい方にはこちらが良いかと...設定方法は次の章で!サイト全体「1280px」の幅とmainエリア「920px」と余白「20px」x2です。記事エリアを広げた設定)表示イメージは以上です。サイトに合わせて色々調整してみましょう。サイトに合った配置が見つかると思います。本記事の設定では『AFFINGER管理』のメニューを編集します。Error』が出た場合。Error』が出て対処方法がわからない方はこちらをご覧ください。サイトの幅を設定この章での設定は、サイト全体の設定が2カラムのレイアウト設定となります。サイト全体の設定が2カラムになっている事を確認しましょう。『AFFINGER管理>全体設定>サイト全体のレイアウト一括設定』をクリックします。チェックが入っている事を確認します。PC閲覧時のサイトの幅(width※デフォルトは1060px)を設定PC閲覧時のサイトの幅を設定します。デフォルト(1060px)のイメージ確認はこちら!適正サイズ(1280px)のイメージ確認はこちら!『AFFINGER管理>全体設定>サイト全体のレイアウト一括設定』をクリックします。『PC閲覧時のサイトの幅(width※デフォルトは1060px)』の右側の枠(赤枠)に『1280』pxと入力します。参考にしてみてください。『Save』をクリックして完了です。PC閲覧時に記事下のアドセンス広告を横並びにするGoogleアドセンス広告を横並びにできるように設定をご紹介します。『AFFINGER管理>投稿・固定記事』をクリックします。▶︎『その他』(下側にスクロール)『PC閲覧時に記事下のアドセンス広告を横並びにする』にチェックを入れます。『Save』をクリックして完了です。Googleアドセンス広告の貼り方を詳しく知りたい方はこちらをご覧ください。記事エリアの幅を広げる記事エリアの幅を広げる設定します。イメージはこちら!この設定は、記事エリアの余白を少なくする(記事エリアを広げる)設定です。」「計:60px」の幅が広がります。当サイトでは採用していませんが、より広く記事エリアが欲しいという方にはおすすめの設定です。設定はAFFINGER6の標準設定なのでとても簡単です。『WordPress管理>外観>カスタマイズ>基本エリア設定>mainエリア(記事)』をクリックします。クリックして完了です。初期設定値1060pxは狭すぎる!ベストな設定値は?「サイト全体の幅」と「記事エリアのみの幅」を広くする設定をご紹介しました。今回ご紹介した方法で、「サイト・記事」のレイアウトの自由度がかなり広がったのではないでしょうか。設定方法もAFFINGER6の標準設定なのでとても簡単にできる方法だと思います。是非!お役立てください。バランのの良い!格好いい「サイト・記事」を作っちゃいましょう。^^"「最後まで、ご観覧いただきありがとうございました。」また、次の記事で...お会いしましょう。WordPressテーマ】AFFINGER6とSWELL徹底比較「どっちにする?」両方使ってみた!WordPressテーマ「AFFINGER6とSWELL」を徹底比較。現役で両方使っている筆者が「こんな人におすすめ」を解説。テーマ選びで重要視するポイントやブロックエディターとクラシックエディターに関する注意点等、中立の立ち位置でご紹介。本音レビュー!メリット・デメリットを徹底解説AFFINGER6とAFFINGER6EXの両方を使って3年目の本音レビューをご紹介。初心者が使った場合のメリットとデメリットを徹底解説。有料テーマをはじめて使う初心者の不安を解決!ブログ収益を加速させるオリジナル特典をご用意しました。初心者がオススメする購入方法【特典付きを購入しよう!】WordPressテーマACTION(AFFINGER6)のおすすめ購入方法を初心者目線でご紹介。購入後のダウンロードからインストールまでの手順を全画像付きで丁寧に解説。初心者が迷子にならない為の公式サイトの検索手順と注意事項もご紹介します。ver4.1.1が2022/9/21にアップデートされ大幅に使いやすくなりました!表示機能も強化されグッと見やすなったリンク計測の表示など、アップデートの手順から広告用タグの作り方まで一気にご紹介します。!AFFIBGER6でトップページにカード型の記事一覧を設定する方法!STDとEX両方を解説AFFIBGER6でトップページにカード型の記事一覧を簡単に表示する方法を解説!STDモードとEXモード両方の設定手順を詳しく説明した完全ガイド。カスタマイズ【細かすぎる色の設定】わかりにくいを解決「まとめてみた!」AFFINGER6のカスタマイザー「全体カラー設定で、色設定に対する反映場所がわからない!」を解決。「キーカラー?メインカラー?サブカラー?テキスト(一部)?」の設定箇所と反映場所をサンプル画像でわかりやすく解説。デザイン済みデータの導入・設定方法「ポイントをまとめてみた!」AFFINGER6とEXのデザイン済みデータの導入手順と設定方法をご紹介。デザイン済みデータをベースにすることでカスタマイズ作業を短縮!「すぐにでも記事を書き始めたい」人向け。初心者さんでもOKです!AFFINGER6のブログの広告表記「ステマ規制対応「PR表記」機能が実装された!超簡単に処理しておこうAFFINGER6で「ブログの広告表記」をする方法を初心者さん向けに解説。ブログやWebサイトに対して景品表示法のステマ規制がスタートします。ver.20230921β版から実装された「PR表記」機能を使った簡単設置補法をご紹介。カスタマイズ【タイトルや画像を「ふわっと表示」フェードイン設定方法】AFFINGER6のページ内でタイトルや画像をふわっと表示させるフェードインの設定方法をご紹介。AFFINGER6の拡張機能を使った初心者さんでも安心して使える設定方法です。CSS等の難しい追記や編集は一切不要で設定時間は!一瞬です。カスタマイズ【ヘッダー画像にサイト情報とヘッダーメニューを表示】おしゃれなサイトの定番!?AFFINGER6のカスタマイズでヘッダー画像にサイトの「ロゴ・タイトル・キャッチフレーズ・ヘッダーメニュー」を表示する方法をご紹介。AFFINGER6の標準機能を使った初心者さんでも簡単に!おしゃれで!安心して使える!ヘッダーのカスタマイズ手順をお届けします。徹底した初心者目線でお届け!!\\お役立ち情報を発信しています。原則リンクフリーです。リンクを行う場合の許可や連絡は不要です。リンクである旨を明示ください。引用についても、出典元の明記とリンクをしていただければ問題ありません。見出しタグのカスタマイズ!キャッチコピーを使う。