単純なCSSグリッドレイアウトをWordPressに統合する
適切なツールを使用すれば、一貫性のある堅牢なグリッドレイアウトをWordPressに取り込むのは簡単です。このチュートリアルでは、WordPressで非常に軽量で修正が簡単なグリッドシステムをすばやく設定する方法を段階的に説明します。適切なツールを使用してグリッドを設定することに集中できるように、設計をシンプルにしますが、必要に応じてグリッドを独自にスタイル設定できることに留意してください。.
このチュートリアルでは、グリッドを正しく表示するための「最初から始める」方法を示すためだけに、WordPressのデフォルトのプールテーマを使用します。.
ステップ1：グリッド幅を決める
始める前に、グリッドをどれだけの幅にする必要があるのかを判断する必要があります。私のWordPressサイトでは、オブジェクトを右クリックしたときにGoogle Chromeの "Inspect Element"機能を使用すると、メインの列の幅が450ピクセルになることがわかります。これは、Webページ上のオブジェクトの幅と高さをすばやく判断できる最も速い方法です。.
ステップ2：グリッドデザイナー
手作業でグリッドを作成するのではなく、必要に応じて実行できますが、利用可能な多数のグリッドジェネレータツールの1つを使用することをお勧めします。このチュートリアルでは、MindPlayのグリッドジェネレータを使用します。とてもシンプルで軽量なグリッドジェネレータです。.
私は3列ディスプレイが欲しいです、そして、私は私のピクセルが450にあることを確認する必要があります。それでそれに応じて調整して、そして「エクスポート」タブにスキップしてください。我々は乗り越えないでしょう *タイポグラフィ これは確かにあなた自身で検討する価値がありますが、このチュートリアルの機能.
[エクスポート]タブで、一番上の[スタイルシート]フレームを使用し、[グリッド]コメントが表示されるまで下にスクロールします。あなたはコメントからこのフレームの一番下までをすべてコピーします。それはたった約30行にすべきです .
ステップ3：WordPressスタイルシートを更新する
あなたのWordPressサイトにログインして、Appearance> Editorに行きます。.
エディタパネルの右下に、 Styles.css ファイル（またはテーマによっては似たようなもの）。開くにはこれをクリック.
シートの一番下までスクロールし、MindPlay.dkから自分のプレを貼り付けます。
ステップ4：グリッドを実装する
グリッドを使用するには、単純に ここにあなたが始めるためにあなたが所定の位置に貼り付けることができるいくつかのサンプルpreがあります： 左の列 中段 右のコラム これがWordPressの中の様子です。 ページを保存/更新して結果を確認します。私の場合、これはサイトのホームページです。 上のスクリーンショットからわかるように、私たちには3つのコラムがあり、すべてが期待通りの場所にあります。以下から始めるだけで、好きなだけ行を追加できます。 左の列 中段 右のコラム 左列＃2 中段＃2 右列＃2 これまでの様子は次のとおりです。 これで、画像やテキストを追加して、各行に正確にスタイルを設定することができます。. 複数の行があると、ブラウザによっては問題が発生する可能性があります。この問題を回避するには、マージンを一番右にする必要があります（ これはあなたのことを確認します グリッド全体の背景をスタイルしたい場合は、グリッドの高さを調整する必要があります。 使用しているMindPlay.dkグリッドジェネレータのバージョンによっては、サイトで ".grid-m4"が生成されない場合があります。代わりに、使用する必要があります。 左の列 中段 右のコラム これが私の最終結果が2行といくつかの簡単なグラフィックでどのように見えるかです： デザインを楽しんで、自分の好きな方法でグリッドをスタイルできることを忘れないでください。. 編集者注： この投稿はによって書かれています タラ・オナー Hongkiat.comのために。 Taraは英語の学位を持ち、マーケティング、広告、ブランディング、グラフィックデザイン、およびデスクトップパブリッシングについて書いています。彼女の執筆キャリアに加えて、Taraはまた彼女の夫と2人の子供と過ごす時間を楽しんでいます.
：
微調整のためのヒント
.グリッドm4, 私たちの場合）あなたは各行になりたい高さまで。 250×250ピクセルの画像を使用している場合は、行の高さを .グリッドm4 250pxにするには：.grid-m4 float：left;幅：20ピクセル。高さ：250ピクセル。
.グリッド - m1 次の行の左側にある行は、その上の行まで浮かんでいません。..グリッド クラス。グリッドに4行あり、それぞれ250ピクセルです。追加するスタイル要素がグリッドデザイン全体をカバーするように、1000pxで.gridクラスに高さを追加する必要があります。..グリッド幅：450ピクセル;高さ：1000ピクセル。マージン：自動。
.グリッド - m1 後に .グリッドC3 グリッドを適切な場所に確実に拡張するには最終結果
