- Ｂｕｂｂｌｅｓ: <!-- CSS & JAVASCRIPT TOOLBOX - INSTRUCTIONS AND DEMO -->
<!-- Feel free to delete all of this text at any time. For more information, please click 'Hints & Tips' -->
<!-- Write your CSS and JS code here, then apply it by using one of the tabs (Pages, Categories, URL) from the panel on the right -->
<!-- The example JavaScript code shown below will display an alert message box -->
<!-- To see this code in action, lets click the "Front Page" checkbox from the panel on the right -->
<!-- Click the blue 'Save All Changes' button, then click the Front Page navigation icon to open the page in a new window -->
<!-- Have fun!!! -->
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Color Bubbles</title>
</head>
<body>
<canvas width="800" height="250"></canvas>
<script>
var context = document.getElementsByTagName('canvas')[0].getContext('2d');
var lastX = context.canvas.width * Math.random()-130;
var lastY = context.canvas.height * Math.random();
var hue = 0;
function line() {
context.save();
// context.translate(context.canvas.width/2, context.canvas.height/2);
// context.scale(0.9, 0.9);
// context.translate(-context.canvas.width/2, -context.canvas.height/2);
context.beginPath();
// context.lineWidth = 1; // 5 + Math.random() * 10;
// context.moveTo(lastX, lastY);
lastX = context.canvas.width * Math.random()-130;
lastY = context.canvas.height * Math.random();
lastR = context.canvas.height* 0.2 * Math.random()*0.8;
context.arc(lastX, lastY, lastR, 0, 2*Math.PI, true);
hue = hue + 90 * Math.random();
context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';
context.fillStyle = 'hsl(' + hue + ', 50%, 50%)';
context.shadowColor = 'white';
context.shadowBlur = 10;
context.stroke();
context.fill();
context.restore();
}
setInterval(line, 50);
function blank() {
context.fillStyle = 'rgba(0,0,0,0.1)';
context.fillRect(-245, 0, context.canvas.width*1.2, context.canvas.height);
}
setInterval(blank, 50);
</script>
</body>
</html>
スライドショー・ページのパスワード保護； スライドショーのページはカスタム固定ページ。デフォールトの固定ページならばパスワード保護は設定だけですむが、カスタムページの保護はテンプレートファイルの編集が必要。今回は、 http://ja.forums.wordpress.org/topic/1983?replies=5 を参考として成功。 スライドショーはContentSlideというプラグインを使用。画像はサイズ調整が必要なようで、PhotoScapeというフリーソフトで43枚一括リサイズした。
ヘッダーのアニメーション； このアニメーションは、W3Cのウエブサイトに掲載されているHTML5（の中のCanvas機能）によるサンプルソース（ http://www.htmq.com/canvas/sample/001_1.html ）を編集して作成し、ビジネスサイト風固定ページのテンプレート（busyness.php）を編集した（phpコードを以下のように編集）。 <?php get_header(); ?> <?php the_meta(); ?>
特別なプラグインは使用なし（初め使用していたプラグイン「CSS＆JavaScript ToolBox」は停止）。
HTML5サンプル； 「最新の投稿」の１番目の記事の個別ページを開くと、HTML5の別サンプルがある。動作確認はChromeのみ。マウスオーバーによる画像回転はIE9ではNGでした。
始めた頃の書き込み； この実験室は、WordPressでどのようなことができるか、全くの初心者がテキストを首っ引きしながら、色々試してみようとするものです。全体の構成も色々いじってみようと思っています。初心者ですから、手がつけられそうな小さいことから、少しずつ、カスタマイズしてみたいですね。
動画をここにアップしてみる。本来はここにアップすべき内容ではないだろうが、投稿ページと何か違うかを確かめてみようと思った訳だ。また、実験として、動画にリンクを貼りつけたいと思っていたが、どうやら、うまくいった。（WMVファイルなので、IE9上でなければ動作しないようです）。
動画；旭山のシロクマ君
W3C公式HTML5ロゴ・ステッカ
