「はてなブログカード」のiframeなしの使い方など
シンカツブログ
検索

「はてなブログカード」のiframeなしの使い方など

シェアする

はてなブログでは、はてなブログカードという機能を使えます。

リンクを貼ると、記事のタイトルにリンクしたカードのようなものが表示されます。

以下のようなものです。

Yahoo! JAPAN

日本最大級のポータルサイト。検索、オークション、ニュース、メール、コミュニティ、ショッピング、など80以上のサービスを展開。あなたの生活をより豊かにする「ライフ・エンジン」を目指していきます。

これは、はてなブログでは、簡単に利用できるのですが、WordPressや他のブログサービスで実現するとしたら、少し大変です。ということで、それを実現できるようなサイトを作成しました。

以下のリンクからどうぞ。

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

はてなブログカード

「はてなブログカード」の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を使う

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

WordPressの投稿エディタでは、HTMLの編集もできますね。投稿エディタの「テキスト」タブでHTMLで編集ができます。HTMLの編集をしたい時もあると思います。ただ、このビジュアルエディタは、段落タグの<p>を表示してくれ

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

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

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

使い方

次に使い方ですが

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

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

f:id:kobabiz:20170705213941j:plain

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

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

要は、CSSをブログに貼っておいて、HTMLを記事にコピペすることで、表示できるようにしています。

作った理由など

作った理由はいくつかあって、

まず、WordPressだと、ブログカードがいまいちな感じなので。

ブログカードは、プラグインを使うか、テーマ選べば反映されるようにできるのですが、投稿のエディタでは、表示されないというか、URLだけのような感じで、どんな風に表示されるのかわからなかったりします。これがいまいちなのと、やはりはてなのブログカードの表示の感じがいいかなと。

それと、はてなブログでは、iframeという中に表示されて、リンクになっていないのではという話もあります。はてなブログカードでは、SEOなどでリンクとして評価されていないかもしれません。

そうならないようにしたいというのもありました。

これで、とりあえずは、やりたいことができたかなと。少なくとも、わたしが運営しているブログなどでは、だいたい思ったように表示できています。

ということで、「はてなブログカード iframeなし」の使い方でした。

WordPressでやっておきたいカスタマイズリストまとめ。これだけやれば、最低限ブログ運営はできるはず

ソフトバンクオンラインショップ
ドコモオンラインショップ
auオンラインショップ

フォローする シェアする

Facebookページ

Twitter

Facebookページに、「いいね!」を!

更新情報をお届けします!

Twitterを、フォローする!

Twitterのフォローも、ぜひ!

シェアする
ビジネスコーチ、ウェブコンサルタント。
13年ほどブログを毎日更新している。
著書に、『1つのことを長く続けられる技術』(サンマーク出版)、『仕事のムダを削る技術』(ソフトバンククリエイティブ)、『10倍ラクするスマートフォン仕事術』(技術評論社)がある。

シェアする

フォローする