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

こんにちは。オークニ（@okuni_jiwaru）です！

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

しかもコピペで。

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

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

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

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

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

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

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

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

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

だいたい、イケてるサイトで使われている例としては、記事下での関連記事の紹介や、ヘッダー下にておすすめ記事を紹介するパターンが多いです！

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

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

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

作り方

HTML

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

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

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

CSS

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

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

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

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

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

これで完了です！

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

まとめ

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

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

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

 

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