今見てくれてる人の数

ホンキートンク・スーダラブルース

ゆるコラム、oF、邦ロックや歌謡曲、小説の感想。ドラクエ、JavaScript、ドラゴンボール超など。湘南あたりを転がってる石コロのゆるゆる生きてく超雑多な軌跡です。

jQueryでブログ記事の一部分を隠して、パスワード入力で表示する方法

なかなかニッチな要望だと思いますが、、、。

私のプロフページ、こんな感じになってます!

sudara-bluse.hatenablog.com

 

f:id:sudara_bluse:20171025120707p:plain

 

ライクアローリング?:

の後のボックスに答えを入力してボタンを押すと、

f:id:sudara_bluse:20171025115557j:plain

 

ふわっと詳細プロフが表示される仕組みです!

(なんだこの遊び心、、いるのかこれ?w  ちょっと恥ずかしい方におすすめです!ソース見れない人向けの超簡易パスワードシステムです。)

 

WordPressでもはてなブログでも、記事中にHTML、CSS、JS(jQuery)が書けるCMSならなんでも大丈夫だと思います!

 

では実装方法!

 

 

 

 

実装方法

下記コードをそのままペタッと記事に貼り付けてください(HTMLモードで)

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>は
ヘッダーで他のjQueryファイルを読み込んでる場合は記載不要です!

 

gist.github.com

 

 


3箇所、自分用に変更してください!

 

質問内容 → 私の嫌いな食べ物は? の部分のテキスト
隠しとく内容 →ここに詳細プロフ。〜の部分のテキスト
質問の答え → トマト とまと のテキスト

 

 

以上で完成です!

暗号があってるとhide_areaの部分がふわっと表示され、

間違ってると現ページをリロードする仕組みです!

(まぁソース見ると暗号バレちゃうので簡易的な認証ですが、、、照れ屋の人用です。)

 

以上、「できない」「わからない」等ありましたらコメントください。

なるべくお返事します!

 

 

f:id:sudara_bluse:20170930130706p:plain