• 投稿日:2024/08/09
  • 更新日:2025/04/07
【ブログ中級者向け】クリッカブルマップのつくりかた

【ブログ中級者向け】クリッカブルマップのつくりかた

会員ID:HrKOq1Jv

会員ID:HrKOq1Jv

この記事は約4分で読めます
要約
イラストをクリックすると該当記事に飛べる機能「クリッカブルマップ」。ブログの回遊性が上がりますよ

私のブログ戦略の一つが「KW+都道府県」の記事を全て作成したことです。
記事の回遊性をあげるために、「日本地図のイラストから各都道府県をクリックしたら該当都道府県の記事にとべたらかっこいいなー」「回遊性上がるだろうなー」と思っていました。

そこで登場するのがクリッカブルマップです。
今回、自分がつまづいた点を中心に説明するので、この記事をよめばクリッカブルマップがつくれるようになりますよ。

クリッカブルマップとは

名称未設定のデザイン (62).png(イメージ図なのでこの絵からはジャンプできません)

クリッカブルマップとは、クリック可能なマップのことです。
たとえば、東京の場所をクリックすると、東京に関連する記事にとべます。

クリッカブルマップの作成方法

全体像は、下記の流れです。

1)ブログに画像をアップロード
2)Image Map Generatorでコード作成
3)ブログにコードを貼り付け
4)jQuery RWD Image Mapsでレスポンシブ対応

続きは、リベシティにログインしてからお読みください

ノウハウ図書館でできること
  • すべての記事の閲覧

  • ブックマーク

  • いいね・レビュー

  • 記事の投稿※応援会員(有料)のみ

  • ポイントの獲得※応援会員(有料)のみ

※会員登録には、新入生会員(初月30日無料)と応援会員(有料)があります

応援会員制度とは?
さらに!
  • リベシティの他の機能やサービスもご利用いただけます詳しく見る

ブックマークに追加した記事は、ブックマーク一覧ページで確認することができます。
あとから読み返したい時に便利です。

会員ID:HrKOq1Jv

投稿者情報

会員ID:HrKOq1Jv

パンダ会員

この記事に、いいねを送ろう! 参考になった記事に、
気軽にいいねを送れるようになりました!
この記事のレビュー(1
  • 会員ID:oSVMAI9Q
    会員ID:oSVMAI9Q
    2024/11/03

    記事を参考にして作成できました! ありがとうございます!

    会員ID:HrKOq1Jv

    投稿者