プログラム製作日記

世の中にないプログラムをつくれたらよいなと思いながらプログラムをしていくブログです

はてなブログでJavaScript(タブパネルは、はてなブログでは使えないのか)

 

はてなブログJavaScriptが使えるというのを知ったので、自分でためしてみました。

 

コードは、ブラウザでこのページのソースを表示させれば確認できます。

FireFoxをお使いであれば、表示しているページ上のどこかで右クリック→ページのソースの表示をクリックすると、ソースが表示されます。

 

今回はタブパネルがはてなブログで使えるかどうかを検証しました。

 <タブパネルがあるサイトの例>

gihyo.jp

 

<結果>

以下のようになりました。

タブのような動きを付けられましたが、どうしても"1.tab1", "2.tab2"のような表示になってしまいます。

 

 

  • タブ1の中身
  • タブ2の中身

 

ランキングに参加してます。

よかったらクリックをお願いします。

にほんブログ村 IT技術ブログ Tipsへ
にほんブログ村

 

はてなブログでJavaScript(ストライプテーブルは、はてなブログでは使えないのか)

 

はてなブログJavaScriptが使えるというのを知ったので、自分でためしてみました。

 

コードは、ブラウザでこのページのソースを表示させれば確認できます。

FireFoxをお使いであれば、表示しているページ上のどこかで右クリック→ページのソースの表示をクリックすると、ソースが表示されます。

 

今回はストライプテーブルがはてなブログで使えるかどうかを検証しました。

 

<結果>

 

結果は以下の通り、思った動きになりませんでした。

no Name Test Result
1 Aさん 70/100
2 Bさん 80/100

ただし、編集(みたまま)上だと、以下のように表示されてます。 

f:id:tut2020aaa:20200628113945p:plain

 

編集上だとjavascriptは動かないのでしょうがないですが、少なくとも、表の背景の色は変えられました。

 

しかしながら、ブログとしてアップされると、何かしらはてなブログjqueryと干渉しているのか、表の文字の色を変えるのはできましたが、そもそもとして、表の背景を、jqueryを使って思った色にする方法を見つけられませんでした。 

 今後、うまいこと表の変更ができる方法が見つけられたら、その方法をアップしたいと思います。

 

<結論>

すくなくとも、現状は、はてなブログ上では、jqueryを使って表の色を指定の色に変えられない。

 

ランキングに参加してます。

よかったらクリックをお願いします。

にほんブログ村 IT技術ブログ Tipsへ
にほんブログ村

 

はてなブログでJavaScript(アコーディオンパネル)

 

はてなブログJavaScriptが使えるというのを知ったので、自分でためしてみました。

 

コードは、ブラウザでこのページのソースを表示させれば確認できます。

FireFoxをお使いであれば、表示しているページ上のどこかで右クリック→ページのソースの表示をクリックすると、ソースが表示されます。

 

今回はアコーディオンパネル(タイトルをクリックすると隠れた内容が表示される)を使ってみました。

以下のサイトで紹介されていたコードを一部改変して使ってみました。

https://www.aiship.jp/knowhow/archives/22018

 

<結果>

以下にアコーディオンパネルを示します。青い部分をクリックすると、隠れた内容が表示されます。

 

パネル1
パネル1の内容
パネル2
パネル2の内容
パネル3
パネル3の内容

 

動きのあるページを作るときには使えそうです。

 

 

ランキングに参加してます。

よかったらクリックをお願いします。

にほんブログ村 IT技術ブログ Tipsへ
にほんブログ村

 

はてなブログでJavaScript (文書に動的にアンダーラインを引く)

 

はてなブログJavaScriptが使えるというのを知ったので、自分でためしてみました。

 

コードは、ブラウザでこのページのソースを表示させれば確認できます。

FireFoxをお使いであれば、表示しているページ上のどこかで右クリック→ページのソースの表示をクリックすると、ソースが表示されます。

 

今回のコードは、以下のリンク先のものをほぼそのまま使いました。

noripon.blog

また、CSSを使う場合は外部CSSを使うようことが多いようなのですが、今回は内部CSSにして、書くべき内容のほとんどがこのHTML内で完結するようにしています。

CSSの適用については以下の記事がわかりやすいです。

cc.musabi.ac.jp

 

●結果:

以下にアンダーラインの文書を示します。

 

この文章は直接スタイルを指定してアンダーラインされてます。

 

この文章は青色で動的にアンダーラインされてます。

 

 

 

ランキングに参加してます。

よかったらクリックをお願いします。

にほんブログ村 IT技術ブログ Tipsへ
にほんブログ村

はてなブログでJavaScript (Web Storatgeの利用可否)

 

はてなブログJavaScriptが使えるというのを知ったので、自分でためしてみました。

 

コードは、ブラウザでこのページのソースを表示させれば確認できます。

FireFoxをお使いであれば、表示しているページ上のどこかで右クリック→ページのソースの表示をクリックすると、ソースが表示されます。

 

 以下にご使用のブラウザがローカルストレージに対応しているかの結果が表示されます。

 

●結果:

 

 

 

ランキングに参加してます。

よかったらクリックをお願いします。

にほんブログ村 IT技術ブログ Tipsへ
にほんブログ村

はてなブログでJavaScript (SVGで角丸四角を描く)

 

はてなブログJavaScriptが使えるというのを知ったので、自分でためしてみました。

 

コードは、ブラウザでこのページのソースを表示させれば確認できます。

FireFoxをお使いであれば、表示しているページ上のどこかで右クリック→ページのソースの表示をクリックすると、ソースが表示されます。

 

今回はSVGを使用してみました。

以下に角丸四角が描画されます。

ボタンを押すと、変形します。

 

 

 

 

 

ランキングに参加してます。

よかったらクリックをお願いします。

にほんブログ村 IT技術ブログ Tipsへ
にほんブログ村

はてなブログでJavaScript (Canvasで四角形を描く)

 

はてなブログJavaScriptが使えるというのを知ったので、自分でためしてみました。

 

コードは、ブラウザでこのページのソースを表示させれば確認できます。

FireFoxをお使いであれば、表示しているページ上のどこかで右クリック→ページのソースの表示をクリックすると、ソースが表示されます。

 

今回はcanvasを使用してみました。

以下に緑の四角が3つ描画されます。

 

 

 

 

ランキングに参加してます。

よかったらクリックをお願いします。

にほんブログ村 IT技術ブログ Tipsへ
にほんブログ村