https://photoshopvip.net/72189
【design】サイトカラーを簡単に選べる探せる参考にできる
web
【jquery】簡単！マウスオーバーでキャプションを表示
【illastrator】SVGをサイトに埋め込んで使う方法
HTMLとCSSでsvgを制御
https://qiita.com/yamamiweb/items/011d6b264a5af568783b
【やりたいこと】
・svgをコードで埋め込み、jsのonclickイベントなどでいろいろ動かしたい。
・テキスト情報とかレイヤー名がidに変換されてコードが出力される
・そこをイベント毎に変更するようにすれば行けそう（まだ実験段階）
【website】かっこいいブログデザイン集
国内の嫉妬する程かっこいいブログデザイン10選！
https://webdesignmagazine.net/design/blog_design/
【まとめ】
・特にこれが素敵
【CSS】img画像の縦横比を保ったままボックス内に収める方法
img画像の縦横比を保ったままボックス内に収める方法
【参考】
https://1design.jp/web-development/css/1844
まとめ
・基本は下記のソース
img {
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}
・今回自分が使用したのは
object-fit:scale-down
モダンブラウザならこれ付けただけでOKでした
【Instagram】ウィジェットを無料でサイトに設置する方法
おすすめを紹介
https://www.go-ride-news.com/technology-instagram-widget/
自作派
【まとめ】
- SnapWidget(スナップウィジェット)
お手軽だが、無料だとsnapwidgetの用意したページに飛ばされる
- Instagram API ＋ instafeed.js
無料＆公式。しかし認証制で埋め込むだけの理由だと通らない可能性が高い
- Snapppt(スナップト)
Snappptはウィジェットから商品の購入が可能にさせるECサイト向けのツール
- InstaWidgetを使う
これが一番簡単かも。デメリットとしてはフォローボタンのInstaアイコンが古いバージョンのものになっていることと、写真のリンク先がInstaWidgetに飛んでしまう
【editor】AtomでSass（SCSS）を自動コンパイルできるようにする
SCSSの自動コンパイル機能がAtomにもあると知って設定してみる
【2019/12/28追記更新】
ATOMのコンパイル機能「sass-autocompile」をちゃんとインストールができるようになった！！
↓こちらを参照して解決！
https://qiita.com/akane8747/items/f72cf307354ffe10b91d
https://asamone.com/2018/04/01/atom-sass-windows/
↑こちらを参考に設定
エディターを
ドリ→Atom→ドリ（SCSSの自動コンパイルが便利と聞いて）
このように渡り歩いてきましたが、Atomにもあると知り、もう一度出戻りしよう！
と思っていたら、node-sassがインストールできない
↓この方のブログをみると、なにかできないらしい。。。
ということで、こちらを参考に再チャレンジ！
codekitは有料ですが。。
ついでにAtomの設定も見直してみた
スマホのイカしたデザイン集
sps collection
AGT
http://agtsmartphonedesign.com/
iPhoneDesignBox
Font Awesomeに飽きたら！おしゃれなフォントアイコン「Jam-icons」
結構使えるアイコンフォント「Jam-icons」
Font Awesomeに頼りっきりの最近の僕ですが、気分を変えたい時にちょっとイカしたフォントを使ったりしてます。
Font Awesome公式
https://fontawesome.com/?from=io
使い方参考
https://saruwakakun.com/html-css/basic/font-awesome
おすすめ本
SCSS対応 グラデーション生成するジェネレーター！
CSSでグラデーションを生成するジェネレーター
http://www.colorzilla.com/gradient-editor/
GUI付きで使いやすい
SCSSも対応
12