});</script>今回は「記事下」内の先頭にコピペしました。なんとなく『シェアボタンやスターより先に読み込んだほうがいいのかな?』と思ったからです。本来は.js形式の別ファイルとしてアップロードして、読み込んだ方がスマートだと思います。はてなブログではそんなことができないので、力技で乗り切ります。デザインCSS」に以下のコードを貼付します。14px}「デザインCSS」のところでは、もともとテーマに関することが最初から書かれています。このデフォルトの記述より前にカスタムを入れると動作不良になることがあるようなので、コメントアウトの後にコピペしました。ここでも貼り付けをしたら、忘れないように「変更を保存」をクリックします。使い方は非常に簡単です。画像を貼り付ける際に以下のHTMLコードを本文中に使用するだけで比較用スライダーが使えます。src="画像URL">のところには画像のアドレスを挿入する必要があります。そのアドレスはブログ編集画面ではなく、はてなフォトライフから取得する必要があります。キャプション比較スライダーに説明書きを添えたい場合には、以下のコードを末尾の</p>の直前に入れます。画像キャプション</figcaption>こうすれば普通に写真を貼り付けたときと似たようなスタイルでキャプションが表示されました。サンプルこの記事の冒頭にも設置したこのミカンの画像の比較部分は以下のようなコードを書いています。今後の課題このスライダー設置が完了してから嬉々としてお嫁ちゃんにブログを読んでもらいました。すると「......スライダー?どれ?」と言われました。確かに、Cocoenのスライダーは矢印などが出ないので、画像上の白線が操作できることが読者に分かりにくいデザインです。この点においてTwentyTwentyなど他のツールが優れていると考えています。https://zurb.com/playground/twentytwentyせっかく設置したCocoenのUIがカスタマイズ可能なのか、それとも別のツールを使用した方がいいのか。Cocoenをこのまま利用しながら、引き続き研究を進めていこうと思います。日本一周に同行してもらった装備品を紹介する第2弾。週間)2017年にバイクで日本一周した主夫。日中は家事の合間にイラストを描いてます。TwitterやInstagramで活動してます。大将さん(@TaishoGoes)について!経歴は?職業は?家族は?」に書いてあるようですよ。Blogイラストを描いたり、お出かけをしたり、ときには気に入ったアイテムをレビューしてみたり......自由気ままにやってるブログです。Information当ブログに掲載されている写真、イラスト、文章等について、引用されたものを除き、すべての著作権は著者に帰属します。much!スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。