はてなブックマーク

イメージマップって座標の設定がとにかく面倒ですよね。 そう思っているWEB制作者の方は少なくないはず。 イメージマップを利用する機会自体がそんなに多くはありませんが、昔、デバックツールで座標を確認しながら制作したのを覚えています。 今回たまたまイメージマップを利用するサイトの制作がありましたので、どうにか楽できないかなぁと探してましたら、ありました。 とんでもなく便利な超機能。 早速ご紹介しましょう。 HTML Imagemap Generator これで面倒な座標設定が大いに楽になりました。ありがたや！ 利用方法は制作者様のブログ記事にて本人直々にご教示いただいております。 制作者様のブログ記事 イメージマップのコードを生成する HTML Imagemap Generetor を作ってみた ちなみにイメージマップのレスポンシブ対応jQueryプラグインもあります。 https://git

blogトップ  それら以外  Chromeでページ更新できない..!?スーパーリロードよりも強力なキャッシュクリア ウェブサイト作成中など、画面確認のためにブラウザでページを更新（再読み込み）しますよね。 ショートカットキーはwindows「F5」、mac「cmd + R」です。 これでもページがうまく更新されていない場合、スーパーリロードを使ってみてください。 更新の壁を越えた、更新の超サイヤ人みたいなものです。 ショートカットキーはwindows「Ctrl + F5」、mac「shift + cmd + R」です。 しかし、これでもページがうまく更新されない場合もあります。 スーパーリロードでも更新できない強大な敵（？）が現れた時はさらにもう一段階強力な更新を行います。 ただしこれはショートカットキーでは行えません。特別な環境が必要な超サイヤ人４みたいなものです。 超更新！キャッ

ajaxって便利ですよね。 非同期でコンテンツを追加読み込みする際は必須の手法です。 あまりない状況かと思いますが、今回ajaxで読み込んだコンテンツの高さを取得する必要がありました。 しかもajaxの実行はループ内（each関数）で数回行うという合わせ技です。 処理の順序としては、 （１）ajaxでコンテンツ読み込み。を数回繰り返し。 （２）読み込んだ各コンテンツの高さ取得。をまた数回繰り返し。 です。繰り返しの繰り返しです。 が、この処理の実行順序がなんとも不安定。 かつ、（２）の処理が（１）の実行途中で先走っている始末。 ダメダメの繰り返しじゃんってことで調べました。 ajaxCompleteで解決！と思いきやajaxCompleteを使えば、ajax処理が完了した時点で着火します。 用途はこんな感じです。 $(document).ready(function(){ //コンテンツ読

WordPressにおいてカスタム投稿タイプは超便利ですが同時に曲者でもあります。 カスタム投稿を一覧で表示することは多々ありますが、その表示件数もカスタムする方法があります。 「設定＞表示設定＞1ページに表示する最大投稿数」の数字を変更するとできます。 というのは周知の事実ですのでわざわざ記事にしません。 今回はここの設定は変えたくないけど、カスタム投稿のアーカイブの表示件数だけ変えたいわがままな皆さんのために記事を書きました。 というのも上記の「設定＞表示設定＞1ページに表示する最大投稿数」これを変えちゃうとすべての投稿のアーカイブ表示件数に影響するからです。 通常の投稿は10件、特定のカスタム投稿は20件、を実現するのが狙いです。 以下は、「magazine」とういうカスタム投稿タイプのアーカイブにて「20件」表示する記述です。 こちらを「function.php」に追記してください

検索バーなどを作る際に、入力ボックスにもともと表示されている文字を「placeholder（プレースホルダー）」といいます。 こちら、入力前はガイドのようにテキストを表示し、入力時に消えるという便利な機能です。 （表示例） ↓html <input type="text" placeholder="検索"> こちらの「検索」という文字ですが、cssにてスタイルを変更することが可能です。 各ブラウザごとに記述が異なりますが、下記４種類でほぼカバーできます。 input::-webkit-input-placeholder input:-moz-placeholder input::-moz-placeholder input:-ms-input-placeholder 簡単な例として文字色や太さを変更する場合、下記のように記載します。 （表示例） ↓css input::-webkit-in

最近では表題のような、画像移動式アニメーションで無限ループを実装する場合、jQueryではなくcssのアニメーションで実装する方がスマートかもしれません。 ただし今回は、何かしらの理由によりcssアニメーションを使わず、jQueryで実装したい場合の方法をご紹介します。 有名なスライダー（カルーセル）プラグインを使うと、一枚一枚の画像が「スッ、スッ」と動きます。 ただし今回はこの「スッ、スッ」という動作ではなく「スゥ～～～」とゆっくりと動き続ける動作を実装します。 擬音ではわかりにくいので実際に動きを見ていただきましょう。 ■「スッ、スッ」版のスライダー これらは両方とも同じjQueryプラグインを利用しています。「slick」というプラグインで、実にシンプルかつ融通の利くスライダーです。 スライダーのプラグインは数多くありますが、古いものや機能が不十分のものも多くあり、思うように動作しま