副業ブログ

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

サイトの横幅サイズって、どれくらいが目安なの?
初心者
AFFINGER5で、画像を横幅いっぱいに表示したいなー。
簡単に出来るカスタマイズ方法を教えてほしい。

 

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

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

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

 

作業は5分程度です。

 

 

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

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

 

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

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

 

 

横幅を広げるコード

 

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

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

.test100{

width:100%;
margin: 0 -500%;
padding: 0 500%;

}

body {
overflow-x: hidden;
position: relative;

}

 

 

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

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

<div class="test100">

ここに好きなコードを設置できます。

</div>

 

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

 

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

 

body {
overflow-x: hidden;
position: relative;

}

 

 

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

 

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

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

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

 

 

 

 

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

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

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

 

 

 

 

Affinger5の拡張カスタマイズ

追加カスタマイズ

 

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

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

 

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

 

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

.test100{

background-color: black;
width:100%;
margin: 0 -500%;
padding: 0 500%;
}

 

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

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

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

 

色コードの例

黒: #000000

白:#FFFFFF

 

 

文字の色を指定したい

 

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

 

.test100{

color:white;
background-color: black;
width:100%;
margin: 0 -500%;
padding: 0 500%;
}

 

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

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

 

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

color:#FFFFFF;

 

 

 

 

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

 

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

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

.test100{

width:100%;
margin: 0 -500%;
padding: 0 500%;
background-image: url(https://demo.wp-customize.net/demo03/wp-content/uploads/sites/3/2020/10/sample1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
display:block;
position: relative;

}

 

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

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

 

 

 

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

 

 

 

 

まとめ

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

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

 

Affinger5(Version: 20201005)

 

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

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

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

 

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

【備考】GRCと他の順位チェックツールとの比較
アフィンガー5の購入手順とWordPressへの導入方法【注意点も解説】

初心者アフィンガ―5を購入をしたいけど、どこから購入したらいいか分からない。 購入方法と、ワードプレスの最初の設定の仕方を教えてくれないかな?   こういった悩みに答えます。 この記事ではワ ...

続きを見る

 

サイト内検索

-副業ブログ
-

© 2021 副業ブログ