はてなブログで横にさっとスライドできる記事紹介を設置する方法

指でスッとするスライド式の記事紹介がほしい

今回の記事では、はてなブログのPROユーザーが

  • 横にスライドできる記事紹介

を作成する方法を紹介したいと思います。

(スライダーもしくはカルーセルと呼ばれるものです)

f:id:eno1081:20190324143825j:image

▲こういう機能です。当ブログのスマホから見たデザインの下側に配置しているので、参考にしてください。

スマホから見ると、すっと指で動かせるので楽しいですし、なんかお洒落ですよね。

私はこの機能に以前から並々ならぬ憧れを抱いておりまして、どうにかはてなブログで実現したいと思い、検索に検索を重ねたのです

情報が出てこねぇ…

(あったと思ってコピペしても何故か使えねぇ…)

という状態がずっと続いていました。

同じようなはてなユーザーさんもきっとどこかにいらっしゃると思うので、当記事では私が最終的に利用しているコードをそのまま公開します。

コピペOKです。

が、このコードは完全ど素人のキワモノですので欠点があり、なんと画像の縦幅が調節できません。

(理由はわかりません、誰か教えてください)

なので全部、同じサイズの写真を使用しないと高さが揃いません。

ただの欠陥品じゃねぇか!

と思う方もいらっしゃると思いますが、その点、踏まえたうえでもなおスライド式の記事紹介に憧れてる方もいらっしゃる(はず)

なので完全に自己責任で、参考に利用したい方は下記事にお進みください。

1、はてなブログでスライダーを実現する過程

色々と検索をかけたのですが

  • はてなブログでスライダー式の記事紹介を作る

ということに関しては、あまり情報がありませんでした。

こちらの記事を見つけたときにやったと思ったのですが、なぜかうまく使いこなせずに挫折。

(うまくできる方もいらっしゃると思うので、参考にしてください)

www.okuni.me

なので「CSS スライド」で検索して参考にするコードを探しました。

採用させていただいたのはこちらの記事で紹介されていたコードです。

delaymania.com

こちらのコードを参考に、はてなで実装できるスライドに編集しました。

2、フッターにコードを貼る

私が最終的に使用しているコードは以下のものになります。

まずは内容として反映される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つ分の記事が紹介できるようになっていますが、減らすことも増やすことも可能です。

 次にデザインコードです。

こちらも一緒にコピペして貼ってください(どこでもOKですが、先ほど貼ったコードの下部などが分かりやすいと思います)

 

<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枚のスライドでは、すべて元が同じサイズの画像を使用してください。 

(地味に面倒でした)

同じカメラで撮影した写真なら、大体サイズは同じなので、何とかなるかと思います。

3、テンプレート(テーマ)を利用するのもおすすめ

まだはてなブログをはじめて日が浅いという方でしたら

  • テンプレート(テーマ)を利用する
  • レスポンシブル設定にする

というのもおすすめです。

▼テーマの利用方法については、下の記事を参考にしてください。

www.nekopajamas.net

テーマストアに「ZENO-TEAL」というテーマがありまして、現行これが一番ワードプレスに近しいブログが作れるような気がします。

blog.hatena.ne.jp

このテーマを利用したスライドの作り方が下の記事で紹介されていました。

参考になるかと思います。

yantzn.com

4、いっそワードプレスに引っ越すのもアリかも

HTMLやCSSが苦手だけど、どうしてもデザインに拘りがあるという方は

  • いっそワードプレスに引っ越す

というのも選択肢としてはアリだと思います。

無料のワードプレステーマであれば

というものがあり、かなりクオリティは高そうです。

wp-cocoon.com

有料のテーマであれば

が、ブログではよく見かける人気の3TOPになるテーマだと思います。

(やはり有料なだけあってどれもデザイン素敵ですよね)

ちなみに私はサルワカさんのファンなので使うなら絶対にSANGOと決めています。

saruwakakun.com

宜しければ参考にしてください。

まとめ

ということで今回の記事では、はてなブログでスライド式の記事紹介をつくるコードを紹介しました。

不備もあるかもしれませんが、サポートや保証は出来かねますので、自己責任でお使いいただければ幸いです。

また私自身、今年はサイトのデザインを自由自在にできるようなるというのが目標なので、精進していきたいと思います。

f:id:eno1081:20190324143624p:plain

素人の情報提供で、不完全なものではありますがどなたかの参考になれば幸いです。

それでは、最後まで記事を読んで下さり、ありがとうございました!

ブログのカスタマイズに関する他の記事

www.nekopajamas.net

www.nekopajamas.net

www.nekopajamas.net

コメントを残す

メールアドレスが公開されることはありません。