ビジョンミッション成長ブログ

ビジネス書や仕事術、iPhone、iPad、Mac、Apple Watch、Android、Xperiaの情報などを紹介。ビジョンやミッションを持って成長していくために参考になることを書いています。


 

 iPhoneXの予約状況、在庫情報の確認。在庫状況をApple、ソフトバンク、au、ドコモ。ヨドバシ、ビックカメラ、ヤマダ電機などから
 iPhone8、iPhone 8 Plusの予約、在庫、入荷状況。ドコモ、au、ソフトバンク、Apple公式サイト。家電量販店の在庫予約状況は?
 iPhone8のケースのおすすめと人気のケースのランキングまとめ
 iPhone8ガラスフィルムのおすすめと人気ランキングまとめ。iPhone8 Plusのガラスフィルムも
 格安SIMの比較・まとめ10とおすすめ(2016年)月額料金、特徴、速度など
 iPhone7のケースをどうする?iPhone7、iPhone 7 Plusのケースまとめとおすすめ
 iPhone7とiPhone 7 Plus、どちらを買う?違いは?比較。「コンパクトさ」か「カメラ」か
 iPad Pro 9.7インチのレビュー。Apple Pencilがいい!iPad Air 2とどちらがいい?
 おすすめの本・ビジネス書を2015年に読んだ良書から15冊

「はてなブログカード」のiframeなしを作りました。リンクになるのと、WordPressのエディタでも使えるのが良いところかと

はてなブログカードというのがあります。

↓ こういうのですね。

www.yahoo.co.jp

 

結構便利というか、記事などの概要やサムネイル写真が入ったりして便利です。はてなブログでは、リンクのURLを記事にペーストすると選べるようになっています。

しかし、このブログカードのHTMLを見てみると、「iframe」で書かれていて、Googleにとってはリンクにはなっていないという話もあります。まあどうなのかはわかりませんが。

ということなどが理由で、はてなブログカードのiframeなしを作ってみました。もう一つ理由があってWordPressなど他のブログサービスだと、ブログカードがいまいちだったり、使えなかったりするので、そういうことから一応作ってみました。

 

こちらのリンクからどうぞ

はてなブログカード iframなしに

 

動作を保証するわけではないので、使ってみてうまく表示されないようなら、利用をしないでいただければと思います。
あと、ノークレーム、ノーサポートでお願いします。

f:id:kobabiz:20170705210152j:plain

「はてなブログカード」のiframeなしを作りました

準備:CSSをコピペする

対応のブラウザは、Chromeです。ブラウザは、Javascriptを使える設定にしておいてください。

あらかじめ、「CSSを表示・隠す」を押すと表示されるCSSをブログのCSSにコピペしておきます。

当然ですが、CSSを編集すれば、表示を変えることもできます。

はてなブログの場合

はてなブログの場合は、「デザインCSS」などにコピペします。

WordPressの場合

WordPressの場合は、子テーマのCSSにコピペしておきます。
また、エディタのCSSにもコピーしておくと、エディタでもほぼ公開された見た目通りに表示されます。

エディタで表示されるところが、この方法の良いところだなと思います。 

2カ所にコピペするのがポイントですね。

あと、「TinyMCE Advanced」などのプラグインで、WordPressのHTMLで段落タグを残す設定にしておいてください。

こちらを参照のこと。

改行。WordPressのHTMLで段落タグを残しておくために、TinyMCE Advancedを使う

おそらくこれで使えるだろうと思います。

その他のブログの場合は?

また、CSSを編集してコピペできるブログサービスなら、使えると思います。

 

使い方

次に使い方ですが

 

1 「URL:URLを入力してください」というところにブログカードを作りたいURLを入力します。

 

2 そして、「ブログカード作成」を押します。

f:id:kobabiz:20170705213941j:plain

 

3  「HTMLコードをコピー」を押すと、クリップボードにHTMLがコピーされるはずです。

 

4 あとは、ブログ記事の「HTML」にペーストすれば、表示されるはず。

 

はてなブログで使うのは面倒かもしれませんが

少々、はてなブログで使うには面倒かもしれませんが、WordPressなど、対応していないブログサービスなら使うのもありかなと思います。

 

なぜ作ったのかというと

WordPressのブログなどで、ブログカードを使いたい時があるのですよね。

ただ、WordPressのプラグインでそれなりにできるのですが、エディタでは表示されず、URLが文字として表示されているだけだったりします。

そして、プラグインが動作しなくなったりしたら、使えなくなるだろうと思うので、作ってみました。こちらの方法は、HTMLのリンクなので、プラグインがなくてもリンクになります。

 

やっていることは、単純で、iframeの中のHTMLを取ってきて表示させているだけですね。

ちなみに、こんなことをして、はてなの運営などとして問題ないのかどうかはよくわかりません。

はてなブログの読者数の数字を、独自の「読者になる」ボタンに表示させる方法、いくつか。JQueryなど

 

ただ、こちらのJQueryではてなブログの読者数を表示させるようにして良いかと運営に尋ねたところ、悪意がなければOKと言っていたので、多分大丈夫だろうと。まあ、ダメだったら、そのうち使えなくなるかもしれません。

いずれにしても、はてなブログカードを、リンクとしてちゃんと使いたいという人は使ってみると良いと思います。 

繰り返しになりますが、ノークレーム、ノーサポートでお願いします。わたしはプログラマーでもデザイナーでもないので、これで良いのかどうかとかよくわからないので。

はてなブログカード iframなしに