BloggerにTwitterカードを設定する方法【2018年版】

-

Twitterに画像付きでブログのリンクを貼りたい

ちょっと前から、Bloggerを利用しているこのブログの宣伝用にTwitterを始めたのですが、リンクを貼ったときに、よく見る、枠の付いた写真付きのリンクにならないなーと、ちょっと不満を感じていました。



ほら、こういうのTwitterでよく見ますよね。コメントの下にリンク先の画像や記事タイトルや簡単な説明が角丸の枠で囲まれている投稿。これをやりたいのに、何故かこのブログのリンクを貼っても、枠も画像も全く表示されてくれないのです。



で、仕方ないからこんな風に、画像をブログからダウンロードして、Tweetする際に都度画像を貼り付けて投稿していました。でもやっぱり見た目がイマイチだし、なんで毎回そんな手間をかけないといけないのかと、段々と疑問を感じるようになりました。

そこで調べてみると、どうやら枠に囲まれたリンクは「Twitterカード（Twitter Cards）」と呼ばれるもので、ブログにちょいとした設定をすることで表示されるようになるということを知りました。（←すごく今更だけどw）

そうと知ったら、設定してみるに限ります。善は急げで早速取り掛かりましょう！



Blogger（Contempo）にTwitterカードを設定する方法

このブログはBloggerを利用して作成し、デザインテーマにはContempoを使用しています。以下の手順は2018年2月7日時点での説明になります。



Bloggerの編集画面で「テーマ」を開き、まずは画面右上の「バックアップ/復元」をクリックして、現在の設定のバックアップを保存しておきましょう。バックアップが完了したら、「HTMLの編集」へ進みます。



大量の英語がずらずらと並ぶHTMLの編集画面の枠の中で「Ctrl」と「F」キーを同時に押して、枠の右上に「Search:」と書かれた検索窓を出します（Macの場合は「コマンド」＋「F」を同時に押します）。

ここに「<head>」と入力して検索。見つかったら、「<head>」の下に、後述するTwitterカード用のコードを挿入します。もしくは「</head>」で検索をして、その上でも大丈夫。要は「<head>」と「</head>」の間のどこかに入れれば良いのですが、後からの見つけやすさを考えると「<head>」の直後か、「</head>」の直前がおすすめです。


場所が見つかったら、以下のTwitterカード用のコードをコピペします。（ネットで検索すると、いろいろなコードが紹介されていますが、私の環境では以下のコードが一番問題なく動きました。）


   <!--START Twitter Card -->
    <meta content='summary' name='twitter:card'/>
    <meta content='@ツイッターのアカウント' name='twitter:site'/>
    <meta content='@ツイッターのアカウント' name='twitter:creator'/>
    <meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
       <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
          <meta expr:content='data:blog.pageName' name='twitter:title'/>
       <b:else/>
          <meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
          <meta expr:content='data:blog.pageTitle' name='twitter:title'/>
       </b:if>
       <b:if cond='data:blog.postImageUrl'>
          <meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
       <b:else/>
          <meta content='デフォルト画像のURL' name='twitter:image'/>
       </b:if>
       <b:if cond='data:blog.metaDescription'>
          <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
       </b:if>
    <!--END Twitter Card -->


後で説明しますが、大きな画像のTwitterカードにしたい場合は「summary」の部分を「summary_large_image」に打ち換えてください。

「ツイッターのアカウント」となっている2ヶ所は、自分のTwitterアカウントに打ち換えてください。

「デフォルト画像のURL」となっている場所は、画像のない記事やトップページの場合に表示させる画像のURLを入れてください。



入力が完了したら「テーマを保存」をクリックして、変更を保存します。



Twitterカードが正しく設定できたかを確認しよう

正しく設定できたかを確かめるために、下記のサイトで確認をしてみましょう。

https://cards-dev.twitter.com/validator



「Card URL」に確認してみたいブログ記事のURLを入れて、「Preview card」をクリック。正しく設定が出来ていれば、右側にサンプルが表示されます。ほっ。どうやら上手く設定出来たようです。



HTMLに書き込む「summary」の部分を「summary_large_image」に変えると、こんな風に画像の大きなTwitterカードになります。画像で目を惹きたい場合には、こちらが良さそうですね。

記事タイトルの下に表示される説明文は、各ブログ記事の編集画面で設定します。



各記事の編集画面の右側に「検索向け説明」という項目があります。ここに入力した内容が、Twitterカードの説明文として表示されます。今まで入力したことはなかったけれど、これを機会にちゃんと入れるようにしようと思います。


ということで、無事にTwitterカードの設定が完了しました。Twitterにリンクを投稿するのがちょっと楽しくなりそうです♪

ちなみに、ネットにはいろいろな設定方法紹介記事がありますが、今では設定方法等が変わってしまっているケースも多いので、なるべく新しい記事を参考にするのが良いと思います。

（おしまい）

この記事をシェアする
  • B!
  • COPY
    LINK

▼今週の人気記事

スピーカーのエッジ交換に挑戦！破れた穴を自分で修理してみた！

-
イメージ
スピーカーコーンのゴム（エッジ）がボロボロに・・・　 先日、部屋を掃除しているとスピーカーのネットに埃がたくさん付いているのに気が付きました。こりゃいかんと思い、ネットを外して埃を落とそうとしてびっくり！ スピーカーコーンの周囲のゴム部分が経年劣化のせいか弾力を完全に失ってカッサカサ。それどころか、音を出したときの振動に耐えられなかったのでしょう。ボロボロと崩れ落ちて穴まで空いているじゃないですか！ これではコーンがスムーズに動けないし、穴から音も漏れちゃいます！ これは困ったどうしたものかとネットを彷徨っていると、コーンの周囲のゴム部分は自分で交換できることを発見！ 『スピーカーエッジ』という名前で交換部品が売られていました。サイズによって幅はあるけれど、エッジは 1 個 1,000 円から 3,000 円くらい。接着のための専用ボンドが 300 円弱。これは試してみる価値大です！ スピーカーについての知識なんて全然ないけれど、思い切って挑戦してみることにしました！ スピーカーエッジの交換手順　 購入した交換用のスピーカーエッジがこれ。 ファンテックさんのサイト でネット購入したのですが、種類豊富な上、機種名で適合エッジを探せてすごく便利です。専用のボンドも一緒に買いました。筆と詳細な交換手順説明書も付属しています。 まずはスピーカーユニットを留めているネジを緩めて、エンクロージャー（スピーカーの箱）から外します。 スピーカーユニットとケーブルがハンダ付けされていたため、ここまでしか動かせませんでした。仕方ないので、ユニットを外した穴の中にカスなどが落ちないよう、念のためビニール袋をかぶせます。 ネジ留め用の前面フレームをユニットから外します。ちょっと力を入れるとペリっと剥がれました。 劣化した古いエッジを取り除きます。豪快にペンチでベリベリ。 フレームに接着されているところはマイナスドライバーでガリガリはがします。彫刻刀があればそっちの方が使いやすいそうです。 マイナスドライバーでは取れない部分はカッターで削り取りました。ちゃんと綺麗に取り除くのは意外と大変ですね。 今度はコーンの方に残った古いエッジを除去します。スピーカーユニットをひっ
続きを読む »»»

【DIY】切れて困ったプリーツ網戸を、ロール網戸に枠ごと交換してみた

-
イメージ
玄関の窓に付いていたプリーツ式の網戸が何箇所も切れてしまったので、DIYでロール式の網戸に交換をしてみました。注文時に窓のサイズをきちんと測って伝えれば、交換はドライバー１本で簡単にできます。プリーツ網戸の修理を考えているなら、いっそのことロール式へ交換してしまうのがおすすめです。 破れてしまったプリーツ網戸の修理は難しい 我が家の玄関の窓には、折り畳んで収納できるプリーツ式の網戸が付いていました。不二サッシ製のこのプリーツ網戸はお洒落で良かったのですが、網戸をジャバラ状に折り畳んで収納するために、網戸が折れる位置が経年劣化で切れてしまうのが大きな欠点です。 10年ほど経ったプリーツ網戸は、見ての通りあちらこちらが切れてしまって、もはや虫やらゴミやらが入り放題。これでは窓を開けておくことはできません。 網戸の折れる部分はそれなりに補強はされていますが、開閉を繰り返すうちに、折り目部分がどうしてもこんな風に切れてきてしまうのです。 切れたプリーツ網戸の補修のために、まずはロール状の網戸補修シートを買ってみました。お値段は800円ほどです。 補修シートは、透明な粘着シートの片面に、網戸のネットが貼られた状態になっています。これを穴や切れた場所の大きさに合わせて、自由に切って使います。 粘着シートは透明なシート状なので、空気は通りません。見た目は網戸のネットと同じですが、この補修シートを貼った部分の通気性はなくなってしまいます。 とはいえ、小さな穴の補修であれば、これで何の問題もありません。穴の開いた箇所に部屋の内側から貼れば、その部分の通気性はなくなるものの、見た目もそれほど目立たず、コスパも抜群です。粘着力が心配であれば、内側と外側の両面から貼れば、さらに安心です。 ところが、プリーツ網戸の折り曲げ部分が切れた場合は、そう上手くはいきません。補修シートを予め折り曲げて、さらに内側、外側の両面から貼ってみたのですが、網戸の開閉をすると、折り目が伸びたり折れたりするのに追従しきれず、補修シートがどうしても剥がれてしまうのです。平面部分であれば補修シートで十分ですが、結局、プリーツ網戸の折り曲げ部に使うのは無理という結論になりました。 となると、プリーツ網戸のネットそのものを新
続きを読む »»»

トイレをDIYでタンクレス風に大改造　～その1　部品作成編～

-
イメージ
殺風景なトイレを心地良くしたい　 後付けした温水洗浄便座の配線がむき出しで、床に置いた掃除道具も気になる我が家のトイレ。殺風景で温かみがないし、掃除をするのにも邪魔。もっと心地良くてすっきりした空間にしたい！ということで、流行りの「DIYでタンクレス風トイレに改造」に挑戦してみました！ 開始前。あまりに普通で、お洒落さとは無縁ですね～。 まずは角材でフレーム作り　 まずは1.9×3.8mmの角材を使って、タンクの左右にフレームを作りました。上端はタンクの高さと合わせてあります。左右に渡した前後2本の梁は、フレームに固定せず上に置いてあるだけです。この上にさらに天板を置き、その天板を挟んで手洗いボウルを載せる計画です。 洗浄レバーの部分は隠すと流せなくなってしまうため、窓にする予定。 内側には板を貼ります。上の写真にあったレバーの下の奥へ渡した角材は、不要そうなので取ってしまいました。このあたりは組み立てながらの試行錯誤です。 配線やコンセントを避けるため、柱となる1.9×3.8mmの角材は広い面を表にしたり横にしたりと、場所によって向きが変わっています。そのため、柱を繋ぐ梁もいろいろな止め方になってしまいました。単純な箱型だと楽なんですけどね～。 左側フレームの上部は物入れにする予定なので、ここも集成材で内張りをします。 透明プラダンで試作　 フレームの表面にはベニヤを貼る予定ですが、ベニヤをいきなり正確なサイズに切るのは難易度が高いので、透明な養生用プラダンを買ってきて、試作をしてみました。透明でフレームが透けて見えるので、プラダンにマジックで窓や扉の位置を書き込んでいきます。これは、すごく便利。 プラダンの片面を切らずにおけば、扉も簡易的に再現できます。蝶番の位置もここで検討。扉以外の場所に書き込んだ四角形は、マグネットキャッチを付ける場所。前面パネルは取り外せるように、フレームとはマグネットキャッチで固定する予定です。 プラダンを計測して、簡単な設計図を描きました。これを基にシナベニヤをカットします。 シナベニヤで表面パネルを作成　 外周だ
続きを読む »»»

インクカートリッジを替えても薄い、シャチハタ印鑑の復活方法！

-
イメージ
「シャチハタの印鑑の色が薄くなったからインクのカートリッジを替えたのに、全然濃くならない！」 そんな時の解決法を思い付きました！ ※詳細は写真をクリックして拡大表示でご覧ください。 どうやら長年使っていると本体側にあるインクを受けるスポンジ部分がへたって凹み、インクカートリッジの先端が届かなくなってしまうようです。 つまり届かなくなったインクカートリッジの先端を届くようにすればOK！ 諦めていたシャチハタ印鑑も、これでバッチリ復活しますよ！！ （おしまい）   関連記事 ■ トランプの7の新しいデザインを考えてみた   （2015/10/15） ■ 製品アイデア『残量インジケータ付きホチキス』   （2015/3/24） ■ フード付きパーカー用の物干しハンガーを作ってみた！   （2015/1/12）
続きを読む »»»

覚えておくと安心。街中の無料充電サービスを、新宿高島屋で使ってみた。

-
イメージ
外出中に携帯電話やスマホの充電が切れて大ピンチ！　そんなときに心強い、無料充電サービスを、新宿高島屋で試してみました。 使い方は簡単。手軽に充電できます。 新宿高島屋の2階入り口にあるサービスカウンター。そのすぐ裏に、無料の充電器が置かれていたので、どんな感じなのか試してみました。 操作は簡単。ケータイやスマホを入れるボックスが3つあるので、数字パネルの上のオレンジ色の矢印で、3つの中から空いているボックスを選択します。ちなみに、左矢印は一番左のボックス、上矢印が真ん中、右矢印が一番右のボックスです。 矢印を押すと、対応したボックスが開くので、ケータイやスマホを中に入れて、蓋を閉じます。あとは、数字のボタンで4桁の暗証番号を入力すれば操作完了。取り出す場合も、同様に矢印キーでボックスを選択し、先程入力した暗証番号を間違えなく押せば、蓋が開いて取り出せます。 操作は非常に簡単ですね。 無料充電器の注意点 ボックスの中にはケータイやスマホとの接続ケーブルが用意されていますが、ボックスによってケーブルの種類が少し異なっています。真ん中と右は、「micro USB」と、iPhone用の「Lightningケーブル」の2種類。左のボックスには、「USB Type-C」と、「FOMA及びSoftBankの3G用の端子」、「auのケータイ用端子」の3種類が設置されています。自分でケーブルを用意する必要がないのは便利ですが、利用したい端子のボックスが空いていない可能性もあります。（※充電器によって、端子の構成は異なっているかもしれません。） サービスカウンターのすぐ後ろなので、常に人の目はあるものの、盗まれる不安感というのも、なくはありません。心配な人は、充電が終わるまで待っていた方がいいかもしれません。 4桁の暗証番号も、忘れてしまうと取り出すことができません。決して忘れないよう、きちんと覚えておきましょう。 それと、あたりまえの話ですが、充電中はケータイやスマホが使えません。充電の間に買い物をしたのですが、会計時にスマホのポイントサービスアプリを使おうと思ったら、スマホがなくてダメでしたw　そりゃそうですね。 完全に充電できるわけではなくて、充電は20分間の限定 そして、肝心の充電は、満充電までしてくれる
続きを読む »»»

電子レンジの目隠しカバーをDIYで作ってみました

-
イメージ
トイレの改造 に使ったシナベニヤと角材が残っていたので、電子レンジの背面を隠すカバーをDIYで作ってみました。 ベニヤとコルクボードとワイン木箱の蓋で作成　 全体の形としてはL字型です。残っていたシナベニヤ2枚をL字に組み、これまた残っていた角材3本で補強しています。リビングに向けるこの面は、右半分にコルクボードを裏からネジ止めしました。左端の切り欠きは、コンセントを避けるためのものです。 もう一つの面にはワインの木箱の蓋を、これまた裏からネジ止め。下の方は蓋の高さが足りずにシナベニヤが見えてしまっていますが、実際に設置してしまえばあまり目立たないはずなので、よしとします。 裏から見たところ。シナベニヤとワイン箱の蓋、コルクボードの額縁部分はオイルステインを塗って、色味を統一しました。 塗装はオイルステインと蜜ロウワックス　 塗装に使ったのは、この水性オイルステイン。匂いがほとんど無くて使いやすいです。 オイルステインの上には、ニスの代わりに、フローリングに使っている 蜜蝋ワックス を塗りました。 ニスではないので、テカリはなく落ち着いた感じに。色は想定よりも暗くなっちゃったから、オイルステインは少し水で薄めて塗った方がよかったかもしれません。 それではビフォー・アフターをどうそ　 それでは実際に設置してみましょう。 まずはビフォーから。 こんな風に、リビングに思いっきり背面をさらけ出しているので隠さないわけにはいきませんね〜。 じゃん！ アフターです！　はー、すっきりしました。 実は今までも、このコルクボードとワイン箱の蓋で目隠しカバーを作ってはいたのですが、電子レンジを大きなものに買い替えたら隠しきれなくなってしまっていたのです。以前のものはコルクボードを横向きで使っていて、ワイン箱の蓋の高さまでしかありませんでした。つまり、ワイン箱の蓋の下のシナベニヤが見えている分だけ、電子レンジの上部が見えてしまっていたのです。 でも、これならバッチリ。ワイン箱の蓋の下のシナベニヤ部分は手前に何かしら置いてしまうから、それほど気にならないはずです。 うん。ず
続きを読む »»»

【WALKMAN NW-A100シリーズ】SpotifyのダウンロードデータをSDカードに保存する方法

-
イメージ
発売発表と同時に予約申込みをするほど心待ちにしていた、ストリーミングWALKMAN NW-A100シリーズが手元に届きました。内蔵メモリの大きさによって、16GB、32GB、64GBの3モデルが用意されていますが、気になるのはストリーミングサービスからダウンロードした曲データを、SDカードに保存できるのかということ。NW-A100シリーズを買う目的であったSpotifyのデータは問題なくSDカードに保存できたので、その方法をご紹介します。 Spotifyの曲データをダウンロード保存できるのは、有料プラン会員だけ まず初めに注意が必要なのは、Spotifyで曲データをダウンロード保存できるのは、有料プラン（premium）会員だけであるということです。毎月の使用量を払うことで、曲データのダウンロード保存が可能になり、ネット環境のない状態でも、オフライン再生を利用できます。Wi-Fiの繋がらないオフライン環境でSpotifyを楽しみたいのならば、迷いなく有料プラン（premium）に申し込みましょう。 Spotifyからダウンロードした曲データを、SDカードに保存する方法 それでは、Spotifyの曲データをmicroSDカードに保存する手順の説明です。 まずは、WALKMAN本体にmicroSDカードを挿し込みます。スロットは本体下部にあります。最初の使用時にはmicroSDカードのフォーマットが自動的に行われます。 SDカードが使用可能になったら、Spotifyのホーム画面右上にある、歯車のアイコンをタップします。  「設定」画面が開いたら、一番下までスクロールし、「その他」の下にある「ストレージ」をタップします。（画面中ほどにも、データ使用量等が表示された「ストレージ」という項目がありますが、そちらではありません。もっと下までスクロールして、「My Music データの保存先を選択してください。」と書かれた「ストレージ」を探してください。） 「デバイスのストレージ」の上に、「SDカード」が表示されました。ここをタップして、チェックマークをSDカードに変更します。 本体内にすでにダウンロードした曲データがある場合、SDカードにデータを移す確認表示が出ます。よければ
続きを読む »»»