2018年の4月にInstagramのAPIの機能が一部廃止されており、
2020年までに、すべての機能が停止する予定だということです。
Instagram APIの代わりに
Instagram Graph APIを使用を推奨されていますが、
ビジネスアカウント専用のAPIのため、
Facebookの認証を受けたビジネス用アカウントでしか使用できず、一般ユーザー向けには提供されていません。
インスタグラムは個人利用だけでなく、
ショッピングサイトでも商品画像の紹介でも多く利用されており、
多くの企業にとっても必要なものとなっています。
投稿画像の閲覧数から人気商品を分析など、Instagram APIを利用したツールを利用していたので、
Instagram Graph APIを利用したものに移行するなど対策が必要になってきています。
Flexboxは様々なレイアウトを、従来の方法よりずっと簡単に実装できる優れたプロパティです。
最近ではfloatではなくFlexboxを使ってレイアウトを組んでいる人も多いのではないでしょうか。
そんな便利なFlexboxですが、IE8や9に対応していないため、古いブラウザーをサポートした案件では使用することができません。
flexboxを使用すれば簡単なレイアウトでも諦めるしかない、なんて場面もあるかもしれません。
ですが、旧式のブラウザーでもFlexboxを使用する方法があります。
上記からダウンロードし、flexibility.jsを読み込ませるだけです。
■JS
■CSS
.flex-box {
display: flex;
-js-display: flex;
}
CSSには適応させたいクラスに対して、ベンダープレフィックスのようにプロパティの前に-js-と追記するだけでOKです。
古いブラウザーに対応させるためのスクリプトは大変便利です。
後は、動作確認と読み込み速度など気を付けて使用していきたいですね。
XAMPPのローカルホストのパスは，
XAMPPを設定を変更せずにインストールした場合、
C:\xampp\htdocsがサーバールートとして設定されていますが、
それ以外の場所を指定したい場合の設定方法です。
■設定用のファイル
C:\xampp\apache\conf\extra\httpd-vhosts.conf
上記のファイルにアクセスして
その中に記述してある
##NameVirtualHost *:80
のコメントアウトの##を削除して、
DocumentRoot “C:\Users\user\Documents\index”
ServerName localhost_documents
例)C:\Users\user\Documents\index
設定したい場所を指定します。（例ではドキュメントのindexフォルダー）
ServerNameには任意のドメイン名を設定します。
記述が完了したら
アクセス権限を付与するため
下記を記述します。
Options Indexes
AllowOverride All
Require all granted
最後に
C:\Windows\System32\Drivers\etcの中にある
hostsファイルを開いて、設定したドメイン名を追記します。
127.0.0.1 localhost_documents
スマートフォンやタブレットなどのレスポンシブ対応でユーザーの端末に合わせて相対的にフォントサイズを変更する必要があります。
{font-size: 62.5%;}です。
font-sizeのサイズ指定には、pxやem、%があります。
デザイン的な特例がない限り、読ませるためのテキストは基準となるfont-sizeに対してこれらの単位で指定することになります。
ブラウザのfont-sizeのデ基準値は16pxサイズです。
基準値16pxの62.5%、となるのでhtmlのフォントサイズが10pxとなります。
html{
font-size: 62.5%;
}
フォントサイズを10pxとすることで18px= 1.8remと計算が楽になります。
フォントサイズをremで指定するのは親要素のフォントサイズに影響されることなく、サイズを変更することができます。
また、クライアントからもう少しサイトの文字サイズをあげてほしいといった要望があったとき、
htmlのフォントサイズを62.5%の数値を大きくすることでサイト全体のフォントサイズを相対的に上げることができ、
大幅な修正をすることがなくなるためです。
ユーザーのサイト閲覧の幅が広がった現在では、pxや%を指定するよりも便利な指定方法ではないでしょうか
navタグはグローバルナビゲーションなどによく使われています。
利用される場所は、
アンカーリンクやハンバーガーメニュ-など、ヘッダーやサイドバーなど、
フロー・コンテンツとされるような場所です。
リンクであるからといって、すべて
フッター要素に様々なリンクが含まれていることが多いかと思われますが、内容がヘッダーと同じ内容のナビがフッターにある場合など、内容が重複しているので、nav要素を使う必要はありません。
フッターに記載するコピーライトには年号が含まれていることが多いかと思います。
コピーライト(発行年) 著作権名で記載されているかと思います、
更新年度が毎年更新されている会社であると、サイトがきちんと管理されている印象を受けます。
やはり古い状態のままよりも更新年度を記載したほうが良いでしょう。
ですが、サイトの管理に慣れていない方や、静的なサイトでいちいち更新するのが面倒くさいといった方もいるでしょう。
そんな場合にコピーライトの年号の自動で更新する方法があります。
javaScriptの場合は
Copyright © All Rights Reserved.
を記述するだけで自動更新してくれます。
JavaScriptの場合、年号はユーザーのパソコンの時間設定に依存して取得されてしまうため注意が必要です。
WordPressのサイトの場合は、footer.phpに以下の記述をすればOKです。
Copyright © All Rights Reserved.
PHPの場合、サーバーサイドの時間設定に依存するので、ユーザー側の時間設定を気にする必要はありません。
SCSSを使用してcssよりも効率的にサイトの制作を進めたい人がいるかと思います。
自分が担当している案件や、
自社の他のメンバーの案件の引継ぎなどではそのままSCSSを利用できますが、
他社がコーディングしたソースを使用する案件などでは、
場合によってCSSで組まれていたりすることも少なくありません。
その場合CSSからSCSSへ変換してくれるサービスを使うことで楽に移行することができます。
その便利なサイトが『css2sass』です。
http://css2sass.herokuapp.com/
ATOMのプラグインやWordPressのプラグインでは、
SCSSからCSSへ変換してくれるプラグインはありますが、
CSSからSCSSへ変換してくれるプラグインはあまり見かけないので、
貴重なサービスといえるでしょう。
使い方は簡単でCSS (paste your CSS code and convert!)と、
書かれた場所に変換したいcssの内容をペーストして、
SCSSかSASSに変換するかを選択するだけです。
このサービスは、
今までCSSで構築してたけど、
メンテナンス性を向上させるためにSCSSを導入したいという方にも便利なサービスですね。
IE10でのみ長文のテキストがflexboxを指定しているときに文字が折り返されず横にはみ出してしまう現象があります、
chromeやfirefoxなどではflex-shrinkプロパティの基本の値が1担っていますが、
IEでは、flexプロパティが未指定の場合「flex:0 0 auto;」が適用されているため、
flexコンテナの幅に応じて縮小ができず、文字がはみ出してしまうことになります。
なので、対処法は、ベンダープレフィックスを付けて、IE10用にflex-shrinkプロパティが1になるよう
以下の記述をしてあげることで解決します。
-ms-flex: 0 1 auto;
SVGはベクターデータで作成されているので拡大縮小をしたときに、解像度に関係なく綺麗に見えるという利点があります。
ですが、IE11やEdgeで、SVG画像をバックグラウンド指定すると、
background-sizeで指定したサイズよりも小さくなってしまう不具合が存在します。
IE11もEdgeもSVG形式の画像をサポートしているので表示は問題ないのですが、SVGのタグにwidth,heightの記述がないと
サイズが変になってしまいます。
タイトル
h2{ background: url(../img/icon.svg) no-repeat left center; background-size: 20px; }
SVG画像自体にwidth heightを指定してあげることで、解決します。
■変更前
又、書き出し方によって、viewBoxとwidth,heightの値がずれていることもあるので、
値をそろえるようにしましょう。
WP-SCSSというプラグインは、
FTPなどでアップロードしたscssファイルを、
自動的にCSSにコンパイルしてくれるというものです。
なのでいちいちATOMなどのエディターでコンパイルしてSCSSとコンパイルしたCSSをアップロードして、、、といった余計な作業がなくなり、
大変便利です。
WP-SCSS
https://wordpress.org/plugins/wp-scss/
インストールが完了したら、
設定のSCSS LOCATIONとCSS LOCATIONにそれぞれ、
SCSS LocationにSCSSファイルのある場所を指定。
CSS LocationにコンパイルしたCSSファイルを置く場所を指定します。
コンパイルが手間という方は、このプラグインをインストールしてみるとよいでしょう