はてなブックマーク

自分のサイトに埋め込んでいた Google マップが表示されなくなった。または、今までと同じコードを書いても新しいサイトでは表示されない。等の現象でお困りの方はコチラへ･･･ Google Maps API の仕様が変更されました 2016年6月22日に変更がありました。 具体的には Google Maps API を使うには API キーが必須になりました。 実は今までも API キーは必要だったのですが、別に無くても表示されるというゆるい仕様でした。 今回の仕様変更で新たなサイトでの利用には「必須」となりました。 やべえ･･･大量のサイトで API キー無しで使ってるよ･･･という方はご安心ください。 以前からあるサイトではそのまま地図が表示されるようです。 ただ、今後どう仕様変更されるかわかないので、以前からあるサイトも常に最新の仕様に合わせておくのが無難かと思います。 ※条件は不明

範囲内に収まらない文字を「･･･」で省略する方法です。 使うのは CSS のみで、各ブラウザにも対応しています。 長い文章の冒頭だけ表示したいときってあると思います。 実現する方法としては、 ・PHP 等を使ってサーバサイドで文字列を丸める ・text-overflow を使う なんかがあると思います。 PHP なんかでは文字列を指定の幅でトリミングすることを「丸める」と言います。 なんか専門用語的で格好良いので 「ちょっとこの文字列丸めといて」 的に使うことをおすすめします。 しかし、上記2点の欠点として、 ・PHP は文字数指定の省略なので、可変する幅に応じることができない ・text-overflow: ellipsis; は複数行に対応できない が挙げられます。 使う場面が限定されすぎです。 そんな時に使って欲しいが今回の方法です。 デモ デモページ ウインドウの狭くしてもらうとわ

以前はファビコンと言えば 16×16 の ico 画像作って設置しとけば良かったのですが、昨今のデバイスの多様化により iOS やら Android やらで必要サイズが多すぎて、もうどこまで対応すりゃいいんだよう！となりがちです。 まあ最悪これだけあればいいんじゃないの 16×16 px（IE） 32×32 px（他のブラウザ） 180×180 px（iOS・Androidホーム画面） iOS や Andorid は OSのバージョンや端末によってたくさんのサイズバリエーションがありますが、現在 iOS で表示される最大サイズである 180×180 を入れとけば小さいものは自動で縮小されるので大丈夫かと思います。 とにかく細かくこだわればきりがないのですが、どこで妥協するかが大事だと思います。 今回は上記した4つのサイズで進めていきます。 画像作成手順 今回はこの画像を使ってファビコンを作

さあWEBサイトを作るぞ、という時に、HTML5のヘッダを書いて、jQueryを読み込んで、cssとimgとjsのフォルダを作って…と愚かな単純作業を行なっている人へ送るWEBサービスInitializrです。 Initializrとは？ 新たにサイトを立ち上げる場合、今だったら何か理由がない限りHTML5の記述で作成することが多いと思います。 WEBサイト構築に、毎回必要なHTML、CSS、画像、Javascript 等の初期ファイル群一式を自分で準備していて、それをベースに作り始める方も多いかと思います。 それをWEB上でパッと準備してくれるサービスが「Initializr」です。 Initializr Initializrの便利ポイント サイト構築で、ほとんどの人が利用するであろう、 ・jQuery ・Favicon ・Google Analytics 等を最初から記述した状態でHT

ある程度ページをスクロールすると、ふわっと出現する「上へ」ボタンを作成する方法です。 ボタンを押すと上までするーっとスクロールします。 デモ デモページ 上椎葉ダムの奈落から天端に戻る事ができます。 HTML <a href="#top" class="page_top">PAGE TOP ▲</a> 今回はページ最上部まで戻すので body に id=”top” を設定してあります。 ボタンには class=”page_top” を設定します。 Javascript jQuery 依存のスクリプトなので、まず jQuery を読み込んでおきます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> その下に Javasc

複数のチェックボックスを一度に全選択・全解除できるボタンを設置する方法です。 チェックボックスのグループが複数ある場合にも対応しています。 デモ デモ Javascript jQuery 依存のスクリプトなので、まず jQuery を読み込んでおきます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> その下に以下のスクリプトを記載します。 <script type="text/javascript"> $(function(){ $('.checkAll').on('change', function() { $('.' + this.id).prop('checked', this.checked); }); })

フォーム内のプルダウンメニューの選択項目を変更する度に、セレクトボックスの背景色を変える方法です。 デモ サンプル IEでは選択中のセレクトボックスは青背景になるので少しわかり辛いかもしれません。 HTML <select class="clorfulSelect"> <option value="">選択してください</option> <option value="red">赤</option> <option value="blue">青</option> <option value="green">緑</option> <option value="gray">灰</option> <option value="black">黒</option> </select> select 要素に class「clorfulSelect」を設定します。 Javascript jQuery 依存

jQuery を使って画像をフェードイン・フェードアウトを繰り返して点滅させる方法です デモ デモは画像ですが、テキストでもdiv 要素でも何でも点滅できます。 HTML jQuery 依存のスクリプトなので、まず jQuery を読み込みます。 head 内に記載すると良いです。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> その下にスクリプトを書きます。 <script type="text/javascript"> $(function(){ setInterval(function(){ $('.blink').fadeOut(1200, function(){$(this).fadeIn(200)}); }

CSS を超高速でコーディングできる Sass。 .scss ファイルを Dreamweaver で .css ファイルと同じように編集できるようにする方法です。 Dreamweaver でファイルを開けるようにする 編集 > 環境設定 > ファイルタイプ/エディター 「コードビューで開く」に拡張子.scss を追加する。 コードヒント・コードカラーリングを反映 MMDocumentTypes.xml というファイルを編集します。 C:\Program Files\adobe\Adobe Dreamweaver CS5\configuration\DocumentTypes\MMDocumentTypes.xml 142行目あたり <documenttype id="CSS" internaltype="Text" winfileextension="css" macfileextensi

CSSのマージンとパディングはどちらも要素までの余白を指定できます。 どういう時にどちらを使えば良いのか、CSSレイアウトのおさらいです。 基本をよくある図でどうぞ 上図を見るとなんとなく分かります。 実際のコーディングでborderを指定して、要素に枠線を付けるとはっきりと違いが分かるでしょう。 マージンは枠線の外側に、パディングは枠線の内側に余白ができます。 もう一つ重要なのは、要素にbackgroundタグで背景色や背景画像を置く場合です。枠線の時と同じように、マージンは背景の外側に、パディングは背景の内側に余白ができます。 陥りやすい罠 他にもマージンとパディングには細かな違いがあります。 マージンとマージンは相殺する。 margin-bottom:20px;とmargin-top:30px;の要素が上下にならんでいたとします。2つの要素の間隔は、20+30=50ピクセル！にはなり

以前紹介したCookieを使って、モーダルウィンドウの年齢認証を作成する方法の改良版です。 改良点 Javascript がぐっと短くなりました。 CSS によるレイアウト変更が容易になりました。 必要な機能をしぼって、軽量かつ汎用的にしてみました。 まずはデモ デモページ 五木川ダムの渋い魅力はアダルトな感じがするので、年齢認証を設置してみました。 モーダルウインドウは、シックに単色背景透明で作ってみましたが、見た目はCSSで自由に変更できます。 必要なもの Javascript を3つ使います。 ・jQuery ・jquery.cookie.js ・modalConfirm.js jQueryはGoogleライブラリから直接読み込みましょう。 のこり2つのファイルはアップロードしてヘッダ内で読み込みます。 <script type="text/javascript" src="http

WordPressは便利です。しかし所詮ブログです。もっと自由な使い方をしたい。そんな願いを叶えてくれるのがカスタムフィールドです。 WordPressの投稿に様々なデータを追加する 例えば、 WordPressでダムの情報をデータベース化したサイトを作りたい。 ダムの写真や、所在地、堤高、湛水量などを管理ページから登録したい。 そんな場合に使うのが「カスタムフィールド」という機能です。 カスタムフィールドどこにあるだ？ 投稿画面の下部にひっそりと存在します。 WordPressをブログとして使っている人はあまり気にしない部分だと思います。 新規投稿画面に表示されない人は「表示オプション」で表示できます。 カスタムフィールドって何だ？ この機能を使うと、投稿に「メタデータ」と呼ばれる任意の「名前」と「値」を追加できます。 要は、タイトル・本文だけでなく、独自の項目を投稿に追加できるという事

ウインドウサイズに応じて画面いっぱいに伸縮する背景画像をスライドショーで表示するjQueryプラグインです。オプションも豊富なプラグインですが、シンプルな設置方法を紹介します。 デモ デモページ こんな感じの表現が可能です。 使用するjQueryプラグイン Supersized 全画面背景スライドショーでは定番のプラグインです。 同様のものは他にもありますが、安定性・拡張性ともに信頼のプラグインだと思います。 HTML jQuery本体と、jquery.easing.min.js、supersized.3.2.7.min.jsを使用しています。 Supersizedのサイトからサンプルをダウンロードすると含まれているので、自サイトにアップロードして読み込んであげます。 <script type="text/javascript" src="http://ajax.googleapis.co

WordPressで作成したブログに、携帯電話からメール投稿がしたい！ そんな時に使えるプラグイン「Ktai Entry」 その導入から投稿までの手順です。 必要なもの ・プラグイン Ktai Entry 上記サイトからダウンロードするか、WordPress管理ページのプラグイン新規追加から検索して追加します。 インストールできたらプラグインを有効化します。 ・投稿受信用メールアドレス 投稿送信先のメールアドレスが必要です。 Ktai Entryはメールボックスにアクセスして新規の受信があればサイトに反映させる仕組みです。 プラグインを入れるだけで使える訳ではないので、ここだけ少し敷居が高いです。 Gmailでアカウントを作成して受信することもできます。 今回は受信専用のメールアカウントを準備した状態で進めます。 設定 ・メールボックス情報の登録 [設定] → [投稿設定] → [メールで

iPhoneでメールアドレスの入力フォームに文字を打ち込む時に、はて？通常のキーボード配列と違うな、と気付く事があります。 HTML5で追加されたinputのtype属性を使うと、フォーム入力の目的に合わせてキーボード配列を変える事ができます。 デモ デモページ <input type="text" value=""> <input type="password" value=""> <input type="email" value=""> <input type="url" value=""> <input type="tel" value=""> <input type="number" value=""> <input type="date" value=""> type=”text” 通常のテキスト入力です。 type=”password” 以前からおなじみのパスワード入力用ボッ

シンプルなタブコンテンツを実装したい時、jQueryを使うことにより、短くてシンプルなソースで設置することができます。 JavascriptもHTMLもすっきりと収まるのですがすがしいです。 デモ デモページ Javascript jQuery依存のスクリプトなので、まずjQueryを読み込みます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> その後に以下のJavascriptを記載します。 <script type="text/javascript"> $(document).ready(function() { //初期表示 $(".tab_content").hide();//全ての.tab_contentを

WordPressには、記事を投稿すると表示するソースに<p>タグが自動で挿入される機能が付いています。 ブログの投稿には便利なのですが、固定ページにコーディングデータを流し込む場合にはレイアウトを崩してしまいます。 <p>タグの自動挿入を無効にする 使用しているテーマフォルダ内の、page.php を変更します。 the_content(); と記載されている部分を以下のように変更します。 remove_filter('the_content', 'wpautop'); the_content(); add_filter('the_content', 'wpautop');

メールアドレスを入力するボックスでは、入力モードを自動で半角英数字に変更したい。という場合に使えるコードです。 スマートフォンの場合・ガラケーの場合はどうすれば良いのかもご紹介します。 PCの場合 ime-modeというCSSプロパティを使用します。 <form action=""> <input type="text" style="ime-inactive;" /> </form> これで入力ボックスがアクティブになると入力モードが自動で半角英数字に変更されます。 ime-mode: auto; 状況に応じて自動設定。初期値。 ime-mode: active; 初期値が日本語入力モード。 ime-mode: inactive; 初期値が英数字入力モード。 ime-mode: disabled; 英数字入力モードで固定されます。 デモ ならねえよ 残念ながら、このプロパティは、Wind

Googleマップの横に地点のリストを並べて、リストをクリックするとマップ上ではマーカー地点にヒュッと移動して、パッと説明窓を表示する方法です。 Google maps APIを使って作ります。 デモページ デモページ HTML Google maps APIを使うので、まずGoogleから直接APIを呼び出します。 バージョン3を使用しています。 その下に今回のJavascriptを呼び出します。 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="map.js"></script> 地図とリストの呼び出し部分です。 <div id="map_canvas" style="widt

IE7では、overflow:auto でスクロールバーを使う要素内に、position:relative を指定した要素が内包されていると、スクロールが効かない上に親要素からはみ出して表示されるというバグがあります。 対処方法 親要素にも position:relative を指定してやると正しく表示されます。 IEで泣かない為に IE6が世から駆逐され、WEBデザイン界にひとときの平和が訪れていますが、IE7以降にもそれぞれバグはあります。 ブラウザごとの小さな挙動の差を全て覚えるのは大変ですが、小さな事であっても、つまづいて解決する度にメモする事が大事だと思います。

どんなにサイトをクールなデザインに仕上げても、どうしても邪魔するスクロールバー。 jQeryをプラグイン使ってCSSで自由にカスタマイズします。 デモ デモページ 必要なファイル一式 jScrollPaneというjQueryプラグインを使用します。 最低限必要なのは ・jQuery本体 ・jquery.jscrollpane.min.js ・jquery.jscrollpane.css の3つです。 HTML まず上の3つのファイルをhead内で読み込みます。 <link rel="stylesheet" href="jquery.jscrollpane.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <s

仕切り線を入れたいけど無粋な線は嫌なものです。 CSSでちょこっと飾り付けをしてデザインのアクセントを付けてみます。 hr要素はセマンティックなサイト構築の観点からも有用ですので、オシャレさせて送り込んであげましょう。 デモ こんなのを作ります。半分くらいCSS3を使っているので、デモページはモダーンなブラウザでご覧ください。 デモページ 二重線 hr { border:0; border-bottom:medium double #999; } 立体的な線 hr { height:0; border:0; border-top:1px solid #ccc; border-bottom:1px solid #fff; } 点線 hr { border:0; border-bottom:1px dashed #999; } グラデーション hr { height:3px; border:0

cssで出文字サイズを指定する時、単位にpxとptが使えます。 どちらを使った方が良いのでしょう。 そもそもpxとptの違いってなんでしょう。 ピクセル(px)とは？ パソコンの画面は小さな点の集まりで表示されています。 1ピクセルとはその小さな点一個のことです。 パソコンの画面に表示される情報の最小単位です。 100pxの画像と100px指定の文字は同じ大きさになります。 WEBサイトを構築する時、レイアウトや画像のサイズはピクセルで指定するので、レイアウトに対して思った通りの文字の大きさにしたいなら、文字サイズ指定は迷わずpxです。 ポイント(pt)とは？ 1ポイントとは1/72インチという現実世界の絶対的な長さの単位です。 font-sizeを72ptと指定された文字は、閲覧するモニタの解像度に関わらず、画面に定規をあててサイズ測ると1インチです。 制作物を最終的に紙に出力するDTP

今やjQueryのスライドコンテンツ用プラグインは星の数程あります。 今回は「Coda-Slider」というプラグインを使って画像のスライドショーを作ります。 特徴として、jQuery Easing Pluginを使用するので動きがスムーズな点とタブコンテンツを実装できる点があります。 サンプル こんなんできます。 デモページ Javascript 3つのJavascriptファイルを使います。 jQuery jQuery Easing Plugin Coda-Slider 今回は画像のスライドショーに特化させる為、Coda-Sliderを少し変更したものを使います。 Coda-Slider 変更版 まずは3つのファイルを読み込みます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jque