Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

ひっさびさに、はてなブログのサイドバーモジュールを追加してみた話

 どうも!LSSです!!

 

だいぶ久々に、このブログのサイドバーにモジュール追加してみました。

(PCで見るとサイドバーですが、スマホから見ている場合、一番下までスクロールするとみる事ができます)

 

f:id:little_strange:20210621221254p:plain

↑こんなのを追加しました。

この「サイコロを振る」をクリックすると…

f:id:little_strange:20210621221351p:plain

1~6の目がランダムに出てきます。

 

突然、サイコロが必要になった時にご利用ください。(どんな時だろwww)

 

 

はてなブログのサイドバーモジュールって、スクリプトもイケるんですね

って事に気づき、試しに作ってみたものです^^

ほんとはもうちょっと何かの役に立つものを作りたい^^;;; 

 

 

サイドバーモジュールの設定手順

はてなブログで設定を色々いじった方はご存知の手順ですが、一応最初から画像つきで書きます。

 

まず、はてなブログダッシュボードから、「デザイン」をクリックします。

f:id:little_strange:20210621221803p:plain

 

 次に、スパナのアイコンをクリック。

f:id:little_strange:20210621221922p:plain

 

そして、「サイドバー」をクリックします。

f:id:little_strange:20210621222004p:plain

 

次は下のほうにある、「+モジュールを追加」をクリックします。

f:id:little_strange:20210621222051p:plain

 

すると「モジュールを追加」というのが出てくるので、「HTML」をクリックします。

f:id:little_strange:20210621222155p:plain

 

あとは「タイトル」と「コード」を入力します。

f:id:little_strange:20210621222314p:plain

ここで「タイトル」は見出し部分になります。

今回は「突然サイコロが必要になった時にご利用ください」と入力しました。

そしてコードは、

<input id="sidebar_sai" type="button" value="サイコロを振る"/>
<div id="sidebar_saig" style="font-size:300%;"></div>
<script>
sidebar_sai.addEventListener('click',sidebar_saif,false);
sidebar_sai.addEventListener('touch',sidebar_saif,false);
function sidebar_saif(){
sidebar_saig.innerHTML=1+Math.floor(Math.random()*6);
}
</script>

を入力しています。(実際にこのコードをコピペすると動作します!)

 

決まったら、左下の青い「適用」ボタンを押し、左上の「変更を保存する」を押す事で、ブログにサイドバーモジュールが追加されます^^

 

もし「自分のブログにサイコロを設置したい」という方がおられましたら、ご自由にコピペして使ってください。

 

 

問題は…何を作って配置するか?

ちょっとした便利ツールか軽いゲームなんかを配置しておくといいかな、と思いますが、じゃあ何を作るかのアイデアが必要ですねw

 

作り始めた時点では、あの「カウントダウンタイマー」なんか置いておくと、カップ麺作るのに便利だと思ったりしました^^

 

ただ、スクリプトなもんで、記事中でも色々書いたりするところから、名前が衝突しないよう「sidebar_sai」「sidebar_saig」「sidebar_saif」のように、被らないよう命名しています。(変数とか要素とか増えてくると大変かも?w)

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^