追記あり【雑記】画像比較スライダーを導入したかったんだけどうまくいかず、原因を探ってみたらどうやらはてな記法だからダメだったっぽい？→解決しました。

写真のビフォーアフターを載せたいときに便利な画像比較スライダーをわたしも導入したいなと思い、色々調べていました。 そんな中で見つけたのがこちらの2つのブログ。 www.taishogoes.com ruindig.hatenablog.jp Cocoenを使用した画像比較スライダーで、大変参考になったので記述を使用させていただくことにしました。

で、Javascriptはとりあえずフッタの元から入っていた記述の直後にぶち込んで、CSSは適当にぶち込んでみたんですが、これがどうもうまくいかない。 いつもはてな記法でブログを書いているんですが、そこにこの画像比較スライダーのHTMLを元記事の通りに入れてみても以下のようになってしまいます。

はてな記法で書くとこうなる

なぜかビフォーとアフターが縦に表示され、スライダーは動かない。 →解決しました。下に追記で書いています。

これは記法を変えればなんとかなるのか？と思いMarkdownに変えてみたところ、

Markdownで試したら成功。

うまくいきました。

で、導入できたのがこれです。

スタートレイル編集前後

とりあえずはうまくいってよかったんですが、今まではてな記法で書いてきたので今さらMarkdown使うの？という葛藤が…笑 いや、頑張って使います。 本当は過去記事でもスライダー使いたいものとかあるんですが、それは非常に面倒なので諦めます…。

はてな記法で使えるようにする方法ないのかなー。

追記。解決しました

わたしが参考にさせていただいたブログの著者であるRuinDig様からX(Twitter)のほうで解決方法をご教示いただき、無事にはてな記法で書けるようになったのでご報告です。
どうやらはてな記法でHTMLコードを記述する場合は「> <」でコードを囲む必要があったようです。
そのため、その方法で再度試したところ無事にはてな記法でも使えるようになりました！
RuinDig様、ご検証いただきありがとうございました。
----------追記ここまで----------

という雑記でした。
おしまい。

＊ーーーーーーーーーーーーーーー＊

ランキング参加中です。

クリックお願いします(^o^)