キリンノックスの日記

【はてなブログ】ボタンクリックで文章や画像を表示する方法【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のように変更してください。

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

 

 

以上です。

 

 

 

 

 

 

 

 


 

プライバシーポリシー / お問い合わせフォーム
©2019 キリンノックス