CSSだけでWordPressサイトに石積みとグリッドレイアウトを追加する

公開: 2014-07-09

あなたの投稿がWordPressのホームページやアーカイブにどのように表示されるかをジャズアップしたいと思ったことはありませんか？

CSSのスニペットを追加するだけで、石積み（Pinterest）アプローチまたはグリッドレイアウトを使用して投稿を表示できるとしたらどうでしょうか。

プラグイン、ショートコード、テンプレートの変更はなく、ホームページとしてページを割り当てます。純粋なCSSです。

列数のCSSの横にある石積みの画像 — 組積造とグリッドのレイアウトはすべて純粋なCSSで可能であり、マークアップの変更はありません

読み続けるか、次のリンクを使用して先に進んでください。

組積造とグリッドレイアウトをサイトに追加するための準備
あなたの投稿にPinterestの石積みの外観を与える
グリッドに投稿を配置する
カスタムCSSをサイトに追加する

WordPressサイトに石積みとグリッドレイアウトを追加するための準備

これらのソリューションは純粋にCSSに基づいているため、当然のことながら、変更なしで機能するためにサイトのHTMLマークアップに大きく依存しています。

使用されるCSSは、デフォルトのテーマで設計（およびテスト）されています。これは、CSSにはいくつかの期待があることを意味します。

ページのタイプ（ホーム、ブログ、アーカイブ、検索など）を説明するクラスがbody要素に存在します
投稿リストは記事要素のコレクションであり、コンテンツのIDを持つdivでラップされたヘッダーを備えています

デフォルトのテーマを使用すると、CSSを変更せずに使用できるようになります。そうでない場合でも、テーマがCSSをそのまま使用できるほど十分に類似したマークアップを使用していることに気付く場合があります。たとえば、80年代のテーマは、デフォルトのテーマと実質的に同じマークアップを使用します。

テーマが同じマークアップを使用していない場合（最も簡単な方法は、CSSで参照されているクラスとIDのページソースを確認することです）、CSSを引き続き使用できます。クラスを変更するだけで、マークアップに一致するID。

スタイリングを適用する場所の選択

選択したスタイルを特定のページにのみ適用することを決定できます。

WordPressは、ブログ、ホーム、アーカイブ、検索などのbody要素にページ固有のクラスを適用するため、これを非常に簡単にします。したがって、関連するクラスごとにCSSをコーディングするだけで済みます。

たとえば、ホームページだけにスタイルを適用する場合、CSSは次のようになります。

body.blog article { styles go here... }

ホームページとアーカイブ（カテゴリ）ページにスタイルを適用するには：

body.blog article, body.archive article { styles go here... }

検索結果だけにスタイルを適用するには：

body.blog search { styles go here... }

繰り返しますが、これはWordPressのテーマの推奨事項に従ったテーマによって異なります。

ブラウザの互換性

CSS3であるため、これらの手法はすべてのプラットフォームとブラウザーで機能するわけではありません。

最新バージョンのChromeとSafari（両方ともOS X）とiOS（5以降）で動作することをテストして確認しました。さまざまなCSSWebサイトも、IE10にも問題がないことを示唆しています。

これらのブラウザー（IE9を含む）以外では、マイレージは異なりますが、フォールバックは現在のスタイルであるため、古いブラウザーを使用している訪問者は違いに気付かないことを覚えておく価値があります。

記載されていないプラットフォーム（特にWindows）でスタイルが正常に機能する場合は、コメントでお知らせください。

免責事項はこれで十分です。それでは、投稿リストを整える方法を見てみましょう。

あなたの投稿にPinterestの石積みの外観を与える

組積造CSSが適用された投稿リストのスクリーンショット — Pinterestで人気のある石積みは、高さの異なる投稿に最適です。

たくさんのWordPressテーマと、Pinterestスタイルの石積み形式で投稿を表示するプラグインがいくつかあります。しかし、CSS3を使用すると、WordPressサイトにいくつかのスタイルを追加するだけで、同じ効果を得ることができます。

このソリューションは、W3Bitsに関するRahul Aroraの投稿に触発され、CSS3のcolumnプロパティのサポートに基づいています。このプロパティは、定義された数の列にコンテンツを分割します。その作成は、新聞スタイルの列にテキストを流すというアイデアに触発された可能性がありますが、石積みのレイアウトにも同様に役立ちます。

/* Masonry Custom CSS  */

/* Masonry container */
body.blog div#content, body.archive div#content {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}

/* Masonry bricks or child elements */

body.blog article, body.archive article {
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
padding: 1em;
width: 100%;
}

body.archive .archive-header, body.blog .paging-navigation, body.archive .paging-navigation {
background-color: #ffffff;
-webkit-column-span: all;
column-span: all;
}

デフォルトのレイアウトでは、投稿はコンテンツIDのdivでラップされた記事要素として出力されます。

CSS：

1. column-countプロパティ（この場合は4）を使用して、＃contentラッパーの列数を設定します。また、 column-gapも設定します。 FirefoxとSafariで-moz-と-webkit-が使用されていることに気付くでしょう。

2.インラインブロックを使用し、幅を100％に設定して、記事の要素をレンガに変えます。

3.これらの要素がすべての列にまたがることを指定することにより、ページヘッダーとナビゲーションが独自の「行」に配置されるようにします

物事を整頓するために、以下を追加することも検討してください。

/* Some ad hoc CSS useful for many themes */
body.archive .site-content,
body.blog .site-content {
margin: 1em;
}

h1, h2, h3, h4, h5, h6, a {
-ms-word-wrap: break-word;
word-wrap: break-word;
}

これにより、コンテンツの周囲に余白ができ、タイトルの長い単語がフォーマットを捨てないようになります（ここだけでなく、あらゆるテーマに役立ちます）。

応答性を高める

カラムアプローチの欠点の1つは、画面サイズが小さくなるとすぐに劣化することです。

私たちがやりたいのは、列の数を操作して、記事の要素が適切な量の画面領域を取得し、レンガの整合性と視覚的な魅力を維持するようにすることです。それでは、画面サイズに基づいて列数を変更するために、いくつかのメディアクエリを追加しましょう。

@media only screen and (max-width : 1024px) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}

@media only screen and (max-device-width : 1024px) and (orientation : portrait) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}

@media only screen and (max-width : 768px) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}

@media only screen and (max-width : 480px) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}

ご覧のとおり、クエリごとにcolumn-countプロパティ（およびその派生物）を変更するだけで済みます。

これらの4つのブレークポイント。そのうちの3つはすべてのプラットフォームで機能し（ブラウザウィンドウのサイズを変更して効果を確認するだけです）、1つは特にポートレートモードのタブレット用です。

iPadとiPhoneの石積みのスタイリングは次のとおりです。

縦向きモードのiPhone（1列）とiPad（2列）の組積造レイアウトのスクリーンショット — 列数を画面サイズに対応させるのは簡単です

もちろん、さらに進んでレンガにスタイルを追加して視覚的な魅力を向上させることもできます（そしてそうすべきです）が、投稿リストを石積みの壁に変えるための3つのCSSステートメントだけが非常に印象的です！

グリッドに投稿を配置する

グリッドスタイリングを使用した投稿リストのスクリーンショット — グリッドは投稿リストに秩序と統一性をもたらします

組積造が提供するよりも均一性と秩序が好きな場合は、投稿をグリッドに配置することに興味があるかもしれません。

グリッドは非常に簡単に実装できますが、注目の画像がすべて同じサイズの場合に最適に機能します。そうでない場合は、短い「セル」に十分な空白が埋め込まれる可能性があります。

今回はCSSがさらに短くなり、記事要素のスタイル設定に依存しています。

/* Grid Layout Custom CSS */
body.blog article, body.archive article {
width: 32.5%;
display: inline-block;
vertical-align: top;
text-align: left;
margin-bottom: 10px;
position: relative;
}

絶対に必要なのはそれだけです。繰り返しになりますが、インラインブロックを利用して、記事のコンテンツ（タイトル、注目の画像、抜粋）が垂直方向に配置されるようにしています。

重要なプロパティは幅です。これにより、「列」の数が決まります。 3列を提供する初期値として32.5％を使用しました（33％を使用すると、ラッピングが早まる可能性があります）。明らかに、4列が必要な場合は、24.5％、5列は19.5％などを使用します。

レスポンシブネスの追加

組積造のスタイリングと同じように、グリッドの効果を維持するには、グリッドの応答性が必要になります。

列の数を決定するのはwidthプロパティであるため、さまざまなメディアクエリで変更されるプロパティです。

@media only screen and (max-device-width : 1024px) and (orientation : portrait) {

body.blog article, body.archive article {
width: 49%;
}
}

@media only screen and (max-width : 768px) {

body.blog article, body.archive article {
width: 49%;
}
}

@media only screen and (max-width : 480px) {

body.blog article, body.archive article {
width: 100%;
}
}

今回は3列から始めたので、クエリは3つだけです。より多くの列から開始する場合は、max-width：1024pxのブレークポイントを追加して、幅を32.5％（3列）に設定することをお勧めします。

これにより、次のようになります。

ポートレートモードのタブレットで2列
画面サイズが最大幅768pxの場合は2列
画面サイズが最大幅480pxの場合は1列

これらのブレークポイントは、タブレットとスマートフォンの両方、およびブラウザーウィンドウのサイズ変更を対象としています。

iPadとiPhoneのグリッドレイアウトは次のとおりです。

縦向きと横向きの両方でのiPadのグリッドレイアウト — ほんの2、3のメディアクエリにより、グリッドが画面サイズの変化に確実に応答するようになります

グリッドは、石積みよりも少し整然としていますが、注目の画像サイズを最も効果的にするには、一貫性と厳密さが必要です。

カスタムCSSをサイトに追加する

選択したカスタムCSSをWordPressサイトに挿入する場合、いくつかのオプションがあります。テーマにカスタムCSSを追加する機能が含まれていない場合、選択肢は次のとおりです。

子テーマ–子テーマを作成し、CSSをスタイルシートに追加します
プラグイン–選択したスタイルを新しいCSSファイルに追加し、wp-enqueue-style関数を使用するプラグインを作成します。これは、おそらく生成されるページに基づいて条件付きで、新しいファイルをエンキューします。
現在のテーマのスタイルシートを編集する–実際には、しないでください。
カスタムCSSプラグインを使用する– WordPress管理インターフェースを介してサイトにカスタムCSSを追加できるプラグインがいくつかあります（適切な名前のSimple Custom CSSプラグインはそのようなプラグインの1つです）

カスタムCSSプラグインを使用するのが好きです。セットアップはすばやく簡単で、テストも簡単で、WordPressサイトからCSSをすばやく簡単に削除できます（エディターをクリアするか、プラグインをアンインストールします）。

CSS、WordPressZenへの道

素晴らしいCSSZenGardenは、マークアップを1回変更することなく、CSSを変更することで、サイトのルックアンドフィールを大幅に変更できることを長年にわたって証明してきました。

同じレベルに近い場所ではありませんが、これら2つの手法は、WordPressサイトのルックアンドフィールを変更することも、テンプレートを変更したり、ショートコードを使用したり、子テーマを開発したりすることなく、完全に可能であることを証明しています。

CSSのほんの少し。

編集者注：この投稿は、正確性と関連性のために更新されています。 [初版：2014年7月/改訂：2022年2月]

WordPressサイトで使用したお気に入りのCSSスニペットはありますか？以下のコメントでそれを共有してください。