MENTAやTimeTicketでZoomオンライン指導・メンタリングを行っています。
WordPressやHTMLサイトのトラブル、SEO対策のご相談、HTML・CSS・WordPressなどのレクチャーなどが可能です。


MENTAでメンタリング受付中！


TimesTicketでZoomオンライン指導！(HTML/CSS/WordPress/SEO対策)

シンプル！レスポンシブ！ピンタレスト風～！！なWordPressテーマ「Surfarama」其ノ弐

投稿日投稿者root-0132件のコメント

いやいや～。

前回ピンタレスト風テーマSurfaramaを紹介し、軽～い気持ちで使ってみようと思ったんですが、こやつ、中々の曲者！！

icons-photo02

いや、色々欲を出して無限スクロール infinitscrollや画像遅延ロードlazy load を入れたいなんて言ったからなんですけどね。

軽い気持ちで発言してすんません！すんません！！
結論から申し上げると、infinitscroll も lazy load もプラグインでは上手く動きませんでした。
読み込みのタイミングやmasonryのアニメーションに不具合が出てしうので、結局JS直接編集でした。

2014.09.14ちょっとした変更で読み込み速度を改善しました。surfarama其ノ参。サムネイルの読み込みについて。

それらのプラグインはこっちのブログに導入したので後ほど公開するとして、
今回のカスタマイズは
１．Masonryでディスプレイサイズを変えていくと、変な余白が出るときがある
２．ので、Masonryでアニメーションさせるコンテンツは全て%指定にする
３．プラグインではなく、jQueryでinfinite scrollを導入
というカスタマイスを行ってみました。

結局、function.phpにも手を加えることになってしまいましたよよよ；；
プログラミングの知識は下の下なので、参考になるかは分かりませんが、記録として残しておきます。

Surfaramaでディスプレイサイズを変えていくと、変な余白が出るときがある問題

テーマ配布元：
Surfarama（ver1.1.0）
サイトリンク：
[browser-shot width=”600″ url=”http://wordpress.org/themes/surfarama”]

こちらのページで、プレビューを見て、ディスプレイサイズを変えていくと
・変に余白が出る
・綺麗に揃わない時がある
・メニューよりはみ出る時がある
といったタイミングがちょいちょいあり、気になりました。
各種モバイルではそうならないように設計されてるんでしょうね。

surfarama08

これは、CSSとJavascriptでかなり細かくwidth指定がされていたからだと思います。

var width = $(window).width();

if (width > 1000) {
	var colWidth = 240;
} else if ((width > 961) && (width < 1000)) {
	var colWidth = 232;
} else if ((width > 930) && (width < 961)) {
	var colWidth = 226;
} else if ((width > 780) && (width < 900)) {
	var colWidth = 252;
} else if ((width > 730) && (width < 770)) {
	var colWidth = 244;
} else if ((width > 700) && (width < 721)) {
	var colWidth = 228;
} else if ((width > 601) && (width < 641)) {
	var colWidth = 305;
} else if ((width > 577) && (width < 601)) {
	var colWidth = 284;
} else if ((width > 500) && (width < 577)) {
	var colWidth = 273;
} else if ((width > 400) && (width < 481)) {
	var colWidth = 226;
} else if ((width > 321) && (width < 361)) {
	var colWidth = 320;
} else if ((width > 290) && (width < 321)) {
	var colWidth = 290;
} else if ((width > 0) && (width < 241)) {
	var colWidth = 290;
}

var $container = $('#grid-wrap').masonry({
  		  itemSelector: '.grid-box',
	  columnWidth: colWidth
  });
// layout Masonry again after all images have loaded
$container.imagesLoaded( function() {
  $container.masonry({
  		  itemSelector: '.grid-box',
	  columnWidth: colWidth
  });
});

style.cssは下記

@media only screen and (max-width: 980px) {
	#container {
		width: 98.4%;
		max-width: 980px;
	}
	
	#search-box {
		width: 98.4%;
		max-width: 980px;
	}
	
	#grid-wrap {
		width: 936px;
	}
	
	.grid-box {
		width: 212px;
	}
	
	.grid-box.featured:first-child,
	.grid-box.latest {
		width: 444px;
	}

}
/* メディアクエリめっちゃあります。 */

ちなみに、#grid-wrapはMasonryのコンテナ、
.grid-boxがアニメーションする各ボックス（itemSelector）ですね。

Masonryでアニメーションするコンテンツは全て%指定にする

script.jsのcolWidthをやめる

columnWidth: colWidth

を廃止しました。

#grid-wrapは全部100%に

#grid-wrap {
	width: 100% !important;
}

.grid-boxのwidthを初期化して、全部％指定に(marginも0に)

４列にしたかったら25%、２列にしたかったら50%に変更します。

	.grid-box {
		width: 25%;
		
	}
	
	.grid-box.featured:first-child,
	.grid-box.latest {
		width: 25%;
		
	}

余白を設けたのに余白ができない！！なんで！！

余白がなくなるので、paddingは10pxにします。
（.grid-boxには元々box-sizing: border-box;が適用されているので余白文はwidthに含まれます。）

「なのに余白が消えない！なんで！！」

と思ったら.grid-boxには初期値でbackground-colorが効いてました。

.grid-box {
	background-color:transparent!important;
}
.grid-box article {
	background-color: #359bed;
}

.grid-boxの背景を透明にして、中のarticleに初期の色を設定すれば解決です！
これなら、surfamaのテーマカスタマイズで「Set the Image border」を変更しても影響がありません。

surfarama09

@media メディアクエリの前の各要素を初期化するまとめCSS

/* grid-wrapのwidthはどのディスプレイでも100% */
#grid-wrap {
	width: 100% !important;
}

/* .grid-boxの初期CSS上書き分 */
.grid-box {
width: 25%;
margin:0;
padding:10px;
background-color:transparent!important;
}

/* 最新記事の幅も一定に */
.grid-box.featured:first-child,
.grid-box.latest {
	width: 25%;
	margin:0;
}

/* 
articleの色は初期値を設ける。
テーマのカスタマイズを行ったらインラインで上書きされるので問題なし
 */
.grid-box article {
	background-color: #359bed;
}

infinite scrollを導入

最後になりましたがinfinite scrollを導入します！

infinite scroll のダウンロード

配布元：
jQuery infinite scroll
サイトリンク：
[browser-shot width=”600″ url=”https://github.com/paulirish/infinite-scroll”]

ダウンロードしてsurfama/library/jsにminファイルだけアップします。

function.phpの変更

各スクリプトはfunction.phpで読み込まれているので、記述を追加します。

if ( ! function_exists( 'surfarama_custom_scripts' ) ) :
  function surfarama_custom_scripts() {
    wp_register_script( 'imagesloaded', get_template_directory_uri() . '/library/js/imagesloaded.pkgd.min.js');
    wp_register_script( 'masonry', get_template_directory_uri() . '/library/js/masonry.pkgd.min.js');
    wp_register_script( 'infinitescroll', get_template_directory_uri() . '/library/js/jquery.infinitescroll.min.js');
    wp_enqueue_script( 'surfarama_custom_js', get_template_directory_uri() . '/library/js/scripts.js', array( 'jquery', 'masonry', 'infinitescroll', 'imagesloaded' ), '1.0.0' );
    wp_enqueue_style( 'surfarama_style', get_stylesheet_uri() );
  }
endif;
add_action('wp_enqueue_scripts', 'surfarama_custom_scripts');

script.jsにinfinite scrollの記述を追加

  var $container = $('#grid-wrap').masonry({
    itemSelector: '.grid-box',
  });
  // layout Masonry again after all images have loaded
  $container.imagesLoaded( function() {
    $container.masonry({
       itemSelector: '.grid-box',
    });
  });
  $container.infinitescroll({
    navSelector  : '.pagination',    // ナビゲーション
    nextSelector : '.pagination a:first',  // 次ページへのリンク
    itemSelector : '.grid-box',     // 次ページ内で探す要素
    loading: {
      msgText: 'Loading',
      finishedMsg : 'Load Finished' ,
      img: '任意のローディング画像のパス',
    }
  },
  // コールバック
  function( newElements ) {
    var $newElems = $( newElements );
    $newElems.imagesLoaded(function(){
    $container.masonry( 'appended', $newElems, true );
    });
  });

ローディングアニメーションの装飾

infinite scrollはロード中のテキスト等が#infscr-loadingというボックスに囲まれて出力されるので、CSSの追加も簡単です。

#infscr-loading {
	width: 200px;
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -100px;
	padding: 10px;
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid #ccc;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	text-align:center;
	color:#999;
}

こんな感じにしてみました！

完成イメージ

４カラム

surfarama10

３カラム

surfarama11

２カラム

surfarama12

１カラム

surfarama13

オスカルム

surfarama14

ついでに入れたプラグイン

最初の読み込みに時間が掛かったりすると、レイアウトが上手くいかなかったり？
（当方回線は貧弱です。）
なので最終的にはHeadCleanerを入れるつもりです。（CSS JSをサーバーにキャッシュ）

Full Page Load

今回はページの読み込みが終わるまでローディング画面を表示してくれる下記のプラグインを入れたところ、綺麗に動くようになりました。

配布元：
Full Page Load
サイトリンク：
[browser-shot width=”600″ url=”https://wordpress.org/plugins/full-page-load/”]

今後の展望

まだまだやりたいことは尽きませんね。
できれば複数名でサイトを運営していく形にしたいので、
デザインのカスタマイズはもちろんですが、

・タイトルが長くても全部出ちゃう問題
・いちいちアイキャッチに登録するのメンドイ問題

を解決したいですね。それぞれ目星はついてますが。
がんばるぞ！！

参考にしたサイト

わからなさすぎて色々調べてたら、
たくさんありすぎて分からなくなってきました。

皆様ありがとうございました。
きっとみなさんの参考にもなるサイト様があると思うので全部のっけときます！

※masonry infinitscrollのオプション値が変更になってるものもあるみたいなので気をつけて！

Masorny + infinite scroll
http://works.coldsleep.jp/blog/sotd/
http://blog.mayucom.jp/archives/1705/

http://web.showjin.me/jquery-masonry_imagesloaded.html
http://webdrawer.net/javascript/jquerymasonry.html

infinite scrollだけ追加

最終参考

http://kachibito.net/web-design/masonry-infinite-scroll.html
http://qiita.com/soramugi/items/2677a3c9d106e8bfeb0f
http://works.coldsleep.jp/blog/sotd/
http://webdrawer.net/javascript/jquerymasonry.html
デモ
http://webdrawer.net/sample/masonry/masonry06.html
http://snap.ofthedead.info/

isFitWidth: true,
http://www.koikikukan.com/archives/2012/10/19-015555.php

Masonry を使って要素が重なってしまったときの対処法
http://karur4n.hatenablog.com/entry/2014/02/16/175710

おすすめコンテンツ

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA