knowledge base

マークアップ/フロントエンドエンジニアのWEB制作における備忘録です。平日はWEB屋、休日は社会人劇団の主宰・劇作家をしています。

2015-12-10から1日間の記事一覧

Ajaxの文字化け対策

UTF-8の外部ファイルを、Shift-JISのページに読み込むと想定します。 当然ながら文字コードが異なるので、文字化けします。 overrideMimeTypeを用いる $.ajax({ type: 'GET', url: 'hogehoge.xml', dataType: 'xml', success: function(data) { /* do someth…

スタイルシートのみで上下中央配置

CSS

実装方法は3通り 以下のような事例を想定します。 白いテキストボックスが上下中央配置されています。 上下中央配置といえば、display:table-cellであったり、line-heightでの実装であったり、JavaScriptを用いたりと、何パターンが実装方法が存在しますが、…

iframeと親ウィンドウ間の相互アクセス

親ウィンドウからiframe内の要素を操作したり、その逆を行いたいときの方法です。 jQueryに依存しない書き方ももちろんあるのですが冗長になってしまうので、ここではjQueryを用いたアクセス方法をご紹介します。 親ウィンドウ → iframe内の要素にアクセス …

日付を比較する

過去・未来を判別する 難しいロジックを考える必要はありません。 Dateオブジェクトの特徴を利用すればシンプルなコードで判別できます。 getTimeメソッドで世界協定時 1970年1月1日00:00:00 からの経過ミリ秒が取得できるので、それを用いて比較します。 ※…

入力フォームでコピー&ペーストを禁止する

copyイベント / pasteイベントに紐づける 以前、画像のダウンロードを禁止する際にcontextmenuイベントの紹介をしましたが、同様の考え方になります。 今回はjQueryでの書き方を紹介しますが、バニラなjavascriptでも動作します。 [ex.ペーストによる入力を…

posts_per_pageで全件表示

1ページあたりの表示件数を指定するposts_per_pageですが、もし指定しないとデフォルトで10件しか表示されません。 全件表示する際は、-1を指定するそうです。 下記はカスタムポストタイプ「works」を全件取得するクエリです。 $args = array( 'post_type' …

カスタム投稿タイプの判別

is_page()でもis_single()でもなく、投稿タイプで判別 カスタム投稿タイプのみで実行したいプログラムがある場合、通常の投稿ページや固定ページに関してはデフォルトで様々な関数が用意されていますが、カスタム投稿タイプにはありません。 そんなときは投…

ショートコードいろいろ

ショートコードはthe_content() 呼び出し時に実行される ショートコードはthe_content() を呼び出したときのみ、実行されます。 たとえばget_the_content() 実行時など、ショートコードは実行されず[ショートコード名]という文字列のまま返ってきます。 この…

自動挿入されるp要素、br要素を出力させない

functions.phpに次の一行を追加 remove_filter('the_content', 'wpautop');

カスタム投稿タイプのRSS配信

functions.phpに以下を記述 ここではnewsというカスタム投稿タイプがあると仮定します。 function custom_post_rss_set($query) { if(is_feed()) { $query->set('post_type', Array( 'post','news' )); return $query; } } add_filter('pre_get_posts', 'cus…

submitボタンを装飾したい

input要素ではなくbutton要素を使用 フォーム部品であるsubmitボタンに対して、通常は画像で実装するような細かい装飾を行いたいとき、input要素では限界があります。 なぜならinput要素は子要素をとることができないためです。 たとえばこんなsubmitボタン…

空要素のDOMオブジェクトを取得できない

要素取得系メソッドは、ページ読み込み後に実行する 空要素を取得して、JSで動的にコンテンツを出力したいときがあります。 jQueryを使用していないページの場合、要素の取得はgetElement系メソッドに頼るしかないのですが、それが空要素の場合にエラーが発…

イベント発火元がどの要素の中に存在するか調べる

要素を含むかどうかを調べるのは、$.contains( ) たとえばスクロールイベントを想定してみます。 特定の要素上でスクロールされたときのみ、任意の処理を止めることが可能です。 文字列を含むかどうかの判定は:containsフィルターを使えばよいのですが、ある…

動的生成された要素に確実にバインドする

onメソッドを再確認 動的に生成された要素にイベントをバインドするには、現行のjQueryではon/offを用います。 ところが、頻繁に生成・削除が繰り返されるような要素であったり、Ajaxによって生成にタイムラグが発生する要素の場合、うまくバインドできない…

IEでviewportが無視される

<meta name="viewport" content="width=device-width">が無視される 最新版のIE(特にWindowsPhoneやSurfaceなどのモバイル端末)において、viewportの指定が無視されることがあります。 すなわち、viewportのサイズが端末の画面サイズではなく、端末の解像度そのままになってしまい、モバイルなのに大画面用のス</meta>…

要素からあふれた部分も含めた幅を求めたい

jQueryには適切なメソッドはなし 百聞は一見にしかずということで、まずはこちらをご覧ください。 white-spaceにpreが指定してあるため、文章は改行せずに、あふれてしまいます。 ここで求めたいのは矢印で示された領域です。 もしもoverflow:hiddenが指定さ…

非同期読込みをキャッシュさせない

非同期読み込みの際は注意 HTMLやCSSがキャッシュされてしまい、変更が反映されないということはよくありますが、もちろんJSもキャッシュされます。 特にAjaxなどを用いた非同期読み込みの際はキャッシュされることがあるので注意です。 $.ajaxを用いた場合 …

LINEへのシェアボタン実装

公式のリンクでは、iOSとandroidとで挙動に差が出てしまうのですが、下記リンクならLINEアプリケーションを直接起動させることができます。 <a href="line://msg/text/送りたいテキスト" target="_blank">LINEで送る</a> 送りたいテキストの部分は、エンコードしなくても大丈夫なようです。

IEで画像下部に隙間ができる

CSS

font-sizeに起因 画像を縦に積み上げるように配置した際に、隙間ができてしまうことがあります。 特にIE6/7で現れる現象です。 IEでは著名なバグのようで、vertica-align:bottomだけでは直りません。 font-sizeに起因する現象のようです。 imgに以下のスタイ…

グラデーションが意図しない表示になる

CSS

background-sizeに起因 CSS3ではグラデーションをスタイルシートで設定できるようになりましたが、まれに端末によっては、下図のように意図しない表示をしてしまうときがあります。 もしbackgroundプロパティでグラデーションを実装している場合、(たとえCS…

floatさせた要素を意図的にカラム落ちさせる

CSS

floatさせた要素は親要素におさまりきらない場合、自動的にカラム落ちしますが、IE6/7において意図しない挙動をすることがあります。 たとえばカラム落ちせずに次の行の先頭へ改行してしまったり、次の行にもいかずにテーブルのセルのように幅がとても狭くな…