ウィンドウの高さを取得後に要素へ代入する

よく使うメモ。

スマートフォン用に高さ 100vh とか使いたいところですが、CSSによっては適切に高さが設定されずに 0 となってしまうのでJavascriptで対応してしまうと考える手間が省けるのでお薦め。

 

ウィンドウサイズで画像の表示をJavascriptで切り替える

最近よく利用するのでメモがてら。

以下コード入れて、imgにクラス .js-resp 付与すると画面サイズで切り替えます。

画像にはファイル名の後ろに _pc と _sp と命名すればOK、HTMLに記述する場合には _pc の方のみを記述してください。

要件に応じて命名やウィンドウサイズは適宜変更してくださいね。

フルスクリーン表示からスクロール後にナビなど表示させたい場合のTip

ファーストビューがフルスクリーン表示されていて、スクロール後に固定ナビなどを表示したい際などを想定。

スクリプトは主にスマートフォンサイトを想定していますが、PC表示でも問題は無いはず。
用途に応じて適宜調整すれば良いと思います。

更に、トップページだけに適応したいという場合にはBodyに「.topPage」などクラスを指定し、以下のように条件分岐を追加でも良いと思います。

jQueryの length は要素が存在するかどうかをチェックするのにも使え「.topPage」というセレクタがページに存在する時にのみ、処理を実行します。

Advanced Custom Fieldsで設定したカスタムフィールド値を取得し、文字数制限して表示する

よく使う物なのでメモがてら。

下記は30文字以内であればそのまま出力、30文字超えている場合に29文字にカットし、文末に[…]を追加します。

 

Pinterestでサイトにある画像をPinさせない方法

Pinterestのアドオン入れてて、画像hoverすると出てくるあのアイコン。
偶に邪魔だと感じていたが表示させない方法が有ったのでメモ。

特定の画像に対しては以下

基本的に記述してて良いような気もする。
この辺は案件に応じて対応で良いかと思い〼。

Via: 自分のWEBサイトにある画像を他人に共有させない方法 | Pinterest lab ~UNT ソーシャルメディアマーケティング~