副業で稼ぐ仕組みの作り方

画像をクリックしてテキストを表示させる

投稿日:2016年11月26日 更新日:

画像をクリックしたらlightboxのようにテキストを表示させる方法をご紹介させて頂きます

はじめに

テキストをクリックしたら画像が表示される系のJavaScriptは良くあるのに、逆に画像をクリックしたらテキストが表示されるようなJavaScriptは見かけなかったですよね。

そんなときにめっちゃ軽量でかっこええJavaScriptをご紹介させて頂きます。

注意事項

JavaScriptなので一度ローカルで実験してみよう

はじめに

今回はFeatherlight.jsと言うJavaScriptのご紹介です。
めっちゃ軽量でテキストを表示させる事も可能です。

まずはFeatherlight.jsから素材をダウンロードしましょう。

img-click1

では、さっそく画像をクリックしてテキストをふんわり表示させてみましょう。

ヘッダーに追加しよう

ダウンロードしたファイルの中にある

featherlight-1.5.0.zip > featherlight-1.5.0 > release

の中にあるファイル

  • featherlight.min.css
  • featherlight.min.js

この2つのファイルを使います。


<link href="featherlight.min.css" type="text/css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="featherlight.min.js" type="text/javascript"></script>

こんな感じでjqueryも取得しときましょう。

コンテンツを作ろう

次はコンテンツを作ります。featherlightは「data-featherlight=””」と言うタグを使う事によってlightboxのような効果を演出することが出来ます。


<a href="https://www.moco358.com/wp-content/uploads/2016/10/SAYA160312550I9A3361_TP_V.jpg" data-featherlight="image">テキスト</a>

このような書き方をすると文字をクリックした場合に画像が表示されます。これはまんまlightboxのまんまですね。


<a data-featherlight="#point"><img src="https://www.moco358.com/wp-content/uploads/2016/10/AKANE278123825_TP_V.jpg" width="300"></a>

<div id="point">
<h4>クリックサンキュ</h4>
テキストがふんわりでてきまっせ
</div>

次にこういった書き方をする事で画像をクリックした場合に下のdiv#pointの内容が表示されるようになります。

では、実際に見てみましょう。

img-click2

img-click3

このようにうまく表示されましたが、もともと表示されてしまっているのでクリックされた時だけに表示されるようにcssで整えましょう。

まずは先ほどのdiv#pointにclassを追加します。


<a data-featherlight="#point"><img src="https://www.moco358.com/wp-content/uploads/2016/10/AKANE278123825_TP_V.jpg" width="300"></a>

<div id="point" class="lightbox">
<h4>クリックサンキュ</h4>
テキストがふんわりでてきまっせ
</div>

そしてこのclassを削除すると


<style type="text/css">
	.lightbox { display: none; }
</style>

img-click4

こんな感じで理想的な感じになりました。

img-click5

デモ作りました

この説明だけだとわかりにくいかもしれませんのでデモを見てくださいな

画像をクリックしてテキストを表示させるデモ

以上で画像をクリックしてテキストを表示させる方法の説明を終了いたします。

さいごに

これが欲しかった!

画像のlightboxは見かけるんですが、テキストのlightboxってなかなかみかけないのか今回のJavaScriptは見つけるのに非常に苦労しました。

今は稼げる副業ではなく稼げる本業用のコンテンツで画像をクリックさせるってのが必要になったんです。

JavaScript系は導入もそんなに難しくないので、カッコ良い系のホームページを製作したい人には絶対的にお勧めですね。

-副業で稼ぐ仕組みの作り方
-,

執筆者:


comment

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

contact form 7で自動返信メールのカスタマイズ

ワードプレスでのお問い合わせフォームcontact form 7を導入後に、必ずやっておきたい自動返信メールのカスタマイズ方法を詳しく掲載させて頂きました。

no image

ワードプレスにソースコードを表示させるプラグイン【SyntaxHighlighter】

ワードプレスにhtmlタグなどのソースコードを記入した際にわかりやすくする為のプラグインです。

サブドメインの設定【サクラサーバー】

今回はサブドメインの設定方法です。サブドメインを設定する事で様々なメリットがございます。副業で使う際の一例などもご紹介させて頂きます。

無料でECサイトが3分で作れる

今までにない、完全に無料で利用出来るECサイトをご紹介いたします。

PHPのシングルクォーテーションとダブルクォーテーションの違い

PHPの勉強中です。次は'(シングルクォーテーション)と”(ダブルクォーテーション)の違いについての覚書です。

人気の副業記事(24時間で更新)