クリエイティブライフハック

ストックフォト写真販売で副業収入を得るクリエイティブライフハック。写真とオンラインメディア(インスタグラム、WordPressブログ、ハンドメイドマーケット)の話。

インスタグラムの使い方を学ぶ

インスタグラムをブログに埋め込み。サイズを指定して貼り付ける方法!

投稿日:2015/06/10 更新日:

インスタグラムの投稿写真を自分のブログに貼り付ける方法はいろいろあります。

スポンサーリンク

WordPressを使っているならショートコードという便利な機能があり、インスタグラム投稿のURLを記述するだけで埋め込むことができます。試しに貼り付けてみます。

#雨 を待つ #紫陽花 #花 #長岡天満宮 #fujifilm #xe2

A photo posted by SINTO (@hatamoto_s) on

このブログもWordPressを利用しているので便利なショートコードを使いたいと思うのですが、貼り付けた写真が大きすぎて困ることもあります。上の写真は説明のために貼り付けてるわけです。こんなに大きくなくて良いのです。

写真を見せたい時はそれで良いのですが、小さく貼り付けたい時もあるわけです。キャプションを省きたいこともあるわけです。

icon-arrow-circle-down こんな風に小さく控えめに貼り付けしたいわけです。

SINTOさん(@hatamoto_s)が投稿した写真 -

その方法を解説します。

WordPressのショートコード

Twitterの貼り付けショートコード

Twitterの貼り付けショートコードではサイズ指定が可能です。

幅200pxでサイズ指定

幅400pxでサイズ指定

インスタグラムの貼り付けショートコード

インスタグラムのショートコードではなぜかサイズ指定が有効になりません。ではどうやって指定サイズでブログに貼り付けるのか?

インスタグラムの公式埋め込み機能でサイズ指定

インスタグラム公式の埋め込みコード

公式埋め込み機能を利用します。

icon-arrow-circle-right インスタグラムの写真や動画を自分のブログに貼り付ける[公式]方法

まずこの方法でブログに貼り付けます。

キャプションあり

#雨 を待つ #紫陽花 #花 #長岡天満宮 #fujifilm #xe2

SINTOさん(@hatamoto_s)が投稿した写真 -

キャプションなし

SINTOさん(@hatamoto_s)が投稿した写真 -

埋め込みコードのサイズ指定

ソースコードの中をみて幅を指定している箇所を見つけ出します。

埋め込みコード

max-width:658px;

の箇所です。最大の幅が658pxになっているので、お好みのサイズに変えます。300pxに変えてみました。

SINTOさん(@hatamoto_s)が投稿した写真 -

指定の大きさに貼り付ける事ができます。

今日も元気に楽しく♪

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter で畑本伸一|CreativeLifeHackをフォローしよう!

-インスタグラムの使い方を学ぶ
-, ,

運営者プロフィール

畑本伸一

icon-maleSINTO Hatamoto (畑本伸一)
1969年 大阪市生まれ 京都市在住。
写真作家、ストックフォトクリエイター、ハンドメイド作家向け販促ツール制作販売、ハンドメイド作家向けの写真&オンラインメディア活用アドバイザー、セミナー講師。
1990年代:グラフィックデザイナー。新聞・雑誌の広告デザイン制作。写真を活かしたデザインを得意とし新聞広告、TVCM、ポスター各部門で広告賞金賞。「SINTO」という名前で写真・オブジェ・インスタレーションなど作家活動開始。2000年代:Webサイト制作の個人事業開始、グラフィック社発行「Web年鑑」掲載。2010年代:海外で流行の写真SNS「ピンタレスト」にいち早く関心を持ち“写真の今”を研究。「Pinterestビジネス講座(翔泳社出版)」共著。
icon-arrow-circle-right 詳しいプロフィール

共著

Facebookページ「Creative Life Hack」TwitterGoogle+ページ「自分メディアの育て方」instagramPinterestFeedly RSS

Copyright© クリエイティブライフハック , 2017 AllRights Reserved.