はてなブログで横並びにスライドできる記事紹介を設置する方法
今回の記事では、はてなブログのPROユーザーが
- 横にスライドできる記事紹介
を作成する方法を紹介したいと思います。
（スライダーもしくはカルーセルと呼ばれるものです）
▲こういう機能です。当ブログのスマホから見たデザインの下側に配置しているので、参考にしてください。
スマホから見ると、すっと指で動かせるので楽しいですし、なんかお洒落ですよね。
私はこの機能に以前から並々ならぬ憧れを抱いておりまして、どうにかはてなブログで実現したいと思い、検索に検索を重ねました。
が
情報が出てこねぇ…
（あったと思ってコピペしても何故か使えない）
同じようなはてなユーザーさんもきっとどこかにいらっしゃると思うので、当記事では私が最終的に利用してたコードをそのまま公開します。
コピペＯＫです。
が、このコードは完全ど素人のキワモノですので欠点があり、なんと画像の縦幅が調節できません。
（理由はわかりません、誰か教えてください）
なので全部、同じサイズの写真を使用しないと高さが揃いません。
ただの欠陥品じゃないか
と思う方もいらっしゃると思います。
その点、踏まえたうえでもなおスライド式の記事紹介に憧れてる方もいらっしゃる場合は完全自己責任という形で、参考にしてください。
はてなブログでスライダーを実現する過程
色々と検索をかけたのですが
- はてなブログでスライダー式の記事紹介を作る
ということに関しては、あまり情報がありませんでした。
なので「CSS スライド」で検索して参考にするコードを探しました。
採用させていただいたのはこちらの記事で紹介されていたコードです。
こちらのコードを参考に、はてなで実装できるスライドに編集しました。
フッターにコードを貼る
早速ですが、私が最終的に使用しているコードは以下のものになります。
まずは内容として反映されるHTMLの部分です。
これをスライドを入れたい部分にコピーします（私は「デザイン」のスマホの「フッター」に貼っています）
<div class=”hatena-module-title”>
タイトル（おすすめ記事記事一覧など記入）
</div>
<div class=”slide-wrap”>
<div class=”slide-box”>
<a href=”記事URL”>
<img src=”画像URL”>
<p>記事タイトル</p>
</a>
</div>
<div class=”slide-box”>
<a href=”記事URL”>
<img src=”画像URL”>
<p>記事タイトル</p>
</a>
</div><div class=”slide-box”>
<a href=”記事URL”>
<img src=”画像URL”>
<p>記事タイトル</p>
</a>
</div><div class=”slide-box”>
<a href=”記事URL”>
<img src=”画像URL”>
<p>記事タイトル</p>
</a>
</div><div class=”slide-box”>
<a href=”記事URL”>
<img src=”画像URL”>
<p>記事タイトル</p>
</a>
</div></div>
画像URL、記事URL、記事タイトルは全部自分で入力しています。
5つ分の記事が紹介できるようになっていますが、減らすことも増やすことも可能です。
次にデザインコードです。
こちらも一緒にコピペして貼ってください（どこでもＯＫですが、先ほど貼ったコードの下部などが分かりやすいと思います）
<style>
/* パソコンではタイル型で表示 */
.slide-wrap {
background-color: #fff;
display: flex;
margin: 0 auto;
max-width: 1080px;
width: 100%;
}
.slide-box {
height: auto;
margin-right: 1%;
width: 24%;
}
/* サムネイルとタイトルのスタイル調整 */
.slide-box a {
background-color: #fff;
color: #222;
display: block;
text-decoration: none;
}
.slide-box img {
display: block;
height: auto;
width: 95%;
}
.slide-box p {
font-weight: bold;
font-size:12px;
padding: 8px;
}
@media screen and (max-width: 479px) {
/*スライダー表示 */
.slide-wrap {
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
.slide-box {
flex: 0 0 70%;
}
}
</style>
最初に述べたように、このコードだと画像の縦幅を揃えることができません。
（申し訳ありません）
なので5枚のスライドでは、すべて元が同じサイズの画像を使用してください。
（地味に面倒でした）
同じカメラで撮影した写真なら、大体サイズは同じなので、何とかなるかと思います。
テンプレート（テーマ）を利用するのもおすすめ
はてなブログをはじめて日が浅いという方でしたら
- テンプレート（テーマ）を利用する
- レスポンシブル設定にする
というのもおすすめです。
▼テーマの利用方法については、下の記事を参考にしてください。
テーマストアに「ZENO-TEAL」というテーマがありまして、現行これが一番ワードプレスに近しいブログが作れるような気がします。
このテーマを利用したスライドの作り方が下の記事で紹介されていました。
参考になるかと思います。
いっそワードプレスに引っ越すのもアリかも
HTMLやCSSが苦手だけど、どうしてもデザインに拘りがあるという方は
- いっそワードプレスに引っ越す
というのも選択肢としてはアリだと思います。
無料のワードプレステーマであれば
というものがあり、かなりクオリティは高いです。
有料のテーマであれば
が、ブログではよく見かける人気の3TOPになるテーマだと思います。
（やはり有料なだけあってどれもデザイン素敵ですよね）
ちなみに私はサルワカさんのファンなので使うなら絶対にSANGOと決めています。
宜しければ参考にしてください。
※2021年追記：結局、ワードプレスに引っ越して「Sango」を利用しました。現在ではさらにテーマを変えて「SWELL」というテーマを愛用しています（勿論、記事スライド余裕で作れます）
まとめ｜指でスッとするスライド式の記事紹介
ということで今回の記事では、はてなブログでスライド式の記事紹介をつくるコードを紹介しました。
不備もあるかもしれませんが、サポートや保証は出来かねますので、自己責任でお使いいただければ幸いです。
またこの記事全体として「はてなブログPRO」利用者を想定して書いています。
よろしければ参考にしてください。
※他の記事でも書いていますが、PRO切替のタイミングに悩む人も多いと思います。経験上、月5000PVを超えているなら確実に切り替えたほうがいいです（本音を言えば、月3000PVくらいでも買えていいと思う）PROだとAdSenseが自由に貼れるので収益が上がりますし、月5000PVあればPRO年間費を払っても赤字になりません。何より独自ドメインは非常に重要なのでブログを今後も続けるつもりなら早めに切り替えるのが正解です。
サイトのデザインを自由自在にできるようなるというのが目標なので、精進していきたいと思います。
素人の情報提供で、不完全なものではありますがどなたかの参考になれば幸いです。
それでは、最後まで記事を読んで下さり、ありがとうございました！
はてなブログに関する他の記事
コメント