【AFFINGER5】横幅をいっぱいに広げる方法（記事・固定ページ対応）

初心者

AFFINGER5で、画像を横幅いっぱいに表示したいなー。
簡単に出来るカスタマイズ方法を教えてほしい。

そんなお悩みを解決します。

ざわざテンプレートのファイルを変更せず、シンプルな方法で固定ページ、記事の横幅を画面いっぱいまで広げる方法を紹介します。

コードは数行。貼り付けるだけでＯＫな簡単作業です。

作業は5分程度です。

【固定ページ】1カラムの横幅を画面いっぱいに広げる

Affinger5を有効化しているテーマで、固定ページの横幅の一部を画面いっぱいに広げる方法です。

前提としてカラム変更で「1カラムに変更する」「LP化する」を選んでいる場合です。

横幅を広げるコード

以下がサンプルコードです。

「外観」→「カスタマイズ」→「追加CSS」をクリックしコードを貼り付けましょう。

次にエディターに貼り付けるコードです。

固定ページの編集画面で、任意の箇所に貼り付けてください。

かなり短いコードなので初心者のかたでも簡単にページの横幅を画面いっぱいに広げることができます。

コードを追加後、横スクロールが表示されてしまう場合は、bodyに以下のCCコードが適用されているかを確認しましょう。

横幅を広げるコードについて

今回はmarginとpaddingにマイナスの値を入れるカスタマイズです。

通常はプラスの値を入力して余白を設定するコードなんですが、マイナスの値を設定し位置を調整しています。

コーディングの専門用語で「ネガティブマージン」と呼ばれている手法です。

記事ページで横幅をいっぱいに広げる方法

記事テンプレートでも固定ページと同じように、横幅を画面いっぱに広げることができます。

やり方は、先ほど解説した固定ページと全く同じ手順です。

Affinger5の拡張カスタマイズ

Affinger5で横幅を広げる方法を解説しました。

横幅を広げたエリアに、「背景画像を画面いっぱい表示されるよう設定したい」といった追加カスタマイズのサンプルコードを紹介します。

横幅をいっぱいに広げたエリアの背景色を指定したい

以下サンプルコードです。

上記サンプルコードの「background-color」が背景色を指定するコードです。

サンプルでは、背景色を黒（black）に指定しています。

white、green、blueなど色の名前を指定するか、色コードを指定する方法で背景色を設定できます。

色コードの例

文字の色を指定したい

横幅を広げたエリアの文字色を指定するサンプルコードです。

サンプルコード1行目の「color」が文字の色を指定するコードです。

背景色と同じく、色の名前を指定するか色コードで、文字の色を設定できます。

色コードで、文字の色を「白」に指定する例

背景増画像を横幅いっぱいに表示したい

以下のコードをCSSに追加しましょう。

表示する画像は、事前にメディアからアップロードし、保存先のURLをコピーしておきます。

「background-image:」のコードで背景画像を指定しています。

任意の画像をアップロードし、その画像のULRをコピーした値を貼り付けましょう。

表示する場所などの調整はCSSで行えますので、好みのデザインになるようコードをアレンジしてください。

まとめ

この記事では、Affinger5の固定ページ・記事の横幅をいっぱいに広げる方法を解説しました。

利用したテーマのバージョンは以下の通りです。

企業サイトを作る際や、ランディングページをオシャレにデザインするのに使える実用的なテクニックです。

追加するCSSのコードもシンプル。初心者の方でも指定の箇所に貼り付けるだけですので、簡単に導入できます。

Affinger5でコーポレート系のサイトをデザインする際にお試しください。

アフィンガー5の購入手順とWordPressへの導入方法【注意点も解説】