孝樹こんにちは、ほぼ毎日朝7時からジムに通ってます。あけましておめでとうございます。作業がひと段落したので重い腰を上げて2018年1発目の記事を書こうと思います。近頃街を歩いているとスマホで建物や友人同士で撮影している人を見かけと、「インスタに投稿するんかな?」と思います。去年の流行語大賞で「インスタ映え」とノミネートされる位、いまではインスタグラムが生活の一部になってるなと感じます。インスタグラムは撮影した写真を既に用意されているフィルターを適用する事で写真の見栄えを変えることが出来るので自分好みの写真を自由自在に作ることが出来ます。そんなインスタグラム風な写真がスタイルシート1つでも再現できるようになりました。今日はその方法をご紹介します。「Instagram.css」でホームページをインスタ映えに「Instagram.css」はclassを付けるだけで41種類ものフィルターを画像に適用する事が出来る便利なスタイルシートです。使い方も非常に簡単です。GitHubから「Instagram.css」または「Instagram.min.css」をダウンロードして、スタイルシートを読み込ませます。適用させたい画像を括っているdivやfigureに下記のようにclassを付け加えます。src="image.jpg"></div>class=”filter-[filter_name]の[filter_name]を適用したいフィルター名を入力します。src="image.jpg"></div>このようにたった数行のコードを入力するだけで、インスタ風の画像に早変わりします。現在用意されている41種類のフィルターのclass名は以下になります。filter-xpro-ii注意点としては、フィルターを適用した際自動的に「:before」疑似要素が追加されているのですでに「:before」疑似要素を使用していると上手く適用されない可能性もありますのでご注意ください。「Instagram.css」でインスタ映えするサイトにしてみてはいかがでしょうか。スタイルシートのダウンロードはこちらからhttps://picturepan2.github.io/instagram.css/PS:夏までにインスタ映えするボディを作りたい、徳永でした。HTMLコーディング【WordPressでGO!】WordPressをローカル環境へインストールしてみようあけましておめでとうございます。今年もよろしくお願いいたします。2018年一発目の記事は、WordPressです(≧▽≦)WordPr...HTMLコーディング【WordPressでGO!】管理画面の左メニューをカスタマイズしてみよう皆様あけおめです。あけおめ・・・もう2月ですよ。なにをしてたんでしょうか。いうわけで、今回もはりきってゴー...HTMLコーディング社内勉強会を行いました。こんにちわ、入社2ヶ月のともさんです。去る9月16日(金)19:00~社内勉強会を行いました。テイクフォーでは初の勉強会となります。その1】SVG形式の画像ファイルを作って表示させてみようこのあいだ社長の大好きなラフロイグというウイスキーを飲ませてもらい独特の匂いに驚きのけぞったともさんです、こんにちは。みなさん、svgって知っ...HTMLコーディング棒グラフをcssで表現してみよう何かおいしい日本酒銘柄があれば教えて欲しいと思っている、ともさんです。ちなみに、私のおすすめは「美少年」です。大阪はすっきりしない天気が続いてロードバイクに乗れずテンション下がりまくりのともさんですこんにちは。)この記事へのコメントはありません。この記事へのトラックバックはありません。返信をキャンセルする。-URL上に表示された文字を入力してください。Mul...おはようございます、ブログ連続更新中のふきちゃんです。Post...おはようございます、気圧にずっとやられています、ふきちゃんです。