【ブロガー向け】カードツールチップ導入


こんな感じで自分のブログにカードツールチップを表示させる手順をご紹介




このブログを始めたのは昨年8月末ごろ。
作成した記事の数はすでに120本を突破しました。そんな書くことあったっけ・・・・
大勢の方が読みに来てくださるおかげでぼちぼちと更新が続いております。


Warcraft世界観のカードゲームとか日本じゃ流行るまいと当初は考えておりまして、特に考えも無く始めたサイトでした。

不特定多数の人々に読まれるということを意識し、そして読者の方のご意見感想を頂くことで、少しずつ情報系サイトとして成長しつつあると(いいな)思います。
これはブロガーと読者の方のシナジーですね。

文章を書く人が居る、それを読む人が居る。その間にお互いがなにか得るもの、学ぶものごとがあるなら素敵な関係ではないでしょうか。



前置きはこんなところで。

日本でも口コミを中心にHearthstoneが密かなブームを迎えておりまして、このゲームを題材とした記事を書くブログさんも増えていくだろうと予想されます。

さてそこで、ブログ記事作成に役立つ情報もブロガーの方向けに書いていってみようかなと思った次第です。まず手始めとして、自分のブログにカード情報をポップアップするツールチップCGIを導入する手順を解説していきましょう。



【重点事項】 手順はたったの2ステップ、コードを2行コピペするだけです。
Javascriptの基礎知識もいらないっちゃいらないんですが、サイト表示に思わぬ支障を来たす恐れがあります。htmlをいじる時は必ずバックアップをとってから行って下さい。




Card Tooltip表示の準備


たとえばこんな感じで
Al'Akir the Windlord
Ragnaros the Firelord
Sylvanas Windrunner

カード名のリンクにマウスポインタを当てるとカード情報がJavascriptでポップアップ。
名前だけでどんなカードなのか判る人には不要なんですが、Hearthstoneを始めたばかりの人を読者として意識するなら必須の機能です。

Hearthpwn、Hearthhead、Liquidhearth、IhearthU、Gosugamersのような海外の大手サイトは自鯖にアップロードしたカードデータを出力しています。
しかしデータ管理の手間が煩雑なので、ウチみたいな個人レベルのサイトは大抵HearthpwnかHearthheadのカードデータをjQueryライブラリから読み込んでいます。

jQueryとは何なのかを説明し始めるとこの記事に収まらないので、甚だ無責任ですが解説は下記リンクをご参照ください。ここでは簡単に手順のみを記述していきます。




➥ [ascii.jp] 40分で覚える!jQuery速習講座
➥ [semooh.jp] jQuery 日本語リファレンス
➥ [jquery.com] jQuery API




手順1 jQueryライブラリ導入


jQueryライブラリをブログで読み込むには幾つか方法があります。
➥ http://jquery.com/からダウンロードしてjQueryライブラリやjQueryCSSを自分のサイトにアップロードするのが一般的ですが、これまた管理の手間がかかるんですね。

そこで一番簡便な導入として、GoogleにホストされているライブラリからjQueryファイルを読み込む手順をここで紹介します。
➥ [mynavi] Google人気JavaScriptライブラリ配布開始、ネット全体でキャッシュ効果


当サイトでは他との兼ね合いでバージョン1.8.3を使用しています。
htmlのheadセクション内に下記コードを貼り付けるだけでオッケー。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>



head内であれば位置は問いませんが、バージョン違いが複数あると後ろから読み込む仕様に注意してください。

記述例:





手順2 Tooltip script


ツールチップを読み込むサイトはHearthpwnとHearthheadのどちらでも構いませんし、両方導入して使い分けも可能。これはお好みなんですが、HearthheadだとFlavor textも表示可能です。細かいカスタマイズは詳細ページをご参照ください。
ここでもやることはコピペだけ。それぞれのサイトのスクリプトコードをhead内のjQueryスクリプト以降に記述します。

Hearthpwn
詳細ページ ➥ [Hearthpwn] HearthPwn Tooltip Syndication Instructions

<script type="text/javascript" src="http://static-hearth.cursecdn.com/current/js/syndication/tt.js"></script>


記述例:




Hearthhead
詳細ページ ➥ [WoWhead] Hearthstone Tooltips

<script type="text/javascript" src="http://static.wowhead.com/widgets/power.js"></script>
<script>var wowhead_tooltips = { "colorlinks": true, "iconizelinks": true, "renamelinks": true }</script>


記述例:




以上でhtmlの準備は完了。
あとはブログ記事の本文中にカードデータへのリンクを貼るだけです。




カードリンクコード


カードデータを引っ張ってくるには個別のページへとリンクを貼る必要があります。
たとえばDivine Favorであればこちら
http://www.hearthpwn.com/cards/581-Divine-Favor


記述例: Hearthpwn
<a href="http://www.hearthpwn.com/cards/581-Divine-Favor" target="_blank">Divine Favor</a>


記述例: Hearthhead
<a href="http://www.hearthhead.com/card=679/Divine-Favor" target="_blank">Divine Favor</a>



実際の記事にはこのように反映されます
Divine Favor
Divine Favor



んで、あとはこのカードページへのリンクコードが手元にあればコピーペーストするだけで記事を書いて行けます。

これには以前google docs上で公開したカードスプレッドシートをご利用頂ければとお手軽かと思います。詳細は下記ページにて。
➥ [dojo] カードデータ スプレッドシート



HearthpwnかHearthheadのシートを選択して



U列のTooltipからコピペするだけ




フォントの装飾が不要な方はカードリスト全体を他へ移してご自由にお使い下さい。

何にせよコード管理はExcelやOpenOffice、LibreOffice等の表計算ソフトを利用するといろいろ捗ります。必要なコード断片をCONCATENATE関数でくっつけてくだけです。




=CONCATENATE(P2,B2,Q2,R2,S2,T2,U2)
Abomination (Neutral/5/4/4) なんて感じで自分の好きなようにカスタマイズしコピペするだけで記事に貼り付けることができます。



といったところでブロガー向けリファレンス第一回、ブログにカードツールチップを表示させる方法の解説でした。次回は(何時になるか判りませんが)ブログ記事を書くために役立つツールの紹介なんかをしていこうと思います。




名前

Alternate hero Beginner Guides Blackrock Mountain Curse of Naxxramas Decks & Guides Diary Events Expansion Goblins vs Gnomes Journey to Un’Goro League of Explorers Mean Streets of Gadgetzan Metagame Mobile News & Notice One Night in Karazhan Patch Notes Season end reminder Solo Adventures Tavern Brawl The Grand Tournament Utilities Weekly Recap Whispers of the Old Gods World Championship Year of the Kraken Year of the Mammoth
false
ltr
item
Hearthstone dojo: 【ブロガー向け】カードツールチップ導入
【ブロガー向け】カードツールチップ導入
https://lh3.googleusercontent.com/-BR8yoyOQsgQ/U25lIKnBcaI/AAAAAAAADpQ/O44uZ9EezSw/w601-h344-no/tes.png
https://lh3.googleusercontent.com/-BR8yoyOQsgQ/U25lIKnBcaI/AAAAAAAADpQ/O44uZ9EezSw/s72-w601-c-h344-no/tes.png
Hearthstone dojo
http://hearthstone-dojo.blogspot.com/2014/05/blog-post.html
http://hearthstone-dojo.blogspot.com/
http://hearthstone-dojo.blogspot.com/
http://hearthstone-dojo.blogspot.com/2014/05/blog-post.html
true
1719873907649609782
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy