大将がゆくスマートフォン用の表示で見る大将がゆく元旅人の専業主夫がイラストを描いたり、お出かけをしたり、ときには気に入ったアイテムをレビューしてみたり......自由気ままにブログをやってます。やりたかったことブログに写真を掲載していると、レタッチ前後の画像の比較などわかりやすく掲載したいことがあります。設置することにしました。※中央のバーを左右に動かすと比較できますちなみに私のプログラミング経験はゼロ。扱いで教科書のコラムで触れた程度です。今回の作業を通じてHTML、CSS、JavaScriptの三者の関係を知りました。このブログのカスタマイズも基本的には先人がやった通りのコピペで乗り越えてきました。必要なもの今回の作業で必要だったものは以下の2点です。パソコンめげない気持ちまた、私の作業環境は以下のとおり。slider)を設置します。https://koenromers.com/cocoen/選定理由はたまたま情報が手に入った本文中に挿入するコードが少ないので、楽に運用ができそうというものです。Google先生が提示してくれた他のブログにあった内容では、同じページ内で複数箇所にCocoenを設置するとスライダーがうまく機能しませんでした。参考に、JavaScriptを一部変更しています。素人工事なので、ちゃんとしたスキルやナレッジがある人からすれば『もっといい方法あるよ!』と思われるかもしれません。記事下」に以下のコードを貼付します。上記の方法ではCocoenを用いないページやエントリーでもJavaScriptが読み込まれるため、ページ速度が低下してしまいます。結局、以下の<script>〜</script>をブログ本文の末尾に直接記述することにしました。