スポンサーリンク
pinterestをブログに貼り付ける
Pinterest(ピンタレスト)とは、気に入った写真や動画を自分が作った「ボード」に貼り付けていく、画像に特化したアメリカ発のSNS(ソーシャルネットワーキングサービス)です。
pinterestをブログに貼り付けるには、ウィジェットビルダーを使います。
ウィジェットビルダーを使う
Pinの作成でアイデアを伝えよう | Pinterest Business
ここで貼りたいピンタレストのURLを入力すると、ウィジェットを作ってくれます。
ブログに埋め込むとこんな感じ。
実際に記事の中につかった例
出産祝いのプレゼントに無印良品の刺繍サービスを使ってみた - AIUEO Lab2
instagramをブログに貼り付ける
インスタグラム(英語: Instagram)は、無料の画像共有(英語版)アプリケーションソフトウェアである。 デジタル画像を撮影し、画像編集(フィルター)をし、同サービスあるいは、Facebook、Twitter、foursquare、Tumblr、Flickr、ポスタラス(英語版)といった他のソーシャル・ネットワーキング・サービス(SNS)で共有する。
貼り付け方法
インスタグラムの貼付けは簡単。貼りたい画像を表示して、右下の「embed」をクリック。
クリックすると上のようにコードが表示されるので、コピーして貼り付けるだけ。
貼り付けると下のような感じ。残念ながら現在はiPhoneなどのアプリからはできないので、Web上でやるしかありません。
実際に記事の中につかった例
コクヨ測量野帳をこよなく愛する人たちの十人十色の使い方(2015年版カレンダーリフィル公開予定) - AIUEO Lab2
ブログカード形式でリンクを貼る
「ブログカード」をOGPなどに対応しました。さまざまなWebページをコンパクトに整形して掲載できます - はてなブログ開発ブログ
はてなブログで使えるようになったブログカード形式のリンク貼り付け。これ、WordPressなどのはてなブログ以外でも使えます。
しかも、こちらに書いてある方法を使えば、横幅の調整も可能。(はてなブログ純正も横幅変えられるだろうけど、こっちの方が簡単)
ブラウザにChromeを使っているなら、CreateLinkという拡張機能をつかうと純正より素早くブログカードを貼り付けることができます。
登録するコードはこちら。
<iframe style="width:100%;height:155px;max-width:100%;margin:0 0 1.7rem;display:block;" title="%title%" src="http://hatenablog.com/embed?url=%url%" width="300" height="150" frameborder="0" scrolling="no"></iframe>
Safariを使ってるなら「Format Link」という拡張がオススメ。
Format Linkなら下記のコードを登録すれば、ブログカード形式のリンクが作れます。
<iframe style="width:100%;height:155px;max-width:100%;margin:0 0 1.7rem;display:block;" title="{{title.s("<","<")}}" src="http://hatenablog.com/embed?url={{url.s("\"",""")}}" width="300" height="150" frameborder="0" scrolling="no"></iframe>
試しに2つの違う形式でブログカードを貼ってみます
はてなブログ純正とはちょっと表示が変わるけど、はてなブログ以外のサイトを貼る時のスタイルは変わりません。
純正
iframe使用
あとがき
この記事に書いた内容は主にPC表示向けかも。ブログカードはスマホだと見え方同じだと思います。
長くなるのでここでは説明できませんが、上の会話形式の表示もiPhone5sまでの端末なら綺麗に表示できるけど、iPhone6Plusとか大きい画面になると表示が崩れるはず。