JavaScript

【Google Maps API】よく使うカスタム事例のまとめ。2/3

中級編 クリックで読み込む loadイベントでなく、クリックで読み込むようにしましょう。 クリックで読み込んだ後に落ちてくるanimationを付けます。 クリック クリックイベントだけではなく、あるスクロ...
JavaScript

【Google Maps API】よく使うカスタム事例のまとめ。1/3

Google Mapsを最強にカスタマイズ 案件でGoogle Mapをよく使うんですが、カスタムされたデザインのMapのコーディングは 少し時間がかかり、いつも理想通りの地図が作れず90%くらいで妥協してしまうことが多いです。この記事...
その他

【メンタリストDAIGO】GIVE&TAKE「与える人」こそ成功する時代まとめ

Youtubeでなんとなくクリックしたところ、すごい引き込まれるトーク内容だったのでまとめます。 「与える人」 > 「与えない人」 > 「与える人」。最上位にいる人は「与える人」であり、最下層も「与える人」である社会。 この...
その他

【ドラクエ】はぐれメタルのグッズまとめ

このサイトのシンボルであるはぐれメタルグッズのまとめです。 調べてみて、予想以上にたくさんのグッズがあり、はぐれメタルの人気を改めて実感しました。 ドラゴンクエスト メタリックモンスターズギャラリー はぐれメタル メタリッ...
その他

【一番きれいな海】久米島のはての浜へ行ってきた

はての浜きれいすぎる・・・ 海、砂浜、魚達どれも完璧でした。 ここより素晴らしい海を知っていたら是非教えてください。 10数年前に行ったあの海が忘れられず、再訪。 沖縄の離島久米島へ 沖縄の離島である久米島へ2泊3日で行ってきまし...
WordPress

WordPressのRewriteルールを理解する手順

リライトルールを理解する リライトルールについて説明している記事はたくさんありますが、ちゃんと理解して書かかれている記事は少ないです。 そのような記事をたくさん読むより、以下のPDFを読んでください。 リライトルールを見る...
WordPress

【WP】管理画面に独自のカスタムフィールドを設けるオプションページの設置について

オプションページ オプションページの実装方法を最近知って、すごく便利なのでこれからいろんなサイトで使っていこうと思うのですが、 以外とオプションページの機能って使われてないですよね。 おそらく、「いいプラグインがない」や「実装がや...
CSS

サイトの表示スピードを上げるのにやったこと

ファイルの圧縮・結合 CSS、JavaScriptファイルの圧縮は単純なコーポレートサイトなら工数をってまでやる必要はないかなと思います。タスクランナーで自動で圧縮の設定しているならそれはいいことだと思います。 結合は必ずやったほう...
NO IMAGE JavaScript

滑らかなスクロールを実現する3つの方法

マウスホイールでスクロールする際にデフォルトのスクロールでなく、滑らかなスクロールにする方法を紹介します。 最初の方法は実装は簡単なんですが、少しがたつきます。2つめに紹介するのはすごく実装は少しややこしいのですが、すごく滑らかなスクロー...
NO IMAGE JavaScript

Three.jsの使い方からアニメーションの実行までの手順まとめ

JavaScript

マウスの位置により目をくるくる回すプラグイン作った

最近作ったsvgのピカチュウを動かしたいなーってことでスクリプト書いてみました。 久しぶりに三角関数に触れたのでほとんど忘れてましたが、なんとか形になりました。 説明 現在のマウス座標より目の位置を移動させます。 改善点 ...
NO IMAGE JavaScript

snap.svgを使い方と簡単なデモ

pikachuCreated with Sketch.
NO IMAGE WordPress

【WordPress】投稿タイプ(post_type)を完璧に取得するコード

投稿タイプを取得する 以下の2点を補った形。 カスタム投稿で記事がない場合、get_postが機能しない。 get_query_var()では投稿一覧を固定ページに登録している場合は機能しない。 1行目:...
NO IMAGE CSS

【CSS3】transitionを使ったレスポンシブ対応のアコーディオンメニュー、height対応

transitionを使ったメニューを作るときのポイント まず、transitionを使ったアニメーションを実装する際に押さえておきたいポイントを紹介します。 display: noneで要素を非表示にしておくとアニメーションが適用...
NO IMAGE JavaScript

GoogleMapAPIでエラーMissingKeyMapErrorの情報

今日(正確には6月22日)からGoogleMapでGoogle Maps API error:MissingKeyMapError というエラーがでるようになりました。 対策の情報があったので共有します。
NO IMAGE その他

VCCW詰まった箇所メモ

"wordmove pull" was called with arguments site.ymlのdb_prefix: wp_を本番のDBと合わせる。 ssh-add -lで確認 ssh: Could not...
NO IMAGE JavaScript

nodebrewでnode.jsをインストールするまで in Mac

だいたい上記のサイトのやり方でいけました。 一点、node.jsをインストールしようとしたときにでた、 Warning: Failed to create the fileというエラーが出た時の対処方法 ついでにg...
NO IMAGE その他

【viewport】スマホ専用サイトの場合は固定幅かデバイス幅どちらがいいのか。

スマホ専用サイトのときのviewportの指定で悩んだのでまとめます。 固定幅のメリット・デメリット メリット どのデバイスでも同じ見え方になる。 全体を縮小して表示するので、1行あたりの文字数が変わることはない。(端末...
NO IMAGE その他

定番スライダー&カルーセルのプラグインを比較とちょっとしたカスタマイズ

スライダーとカルーセルの違い スライダーが1つ1つ画像(要素)を遷移するのに対し、まとまった画像で遷移するものをカルーセルとします。 Slick.js BxSliderとFlexSliderに比べ知名度は低いですが、豊富なオプシ...
NO IMAGE Chrome

スクリプトの試し書きに便利なjsfidle

ちょこっと試し書き、公開したいときに便利なjsfidle。 radioボタンで開閉 radioボタンで切り替え input要素は何となくchangeイベントを適用するもんだと思い込んでいたけど、tab切り替えと同様の仕...