ループ内、主にsingle.php等に書きます。前の記事と次の記事に設定したカスタムフィールドの値を表示出来ます。CUSTOM_FIELDは設定したカスタムフィールド名に置き換えてください。

alert()で出せるダイアログのスタイルを変更する為のスクリプトのご紹介。シンプルな発想で素敵ですね。尚、本スクリプトはjQueryに依存しています。 alert()で出せるダイアログのスタイルを変更しよう、というスクリプトです。 確かに普通にアラート出すよりいいかもしれません。 <script src="jquery.js"></script> <script src="sweet-alert.min.js"></script>コアとSweetAlertを読み込みます。 $('.foo').click(function(){ swal({ title: "アラートです！", text: "メッセージがココに入ります", imageUrl: 'http://placehold.it/500x500', confirmButtonText: '了解！', confirmButtonColo

郵便番号から住所を自動補完してくれるライブラリのご紹介。他にもいくつかありますけど使いやすかったので備忘録として。 よくあるやつ。メンテも不要との事なので助かります。 <script type='text/javascript' src='http://code.jquery.com/jquery-git2.js'></script> <script type="text/javascript" src="http://jpostal.googlecode.com/svn/trunk/jquery.jpostal.js"></script>ライブラリはgooglecode.comにホストされているものを直接読み込みます。 $('#postcode1').jpostal({ postcode : [ '#postcode1', '#postcode2' ], address : { '#ad

YoutubeやVimeoの動画を手軽に背景指定できる、というスクリプトのご紹介。jQueryに依存しています。既に同等のものが存在しますが、使いやすそうだったので備忘録。 動画を手軽に背景指定出来る、というもの。 動作サンプルです。 背景なので重ねたレイヤーの背景を透過すればマスクっぽく出来ますね。 <script src='jquery.js'></script> <script src='okvideo.js'></script>本体とスクリプトを読み込みます。 $(function(){ $.okvideo({ source: 'http://vimeo.com/*****', volume: 0 }) });VimeoまたはYoutubeの動画のURLを貼るだけ。これで背景に動画が流れます。ミュートはvolumeを0に指定します。 他にもオプションいろいろ。詳細は以下でご確認下さ

Webページのタイトルに未読数等を動的に追加表示する軽量スクリプト・TitleNotifier.jsのご紹介。メールやSNSサイトでよく見るやつですね。良さそうだったので備忘録として。 Webページのタイトルに動的に数値を加えるスクリプトです。同時にブラウザのタブも変更されます。非依存型で軽量、というのが売りみたいですね。 SNSやメールサービス等で見かけるやつ。同じ類のスクリプトも存在しますが、こちらは非依存型で3KB程度と軽量なので覚えておいて損はなさそう。 <script src="title_notifier.js"></script>スクリプトを読み込みます。 titlenotifier.set(5);数値は上記のようにセットします。 titlenotifier.add();数値を増やす場合は上記の関数を呼び出します。 その他、詳細は以下にて。ライセンスはGPLとの事です。 Ti

現在閲覧中のWebサイトの任意の箇所を指定して、その場所のHTMLやCSSをCodePenやjsFiddle、jsBinに送信、確認出来るChromeエクステンションのご紹介です。 Chromeデベロッパーツールで要素を指定してjsFiddleやjsBin等に送信する事ができる、というもの。JavaScriptも送れると嬉しいんですけど、まだその機能は無いみたい。 デベロッパーツールでソースを確認、気になったらjsFiddleやjsBinに送信、みたいな感じ。 使い方 ↑ デベロッパーツールを開いてDOMサブツリーを選択し、SnappySnippetに進みます。 ↑ コードを抽出してjsFiddle等に送信します。 ↑ 選択した箇所が実装されました。 本エクステンションはstackoverflowの質問を元に作成したらしく、OSSとしても公開されています。ライセンスはGPLとの事です。 S

複数選択可能なselect要素をチェックボックス対応・一括選択可能にするjQueryプラグイン・Multiple Selectのご紹介。なかなか便利そうだったので備忘録です。 複数選択可能なselectボックスを直感的な操作で手軽に選択できるようにしよう、というもの。グループ化したものも一括選択できるのが個人的には嬉しかったです。 動作サンプルです。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="jquery.multiple.select.js"></script>本体とプラグインを読み込みます。 $('#foo').multipleSelect();セレクタにはselect要素を指定します。 また、細かいオプション設定が可能です。詳

送信フォーム等で任意のテキストを手軽にオートコンプリートとして出せるようにする、というスクリプトのご紹介です。手軽さが気に入ったのでメモ。 簡単にオートコンプリート機能を付与できるスクリプトです。ファイルサイズは非圧縮で10KBほど。jQueryに依存しています。 文字を入力すると、いくつかのメールアドレスが候補として表示されます。 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="completer.min.js"></script>本体とプラグインを読み込みます。 <input type="text" completer data-separator="@" data-source="['gmail.com', 'live.com', 'yahoo.ne.jp', 'i.so

Googleスプレッドシートに書いた内容をtableで実装するjQueryプラグインのご紹介です。データを手軽にWebサイトに表示出来るのは楽でいいですね。 Googleスプレッドシートをtableで表示するスクリプトです。以前にも似たスクリプトをご紹介しているので選択肢の一つとして。 空のtableにスプレッドシートに書かれた内容が挿入されています。 var mySpreadsheet = 'https://docs.google.com/spreadsheet/foo?key=bar#gid=0';読み込みたいスプレッドシートを指定します。 $('#hoge').sheetrock({ url: mySpreadsheet });tableをセレクタに設定してスプレッドシートを読み込みます。 <table id="hoge"></table>tableを用意すればOK。 手軽で良い感じ

RWD対応のモーダルウィンドウを実装するスクリプト、Remodalのご紹介です。jQueryに依存しています。 RWDなWebサイトで使えるモーダルウィンドウ実装スクリプトです。 デバイスのモニタサイズに応じて適切なレイアウトを維持するモーダルウィンドウです。 スマフォの場合は全画面に表示されるのでフィンガーフレンドリーを考慮した設計と言えそうです。 <script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.remodal.min.js"></script>本体とスクリプトを読み込みます。 <div class="remodal" data-remodal-id="modal" data-remodal-options='{ "

ページの見出しを取得して、サイドにナビゲーションを生成する、というスクリプトのご紹介。jQueryに依存しています。 いわゆる目次のリンクを生成する、というスクリプトです。ドキュメントページなんかに良さそうです。 動作サンプルです。 <script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.tocible.js"></script>コアとプラグインを読み込みます。 $('#foo').tocible({ heading: 'h2', //ナビゲーションに組むエレメント subheading: 'h3', //ナビゲーションに組むエレメント navigation: 'nav', //ナビゲーションを生成する場所 title: ''

よく見かける質問系のWebサイトをWordPressで構築する為のプラグイン・DW Question & Answerのご紹介です。今の所、自分では作る予定は無いですけど・・・一応備忘録として。 Stack Exchangeのような質問サイトをWordPressで作る為のプラグインです。・・・と言っても、まださほど触っていないのでメモ程度の内容です。 質問と回答をユーザー同士が交わせるコンテンツを構築する、というもの。 質問/回答の他にベストアンサーや閲覧数などの表示、フィルタリングなんかも出来るみたいです。 インクリメンタル検索もできるそうです。 時間ができたら触って見ようと思います。 DW Question & Answer

プラグインの有効化/無効化の切り替えを簡略化する、というWordPressプラグインのご紹介。沢山プラグインを使用しているWebサイトやプラグインの動作テストをしたい時には便利かもです。 オンオフのスイッチを簡略化できます。プラグインの動作テストの時なんかは割と便利かもしれない。 上記のように、管理画面上部のツールバーにPluginsという項目が追加され、マウスホバーするとインストールしているすべてのプラグイン名のリストが表示されます。 ↑ リストは白いテキストとグレーのテキストがあり、グレーは無効化されているプラグインです。これらのリストをクリックするだけで有効化と無効化の切り替えを行うことができます。 ↑ ツールバーをWebサイトでも表示するように設定すれば、は管理画面だけでなく、Webサイトを見ている常態でプラグインのオンオフが可能になります。 個人的には制作中の動作テスト時にあると

WordPressで記事投稿前のプレビューをスマフォやタブレット対応にする、というもの。レスポンシブWebデザイン対応にしているWebサイトで導入すると良さそうですね。 記事のプレビュー機能をRWD対応サイト向けにする為のWordPressプラグインです。ちょっと思いつきませんでしたけど、あると便利ですね。

閲覧してるページを直接編集できる、というOSSのCMS・RedKiteのご紹介です。Symfony2とTwitter Bootstrapで構築されているみたいですね。 閲覧してるページを直接編集できる、というCMSです。ログイン中は編集ツールが直接出るのでそのまま編集可能、というもののようですね。

WordPressの管理画面の配色は現在のWP3.8で何通りかに変更できるようになっています。このカラースキームの種類を自分で設定して増やせる、というプラグインです。 管理画面で新たなカラースキームを生成して、プロフィールで使えるようにする、みたいなやつ。 カラースキームを作れる、というWPのプラグイン。シンプルで良い感じです。 プラグインを有効化すると左メニューの「ツール」に項目が追加されます。上記のようにカラーピッカーでカラースキームを作成します。 細かい設定も可能です。 保存すると、新たにカラースキームがCustomという名前で追加されます。 Webサイトの管理者は管理画面を見る時間も長いので好みのスタイルにしておきたいところですね。ご利用は以下よりどうぞ。 Admin Color Schemer

文中に脚注を加えるスクリプトのご紹介です。プラグインと呼べるかどうか分からないほどシンプルなものですが、手軽に加えられるので長文を扱う時の為に覚えておいて損は無いかも。 Wikipediaっぽいやつです。以下動作サンプルになります。 数字をクリックすると下部にスクロールします。元の場所に戻れるようにもなっています。 <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="footnoted.min.js"></script>本体とスクリプトを読み込みます。 脚注へのリンクは、リンクを起きたい場所に <sup class="footnoted"></sup>を置くだけ。 脚注は <ol id="footnotes"> <li>国際連合の統計による世界の都市部の人口</li> <li>プラ

Googleカレンダーで設定したイベント等に対応したカレンダー実装スクリプト・kalendarのご紹介です。勿論、普通にイベント設定も可能。jQueryに依存しています。 イベント対応のカレンダーを手軽に実装出来る、というスクリプトです。 こんな感じのカレンダーです。日付を押すとその日のイベント一覧に切り替わります。 Sample events: [ { title: "hoge", start: { date: YYYYMMDD or "YYYYMMDD", time: "HH.MM" }, end: { date: YYYYMMDD or "YYYYMMDD", time: "HH.MM" }, location: "huga", url: "http://example.com", color: "string" } ],イベントは上記の要領で設定すればいいみたい。 他、Google

Firefoxのモバイル向けOSで使われているリソースがMozillaより配布されていましたので備忘録。実装コードではなく、PSDやフォントのみになります。 モバイル向けに開発/公開されていたFirefox OSですが、このOSで使われているアイコンやフォント等のリソースが無償配布されていましたのでいくつかご紹介。 ダウンロードボタンはそれぞれのリンク先下部にあります。 Firefox OS Color Palette カラーパレットです。メインとして使われている色やグラデーションなど。こちらはPSのスウォッチが配布されています。 Firefox OS Color Palette Firefox OS Typeface Fira Sansという名で配布されているオープンソースフォントです。Webフォントもあるみたいですね。テキストスタイルや使用サンプル、どのように使用されているか等も。 F

Google Mapで、任意のポイントと、そのポイントの周囲にある施設をマーカーで表示出来る、というスクリプトです。範囲の距離の指定や施設の種類、中心地に設定したマーカーなども設定出来るようになっています。 Google Mapの任意の場所の周囲にある施設をマーカー表示する、というもの。うまく説明出来ませんが語彙がアレなのでご了承下さい。 以下動作サンプルです。 下北沢駅周辺の半径200メートル内のカフェを表示させました。マーカーをクリックすればお店の情報がポップアップします。 $("#foo").whatsnearby({ zoom:17, width:"100%", address: "下北沢", placesRadius: 200, placesTypes: [ 'cafe' ] });セッティングは上記のような感じ。placesRadiusで指定場所から半径～メートル内にある、pl