朝勝つ

成功者はみんな早起きらしい

【早起き22日目】正解すると読者登録画面に飛ぶクイズの作り方


おはようございます。
早起き22日目。

今朝は5時半に起きて、
筋トレストレッチを終えて、のんびりしてるところです。

昨日の夜は雨がすごすぎて、
3時頃に目が覚めてしまいました。

そのせいか少し頭が痛いような、痛くないような


さて、
今日はこのブログのサイドバー(スマホは記事下)に貼り付けてあるクイズの話です。

正解すると読者登録画面に飛ばされるクイズ

一例

穴埋め問題。
正解するといいことあるかも。

はみんな早起きらしい

↑こんな感じです。

試しになんか入力して見てください。

正解はこのブログのヘッダーに行けばわかります

習ったことを使いたかった

筆者はWebのプログラミングに関する知識はほぼなくて、

ブログで習ったhtml・css、
大学の研究でmatlab・c++を触ったくらいでした。

まあもう少し自分でサイトカスタマイズしたいなと思って、
最近JavaScriptとPHPを習い始めたんですけど、

習ったことをとりあえず使いたくて、
勢いで作ったのがこのクイズです。

ちなみにその時習ったのは、
Form/Submitの使い方です。

いいね。インプットとアウトプットはバランスが大事。意識高男

うるさw
プロブロガー()真似してるだけのお前がアウトプット語るなよw女性(24)


使い方

使いたい人がいた時のために一応コード貼りますが、

jQueryなにそれ?JavaScriptじゃダメなの?
レベルの奴の書いたコードなんであまり細かいことは気にしないでください

HTML

管理画面→デザイン→カスタマイズ→サイドバー→モジュールを追加→HTML
に入力↓

”入力”と書いてあるところを含めて4箇所自分好みにカスタマイズしてください。

CSS

管理画面→デザイン→カスタマイズ→デザインCSS
に入力↓


CSS(矢印無しバージョン)

上のCSSだと矢印の調整が上手くいかない場合は、 代わりにこっちを使ってください。


メモ

サイドバーじゃなくても貼り付け可能ですが、
貼る場所によって矢印がずれるので、
矢印無しバージョンを使ってください。

レスポンシブのみ対応です。

FontAwesomeに対応していない場合は、
矢印無しバージョンを使ってください。

矢印の位置が上手くいかない場合は
CSS内の.ansButtonside-span:beforeにあるtop と leftを調節してください。
もしくは矢印無しバージョンを使ってください。

今後ネタがなかったらJSの練習します

せっかく少しずつJavaScript習ってるので、
書くことがなかったらこのブログで練習しようと思います

では、また明日。