# ブログカスタマイズ

【JINカスタマイズ】トップページ下に横スクロールできるスクエア画像を並べてみた

今回はWPテーマ『JIN』のトップページ下に横スクロールできるスクエア画像を並べるカスタマイズを紹介します。

これを導入するだけで、トップページがめちゃくちゃおしゃれになりますよ。

特にガジェットを紹介しているブログなんかに最適なカスタマイズだと思います。

上の画像がPC画面、下の画像がスマホ画面です。

AFTER

こんな感じで、PC・スマホの両対応でおすすめのアイテムなどをバーっと並べることができます。

しかも、表示できる画像数は(おそらく)無制限

カスタマイズもそんなに難しくないので、気になった人はぜひ導入してみてください。

カスタマイズは自己責任でお願いいたします

カスタマイズに必要なCSS

まずはCSSの追記から。

外観カスタマイズ追加CSS と進み、下記のコードを追加CSSにコピペしてください。

/**スクエア画像を並べる**/
.horizontal_scroll {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 15px 5px;
  display: -ms-flexbox;
  display: flex;
}
.horizontal_scroll > li {
  width: 90%;
  min-width: 210px;
  font-weight: bold;
  font-size: 0.8em !important;
}
.horizontal_scroll > li:first-child {
  padding-left: 0px !important;
}
.horizontal_scroll img {
  width: 180px;
  height : 180px;
  object-fit: cover; /*画像をスクエアにトリミング*/
  vertical-align: bottom;
  border-radius: 15px;/*角の丸み*/
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);/*画像の影*/
  margin: 5px 15px 15px -5px;
  transition: .3s ease-in-out;
}
.horizontal_scroll img:hover {
  transform: translateY(-5px);
}/*クリック時に浮かぶ*/

簡単にコードの紹介をしていきます。

object-fit: cover;/*画像をスクエアにトリミング*/

このコード1つで、画像をスクエアに自動トリミングしてくれます。

ただし、センター合わせでトリミングされるので、見せたいモノが中心に写っている画像を使用してください。

また、デフォルトでは僕のブログと同じ設定で、スクエア画像の角を少し丸くしています。

もし、角をシャキッとさせたい場合は、

border-radius: 15px;/*角の丸み*/

の15pxを「0px」に変更してください。

ちなみに、タイトルの文字を横棒で挟んだようなデザインは「for JIN」さんのカスタマイズをアレンジして使わさせていただいてます。

僕のブログで勝手にコードの紹介をするとマズそうなので、詳しくは「for JIN」さんをご覧ください。

スクエア画像を配置する

続いて、スクエア画像を配置する手順を紹介します。

まずは 外観ウィジェット と進み、トップページ下に「テキスト」のウィジェットを追加します。

そして、テキストのウィジェット内に下記のコードを追加します。

<ul class="horizontal_scroll">
  <li><a href="https://リンク先URL"><img src="https://画像URL"/></a>
  <div>Sample</div></li>
</ul>

「タイトル」と記載しているところは自由に変更してください。僕のブログでは「PICK UP ITEM」としています。

リンク先URLや画像URLは、それぞれ置き換えてください。

「Sample」となっているところにはアイテム名などを入れてください。不要な場合は<div>〜</div>を削除でOK。

また、画像を複数表示したい場合は、<li>〜</li>の部分をコピーして増やすことで、その分だけアイテムを追加できます。

注意点

1つ注意点として、IEのブラウザで表示する際には画像のアスペクト比が崩れてしまいます

自分で作っておいて何ですが、僕には対処法が分からないので、この点が気に入らない場合は導入を見送ってください。

今どきIEで見る人はごく少数だと思って、僕は気にしないことにしています。

まとめ

今回は『JIN』のトップページ下に、横スクロールできるスクエア画像を並べるカスタマイズを紹介しました。

僕が知る限りでは、こういったカスタマイズを導入しているブログは無いと思うので、他のJINユーザーと差別化を図りたい人におすすめです。

正直公開しようか迷ったカスタマイズですが、みんなにも使ってみて欲しいと思い、無料で公開してみました。

僕は『JIN』のテーマしか使ったことがないので保証はできませんが、もしかしたら他のテーマでも使えるかも?しれません。

もし導入した人がいたら、ぜひSNSなどで感想をお聞かせいただければ幸いです!

えふぃる
えふぃる
我ながら、なかなか良いカスタマイズができたと思う(自画自賛)
この記事のURLとタイトルをコピーする