本お問い合わせホームブログカスタマイズはてなブログで横並びにスライドできる記事紹介を設置する方法2019年12月1日ツイートシェアはてブLINEPocket今回の記事では、はてなブログのPROユーザーが横にスライドできる記事紹介を作成する方法を紹介したいと思います。(スライダーもしくはカルーセルと呼ばれるものです)▲こういう機能です。当ブログのスマホから見たデザインの下側に配置しているので、参考にしてください。スマホから見ると、すっと指で動かせるので楽しいですし、なんかお洒落ですよね。私はこの機能に以前から並々ならぬ憧れを抱いておりまして、どうにかはてなブログで実現したいと思い、検索に検索を重ねたのですが情報が出てこねぇ...(あったと思ってコピペしても何故か使えねぇ...)という状態がずっと続いていました。同じようなはてなユーザーさんもきっとどこかにいらっしゃると思うので、当記事では私が最終的に利用しているコードをそのまま公開します。このコードは完全ど素人のキワモノですので欠点があり、なんと画像の縦幅が調節できません。(理由はわかりません、誰か教えてください)なので全部、同じサイズの写真を使用しないと高さが揃いません。ただの欠陥品じゃねぇか!と思う方もいらっしゃると思いますが、その点、踏まえたうえでもなおスライド式の記事紹介に憧れてる方もいらっしゃる(はず)なので完全に自己責任で、参考に利用したい方は下記事にお進みください。検索をかけたのですがはてなブログでスライダー式の記事紹介を作るということに関しては、あまり情報がありませんでした。こちらの記事を見つけたときにやったと思ったのですが、なぜかうまく使いこなせずに挫折。スライド」で検索して参考にするコードを探しました。採用させていただいたのはこちらの記事で紹介されていたコードです。delaymania.comこちらのコードを参考に、はてなで実装できるスライドに編集しました。2、フッターにコードを貼る私が最終的に使用しているコードは以下のものになります。内容として反映されるHTMLの部分です。src=”画像URL”><p>記事タイトル</p></a></div></div>画像URL、記事URL、記事タイトルは全部自分で入力しています。5つ分の記事が紹介できるようになっていますが、減らすことも増やすことも可能です。次にデザインコードです。70%;}}</style>最初に述べたように、このコードだと画像の縦幅を揃えることができません。(申し訳ありません)なので5枚のスライドでは、すべて元が同じサイズの画像を使用してください。(地味に面倒でした)同じカメラで撮影した写真なら、大体サイズは同じなので、何とかなるかと思います。3、テンプレート(テーマ)を利用するのもおすすめまだはてなブログをはじめて日が浅いという方でしたらテンプレート(テーマ)を利用するレスポンシブル設定にするというのもおすすめです。▼テーマの利用方法については、下の記事を参考にしてください。はてなブログのデザインを手軽にお洒落に設定する方法【初心者ブロガー向け】テーマストアに「ZENO-TEAL」というテーマがありまして、現行これが一番ワードプレスに近しいブログが作れるような気がします。blog.hatena.ne.jpこのテーマを利用したスライドの作り方が下の記事で紹介されていました。参考になるかと思います。yantzn.com4、いっそワードプレスに引っ越すのもアリかもHTMLやCSSが苦手だけど、どうしてもデザインに拘りがあるという方はいっそワードプレスに引っ越すというのも選択肢としてはアリだと思います。無料WordPressテーマというものがあり、かなりクオリティは高そうです。有料のテーマであればJIN(ジン)ストークSANGOが、ブログではよく見かける人気の3TOPになるテーマだと思います。(やはり有料なだけあってどれもデザイン素敵ですよね)ちなみに私はサルワカさんのファンなので使うなら絶対にSANGOと決めています。saruwakakun.com宜しければ参考にしてください。まとめ|指でスッとするスライド式の記事紹介ということで今回の記事では、はてなブログでスライド式の記事紹介をつくるコードを紹介しました。不備もあるかもしれませんが、サポートや保証は出来かねますので、自己責任でお使いいただければ幸いです。私自身、今年はサイトのデザインを自由自在にできるようなるというのが目標なので、精進していきたいと思います。素人の情報提供で、不完全なものではありますがどなたかの参考になれば幸いです。WINGテーマ:SANGOドメイン:お名前.comを使用しています。ASPで一番愛用しているのは、旅行案件が多い「バリューコマース」さんです。無料登録はこちらから利用しているASP一覧はこちらになります。当ブログのデータが、ブログ初心者さんの参考になれば幸いです。WING」を選んだ理由この記事を書いた人ぱじゃねこwriter平成生まれのマイペースな旅好き。現在まで30か国、1人旅バックパッカー経験あり。国内・海外の旅行情報を含め、これから旅行に出かける人がわくわくするブログを目指しています。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。トラベルグッズ旅のノウハウバイク資格・語学レビューブログ恋愛コラムプロフィールぱじゃねこ平成生まれのマイペースな旅好き。旅行、ツーリング、読書、映画鑑賞など自分の好きなものを集めた雑記ブログ(月間最高22万PV)を気ままに運営中。愛用カメラはGRIIです。