AIUEO Lab2

1年のうち250日は夕飯を作る主夫が、iPhoneや料理、気になったものを紹介するブログです。

みんなまだ意外とやってないブログの見せ方。pinterestやinstagramを貼り付ける方法

f:id:akiueos:20141014185749j:plain

質問者の写真
今日は最近できるようになったブログの装飾法について書くよー
解答者の写真
装飾法?見出しとかデザインですか?
質問者の写真
うーんと、ちょっと違くて。本文中の画像とかリンクの貼り方についてだよ。
解答者の写真
あ、最近貼り付け方変わったinstagramとかですね。ところでこの会話形式はなんですか?
質問者の写真
ブログではあんまり見ないけどちょっと前に流行ったよね。解説とか比較サイトなんかだと画像でやってるところはあるけど。
解答者の写真
更新が面倒とか?いちいち画像つくるの大変ですもんね。STORYS.JP(ストーリーズ)でも同じような形式を見たような…
質問者の写真
あー、たしかに。あれはCSSでやってるのかな。ここでは長くなるからやり方は説明しません!
解答者の写真
え…ケチ!では、とりあえず本編スタート!

スポンサーリンク

pinterestをブログに貼り付ける

f:id:akiueos:20141014153913p:plain

Pinterest - ピンタレスト

Pinterest(ピンタレスト)とは、気に入った写真や動画を自分が作った「ボード」に貼り付けていく、画像に特化したアメリカ発のSNS(ソーシャルネットワーキングサービス)です。

pinterestをブログに貼り付けるには、ウィジェットビルダーを使います。

ウィジェットビルダーを使う

f:id:akiueos:20141014121116p:plain

Pinの作成でアイデアを伝えよう | Pinterest Business

ここで貼りたいピンタレストのURLを入力すると、ウィジェットを作ってくれます。

ブログに埋め込むとこんな感じ。

実際に記事の中につかった例

出産祝いのプレゼントに無印良品の刺繍サービスを使ってみた - AIUEO Lab2

instagramをブログに貼り付ける

f:id:akiueos:20141014154037p:plain

Instagram

インスタグラム(英語: Instagram)は、無料の画像共有(英語版)アプリケーションソフトウェアである。 デジタル画像を撮影し、画像編集(フィルター)をし、同サービスあるいは、Facebook、Twitter、foursquare、Tumblr、Flickr、ポスタラス(英語版)といった他のソーシャル・ネットワーキング・サービス(SNS)で共有する。

Instagram - Wikipedia

貼り付け方法

f:id:akiueos:20141014190801j:plain

インスタグラムの貼付けは簡単。貼りたい画像を表示して、右下の「embed」をクリック。

f:id:akiueos:20141014190813j:plain

クリックすると上のようにコードが表示されるので、コピーして貼り付けるだけ。

貼り付けると下のような感じ。残念ながら現在はiPhoneなどのアプリからはできないので、Web上でやるしかありません。


実際に記事の中につかった例

コクヨ測量野帳をこよなく愛する人たちの十人十色の使い方(2015年版カレンダーリフィル公開予定) - AIUEO Lab2

ブログカード形式でリンクを貼る

「ブログカード」をOGPなどに対応しました。さまざまなWebページをコンパクトに整形して掲載できます - はてなブログ開発ブログ

はてなブログで使えるようになったブログカード形式のリンク貼り付け。これ、WordPressなどのはてなブログ以外でも使えます。

しかも、こちらに書いてある方法を使えば、横幅の調整も可能。(はてなブログ純正も横幅変えられるだろうけど、こっちの方が簡単)

ブラウザにChromeを使っているなら、CreateLinkという拡張機能をつかうと純正より素早くブログカードを貼り付けることができます。

Create Link - Chrome ウェブストア

登録するコードはこちら。

<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("<","&lt;")}}" src="http://hatenablog.com/embed?url={{url.s("\"","&quot;")}}" width="300" height="150" frameborder="0" scrolling="no"></iframe>

試しに2つの違う形式でブログカードを貼ってみます

はてなブログ純正とはちょっと表示が変わるけど、はてなブログ以外のサイトを貼る時のスタイルは変わりません。

純正

iframe使用

あとがき

この記事に書いた内容は主にPC表示向けかも。ブログカードはスマホだと見え方同じだと思います。

長くなるのでここでは説明できませんが、上の会話形式の表示もiPhone5sまでの端末なら綺麗に表示できるけど、iPhone6Plusとか大きい画面になると表示が崩れるはず。