稼げる副業でお小遣いを稼ぐ方法

稼げる副業でお小遣いを稼ぐだけじゃなく、料理や映画アニメ、趣味などメモにも使っているブログ

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

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

投稿日: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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

Amazonセラーセントラルで返品時の対応

Amazonはほぼ無条件で返品受けるのがうっとおしいよね 関連記事: amazon seller centralでのブランド登録方法 ECのショッピングカートシステム比較 amazon seller …

EC CUBEでSSLページのみに表示させる方法

EC CUBEでSSLページにだけ違うデザインをしたい時に使えるコードです。 関連記事: 【EC-CUBE】管理画面に色々な箇所のファイルを呼び出す方法 iPhoneアプリ内の広告を無料で消す方法 ネ …

無料ECサイトカスタマイズ

前回お話した無料でECサイトが3分で作れるのデザインなどのカスタマイズ方法についてご紹介いたします。 関連記事: ノロウイルスの治し方 急にショッピングサイトの売り上げが落ちた人へ ワードプレスでメル …

ECCUBE4のプラグインがおかしい時

ECCUBE4の有料プラグインを購入したら早速正規の動作をしていなかったので、解決した方法をご紹介いたします。 関連記事: エックスサーバーからさくらサーバーにドメインを移管してみた 【WordPre …

WP Autoresponderをわかる範囲でカスタマイズ

ステップメールが無料で使えるワードプレスのプラグインをご紹介させて頂きます。 関連記事: ワードプレスで簡単にステップメールを使えるプラグインARGWA FREE Autoresponder カスタム …

新着記事一覧

2025/06/20

ニューヨークの恋人

2025/06/19

ミギとダリ

2025/06/18

ある男

2025/06/17

ハイエナ

2025/06/16

イノセンス 冤罪弁護士