STINGER PLUS+をゴリゴリのグリッドレイアウトにカスタマイズ

広告関係者曰く、昨今の流行はずばり「フラットデザイン」。SEOに強いSTINGER PLUS+で表現出来ないものかと考えました。調べてみて使えそうなものを寄せ集めたものがアイキャッチになっているレイアウトです。モデルとなっているホームページの所有者に許可を頂いているので、どんな風にカスタマイズしたのかを簡単に解説いたします。

当たり前ですが、カスタマイズは全て子テーマのみを編集します。元々含まれていないファイルについては、FTPツールなどで追加して下さい。ではやり方を見てみましょう。

1 グリッドレイアウトでタイル化したアイテムを敷き詰める
- 1.1 ファイル2つが必要
- 1.2 #wrapperのmax-widthだけではまだ足りない
2 完成したものがコチラ
- 2.1 参考URI:

グリッドレイアウトでタイル化したアイテムを敷き詰める

ファイル2つが必要

最初にカテゴリーの1カラム化をします。STINGER管理の設定は1カラムですが、ブレイクポイント毎にコンテナ数を制御しています。これにより、複数のカラムがあるように見せます。

function.php

if ( !function_exists( 'st_wrap_class' ) ) {
     /**
      * 「カラム変更」に基づいてクラス名を出力
      */
     function st_wrap_class() {
          global $wp_query;

          if ( is_single() or is_page() or /* is_category() */ ) {
               $postID = $wp_query->post->ID;
               $column1 = get_post_meta( $postID, 'columnck', true );
          } else {
               $column1 = '';
          };

          $stdata11 = get_option( 'st-data11' );

          if ( ( is_home() && $stdata11 === 'yes' ) || ( $column1 === 'yes' && !is_home() ) ) {
               $wrapclass = 'colum1';
          } elseif ( ( is_home() && $stdata11 === 'lp' ) || ( $column1 === 'lp' && !is_home() ) ) {
               $wrapclass = 'colum1 lp';
          } else {
               $wrapclass = '';
          }

          echo esc_attr( $wrapclass );
     }
}

これを末尾に追加すれば1カラムの設定に！特定のカテゴリーのみグリッドレイアウトにしたければ、is_category(特定のカテゴリーID)とします。

次はトップページやカテゴリーの表示と、通常の表示にする場合の記述です。特定のカテゴリーをグリッドレイアウトで、それ以外は通常の表示になるように条件分岐させます。

itiran-thumbnail-on.php





	




					
						
					
						
					
				
						
				





		
			
					
						
					
						
					
				
			
				
						
					

				
					
						
						 
							-

							 ', ', ' ); ?>
          
				
				
					
				
			
		


	
		記事がありません

トップページと特定のカテゴリーページなら.flexbox、それ以外は.kanrenとなるようにセレクタを切り替えます。肝は4行目と6行目の記述。5行目のループ内外でif構文を書いています。8-20行目は.flexboxの時のものですが、適宜調整して使って下さい。

それだけだとトップページに「else」に該当する記事が表示されてしまうので、1-3行目でトップページの記事一覧から非表示にしたいカテゴリーを追加させます。これで特定のカテゴリーだけがグリッドレイアウトになりました。また、サイドバーが邪魔なのでごっそり削っています。

Adsense336

#wrapperのmax-widthだけではまだ足りない

CSS

#wrapper {
	max-width: 100%;
	padding: 0;
}
.home main,
.home .colum1 main,
.category-/*特定のカテゴリーID*/ .colum1 main {
	padding: 0;
}

img.size-full,
img.size-large {
	margin-bottom: 0;
}

/*SNS*/
.top-wbox-u {
	padding: 10px 20px;
}

/*footer*/
#footer {
	margin: 0;
}

/*非表示*/

/*category*/
.category #breadcrumb,
.category .post {
	display: none;
}

/*
スマートフォン表示*/

.flexbox {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	height: auto;
}
.item {
	position: relative;
	width: 100%;
}
.title {
	position: absolute;
	top: 0;
	left: 0;
	text-shadow: 0 0 8px rgba(0,0,0,0.5);
	opacity: 0;
	width: 100%;
	height: 100%;
	color: #fff;
	font-size: 17px;
	text-indent: 1em;
	padding: 0;
}

/*media Queries タブレットサイズ（600px以上）
----------------------------------------------------*/
@media only screen and (min-width: 600px) {

.flexbox {
	height: 413vw;
}
.category-/*特定のカテゴリーID*/ .flexbox {
	height: 177vw;
}
.item {
	width: 50%;
}

/*-- ここまで --*/
}

/*media Queries タブレット大サイズ（800px以上）
----------------------------------------------------*/
@media print, screen and (min-width: 800px) {

.flexbox {
	height: 190vw;
}
.category-/*特定のカテゴリーID*/ .flexbox {
	height: 86vw;
}
.item {
	width: 33.3%;
}

/*-- ここまで --*/
}

/*media Queries PC兼タブレット横サイズ（960px以上）
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {

.flexbox {
	height: 116vw;
}
.category-/*特定のカテゴリーID*/ .flexbox {
	height: 52vw;
}
.item {
	width: 25%;
}

/*-- ここまで --*/
}

/*media Queries PC専用サイズ（1281px以上）
----------------------------------------------------*/
@media print, screen and (min-width: 1281px) {

.flexbox {
	height: 78vw;
}
.category-/*特定のカテゴリーID*/ .flexbox {
	height: 36vw;
}
.item {
	width: 20%;
}

/*-- ここまで --*/
}

やると分かるんですが、#wrapperのmax-widthを画面いっぱいにすると、フッターがはみ出します。邪魔なので21-24行目でmarginを調整しています。height: ？vw;としているので、高さを手動で揃えなければならないのが手間ですね。Javascriptに頼らず、どうにか自動化できないものか。

独自の解釈でやっているところがあるので、間違ったり、もっと良いやり方や方法があるかもしれませんが、参考までにどうぞ。

完成したものがコチラ

ASAMI WATANABE Jewerly Works
www.asamiwatanabe.com

参考URI:

CSS(Flexbox)だけでタイルレイアウト(Masonry)を表示するサンプル
https://digipress.digi-state.com/tech/pure-css-flexbox-masonry-sample/

この記事を書いた人
最新の記事

Akky

会社員：有限会社宮坂整骨院

横浜で整体を生業としています。当ブログは、趣味/仕事/商品紹介/気になったことを記事にしていきます。共感するところが少しでもあれば、SNSでアクションを起こしていただけると嬉しいです。

最新記事 by Akky (全て見る)

新年ですね！目標が決まりました - 2017年1月13日
STINGER PLUS+をゴリゴリのグリッドレイアウトにカスタマイズ - 2016年9月13日
整体でリピート率を上げる為に知っておきたいこと - 2016年5月5日