☆Yuus Memo☆
非エンジニアの方でも業務を効率化できるプログラムを紹介します!
Web開発

【WordPress】ブロークングリッドレイアウトをプラグインで実現!! ☆Gutenberg

皆さんこんにちは!!
早速ですが、皆さんは「ブロークングリッドレイアウト」や「ノングリッドレイアウト」という近年流行っているデザインをご存知でしょうか?
今回はWordpressのプラグインで「ブロークングリッドレイアウト」や「ノングリッドレイアウト」を実現できるプラグインを、ご紹介します!!

WEBページをデザインするときに「グリッドレイアウト」は定番なので、よく利用されているかと思いますし、Wordpressのテーマでも簡単に利用できるようになっているものが多いかと思います。

CSS Grid Layout(グリッドレイアウト)は、2次元レイアウト を、HTML/CSS を使って簡単・自由に操作できる、CSSの新しい機能です。
格子状のマス目のグリッドに好きな順番に配置したり結合したりすることで、様々なレイアウトが可能になります。

display: grid; または display: inline-grid; を指定することで、その要素は Grid Layout の コンテナ になります。

<div style="display:grid;"> <!-- コンテナ -->
    <div></div> 
    <p></p>
    <section> 
        <div></div>
    </section>
</div>

コンテナの直接の子要素は基本的にすべてgridのアイテムになります。

基本的に、一定のラインで分割したものの中にアイテムを規則正しく並べてあるイメージで「きっちり」としたイメージのサイトに出来上がります。

ブロークングリッドレイアウトとは

ブロークングリットレイアウトは、従来の直線や四角形を規則正しく並べたレイアウトとは異なり、あえて要素をグリッドからはみ出させたり、要素同士を重ねたりずらしたりするレイアウトのことです。

もともと雑誌などのデザインでは一般的でしたが、2017年ごろからWebサイトのデザインでも流行しはじめ、現在ではデザイン手法の一つとして定着しつつあります。

ブロークングリッドレイアウトが使われる理由は、ありきたりなWebデザインのレイアウトとの差別化です。不規則な部分を意図的に入れ、ユーザーの視線を引き付けて、より興味を喚起していきます。

https://www.coperni.co/enの一部を使用させていただきました。

大胆に余白を取り、画像や図形テキストなどを不規則に並べることでインパクトのあるデザインが出来上がります。

WordPressでブログやサイトを作っているのに、ゴリゴリHTMLやCSSを書いていくのは、あまりスマートでは無いので、今回は簡単に「ブロークングリッドレイアウト」をサイトに取り入れることが出来るプラグインを紹介します。

基本的な「ブロークングリッド」のコーディング

まずは、基本を理解するために通常のHTML+CSSで「ブロークングリッド」を作成する方法を書きたいと思います。

サクッとプラグインで実装したい人は、この部分を飛ばして下さい。

CSSで「※使用するImageのURLを指定」と書いてある部分に好きな画像のURLを入れて下さい。

<div class="img1"></div>
  
  <div class="img2"></div>
  
  <div class="img3"></div>
  
  <div class="strapline">
    <blockquote>“TEST TEXT”</blockquote>
  </div>
  
    <div class="cta-wrapper">  
      <div class="cta">
        <h1>TEST TITLE</h1>
        <p TEST TEXT2</p>
        <a class="button" href="#">ボタンリンク →</a>
    </div>
  </div>
  
</section>
body {
  color: #292929;
  font: 1em/1.7 'Open sans', sans-serif;
}
blockquote {
  font: italic 1.1em/2 'Playfair Display', serif;
  margin: 0 0 2em 0;
}
.cta {
  padding: 100px 0 100px 20%;
}
.cta h1 {    
  font: bold 6em/1 'Playfair Display', serif;
  margin: 0 0 20px 0;
  position: relative;
}
.button {
  display: inline-block;
  color: white;
  text-decoration: none;
  background: #292929;
  padding: .8em 1.5em;
}
.button:hover {
  background: black;
}
.strapline {
  margin-top: 100px;
  position: relative;
}
.strapline::before {
  content: '';
  display: block;
  background: url(※使用するImageのURLを指定) repeat-x;
  background-size: cover;
  width: 20%;
  height: .5em;
  position: absolute;
  top: -3em;
  left: 40%;
}
.cta h1::before {
  content: '';
  display: block;
  height: 1em;
  width: 1em;
  background: url(※使用するImageのURLを指定) no-repeat center center;
  background-size: 80%;
  position: absolute;
  left: -120px;
  top: 0;
}

/*グリッド */
.grid1 {
  display: grid;
  grid-template-columns: 3fr 6fr 1fr 5fr 10fr 2fr;
  grid-template-rows: 100px auto 15px auto auto;
}
.img1 {  
  background: url(※使用するImageのURLを指定);
  background-size: cover;
  
  grid-column: 1 / span 2;
  grid-row: 2 / span 3;
}
.img2 {  
  background: url(※使用するImageのURLを指定);
  background-size: cover;
  
  grid-column: 2 / span 2;
  grid-row: 3 / span 3;
}
.img3 {  
  background: url(※使用するImageのURLを指定);
  background-size: cover;
  grid-column: 5 / span 2;
  grid-row: 4 / span 2;
}
.strapline {
  grid-column: 3 / span 3;
  grid-row: 2 / span 1;
  padding: 0 16%;
  text-align: center;
  margin: 0;
}
.cta-wrapper {
  grid-column: 4 / span 2;
  grid-row: 4 / span 2;
}

上のコードのように頑張って書けば一応、ブロークングリッドレイアウトは作れます。
WordPressでページ単位で気軽に取り入れるには、少し手間が大きいです。

プラグイン「Grids: Layout builder for WordPress」

プラグインの導入自体は、プラグインの新規追加から行って頂ければ簡単にできます。

使い方もとっても簡単で下記公式のgifイメージを見ていたけば分かる通り、すぐにブロークングリッドが実現できます。

イメージは公式サイトの物が一番伝わりやすかったのでお借りしました。

いかがですか?
すごく簡単に「ブロークングリッドレイアウト」を実現できているかと思います。

ブログ記事の投稿画面に入れたり、一部の固定ページだけ利用したりと様々な利用が可能です。

グリッドの行列の構造を変えたり、ギャップを入れたりする機能は用意されていませんが、CSSグリッドをGUIで利用できる便利で楽しいブロックだと思います!!

また、このプラグインは見ていただいたらわかる様に、通常のグリッドレイアウトも簡単に実現できます。
一度使ってみてください!!

まとめ

今回は、最近定番になりつつあるレイアウトの「ブロークングリッド」などをWordpressで実現する方法について、見てきました。

紹介したプラグイン「Grids: Layout builder for WordPress」は美しいグリッドが直感的に作成できるので、Wordpressを利用されている方は、是非インストールしてみて下さい!!

ページ毎に動きのあるサイトが簡単に作れます。
HTML+CSSでグリッドを実装していく手法も、便利なので覚えておくと業務システムを構築する際などにも役立つので、余裕のある方は是非、そちらも学習して下さい!!

最後までお読みいただき、ありがとうございました。

コメントを残す