風の羅針盤 | Destination of winds.

【WordPress】関連記事をタイル風に並べて表示〜Simplicity,マテリアルカスタマイズ

time 2016/06/12  所要時間:約 4

【WordPress】関連記事をタイル風に並べて表示〜Simplicity,マテリアルカスタマイズ

こんにちは。ちゃぼP(@chabo0429)です。

WordPressのテーマですが、皆さんは何を使っていますか?

この風の羅針盤ではNobuoさん(@Nobuo_Create)制作のマテリアルを使わせてもらっていますが、かなりカスタマイズしてしまっていて、原型をとどめないほどになってしまいました・・・

トップページなんて、もはやサイドバー以外はほぼオリジナルがありませんが、今のデザインは実は結構お気に入りです(笑)

 

今回はまたまた部長のオーダーが入りまして、個別記事の下部に表示される「関連記事」を変更したいとのこと。

これまではリスト形式の表示で、左側にアイキャッチのサムネイル画像、その右側に記事タイトルならび、これが縦一列になって幾つか表示されていました。

これをgori.me風にしたい!」とのことで、上部にアイキャッチ、下部にタイトルで、これがワンセットになって横に幾つか並ぶ、いわゆるタイル風のデザインにしたいとのこと。

 

かなり大掛かりなデザイン変更となりましたが、基本的にスタイルシートだけの変更でなんとかなりそうだったので、チャレンジしてみました。

部長のブログはわいひらさん(@yhira)制作の「Simplicity」ですので、標準のテーマカスタマイザーで同じようなデザインに変更することは可能です。ただ、ちょっと枠線がなかったり、タイトル文字が大きかったりと微調整が必要な部分があり、モバイル表示もちょっと崩れてしまっていたので、以下のようにカスタマイズしてみました。

スポンサーリンク

1-1.【Simplicity】PC表示用コードをstyle.cssへ追記

まずは、PC表示用のデザインを整えます。こちらはSimplicity用のコードです。

ここでは、

  • テキストの左寄せ(中央寄せ解除)
  • 画像・テキストボックスの位置調整
  • テキストのフォントサイズ変更
  • マウスオーバー時の背景色の設定とボックス全体をリンク化
  • 枠線の設定

を行っています。これでPC表示での関連記事は以下のようになります。

関連記事01

今回は横3列、縦2列の配置としました。キレイに揃いましたね。

続いて、モバイル表示の調整を行います。

1-2.【Simplicity】モバイル表示用コードをstyle.cssへ追記

モバイルの表示は、PC用のデザインをそのまま使うと表示が崩れるので、モバイル専用のデザインを設定します。ちなみに、アクセス端末がモバイルか否かは、表示画面の幅で決まります。

ここでは、media screenのmax-widthプロパティを使って、表示する画面の横ピクセル数が「736px以下の場合」「359px以下の場合」の2パターンを設定します。

この「736px」は、iPadよりも小さい端末で適用されます。一般的な中型〜大型のスマホはここに含まれます。

「359px」については、iPhoneSEなどの4インチ以下の端末用です。

これを適用することで、モバイル表示はこんな感じでになります。

関連記事03

モバイル表示は、横幅が狭いので、横2列、縦3列としました。ちなみに特別なことはやっておらず、サイズと間隔の調整のみです。

2-1.【マテリアル】PC表示用コードをstyle.cssへ追記

ここでは、風の羅針盤のテーマ「マテリアル」用のカスタムコードを紹介します。

まずはPC表示用から。

やっていることはSImplicity版と同じです。出来上がりはこうなります。

関連記事02

文字の大きさは、Simplicity版より若干大きく、サムネイルを横長にしてみました。

追加でマウスオーバー時に「徐々に文字色が変化」するフェード効果を足しています。

それ以外は同じデザインです。続いてモバイル表示に進みます。

2-2.【マテリアル】モバイル表示用コードをstyle.cssへ追記

Simplicity版と同じで、ここでも端末の736pxの横幅表示をモバイルの判断材料とします。

これをstyle.cssに追加します。

関連記事04

出来上がりはこんな感じになります。ここでもサムネイルは横長表示です。

イイ感じに仕上がりました!!

さいごに

部長オーダーのテーマ改造計画でしたが、WordPressの改造は結構楽しいものです。

また、Simplicityはかなりたくさんのブログで採用しているテーマだと思いますので、改造することで個性が強調されますし、是非オススメです。

Simplicity、マテリアルを使用しているサイトでしたら、すぐに使えると思いますので、参考にしてみてください!

ご自身のサイトで使われる際は是非フォロー・コメントいただけると嬉しいです!!

部長ナビのページ・gori.meもヨロシクね!

↓ちゃぼPがスタッフを務める部長のサイト。最近彼は「発注」という言葉をよく使うが、金銭的な絡みは全くない。盛岡名物である「冷麺にわんこそばつける」が調子に乗っている最近の部長の口グセ。

↓部長が敬愛する師匠「g.O.R.i」さんのサイト。月間400万PVを超える巨大サイト。デザイン面で大いに参考にさせていただいている。とても見やすいサイトでスッキリしている。素晴らしい!

gori.me(ゴリミー) | iPhone・Mac・iPad・WatchなどのApple情報を中心とした最新ITニュースや商品レビューをお届け!
iPhone 6s / 6s Plus / SE、MacBook / MacBook Air / Pro、iMac、iPad Air / mini / Pro、そしてApple WatchなどのApple情報を中心とした最新ITニュースやガジェットのレビュー、グルメ情報、セール情報など幅広く情報をお届けするサイト。

スポンサーリンク

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

シェアしてくれると、ちゃぼPめっちゃよろこびます^^v

コメント

  • こんばんは

    いつも参考にさせていただいております。ありがとうございます。

    今回のマテリアルの関連記事の携帯用のコードについてなのですが、携帯で見てみると写真が小さくなります。どこを直せばよいのでしょうか?

    by 高橋 €2017年4月4日 10:54 PM

down

コメントする




*

この記事の関連カテゴリ

関連記事



スポンサーリンク