任意の文字列に対応したポップアップ画像を自動で埋め込む！
- 2019/04/16
- 08:00
下のカード名のリストは、ポップアップ画像が自動的に埋め込まれた状態。
カード名をクリックで画像表示、画像以外をもう一度クリックで画像が消えるからね＾＾
カード名をクリックで画像表示、画像以外をもう一度クリックで画像が消えるからね＾＾
- ★6 ゼクエ改
- ★6 氷柱花ルシフェリア
- ★6 ラダマンティス
- ★6 ロレン(着物姿)
- ★7 ロレン(着物姿) ・・・ 存在しないカードはリンクにならない
- ★5 銀竜姫アンジェ
- ★5 煌めきのイーナ
【1】画像データと対応リストの準備
今回、カード画像データをGoogle Driveに共有しました。カード名とカード画像の対応リストを以下のリンクから入手してください。
※全てのカード画像を網羅した物ではありません。今後、リストを更新していきます。
cardimg_list.txtは、次のようなカンマ区切りの書式になります。
必要に応じてメモ帳などのテキストエディタで編集を行ってください。
必要に応じてメモ帳などのテキストエディタで編集を行ってください。
※文字コード：UTF-8
＜対応リストの書式＞
カード名,品質,カード画像のファイル名
ゼクエ改,6,1mkJYppO3RMljHpXQeIIkYMexXFvbI8FN ゼクエ改(悪魔形態),6,1bkgFJ1RABN1cUbTmg5jf1Nj9is4nM0DC おーがたんEX,5,1k6cMytCkQTsEXNs-rYjl5gL7-kYCtXos おーがたんEX,6,1No2d9QiFDiUlJ9v-DTtMe2alP3RKdnYT
対応リストを自身のサーバにアップロードし、ファイルをパスをどこかにコピーしておきます。
※FC2ブログの場合、下のhttps://blog～の箇所をコピー（パスの右側が見切れているので注意）
※FC2ブログの場合、下のhttps://blog～の箇所をコピー（パスの右側が見切れているので注意）
【2】ポップアップ用プログラムの編集とアップロード
以下のリンクをクリックして、「popup_cardimg.js」と「popup_cardimg.css」をダウンロードします。
「popup_cardimg.js」をメモ帳などのテキストエディタで開きます。
/* ================================
Project Name : Pop-up Card Image
Creation Date : 2019/04/22
Update Date : 2019/04/25
Copyright 2019 不滅のひよこ
================================ */
// カード画像リスト(カード名,品質,カード画像のファイル名)
var card_img_list = 'https://blog-imgs-111.fc2.com/i/m/m/immortalchicks/cardimg_list.txt';
// 画像著作権表記(改行は\n)
var card_img_copyright = '(C)Vector Inc. All Rights Reserved.\n(C)Shenzhen Fire Element Network Technology Co., Ltd. All Rights Reserved.';
// カード画像データサーバのパス
var card_img_server_path = 'https://drive.google.com/uc?export=view&id=';
get_card_img_list(card_img_list);
// 画像リンクに置き換えたい文字列を内包する要素
var card_name_replace_class = '.entry_body';
// 品質の接頭辞(★1から★7の表記の場合、接頭辞は★。SR,SSRなどの場合、接頭辞は空で良い)
var rank_prefix = '★';
// カード画像リストの品質(''の中に品質の種類を記述する)
var card_rank_mast = ['1', '2', '3', '4', '5', '6', '7'];
次の説明に従い、必要箇所を編集して保存してください。
- 9行目＜card_img_list＞ ・・・ 【1】でアップロードしたファイルのパスに必ず書き換えてください
- 12行目＜card_img_copyright＞ ・・・ 著作権表記が必要な場合使用します。必要ない場合は値を消してください
- 15行目＜card_img_server_path＞ ・・・ 画像がアップされているサーバのパスを記述します。今回は、Google Driveのファイル名までのパスが記述されています
- 20行目＜card_name_replace_class＞ ・・・ FC2の公式テンプレートの場合は「.entry_body」のままで問題ありません。置き換えたい文字列を独自クラスのタグで囲みたい場合は変更してください
- 23行目＜rank_prefix＞ ・・・ 品質の前に付く接頭辞を記述します。ディヴァイン・グリモワールの場合は★1～7という品質表記の為★を記述します。他のゲームのSR、SSRという品質表記の場合は、接頭辞は空にして、対応リストの品質にSR、SSRと品質を記述してください。
- 26行目<card_rank_mast> ・・・ ''の中に全種類の品質を記述して,で区切ってください。
編集が終わったら「popup_cardimg.js」と「popup_cardimg.css」をアップロードして、それぞれのファイルのパスをどこかにコピーしておきます。
次に、テンプレートに次の記述を加えてください。
<link rel="stylesheet" href="popup_cardimg.cssのパス"> <script src="popup_cardimg.jsのパス"></script>
それぞれのパスは、アップロード時の物に変更してください。
挿入位置は次の画像を参考にしてください。
<head>タグの中で「jquery.js」の記述より後が良いと思います。
※テンプレートによって内容は異なります。
<head>タグの中で「jquery.js」の記述より後が良いと思います。
※テンプレートによって内容は異なります。
[プレビュー]ボタンをクリックして、動作に問題がなれければ[更新]ボタンをクリックしてください。
【3】ブログ記事での記述方法
＜カード名の書式＞
★+1234567+半角スペース+カード名
フォントサイズなどの書式が設定されていたり、<div></div>や<span></span>などのタグで囲まれていれば、確実にカード名を認識します。
★+1234567+半角スペース+カード名
フォントサイズなどの書式が設定されていたり、<div></div>や<span></span>などのタグで囲まれていれば、確実にカード名を認識します。
カード名に続けて文章を書く場合、後ろに半角スペースや[]や「」を付ける必要があります。
（例）
⇒ 今回のパックの★6 ゼクエ改 欲しい
⇒ [★5 撲っ娘おーがたん]が、一人称の「僕」ではなく撲殺の「撲」という事に気が付かない人は多い
以上
（例）
⇒ 今回のパックの★6 ゼクエ改 欲しい
⇒ [★5 撲っ娘おーがたん]が、一人称の「僕」ではなく撲殺の「撲」という事に気が付かない人は多い
以上
スポンサーサイト
