>-->

2013-06 | クリボウの Blogger Tips

クリボウの Blogger Tips

Google Blogger の使い方、カスタマイズ方法、各種ツールなど、
Blogger 関連の役立つ情報を紹介しています。

Home > 2013-06

2013-06

Blogger ブログを Twitter Cards に対応させる方法

Posted at: 2013-06-15 Label: , , 127

このブログに

いつも楽しく拝読しています。
ところで、Twitter CardsのSummaryができるかBloggerへMetaタグを入れてみたのですがサムネイル画像が出なく、クリボウ様のサイトに情報ないかなぁと思い来てみた次第です。
もし、次のネタが決まっていないのなら、この辺りを記事にしていただければ嬉れしゅうございます m (_ _) m
Kats
というコメントが入っていたので、やってみたところ

Twitter Cards (Summary) を Blogger に適用する方法

できました。導入方法をこちらでまとめておきたいと思います。


Twitter Cards って何？

最初に Twitter Cards についてです。上の画像を見て分かるかと思いますが、Twitter のツイートに URL が含まれたときにそのリンク先ページのタイトルや要約、画像を自動的に挿入してくれるのが Twitter Cards の機能です。

これを表示させるためには、リンクされるブログの方で Twitter Cards に対応したメタタグをブログテンプレートに記載しておかないといけません。Facebook の OGP（Open Graph Protocol）と同じようなものと言うと理解しやすいかもしれません。

今回はシンプルな Summary Card の導入についてみていきます。参考にさせてもらったのはこちらのサイト。ありがとうございます！


導入方法

早速、Twitter Cards 用のメタタグを用意します。クリボウが使用したのは次のタグです。

<meta content='summary' name='twitter:card'/>
<meta content='@kuribo_blogger' name='twitter:site'/>
<meta expr:content='data:blog.pageName + &quot; | &quot; + data:blog.title' name='twitter:title'/>
<meta expr:content='&quot;http://bloggerspice.appspot.com/postimage/&quot; + data:blog.url' name='twitter:image'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>

2 行目赤字部分には、ブログに関する Twitter のアカウント名を入力します。これはオプションなので、特にアカウントがない場合には行ごと削除してかまいません。他の行は、どのブログでも通用するよう Blogger のテンプレート用データタグを使用しているので、そのまま使えるはずです。これらのメタタグを Blogger の管理画面「テンプレート ＞ HTML の編集」で <head> のすぐ後に貼り付けて保存します。

その後、Twitter Developers で Twitter Cards の申請を行います。

「Card Catalog」のポップアップが出たら「Summary」を選択、「Validate & Apply」タブを押して、自分のブログの好きな投稿の URL を入力して「Go!」を押してください。

Twitter Cards (Summary) を Blogger に適用する方法

ここで、ブログの Twitter Cards 対応状況が確認できます。右側にはプレビューが表示されます。「Standard Tags」の項目がグリーンだったら、ブログ側の設定は問題なしです。

「Request Approval」を押して申請画面を開きます。Twitter アカウントなど、必要事項を記入して（ほとんど入力済みだと思います）「Register Domain」ボタンを押します。これで全作業が終了です。意外と簡単なんじゃないでしょうか。

これで Twitter 経由のアクセスが少しでも増えるといいですね。


技術的なことなど

ここから先は、気になる人だけ読んでください。先ほどのメタタグについての解説です。

1: <meta content='summary' name='twitter:card'/>
2: <meta content='@kuribo_blogger' name='twitter:site'/>
3: <meta expr:content='data:blog.pageName + &quot; | &quot; + data:blog.title' name='twitter:title'/>
4: <meta expr:content='&quot;http://bloggerspice.appspot.com/postimage/&quot; + data:blog.url' name='twitter:image'/>
5: <meta expr:content='data:blog.metaDescription' name='twitter:description'/>

Twitter Developers のドキュメントで例示されていたメタタグを Blogger ブログ用に調整してみました。タグ内の属性が読みにくいのは、Blogger の HTML エディタが属性をアルファベット順に並べ替えてしまうので、混乱を避け最初からその順にしているためです。


１．まず、どの行でも、meta タグの最後に / を入れておきます。こうしておかないと Blogger の HTML エディタが

XML の解析中にエラーが発生しました。è¡Œ ***、列 ***: The element type "meta" must be terminated by the matching end-tag "</meta>".

と、meta タグが閉じていない旨のエラーを出してしまいます。


ï¼’．3 行目のページタイトル欄は、Blogger のテンプレート用データタグを使って「（投稿タイトル） | （ブログタイトル）」という設定にしています。区切りの文字「|」は変更可能です。Blogger 標準のページタイトル「（ブログタイトル）: （投稿タイトル）」を使いたい場合は青字部分を data:blog.pageTitle に変えるといいと思います。

参考：
３．4 行目のページの画像については、BloggerSpice という Web アプリを利用しています。http://bloggerspice.appspot.com/postimage/ に投稿 URL を付加して（メタタグ内ではページの URL を示すデータタグ data:blog.url を連結）アクセスすると、投稿内の最初の画像へとリダイレクトしてくれます。これがめちゃくちゃ便利です。

参考： ちなみに、data:blog.postImageThumbnailUrl というデータタグを使って、投稿のサムネイルを取得するという方法もあるにはあるんですが、その場合 Blogger 以外にアップロードした画像が反映できないのと、画像サイズが 72 x 72 ピクセルで小さいのとで、今回は採用しませんでした。


ï¼”．最後の行では、そのページの説明文を指定しています。Blogger では、2012 年から投稿ごとのメタデータ（descriptions）を投稿エディタから指定できるようになりました（参考１・参考２）。そのデータを持って来られないかな？と思い data:blog.metaDescription というデータタグを入れてみたところ、上手くいきました。めでたしめでたし。

Blogger 公式ブログ「Blogger Status」が更新終了

Posted at: 2013-06-05 Label: , 8

Blogger サービスの障害情報を報告する公式ブログ「Blogger Status」が更新を終了しました。


今後の Blogger のサービス利用可否については、ほかの Google サービスと同じように「Apps Status Dashboard」で見られるようになるとのこと。「Blogger ブログにアクセスできない！」というときに確認できるよう、今のうちにブックマークしておくといいかも。

ちなみに、Blogger のバグ・不具合についての公式ブログ「Known Issues for Blogger」の方はいまだ健在です。こちらは、「あれ？この機能動いてない？」というときに確認するといいですね。

Blogger で使えるレスポンシブデザインテンプレート 25 選

Posted at: 2013-06-02 Label: 24

今やブログは PC だけでなく、スマートフォンやタブレットでも見られるようになってきています。そこで、最近広がってきたのが「レスポンシブ Web デザイン」と呼ばれる、あらゆるデバイスに対応させるウェブデザインの手法です。ウィンドウの幅が狭まったときに、自動的にサイドバーが省略されたり、画像が縮小されたりするアレですね。

Blogger ブログ用にもいろいろなところでレスポンシブデザインのテンプレートが公開されているので、今回まとめてみることにしました。

「デモ」ボタンでテンプレートが適用されたブログを閲覧できるので、ウィンドウ幅を変更したり、別の端末で開いてみたりして、どんな表示になるのか実際に確認してみるといいと思います。

なお、ご自身のブログへのテンプレートの適用は自己責任で。必ずテンプレートのバックアップを取ってから変更するようにしてください。


参考：



Adsosive


水滴のような形のサムネイルが特徴的なテンプレート。

デモ　 ダウンロード


Align


サイドバーが最初に 3 つ。投稿以外にたくさん情報を載せたい人向け。

デモ　 ダウンロード


Aware


一番上の画像は、横にスライドしていくサムネイル。2 段目からが投稿。

デモ　 ダウンロード


Bresponsive


最初の段はスライド。2 段目からラベルや投稿。

デモ　 ダウンロード


Chronicl


ブログタイトルと投稿の間に、ラベルやページへのリンクが配置できる。

デモ　 ダウンロード


CopyBlogger v2


幅が狭まると、サイドバーが投稿の後に回ったり画像が縮小されたり。

デモ　 ダウンロード


DarkRed


狭めていくとかなり柔軟に変形する。ソーシャルボタンは最後まで残る。

デモ　 ダウンロード


Elite Minima


4 段階に変形。ピンク基調でかわいらしい。

デモ　 ダウンロード


Exelencia


ウィンドウ幅が変わるとゆっくり配置換え。サムネイルホバーで画像拡大も。

デモ　 ダウンロード


ExtraNews


最初にランダムな投稿サムネイルがタイルのように表示される。

デモ　 ダウンロード


Helicon


やわらかい色調のテンプレート。幅によっては画像のアスペクト比が無視されるので注意。

デモ　 ダウンロード


Incipient


白基調のシンプルなテンプレート。写真のない投稿が多くてもよさそう。

デモ　 ダウンロード


JPSTATION


投稿は基本的に抜粋。投稿の配置を訪問者が選べるボタンあり。

デモ　 ダウンロード


Labnol


Twitter 的に短い投稿を載せるのがよさそう。

デモ　 ダウンロード


Main Photo


その名の通り、写真メインのブログでどうぞ。

デモ　 ダウンロード


Max Mag


最上部にあらかじめ広告エリアが用意されているのがいいかも。

デモ　 ダウンロード


Minimum Theme


最初にソーシャルボタンがドドーンとあるのが特徴。

デモ　 ダウンロード


Pinfinity


ウィンドウ幅に合わせて、写真がモザイク状に流れ込んでくるタイプ。

デモ　 ダウンロード


Portfolio


昔の Flickr 風。PC で幅を変えても変化しないが、端末ごとに内容はちゃんと変わる。

デモ　 ダウンロード


RBSimple


幅に合わせて表示される広告が変わる。

デモ　 ダウンロード


Responsival


シンプルなレスポンシブテンプレート。テキストベースのブログによいかと。

デモ　 ダウンロード


Responsive


最初に巨大なスライドショー。

デモ　 ダウンロード


Sensational


左側、ラベルの掲示がいい感じ。

デモ　 ダウンロード


TheStyle


サムネイルへのマウスホバーで、ハイライト＋ちょっとだけ伸びる。

デモ　 ダウンロード


Top Blogging Ideas


狭めると左サイドバーがなくなるタイプ。画像は縮まないので、小さ目が吉。

デモ　 ダウンロード



…ということで、25 個一気に紹介しましたが、気になるテンプレートはあったでしょうか。これを機会に、Blogger テンプレートも衣替えしてみるといいかもしれませんね。
© 2005-2014 Kuribo. Powered by Blogger.