オークニズム

はてなブログでのカスタマイズやブログ運営ノウハウをメインに、オークニが気になったモノ、コトをシェアするブログ。

オークニズム

オークニのイズム満載ブログカスタマイズ

【コピペ推奨】CSSだけで横にスーってスライドするやつの作り方【スマホに最適】

f:id:a24o92:20180111111102p:plain

こんにちは。オークニ(@okuni_jiwaru)です!

僕は普段このブログで、はてなブログに特化したカスタマイズを主に書いているのですが、今回編み出した方法は、おそらくWordPressであろうと何であろうと使えると思います。

しかもコピペで。

かなり今風の、スマホに最適なカスタマイズかと思いますので、ぜひ皆さん参考にしていただければ幸いですm(_ _)m

なお、今回紹介しているCSSの中には、モダンでイケてるスマホに適したChromeやSafariを対象としているものが含まれているため、ie的なレガシー的なブラウザは…乙って感じですがご了承くださいませw

横にスーってさせるやつとは?

もしかしたら万が一、この記事タイトルとアイキャッチ画像ではまだ理解できていない人のために、誰もがよく目にする箇所をご紹介します。

f:id:a24o92:20180111113114j:plain

そう、スマホのGoogleの検索画面です。

いつからか、画像とかが横にスーってスクロールできるようになったじゃないですか!
あれのことを言ってましたw

つまり、Googleもお墨付きってことですね!^^

人気記事とか関連記事とかにおすすめ

では、このスーっをブログのどーゆー箇所に導入するのが良いか?

だいたい、イケてるサイトで使われている例としては、記事下での関連記事の紹介(僕の大好きなWordPressテーマ、SANGOパターンですね!)や、ヘッダー下にておすすめ記事を紹介するパターンが多いです!

あと、昔スポットライトでやっていたような各カテゴリー別ピックアップなんて使い方もシャレてますね!

f:id:a24o92:20180111115122j:plain

その他にも、バナーや特集ページや、とにかく目立たせたいコンテンツをスーっとさせると、より効果的かと思います。

それではさっそく、コピペいきましょう!

スポンサーリンク

作り方

HTML

<div class="recommends">
<ul class="carousel">
<li>
<a href="任意の記事URL" class="recommend-entry">
<img src="アイキャッチ画像URL" class="recommend-img" />
<p class="recommend-title">記事タイトル</p>
</a>
</li>
<li>
<a href="任意の記事URL" class="recommend-entry">
<img src="アイキャッチ画像URL" class="recommend-img" />
<p class="recommend-title">記事タイトル</p>
</a>
</li>
<li>
<a href="任意の記事URL" class="recommend-entry">
<img src="アイキャッチ画像URL" class="recommend-img" />
<p class="recommend-title">記事タイトル</p>
</a>
</li>
<li>
<a href="任意の記事URL" class="recommend-entry">
<img src="アイキャッチ画像URL" class="recommend-img" />
<p class="recommend-title">記事タイトル</p>
</a>
</li>
<li>
<a href="任意の記事URL" class="recommend-entry">
<img src="アイキャッチ画像URL" class="recommend-img" />
<p class="recommend-title">記事タイトル</p>
</a>
</li>
</ul>
</div>

もちろんJSを使わないので、コンテンツに関しては手動で入れるしかありません。各記事URLアイキャッチ画像記事タイトルを変更してくださいませ。

はてなブログの場合の挿入箇所

管理画面から「デザイン」→「カスタマイズ」→「ヘッダ」→「タイトル下」
すでにグローバルメニュー等入っている場合は、その下に。

f:id:a24o92:20180111123902j:plain

CSS

/* ↓↓はてなユーザーは横幅がMAXにならない場合入れた方が良いかも↓↓ */
#top-editarea {
width: 100%;
margin: 0 auto 0 auto;
}
/* ↓↓大衆向け↓↓ */
.recommends {
margin: 0;
width: 100%;
}
.recommends .carousel {
list-style-type: none;
background: #eee;
padding: 12px;
width: 100%;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
margin: 0;
}
.recommends .carousel li {
background: #fff;
margin: 10px;
text-align: center;
display: inline-block;
word-break: break-all;
}
.recommends a.recommend-entry {
display: block;
width: 250px;
font-size: 1rem;
font-weight: 600;
background: #fbfbf0;
box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
position: relative;
line-height: 1.5;
}
.recommends a.recommend-entry:hover {
box-shadow: 0 15px 30px -5px rgba(0,0,0,.15),0 0 5px rgba(0,0,0,.1);
transform: translateY(-4px);
transition: 0.2s;
background: #fbfbf0;
}
.recommend-title {
display:flex ;
padding: 0.5em 0.5em;
word-break: break-all;
width: 100%;
white-space: normal;
text-align: left;
}

冒頭で記した通り、はてなブロガーの場合、既存のグローバルメニュー等を制御してる#top-editareaってやつが邪魔する可能性があるので、その場合はそいつの横幅を100%にしてください。

クラス名等、既存のものと干渉がありそうな場合、適宜HTMLと併せてご自由に変更してくださいませm(_ _)m

 なお、上記のCSSはかなり個人的なノリがふんだんにあるため、色や隙間や幅や大きさなど、ご自身のブログと挿入箇所にマッチするようにカスタマイズお願いしますw

はてなブログの場合の挿入箇所

管理画面から「デザイン」→「カスタマイズ」→「デザインCSS」の中、一番下。

f:id:a24o92:20180111124149j:plain

これで完了です!

あとはご自身で実際の反映を見ながら調整していただければ良いかと!

まとめ

ちょっと、個人的な問題で執筆中に時間がなくかなり走り書きになってしまった感は否めない。。。笑

追って加筆修正の可能性は十分にありますが、とにかく上記のCSS使えば、今風のスーってやつがとっても簡単に実装できちゃいます!^^

不明点等はコメントなりTwitterなり、お問い合わせ頂ければ出来る範囲で答えます!

 

以上。オークニズムでした!😂