ミニボートの楽しさを伝えたいと思い、作ったサイトです
SnapShot(772w3e33e3).jpg

ブログ内の画像をクリックで文字が出るようにする方法【HTMLを変えるだけ】

その他
06 /11 2018
谷口そらです、画像をクリックすることで文字が出るようになりました。→の【登場人物】の画像をクリックすると文字が出ますが、これは今回紹介する方法を使用しました。また、カテゴリー画像のように、折りたたみの記事を入れることも可能です。


参考にしましたサイトはこちらです。HTMLをお借りしています。


これを使うとこんな感じにできます。下の画像をクリックしてみてね。
2018-04-03_095704.png


またこういう風にもできます。下の画像をクリックしてみてください。さらにその下の文字もクリックしてみてね。
2018-6-9 ブログボタン (4)


こういう感じで記事を整理整頓できます。プラグインでサイドメニューがあるサイトなら利用できると思います。


やり方ですが、


<!-- 折りたたみ -->
<div onclick="obj=document.getElementById('xxxxx').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">1 画像のHTML</a>
</div>
<!--// 折りたたみ -->
 
<!-- 折りたたまれ -->
<div id="xxxxx" style="display:none;clear:both;">

2 ここに展開させたい文字、画像、リンクのHTMLを入れる


</div>
<!--// 折りたたまれ




をコピーしまして、まず表示させたい画像のHTMLを"1"の場所に入れ、クリックした後展開させたい文字、画像等のHTMLを"2"に入れます。

注意事項などありますので、そちらは前述したのサイトを参考にされてください。

HTMLをお借りしたサイト
関連記事
スポンサーサイト





このエントリーをはてなブックマークに追加

コメント

非公開コメント