[WordPress] jQueryを使用してフロントページ/カテゴリページをグリッドレイアウトに変える

Last Updated:2023年07月17日| コメントを残す

Grid style using jQuery in WordPress

上の図は、 WordPress Attitudeテーマのフロントページに表示されるブログ(最新記事)を2カラム形式のグリッドに配列した様子です。 このような形にする方法は多様であり、このブログの他の記事も扱っています。 単にCSSで調整することも可能ですが、その場合は、余白の問題などを処理するのが少し難しくなります。 このような問題をよりすることができウォルヒ実行するには、個々の文を囲む要素(例えば、 div要素 또는 )に別のクラスを追加すると、お勧めします。

例えば、2段で構成する 奇数, さらにのようにペア、奇数を表すクラスを追加し、3段で構成する , 真ん中, のようなクラスを追加することができます。 4ただし、5短刀同様でしょう。 これにより、各カラム(列)の余白、パディングの値を容易に調整することができます。

2段で構成する場合は、次のような形式で、左には 奇数 クラスを、右に さらに クラスを追加することができます。

$('section:odd').addClass('odd');
$('section:even').addClass('even');

クラス部分は、 WordPress テーマに合わせて変えたらされます。

3段で構成する場合には、次のように nth-childを選択する選択子を追加してくれればされます。

$('section:nth-child(3n+1)').addClass('left');
$('section:nth-child(3n+2)').addClass('middle');
$('section:nth-child(3n+3)').addClass('right');

この場合、一番左の列の要素に が、中には 真ん中、右に が追加されます。

そして、CSSを使っ適切レイアウトを調整してくれるようです。 例:

section {
width: 32%;
display: inline-block;
vertical-align: top;
}

section.left {
padding-right: 5px;
box-sizing: border-box;

}

section.middle {
padding-right: 5px;
padding-left: 5px;
box-sizing: border-box;

}

section.right {
padding-right: 5px;
box-sizing: border-box;
}

そして、PCの画面では、3段に表示され、スマートフォンなどのモバイル機器では、2段あるいは1段で表示されるようにするには、メディアクエリ(media query)を使用するようにします。

@media screen and (min-width: 480px) {
// 480px 이상의 해상도에 적용
}

@media screen and (max-width: 479px) {
// 479px 이하의 해상도에 적용
}

メディアクエリを使用して、モバイル機器にも精密に対応することができます。 (jQueryを WordPressで使用するには、jsファイルをenqueueしてください。 詳しくは「WordPressでjsスクリプトファイルとスタイルシートを正しくロードする方法「を参照してください。)

以上でjQueryを使用して、個々の文wrapper要素にクラスを追加して、2段または3段などのグリッドレイアウト(ポートフォリオレイアウト)で文を配列する方法を説明しました。

最近では、ポートフォリオ(グリッド)形式のサイトが多く目立つようです。 現在、このブログに適用されたテーマも 冥王星というようなもののテーマです(おそらくいつ変わるかわからないしばらくはこのテーマを使用することです)。 この記事でスタイリッシュなポートフォリオ形式のテーマを確認することができます。

メモ:


コメントを残す

コメント