こんにちは。フローラです。
ご無沙汰してしまいすみませんでした。
今回はCSSで簡単におしゃれなInstagram風の画像にする方法をご紹介します！
Instagramは簡単に画像にフィルタをかけられますね。種類も豊富です。
- 配布サイトからファイルをダウンロードする
- head内でリンクさせる
- 画像にCSSを適用
たったこれだけです。では実際に見てみましょう。
Instagram.cssの公式サイトにサンプルが掲載されています。種類も豊富にありますね。
Instagram.css
GitHubからダウンロードしてきます。
https://github.com/picturepan2/instagram.css/blob/master/dist/instagram.css
GitHubにサインインしたら、CODEをクリックします。
「clone or download」ボタンを押します。
distフォルダの「instagram.css」が対象ファイルです。
「instagram.css」をHTMLのhead内で読み込みます。
<head> <link rel="stylesheet" href="instagram.css"> </head>
画像ファイルにフィルタ用のdiv等で囲って、div等にclassを適用するだけです。
classは「filter-〇〇〇」。
〇〇〇は公式サイトのサンプルをご参照ください。
【ノーマル】
<div> <img src="0000.png" alt="" width="900" height="600" /> </div>
【Poprocket】
<div class="filter-poprocket"> <img src="0000.png" alt="" width="900" height="600" /> </div>
下記コードを追加してみてください。
img{
margin: 0;
padding: 0;
vertical-align: bottom;
}
簡単にInstagram風のスタイルが実装できましたね。
この方法だと、いちいちphotoshopを立ち上げる必要もありませんし、画像ファイルも一枚で済みます。
種類も豊富で何パターンも用意されているので、色々試してみてください。
皆さんこんにちは、フローラです。
今回はInstagram（＝インスタ）ネタです。
インスタはスマートフォン向け写真SNSですね。
誰でも扱える手軽さとスタイリッシュなインターフェイスが特徴かと思います。
インスタは「Instant Telegram」が由来だそうで「Instant」は「その場で」、「Telegram」は「電報」だそうです。由来のとおりとっても手軽なコミュニケーションツールですよね。
インスタといえば当然スマホですが、インスタはスマホだけではなくパソコンからも投稿できる方法があるのはご存知ですか。
通常、パソコンからは閲覧とプロフィールの設定変更はできますが、投稿はできません。
では早速やり方を見ていきましょう！
Chromeをご準備ください。
- 「Google Chromeの設定」から「シークレットウィンドウを開く」（ctrl＋Shift＋NでもOKです）
- （デフォルトで右上にアイコンがあります）「その他のツール」－「デベロッパーツール」
- デベロッパーツールが開いたら、「Toggle Dvice Toolber」（Ctrl＋Shift＋M）ボタンを押しモバイルモードに変更し、アドレスバーにInstagramのURLを入力してInstagramを表示させログインします。
- 下部中央にあるカメラのアイコンから投稿できます。
今回はちょっとした技をご紹介しました。頭の片隅に置いていただいて何かの時にお役に立てるかもしれません。
インスタ関連は他にもWordPressでインスタを載せる方法もご紹介していますので、あわせてお読みください！
「WordPressでInstagramを載せる方法 プラグイン「Instagram Feed」【初心者向け】」
プラグイン「Instagram Feed」について
WordPressにInstagramを綺麗に埋め込みたい！などあると思います。
私がよく使っている「Instagram Feed」について説明していきます。
まずは「Instagram Feed」をインストールしていきましょう。
「Instagram Feed」インストール
はじめに管理画面から検索してインストールして下さい。
WordPress管理画面 ⇒ プラグイン ⇒ 新規追加 ⇒ 「Instagram Feed」で検索
もしくは、WordPress.org からダウンロードし、アップロードしてインストールして下さい。
WordPress.org からダウンロード
【管理画面の場所】
プラグインの管理画面は下記の場所にあります。
※プラグインがたくさんあると下の方にあります。
WordPress管理画面 ⇒ Instagram Feed
プラグインの初期設定
はじめに、あなたのInstagramのアカウントにログインして、アクセストークン（Access Token）とユーザーID（User ID）を取得します。
ログインボタンをクリックすると、プラグイン動作を許可を求める画面が表示されます。
プラグインの動作を許可してください。そして、取得した情報をコピー＆ペーストしてください。
【設定方法】
「Instagram」表示方法
Instagram Feedの管理画面にある「3. Display your Feed」のタブをご覧ください。
下記のコードを任意の場所に挿入することで表示することができます。
【表示例】
【instagram-feedについてでした】
以上がinstagram-feedの説明になります、このようにinstagram-feedを使うことでキレイにInstagramを表示することが可能になります。
是非使ってみてください。
他にもHTML、CSSには多くの要素があります。これからもHTML、CSSについて記事を掲載していきます。
]]>