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

公開日: : 最終更新日: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="http://www.moco358.com/wp-content/uploads/2016/10/SAYA160312550I9A3361_TP_V.jpg" data-featherlight="image">テキスト</a>

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


<a data-featherlight="#point"><img src="http://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="http://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系は導入もそんなに難しくないので、カッコ良い系のホームページを製作したい人には絶対的にお勧めですね。

広告

関連記事

ECキューブで販売する為の最低限の設定その2

その1が終わったら次のこの2を見て下さいね。 はじめに とりあえず、デフォルトで表示して

記事を読む

メルカリの出品から発送までの流れ

メルカリに出品してみて入金されるまでの流れをご紹介させて頂きます はじめに あの

記事を読む

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

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

記事を読む

スマホ画面の下にPC切り替え可能なワードプレスプラグイン

スマホ用のデザインの下にPC用の切り替えボタンを簡単に導入する事が出来るワードプレスプラグインをご紹

記事を読む

WEBフォントを無料で使えるタイプスクウェア

日本語の無料で使えるWEBフォントってあまりありませんよね。→見つけました! はじめに クライア

記事を読む

ワードプレスに任意の画像サイズを追加する方法

2種類のサムネイル画像を表示させたいなぁって時に使えた技です。 はじめに ワードプレスだと元々サ

記事を読む

Googleアドセンスを申し込む前に

Googleアドセンスを申し込む際に色々とやらなければならない事がございます。今回はやらなければなら

記事を読む

ワードプレスとツイッターの連携が可能SimpleTweet

ワードプレスとツイッターを連携できるプラグインSimpleTweetの設置方法のご紹介 はじめ

記事を読む

ドメインの申込み方法【サクラインターネット】

今回はオリジナルのドメインを取得する方法です。前回、サクラインターネットにてサーバーをお申込みした方

記事を読む

プラグインのインストール方法【ワードプレス】

ワードプレスは必要時に応じてプラグインをインストールする事でさまざまな機能を追加する事が可能です。今

記事を読む

広告

Message

広告

現在の総記事数: 292件

GoogleのWEBフォントを導入してみた

過去にもwebフォントに触れている記事は多いですが、googleさんの

yahooリスティング広告のオプション登録は必須

広告の下に出てくるリンクは絶対に設定しておきましょう はじめ

2017年最新版 メルカリで受取評価してくれない時の対策

メルカリを利用していると変なお客さんにあたる場合があります はじめに

Googleアナリティクス一覧のセッションなどのデータが表示されなくなった

久々にGoogleアナリティクスを見たらデータが表示されなくなっていた

yahooリスティング広告で広告を作るまでの流れ

yahooリスティング広告でキャンペーンの作成から広告の登録までをご紹

→もっと見る


  • ここでは副業での稼ぎ方や、誰でも簡単に稼げる副業のジャンルなどを紹介しております。 今の所、平均して月に15,000円ほど副収入があります。
    • エステコスメ エステ化粧品やエステコスメの通販サイトです。一般の方でもエステサロンで使用しているコスメを激安価格で購入出来ます。
    • エステ用品 エステ用品のMOCOエステです。新規開業を考えているエステサロン様向けに卸価格でご提供させて頂きます。
    • サロン集客 サロン集客に悩んでいる人向けに完全無料で集客方法を公開しております。インターネットを使う事で0円でサロン集客する方法もお教えいたします。
    • ヒートマット 遠赤外線ヒートマットシリーズは入ると滝に打たれたような発汗を体験できます。サロン様から一般の方までご利用いただけます
    • フェイシャルスチーマー 業務用だけでなく、一般の方も使用出来るフェイシャルスチーマーを詳しく説明しているホームページです。
    • 美容室のホームページ制作 美容室やエステサロン、ネイルのホームページ制作です。3万円台から制作も出来るので予算のないサロン様にも対応しております。
PAGE TOP ↑