【はてなブログ】ボタンクリックで文章や画像を表示する方法【html】

スポンサーリンク

f:id:kirinnox:20191024161954p:plain

 

 
 

CSSは使わずにできます。

ちなみに、私の方法では、表示はできますが、表示非表示切り替えはできませんのであしからず。

表示非表示をしたい方はcheckboxを使えばできるらしいですよ。

ちなみにこんな感じになります。

 

 

 

 

 
 

・・・

 

っでは実装方法です。

ただし、どうもはてなブログの場合は、Markdown記法でないとうまく動作しないようです。(2019年10月現在)

 

新記事作成画面を開いて、左上の編集「見たまま」から「Markdown」に変更します。 

f:id:kirinnox:20191024155759p:plain

※私は、Markdownには慣れていないため、ボタンの箇所以外を見たまま編集で作成し、そのhtmlをMarkdownに貼り付けるという方法でやってます。

 
 

次に記事に以下のように書きます。

 
 

<input type="button" value="ボタンに表示する文章" onclick="document.getElementById('xxxx001').style.display = 'block';">
<p id="xxxx001" style="display: none;">表示したい文章(とか画像)</p>

 
 

ボタンに表示する文章、xxxx001(ボタン番号みたいなもん)の部分はお好きなように変更してください。

これだけ!

超簡単やん・・・

 
 

少し説明すると

 

<p id="xxxx001" style="display: none;">表示したい文章(とか画像)</p>

 

このstyle=”display: none;”最初は文章を見えなくしておきます。

 

<input type="button" value="ボタンに表示する文章" onclick="document.getElementById('xxxx001').style.display = 'block';">

 

ボタンを作成 → ボタンが押されたときにidがxxxx001の本文を見えるようにします。

 
 

ちなみに、2つ以上のボタンを作る場合はidをxxxx002のように変更してください。

じゃないと、ボタンひとつ押したときに、全部表示されちゃう。

 
 

以上です。

 

 

 
 

 
 
 
 

コメント

  1. darakekaasan より:

    ボタンをたくさん押せて、楽しい記事でした!

  2. kirinnox より:

    母ちゃん!
    ありがとうござます。
    ぜひご活用ください!

タイトルとURLをコピーしました