| 貼って楽しい 「クイズバナー」！ |
|
ページの頭から、イキナリ出題しちゃってスミマセン。 しかし、これこそが 今から説明をする「クイズバナー」なのです。 おかげさまで、「クイズ魔女ッ娘アカデミー2」も、色んなサイトからリンクしていただいてる模様です。 本当にありがとうございます。 …しかし、ある日 ふと気付きました。 「リンクって、貼る側には 特にメリットが無いよね？」…と。 折角リンクして下さったのに、それでは何だか申し訳ない！ リンクを貼って下さった方に お返しがしたい！ 何か、「貼る側にもメリットのある、斬新なリンクバナー」を作りたい！ そういう思いで色々考えた結果、 チョット面白いモノを思い付きました。 名付けて、「クイズバナー」！ ページ冒頭で出題された ○×クイズこそ、ソレです。 問題の選出はランダムで、かつ、動的な更新なので、 ページをリロードするたびに 毎回違う問題が出題されます。 気付いてました？ 要するに、 「お手持ちのサイトやブログに、マジョアカで使用している○×クイズが手軽に貼れる」、 これが、「クイズバナー」なのです！ リンク（バナー）を貼る側にも、 「自分のサイトに クイズを貼れる」というメリットがある バナーなのです。 |
| 貼り方：シンプル版 | |
|
では 早速、「クイズバナー」の貼り方を御紹介します。 とっても簡単、実に簡単。 お手持ちのサイトの、クイズを貼りたいページのHTMLソースに、 以下のタグを追加するだけ。コピペしましょう。
たったの2行。 これで、そのページを開いた際に ○×クイズが出題されます。 上記のタグを貼った場所に、クイズが挿入されるので、 「（デザイン的に）ここに貼りたい」という場所（に該当する HTMLソース内の箇所）にコピペしましょう。 さあ、コレで貴方のサイトでも、○×クイズが！ |
| デザインに拘りたい人は… | |||||||
|
「挿入されるクイズ部分の（視覚的）デザインがアレなので、サイトの景観を損ねる！」 …とお嘆きの方にも、ちゃんと対応いたしますとも。 デザインに拘る貴方のために、 デザインをカスタマイズできるバージョンのモノを用意いたしました。 ページのHTMLソースに貼るべきタグは、以下のようになります。
早い話が、 出力（挿入）するクイズ部分の 問題文や選択肢を、 CSS（スタイルシート）の指定付きで出力しているのです。 …ですので、 ヘッダ部分で、各クラス（後述）のスタイルを定義しておいてやれば、 お好みのデザインで表示させるコトが可能となります。 各部分のクラス名は、こんな感じです。
この3つを定義してやって下さいませ。 …それだけでは説明過小な気がするので、サンプルを用意してみました。 ソースを見れば、やるべきコトが分かると思います。 |
| ちょっと注意の 文字コード | ||||
|
ここで ひとつだけ、注意する点が。 この「クイズバナー」は、 要は、外部JavaScriptファイルを用いて クイズの書き出しを行っているのですが、 この 外部JavaScriptファイルの文字コードは、 それを呼び出した HTMLページの文字コードと一致していないといけない模様です。 両者の文字コードが不一致の場合、 文字化けならまだしも、「解析失敗」というコトでエラーが発生してしまいます。 ご注意を。 上で書いたタグは、文字コードが Shift-JIS コードのモノです。 従って、ページの文字コードが EUC-JP や UFT8 の場合は、 以下のモノを用いましょう。 ※ページの文字コードが EUC-JP の方用（シンプルデザイン版）：
※ページの文字コードが EUC-JP の方用（カスタムデザイン版）：
※ページの文字コードが UTF-8 の方用（シンプルデザイン版）：
※ページの文字コードが UTF-8 の方用（カスタムデザイン版）：
「エラーが出るぞ？」という方は、 一度、文字コードを確かめてみて下さい。 |