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

公開日: : 最終更新日: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系は導入もそんなに難しくないので、カッコ良い系のホームページを製作したい人には絶対的にお勧めですね。

広告

関連記事

カスタムフィールドで入力したfeed情報を表示させる方法wordpress

ポータルサイトを作成する際に各店舗のブログ記事の新着情報を表示させたいなぁって事ありますよね?できち

記事を読む

gmailからサクラのサーバー経由でメールが送れない

サクラ、Mail Delivery SubsystemとDelivery Status Notifi

記事を読む

ワードプレスでお問い合わせを作る。Contact Form 7

ホームページの制作やブログの制作で必ず必要なのがお問い合わせフォームの設置です。ワードプレスのプラグ

記事を読む

Jetpackの通知機能

Jetpackのプラグインを導入する際に一つづつどういった機能なのかを調べてみています。最初は通知機

記事を読む

コンタクトフォーム7からの迷惑メールを防ぐ方法

コンタクトフォーム7を入れたけど、今度はここから迷惑メールが来ることが増えます。迷惑メールをブロック

記事を読む

カスタムフィールドのループで出力数を決める

ループに登録されている情報を一部表示させたい場合に使えます。 はじめに カスタムフィール

記事を読む

Gmailとサクラのメールの連携する方法

Gmailとさくらサーバのメールを連携させる方法のご紹介です。 はじめに 普段からGma

記事を読む

ECCUBE3の商品CSV登録が簡単でした

毎回トラブルがあるCSV登録ですがECCUBE3では結構すんなり登録が出来ました。 はじめに 商

記事を読む

スマホの理想的なハンバーガーメニュー紹介

スマホデザインを作るのであれば、ハンバーガーメニューが一般的ですよね。今回は理想的なハンバーガーメニ

記事を読む

投稿のビジュアルにcssを反映させる

ビジュアルと実際のデザインが違うんだが・・・・ はじめに 自作のテーマを使った場合、ワードプレス

記事を読む

広告

Message

広告

現在の総記事数: 306件

WordPressが書き換えられた時の対処方

アクセス先のサイトで「不正なソフトウェアを検出しました」と表示されると

さくらインターネットの請求書払い反映されるまで

さくらインターネットで支払い方法を請求書払い(コンビニ払い)にしている

HEIC形式を簡単にjpgにする方法

web上でクッソ簡単にjpgに戻せました はじめに ア

メルカリの売り上げを自分の口座に振込む方法

売り上げが上がるだけだと意味がありません。メルカリから自分の銀行に振り

お名前ドットコム
お名前.comのWhois情報公開代行のご案内が悪質すぎる

お名前.comでドメインを取得した人は気を付けてくださいね。 情弱な

→もっと見る


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