「はてなブログカード」のiframeなしの使い方など
はてなブログでは、はてなブログカードという機能を使えます。
リンクを貼ると、記事のタイトルにリンクしたカードのようなものが表示されます。
以下のようなものです。
これは、はてなブログでは、簡単に利用できるのですが、WordPressや他のブログサービスで実現するとしたら、少し大変です。ということで、それを実現できるようなサイトを作成しました。
以下のリンクからどうぞ。
「はてなブログカード」のiframeなしの使い方
そして、その簡単な使い方を書いておきます。
動作を保証するわけではないので、使ってみてうまく表示されないようなら、利用をしないでいただければと思います。
あと、ノークレーム、ノーサポートでお願いします。
準備：CSSをコピペする。Chromeで、Javascriptをオンに
対応のブラウザは、Chromeです。ブラウザは、Javascriptを使える設定にしておいてください。
そして、あらかじめ、「CSSを表示・隠す」を押すと表示されるCSSをブログのCSSにコピペしておきます。
当然ですが、CSSを編集すれば、表示を変えることもできます。
はてなブログの場合
はてなブログの場合は、「デザインCSS」などにコピペします。
WordPressの場合
WordPressの場合は、子テーマのCSSにコピペしておきます。
また、ビジュアルエディターのCSSにもコピーしておくと、投稿のエディタでもほぼ公開された見た目通りに表示されます。
エディタのCSSは、ビジュアルエディターのスタイルシート (editor-style.css)をテーマに追加して設定すると、エディタの編集画面でも使えますね。
WordPressのビジュアルエディタにCSSを反映させる方法
エディタで表示されるところが、この方法の良いところだなと思います。
2カ所にコピペするのがポイントですね。
あと、「TinyMCE Advanced」などのプラグインで、WordPressのHTMLで段落タグを残す設定にしておいてください。WordPressの標準のエディタだと、<p>タグなどをなくしてしまうなどして、おかしなことになるので。
こちらを参照のこと。
改行。WordPressのHTMLで段落タグを残しておくために、TinyMCE Advancedを使う
おそらくこれで使えるだろうと思います。
その他のブログの場合は？
CSSを編集してコピペできるブログサービスなら、使えると思います。
使い方
次に使い方ですが
1 「URL：URLを入力してください」というところにブログカードを作りたいURLを入力します。
2 そして、「ブログカード作成」を押します。
3 「HTMLコードをコピー」を押すと、クリップボードにHTMLがコピーされるはずです。
4 あとは、ブログ記事の「HTML」にペーストすれば、表示されるはず。
要は、CSSをブログに貼っておいて、HTMLを記事にコピペすることで、表示できるようにしています。
作った理由など
作った理由はいくつかあって、
まず、WordPressだと、ブログカードがいまいちな感じなので。
ブログカードは、プラグインを使うか、テーマ選べば反映されるようにできるのですが、投稿のエディタでは、表示されないというか、URLだけのような感じで、どんな風に表示されるのかわからなかったりします。これがいまいちなのと、やはりはてなのブログカードの表示の感じがいいかなと。
それと、はてなブログでは、iframeという中に表示されて、リンクになっていないのではという話もあります。はてなブログカードでは、SEOなどでリンクとして評価されていないかもしれません。
そうならないようにしたいというのもありました。
これで、とりあえずは、やりたいことができたかなと。少なくとも、わたしが運営しているブログなどでは、だいたい思ったように表示できています。
ということで、「はてなブログカード iframeなし」の使い方でした。
シェア
フォロー
関連記事
