めたる

WordPress

Contact Form 7 add confirmの確認画面を見やすくする方法

Contact Form 7に確認画面をつけるプラグインContact Form 7 add confirmはすごく使いやすく便利ですが、chromeで確認画面へ遷移したときにinput要素にデフォルトの色が付いてしまいます。 そもそ...
WordPress

WordPressのコメントを意のままにカスタマイズする方法

コメントのカスタマイズ コメントのカスタマイズは主に以下の4つのパターンに当てはまると思います。 不要な入力フォームの削除 入力フォームの順番並び替え タイトル、placeholderの追加や、送信ボタンのラベル変更...
WordPress

【WordPress】コメントに星の5段階評価をつけるプラグイン(Comment Star Rating)作りました

Comment Star Rating Comment Star Ratingの主な機能 コメントフォームに星の評価機能を追加 WordPress.orgのプラグインや、Amazonのように総合評価をグラフで出力 ペ...
その他

【フロントエンド歴2年】最近使って便利だったツール

GistBox コードスニペット管理用のツールGistBox、 ネット上で管理できるので、家のパソコンのと会社のパソコンので共有できるのですごく便利です。 またHTML、CSS、JSなどの複数ファイルを関連付けができ、UIもメールソフ...
その他

UTF8をSHIFT_JISに変換するのに便利なSublimeTextのConvertToUTF8

SublimeTextのConvertToUTF8といえばSublimeTextでもShiftJISを扱えるというプラグインという認識かもしれません。 ですが、これがUTF-8をShiftJISに変換するのに大変便利であるということに気づ...
JavaScript

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

上級編 ルートを辿るアニメーションを付与(直線) ルートを表示するマップにアニメーションを追加します。 任意の地点を直線で結ぶので、近場のルートを示すのにおすすめです。 DirectionsServiceで得られるル...
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で要素を非表示にしておくとアニメーションが適用...