パズドラ攻略メモ

パズドラ攻略・情報・日記blog

*

ブログカードと LINE風コメントを 実装します

      コメント(1)

ブログカー ド制作
ブログの新機能として ブログカードの実装と
LINE風コメントで 一言コメントコーナーをする スクリプトを 組みましたw

その実験と 注意点(特にブログカードの方)です

ブログカードを 作りました

ブログカードカードとはなんだ

ブログカードって なんやねん?って方も多いと思います

それは・・・・・

こんなやつの事です↑↑
カード形式に ブログを紹介する表示方法

ヘラチャレンジ を 一挙に ノーコン クリア 致しました♪ 各ダンジョンを 様々なリーダーで 攻略 しています♪ 最近産まれたリーダーモンスター多めに なっております

トップページだけではなく 画像があれば画像付きで リンク先を紹介できる オシャレなやつなのです♪

他のサイトも出来ます

ランク400を記念してブログ始めました♪いろいろ書き込むのでよろしくお願いします♪

うちのブログと 一番最初に相互リンクをしてくださった 風さんのブログです

綺麗にカード化出来ました♪

無課金でパズドラを攻略しています。他とは違った視点で攻略していきます!
耐久、Sランク、フレンドとのからみなどなど面白いのでぜひ見てくださいね~!!

続いて 同じ北海道出身で 同い年の札幌さんのブログですw
こちらも カード化してみました♪

iOS・Android用パズルRPG『パズル&ドラゴンズ(パズドラ)』の攻略wikiです

ブログだけじゃなく wikiも可能
何時もお世話になってる パズドラ非公式wiki様です

ブログカードの作り方

多分 これ見た人は 難しい事してるのかなぁーと思われるかも知れませんが

実際は・・・・

ブログカード 作り方
このように カードにしたいリンクのアドレスを 貼ってるだけの 楽チン仕様になってます♪

というのも oEmbedと言うシステムを 使ってるからなんですよー

oEmbedとは、埋め込み用コードを取得するためのシステム、統一規格です。
TwitterやYoutube、Vimeoなどといった世界的に有名なwebサービスの各々がこのoEmbedの規格を採用しています。

統一規格があることで、web開発者はoEmbedの仕様だけを知っておけば、「個別に各サービスの仕様を調べる」といった学習コストをかけることなく、様々なサービスの埋め込み用コンテンツを利用することができるわけです。

という ともかく 便利なものなんですw

機種をXperiaZ3に変更 やれることが大きく変わりました。ブログにも使える機能が盛り沢山。YouTube Indonesia Twitter等今後はフル活用でいきます その例をご覧下さい

で いくつかやってる TwitterやYouTubeの埋め込みも このoEmbedを使用して 埋め込みやってますw

ブログカード化出来ない所も多い

先ほどの通り リンクされる側がoEmbedに準じて居ないと ブログカード化出来ません

代表的なのは・・・・

ヘララッシュで初デビューした意外と可能性を秘めているお二方♪ – BBAのパズドラ日記

こちら これまたお世話になってる ぶーさんのブログですが
FC2ブログは 対応してないため ブログカード化出来ませんでした><

面白かったのは AppBankさんw

パズドラ 究極攻略データベース

パズドラのアプリからも リンクの貼られてる パズドラ究極攻略ですが
ブログカード化出来ませんでした

しかし

AppBankのホームページは ブログカード化出来ますw

もちろん AppBankの パズドラ記事も ブログカード化出来ましたww

恐らく ホームページ制作してる 部署か人が 違うんでしょうねw

ブログカード化出来る所と出来ない所

実験した中からの 結果です♪
将来的に変わる可能性も十分にあります。

ブログカード化出来るところ

はてなブログ等の はてな関連
ライブドアサービス

出来ないところ

FC2関連
ヤフーブログ
アメーバブログ

その他

サーバーにより 色々

と言う結果になりましたw
まだまだ 対応してる所少ないです><

私が使用してる WordPress(Xserver)は カード化出来ましたが
同じWordPressでも 出来ない方が居ました

その当たりの基準は良くわかりませんw

ブログカードを 使いたい方へ

WordPressの方用

WordPressなら プログラム組めば なんとかなるんですが
それが 難しい または 面倒くさい方は

WordPress 4.0 以上で使用できる「はてなブログカード」のようなOGPブログカードの埋め込み機能を作成したので紹介します

こちらの プラグインを使えば ブログカード化が 出来ます
(サーバー等の環境によるかも知れませんが)

WordPress以外用

今回は、ブラウザ上から以下のような綺麗なブログカードをクリック一発で作成する方法です。上記のブログカードの記事は、Wordpress上で内部リンクのみカードで表示するカスタマイズ方法でした。けれど、今回の方法は、外部リン

こちらのサイトに書かれてる方法で 大体のブログで 作れます♪

簡単に言うと はてなブログの機能で ブログカードを作って
それ以外のサイトに 作ったブログカードを iframeタグで囲んで表示させる
って
わけですねw

もっと 簡単にいうと

<iframe class="任意クラス" frameborder="0" height="150" scrolling="no" src="http://hatenablog.com/embed?url=リンク先のアドレス" title="リンク先のタイトル" width="300"></iframe>

こんな感じで作れば ブログカード作れます。

何時か対策されそうなやつですが 一応今のところは 可能のようです・・・
はてブ公認のやつなのか 確認取ってませんので 自己責任で お願いしますw

まとめと 言いたいこと

というわけで ブログカードの話でした♪

今後は パズドラ情報のまとめ記事と 他サイトで 面白かった記事の紹介コーナーを 作ろかなと考えてます

最近殆ど無課金プレーな アンさんには ネタが無いんですよw
なので 他人のふんどしで 相撲を取る勢いです(まてw)

そのコーナーの 見た目を よくするための ブログカード化なのですw

やはり 普通にリンクを 貼ってあるより こうやってカード化されたやつの方が 興味湧きますよね?

私なら 同じ内容の物なら 確実に カード化されてる方を クリックしますw

出来る事なら 全リンク カード化してあげたい所なのですが

面倒くさいです←

楽に作れるから 今回のような ブログカードを実装しましたしねw

ですので 自動でカード化されないところは 普通のリンクのまま 手を加えるつもりは ないです

そこは 贔屓とかでは無いですし
こちらの都合による事では ありますが ご了承ください

補足

カードのデザインは もうちょっと変える予定です。
スマホで 見ると 外のライン見切れてるし><

ちなみにカード化出来ないサイトも アドレス貼るだけで リンクになるようになってます
素晴らしいっす←

LINE風一言コメントコーナー

CSSを 弄り倒して ライン風の一言コメントコーナーを作りました

管理人アン

これですよ これ

アイコンは Twitter同様 ライフ・セクシーです

それがセクシー シャバダドウ

これ作るの めっちゃ苦労しましたwww 8時間くらい 色々微調整して作り上げましたよ‼

幅が決まってる PC用のを作るだけなら 恐らく簡単なのですが

スマホにも 対応となると デザインが 崩れる崩れる

androidは 横幅固定だから良いのですが
(機種の幅ではなく ブラウザの サイズの事です)

iPhoneとandroidは 違うだけじゃなく iPhoneは 機種によっても 違うという 面倒くささ

その全てで 崩れないデザインにするため 大変でしたが 上手く出来たはず‼

今後は 常に というわけではありませんが
最後の一言コーナーな感じで 使う予定です↑↑

記事内は なるべく丁寧な言葉で やってますが 一言コーナーは 素な感じでいく予定←

前からやりたかったんです ムフフ

 - 未分類

ブログランキング参加中

人気ブログランキングへ
にほんブログ村 ゲームブログ パズドラへ

シェアボタン

  • このエントリーをはてなブックマークに追加

Comment

  1. アン より:

    さっそく ブログカードのデザインは変更してますw

    ひとまず これで完了のつもりw

Message

メールアドレスが公開されることはありません。

PAGE TOP
>