タグ:javascript

0407
チェック有無でリストの背景色を変えるとは、こういうの。

チェックが入ってない時、リストの背景色は黒(#000)に。入っている時は、緑色(#13b5b1)に変える内容。

チェックが入る(外す)とリストの背景色を変える
チェックが入ると、リストの背景色を変える処理は、ウェブで見かけたが。入ったチェックを外しても、リストの背景色を変える処理は、見かけなかったので。以下まとめ。

html チェックボックス箇所
<ul>
<li id="checkbox1"><input id="checkbox1_1" type="checkbox" name="list" value="1" onClick="changeBgc('checkbox1','checkbox1_1','#13b5b1')">checkbox1</li>

<li id="checkbox2"><input id="checkbox1_2" type="checkbox" name="list" value="1" onClick="changeBgc('checkbox2','checkbox1_2','#13b5b1')">checkbox2</li>

<li id="checkbox3"><input id="checkbox1_3" type="checkbox" name="list" value="1" onClick="changeBgc('checkbox3','checkbox1_3','#13b5b1')">checkbox3</li>

<li id="checkbox4"><input id="checkbox1_4" type="checkbox" name="list" value="1" onClick="changeBgc('checkbox4','checkbox1_4','#13b5b1')">checkbox4</li>
</ul> 
html javascript箇所(</body>上などに入れる)
<script type="text/javascript">
<!--
function changeBgc(id,id2,color){
if (document.getElementById(id2).checked == true) {
document.getElementById(id).style.backgroundColor = color; }
else { document.getElementById(id).style.backgroundColor = '#000'; }
-->
</script>
ポイントは、リストのidとチェックボックスのid、2つ渡すこと。簡単な仕組みだが、当初はリストのidしか渡さなかったため、おかしいな・・・だった。

以上、ご参考になれば幸いです。

ハイライト表示とは、こういうの。本文でないのがひとめわかる、表示スタイル。ソースコードやレシピの表示スタイルによく使われる。

/*---------------------------
サンプル
------------------------------*/
<?php
$mysql_con = mysql_connect ($dbhost,$dbuser,$dbpass);
?>

このハイライト表示、ブログにそのまま記述すると、本文と同等に表示される。キーボードのタブによるインデント(字下げ)もできない。前述を例にしたのが下記。

/*---------------------------
  サンプル
------------------------------*/
<?php
 $mysql_con = mysql_connect ($dbhost,$dbuser,$dbpass);
?>

これまで、ここブログでソースコードを記述する機会は、さほどでなかったが。今後あるかもということで、ブログでハイライト表示を使う方法を調べてみた。

はてなブログには、簡単な方法があるらしいが、ここはライブドアブログ。jsを使えるようにすればいいんじゃない?と、やってみたら簡単だったので、まとめ。

以下、ライブドアブログでの方法。(ホームページでの使い方は、文末に記載)

Javascriptライブラリを読み込む
ライブドアブログでハイライト表示を使うには、Javascriptライブラリ「Google Code Prettify」を読み込む。

1.左メニュー「ブログ設定」をクリック。

2.「ブログの設定」の「デザイン/ブログパーツ設定」内「カスタムjs」をクリック。
1606255
3.カスタムjsウィンドウのタブ「head内」に、「Google Code Prettify」を読み込むコードを記述。
1606256

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
ボタン「保存する」をクリック。

使いたいブログ記事を作成し、ハイライト表示タグを記述
1.ブログメニュー「記事を書く」をクリック。

2.記事ウィンドウ内「HTMLタグ編集」をクリック。ハイライト表示したい箇所を、以下の括りで記述。
<pre class='prettyprint'>
ここにソースコードを記述
</pre>
3.「HTMLタグ編集」をクリックして通常表示に戻すと、上の画像のような表示がされる。「ここに~」の部分を編集。

ホームページでの使い方も同様。<script src~</head>前に記述、<body>内に、<pre~タグ括りで利用。括りの中を編集。

以上、ご参考になれば幸いです。

※この記事は、「ソースコードを載せるには」として作成したが、わからんという意見を多々もらったので、「ハイライト表示を使うには」として修正。

【関連リンク】
JavaScriptライブラリのホスティングについて - ライブドアブログのヘルプ(PC向け)
「jsライブラリを提供していたが止めたので、今後はGoogleなどのサービスを利用してね」というので、方法にピンときた。

google-code-prettify を使ってシンタックスハイライト | Web Design Leaves
ダウンロードして利用したい場合に。レンタルサーバーある人向け。

Google Code Prettify導入が超絶簡単になっていた | きほんのき
上記のダウンロード利用を一通りやった後。レンタルサーバーない人向けに、記事を書こうと検索してみっけ。

google-code-prettify - Google製コードハイライト表示JavaScriptライブラリ: ある SE のつぶやき
わかりやすい。

↑このページのトップヘ