いとをかし

みつけた「をかし」=「興味深い」モノを書き留める個人ブログ。自称・鉛筆彫刻家

Wordpress マテリアル

wordpressテーマ「マテリアル」でPC閲覧時も記事を横2列表示へ変更する方法

2016/02/26

thumbnail.jpg

当ブログで採用してるwordpress用テーマ「マテリアル」はレスポンシブ対応になっているため、タブレットやスマホなどの画面サイズに応じて表示が変化するように作られています。

通常、PCや比較的大きい画面のタブレットでは横一列に3記事並び、小さ目のタブレットでは2記事ずつ横並びに表示されるように作成されていますが、このたびPC画面・大きいタブレット画面での表示も横に2記事並ぶようにカスタマイズを実施してみました。

なかなか手こずったので喜びもヒトシオ。カスタマイズ方法をまとめておきたいと思います。

スポンサーリンク

自力では無理だったので製作者様に相談

今回のカスタム以外にもデザイン部分を大きく変えてたんですが、この部分だけどうしてもできなかったので製作者のNobuo(@Nobuo_Create)さんに泣きつくことになりました・・。

htmlとcssだけなら自力でやる気はあるけど、phpが絡む案件は完全にお手上げなのでね。。

お忙しい中、無料のテーマにも関わらず回答頂いたことにとても感謝しています。ありがとうございました。

カスタマイズ手順と注意事項について

このカスタマイズを実施するとテーマのカスタマイザでの表示記事件数の変更と、TOPページにあるmoreボタンの機能が無効化されます。それでもいいという方だけお試しくださいませ。(記事表示件数については代替え案を紹介してます)

あと、誤記などで表示が崩れる可能性はあるため、必ずバックアップを取ってから作業を行いましょう。ノーバックアップ・ノーセキニン。こちらもお約束です。

※今回のカスタマイズはマテリアルのver2.7.4に公式の子テーマを有効化している環境になります。

関連→トップページのmoreボタンを消す方法 | ブログ用WordPressテーマ マテリアル
関連→マテリアル公式子テーマをご用意しました | ブログ用WordPressテーマ マテリアル

1.loop.phpの編集

loop.phpで、下記の3箇所を削除します。探すのは大変なのでページ内検索がオススメ。

<div class="hide">
<p class="more-link main-color-background">more<br><span class="lsf">down</span></p>
</div><!-- .hide -->

削除が完了したら保存してください。

2.style.cssの修正

まず、下記の内容をコピーします。

.big-box{
	padding-left: 5%;
	padding-right: 5%;
}
.post{
	width: 47%;
	float: left;
	margin-right: 6%;
}
.col-3{
	margin-right: 6%;
}
.col-2{
	margin-right: 0;
}
.clear3{
	clear: none;
}
.clear2{
	clear: both;
}

コピーができたら子テーマ側のstyle.cssに2ヶ所貼り付けます。

マテリアルのカスタマイズ1

一箇所目は子テーマ側のPC表部分。「タブレット(大)用サイドバーがメインカラムの下に回ります」という文のすぐ上あたりですね。

マテリアルのカスタマイズ2

二箇所目は「max-width:1057px」の部分。「タブレット(小)用記事の並びが2列になります」の表示の上すぐ上ですが、一箇所目と変わりまして「」の上に貼り付けてください。

この状態だとスマホ表示も横二列になってしまいます。そこで下記のコードも追加します。

.post {
    width: 100%;
}

これをコピーしたら、スマホ表示部分に貼り付けて保存してください。

マテリアルのカスタマイズ3

これでスマホ以外の表示がすべて横二列になっているはずです。

※ちなみに今回貼り付けたコードはstyle.css内の「max-width:700px」表示部分のすぐ下にあるコードになります。

もし、すでに子テーマ側で追加したcssがあると上書きされることでデザインが崩れる可能性はあるので、その辺は各自修正してください。

3.ダッシュボートの「表示設定」で表示件数の変更

loop.phpの修正をした時点で、テーマカスタマイザから表示記事件数の変更が不可になります。

そのため、今後はダッシュボード→設定→表示設定にある「1ページに表示する記事数」からの変更が必要になります。大した手間ではないので特に問題はないですね。

wordpress表示件数設定

ここで希望の件数を選択してください。ちなみに奇数件数にするとはみ出して収まりが悪いので偶数件数がオススメですね。

・・これで完了です。お疲れ様でした!

まとめ

思考錯誤の結果、無事完成できてよかったです。

かなり見栄えが変わるので、他の人と違うのが好きな人はお試しください。

まだまだカスタマイズの旅は続くのである・・!

ダウンロード先→ブログ用WordPressテーマ マテリアル
テーマの製作者様→Nobuo(@Nobuo_Create)さん | Twitter

-Wordpress, マテリアル