Web一覧

WordPressで簡単にクイズが作れるプラグイン「Wp-Pro-Quiz」

WordPressで簡単にクイズが作れるプラグインを紹介します。

作成したクイズ:四字熟語の意味当て四択クイズ

使用したプラグインは「Wp-Pro-Quiz」です。

設定画面が英語のためちょっと難しかったです。
設定のポイントは下記の2点です。
1.クイズの見た目設定
2.英語のため単語を英訳する必要がある。

【参考サイト】
ブログ内にクイズやアンケートが作れる『Wp-Pro-Quiz』を徹底解説【おすすめプラグイン】
ワードプレス用クイズプラグイン『Wp-Pro-Quiz』の日本語化方法


JavaScriptでクエリ文字列を取得

URLに記述されているクエリ文字列(http://aaaa.com/index.html?a=1&b=2のようなURLのa=1とかb=2のこと)をJavaScriptで取得したいので調べました。
下記の通りでできます。しかも連想配列なのでアクセスも便利です。

例)URLが「http://aaaa.com/index.html?a=1&b=2」の場合
aの値は、vars[‘a’]、bの値はvars[‘b’]で取得可能

ここからJavaScript—————————————————————
var vars = [], max = 0, hash = “”, array = “”;
var url = window.location.search;

//?を取り除くため、1から始める。複数のクエリ文字列に対応するため、&で区切る
hash = url.slice(1).split(‘&’);
max = hash.length;

for (var i = 0; i < max; i++) {
array = hash[i].split(‘=’); //keyと値に分割。
vars.push(array[0]); //末尾にクエリ文字列のkeyを挿入。
vars[array[0]] = array[1]; //先ほど確保したkeyに、値を代入。
}
ここまでJavaScript—————————————————————


HTML5によるWebサイトの多様化

HTML5が勧告(2014年10月28日※引用元:Wikipedia)されて、最近ではHTML5が利用されたウェブサイトをよく見かけるようになりました。

HTML5の便利な点はいろいろあると思いますが、ブラウザ上に図形を描いたりグラフを表示したりすることが簡単にできるようになったことだと思います。

実装方法としては SVG、canvasがあります。

以前はブラウザに図形を描く場合は画像ファイルを作っておりましたが、HTML5を利用すれば画像ファイルがいらないので便利ですね。


WordPressでブログサイト構築

このサイトはWordPressを利用して構築しました。

最近ではブログサイトの構築がとても簡単になりました。

このサイトはレンタルサーバに構築していますが、WordPress対応のレンタルサーバを借りれば、誰でも簡単にこのようなブログサイトの構築が可能です。

HTMLやCSSが理解できる人はカスタマイズも可能なので、一から作ることを考えたら断然便利ですね。