takabo.netThis domain may be for sale!
Kindleの電子書籍のサンプルを簡単に表示できるWordPressプラグイン Embed Kindle
作りました。Digital Inspirationで紹介していた、Kindle Readerを自分のサイトに貼る方法を見て、WordPressプラグインにしたものです。 [[embed_kindle asin=”B009 […] 作りました。Digital Inspirationで紹介していた、Kindle Readerを自分のサイトに貼る方法を見て、WordPressプラグインにしたものです。 [[embed_kindle asin="B009B1RI7M"]] というショートタグを書くと、以下のように表示されます。 [embed_kindle asin=”B009B1RI7M”] asin=””のところは、AmazonのKindleストアで表示したい電子書籍のページをブラウザで開き、URLの中の10桁の英数字をコピーしてください。 サンプルがあればマンガでも表示できますが、あまり読みや
WordPressのヘッダー管理画面からサイトタイトル画像をアップロードできるようにする – Simple Colors
WordPressのテーマで、サイトのタイトルを画像で表示できたらと思うことはありませんか？ 今回は、サイトのタイトル画像をヘッダー画像のように管理画面からアップロードできるようにする方法を紹介します。 WordPressは、ヘッダー画像をサポートしているテーマを利用していると、メニューに「ヘッダー」というメニューが追加され、カスタムヘッダーの管理ができるようになります。 このカスタムヘッダーの管理画面に、フォームを追加するには、「変更を保存」ボタンの直上にあるカスタムヘッダー管理画面内ただ１つの custom_header_options というフックが利用できます。 ただし、このフックポイントは、下図のようにenctype属性の指定がないフォームの内側にあるため、単にアップロードフォームを追加するだけでは、ファイルのアップロードはできません。 そこで、フックした関数内部で一旦フォームを
Webサイトツアーを可愛い吹き出しで実装するjQueryプラグイン・Crumble
注目させたい箇所に順々に吹き出し を表示させるWebサイトのツアー コンテンツを実装するjQueryのプ ラグイン・Crumbleのご紹介です。 可愛いデザインでこのままでも使え そうです。 ツアーコンテンツを実装するスクリプト。jQueryを使用します。 吹き出しをクリックすると次の吹き出しが表示されます。かわいい。 尚、吹き出しはgrumble.jsが使われていますので同時に読み込む必要があります。 <ol id="foo" style="display:none;"> <li data-target="span">吹き出し その1</li> <li data-target=".foo">吹き出し その2</li> <li data-target="b" data-angle="190" data-options="distance:10">吹き出し その3</li> </ol>表示さ
[JS]画像やコンテンツを水平・垂直に気持ちよくスクロールさせて表示することにこだわったスクリプト -Sly
水平・垂直に配置した画像やコンテンツを気持ちよくスクロールさせることと次に表示するアイテムのロジックにこだわったjQueryのプラグインを紹介します。 IE6にも対応してるのがびっくりです！ 特徴は気持ちのいいスクロールだけでなく、ナビゲーションのロジックも直観的で、次に表示するべきアイテムを自動的に先頭に配置します。クリックでアクティブにしたアイテムも常に保持します。 操作は上部のバー、FRAME上でホイール、パネルのクリック、下部のナビゲーションがあり、また下部のボタンでは前・次、最初・最後・中央などの操作もできます。 ナビゲーションでの操作は次に表示するアイテムを先頭に配置します。 デモでは、水平方向のスクロールだけでなく、垂直方向、無限スクロールもあります。
Timeliner.js Demo
Working examples of the timeliner.js jquery plugin. This page features two working examples, which demonstrate several key features including expand/collapse, autostart/autoload, and multiple timelines per page. Also see the newer "Future" demo, released along with version 2.0 of this plugin. The Civil Rights Movement 1954-1964 The content used in this demo is from InvestigatingPower.org, one of t
[JS]これは楽しい！FPS値の設定もできるスプライトベースのアニメーションを作成するスクリプト -Motio
FPSとはFrames Per Secondの略で、1秒あたりのフレーム数のことです。 このFPS値やスピードを簡単に調整できるCSSスプライトベースのアニメーションを実装できるjQueryのプラグインを紹介します。
BuddyPressのマルチサイトのデータベースを分離したい！
ここ数週間、ずっとBuddyPressで作ったマルチサイトもとい、WordPressでのマルチサイト化に伴いデータベースの肥大化に対応するにはどうしたらよいものかとずっと考えてきましたが、やはり ということを考えたほうがいいという結論を自分の中で出しました。 なぜデータベースを分離させるのか 実際にマルチサイトごとのデータベースの分離の手順に説明する前に、なぜマルチサイトをある程度のところでデータベースを分離させたほうがよいのか、熱く語ってもよいでしょうか？ 理由 テーブル数が超やばい マルチサイトをどんどん展開させていくといずれヤバくなるのがこのテーブル数の問題です。 下の画像は、一つのマルチサイトで生成されるテーブルです。
HTMLでカーニング！手軽に文字詰めできる「FLAutoKerning.js」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、机に置いたおもちゃの日焼けが気になるもりたです。 今回は、前からちょっと気になっていたウェブフォントをカーニングできるJS「HTMLで文字詰めするタイポグラフィー用JS」を試してみました。 http://fladdict.net/blog/2011/02/auto-kerning.html ※現在はアクセスできなくなっています。 ご存知のとおり、jsを使わなくてもletter-spacingを使ってcssだけで設定しようと思えばできるんですが、ひと文字ずつの設定となるとhtmlもcssもすっきりしなくなる上にめんどくさい！ こうパッとガッとスッと設定したい！ そんな希望を叶えてくれるのが「FLAutoKerning.js」です！ ポイント1：導入が楽です 手順は簡単、サイトからファイルをダウロードしてjqeryと一緒に読み込ませて<head>内に設定を書くだけ。 入れてみたデモ
The 150 Best UI Kit & Web Template Collection for 2019
Over the past few years, we have noticed that in web design the use of flashy illustrations, extraneous textures and drop down shadows have been minimized, if not totally removed. This is due to the growing influence of minimal and flat design – a user-centric web design style. Microsoft, Google and now even Apple is digging this design trend. If you have observed that you were left behind and you
WordPressのカスタムメニューをショートコードで表示出来る様にする - かちびと.net
仕事で必要になったのでメモ。WordPressで作れるカスタムメニューをショートコードで実装出来るようにする、という方法です。やってみて思ったけど結構便利です。 カスタムメニュー、という名ですけど、メニューコンテンツ以外にも利用出来るので、ショートコードで実装する方法は覚えておいて損は無いです。 以下のようなコードをfunctions.phpに含めます。 function single_page_custom_menu($atts, $content = null) { extract(shortcode_atts(array( 'menu' => '', 'container' => 'div', 'container_class' => '', 'container_id' => '', 'menu_class' => 'menu', 'menu_id' => '', 'echo' =
Googleに学ぶ、Google Maps APIでできること（デモや技術情報など）
Google Maps APIを使ってできるユニークな特徴を備えたデモが楽しめるGoogleのプロモーションサイトと補足として技術情報を紹介します。 Google Maps API - More Than A Map デモでは6つのGoogleマップを使ったコンテンツと、開発者向けリソースや更に高度なデモを楽しめます。 Googleマップ：ベースマップ Googleマップ：サテライト Googleマップ：ストリートビュー Googleマップ：プレイス Googleマップ：ルート案内 Googleマップ：ビジュアライゼーション Googleマップ：開発者向けリソース Googleマップ：ショーケース Googleマップ：ベースマップ まずは、基本となるベースのマップです。
カスタム投稿タイプのアーカイブ表示で、カスタム分類での絞り込み検索を行う – Simple Colors
「Webサイト上で絞り込み検索ができるようにしたい」というのは比較的よくある要望だと思います。そんな場合どうしてますか？カスタム投稿タイプだったら、アーカイブ表示の際に、少々工夫すれば絞り込みを行うことができてしまうのです。 WordPress では、パーマリンクの設定如何に関わらず、?cat=5 などといったパラメーターを追加すると絞り込みが可能となっています。（なので、カテゴリー内でのテキスト検索といったことも簡単に可能なんですよ？） このため、フォームの method 属性を get にしておけば、比較的簡単に絞り込みができてしまうのですが、この場合、アドレス欄にパラメーターがずらずら並んでしまってクライアント受けが良くないのと、チェックボックスによる複数項目での検索に対応しづらいのが難点です。 これを post で投げて、アドレスはそのままで絞り込み検索、さらにはページ送りにも対応
これぞレスポンシブ確認ツールの決定版！OSを選ばずにウェブサイトをすぐに確認できる -Viewport resizer
ウェブページの表示サイズをデスクトップやスマフォ・タブレット用に変えてレスポンシブの確認をするツールはたくさんありますが、これはかなりおススメのツールです。 Viewport resizer Viewport resizerの特徴 Viewport resizerの使い方 Viewport resizerの高度な使い方 Viewport resizerの特徴 Viewport resizerはブラウザベースで動作するブックマークレットで、WindowsでもMac OSでも即時にツールを起動して、表示しているウェブサイトをあらゆるサイズに変更して確認できます。 フルカスタマイズが可能。 その場でサイズ変更してのカスタマイズも可能。 1クリックでスマフォやタブレットの縦・横向きを変更できます。 Media Queriesをサポート。 Metaのviewportタグを適合させます。 ページのリロ
カスタム投稿タイプの年別アーカイブ表示 – Simple Colors
function add_custom_rewrite_rules() { $rules = array( 'top' => array( '^event/([0-9]{4})/page/([0-9]+)/?' => 'index.php?post_type=event&year=$matches[1]&paged=$matches[2]', '^event/([0-9]{4})/?' => 'index.php?post_type=event&year=$matches[1]', ), 'bottom' => array( ) ); foreach ( $rules as $position => $position_rules ) { foreach ( $position_rules as $rule => $rewrite ) { add_rewrite_rule($rule, $
【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜Compass基礎編 | DevelopersIO
はじめに 季節の変わりめで風邪をひいていませんか？僕は38度の熱で会社を休みました。ごめんなさい。 前回は「【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜基礎編」でGUIでSCSSを使えるScout.appのインストールからセットアップについて、またSCSSの4つの主な機能「変数」「宣言ブロックのネスト」「Mixins（関数）」「セレクタ継承」についてご紹介しました。 そこで、今回はGUIツールのScout.appに同梱されているCompassについて活用方法を紹介したいと思います。Compassは、SCSS使いなら必須の便利なフレームワークです。 Compass - CSS オーサリングフレームワークとは compassはSassを使ったオープンソースのCSSオーサリングフレームワークです。 compassを使うことで、Bender Prefix、CSS Spriteを自動
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
新着記事
http://case-mobile-design.com/google-swiffy%E3%82%92%E4%BD%BF%E3%81%86%E3%81%A8%E3%81%8D%E3%81%AB%E5%BD%B9%E7%AB%8B%E3%81%A4tips%E9%9B%86/
http://case-mobile-design.com/flash%E3%82%92html%E5%BD%A2%E5%BC%8F%E3%81%AB%E5%A4%89%E6%8F%9B%E3%81%99%E3%82%8B%E3%83%84%E3%83%BC%E3%83%AB6%E9%81%B8/