レスポンシブデザインにも対応した高性能なスライダー【bxslider】の設置 | Stronghold Archive
どうもこんばんは。Toshikuraです。今回のTipsは【レスポンシブデザインにも対応した高性能なスライダー【bxslider】の設置】です。以前TIPSにて【jQuery 簡単かつ高性能なスライダー【bxslider】の設置】という記事を書きました。本家の方ではレスポンシブデザインに対応したスライダーへバージョンアップされていましたので、追記版としてメモしておきたいと思いました。スマートフォンでも問題なく表示されるのは嬉しいです。スライドの動きもCSS3を使用している為とてもスムーズです。 設置方法 > DEMO > DOWLOAD 設置方法は変わらずシンプルです。プラグインを読み込みdivやliの階層を書くだけです。 プラグインのダウンロードは本家サイトより行えます。 対応ブラウザ Firefox, Chrome, Safari, iOS, Android, IE7+ 読み込
tableコンテンツを作成・管理出来る高性能なWordPressプラグイン・TablePress
テーブルを手軽に作成、管理する為のWordPressプラグイン・TablePressのご紹介です。今まで見てきた中では一番機能性が高そう。良さそうなので後で日本語にして利用しようと思います。 面倒臭いテーブルを作れるようにするプラグイン。クライアントさんは作れないのでこういったプラグインを使ってもらうと良いかも。機会があれば提案してみたい所です。 管理画面でテーブルを作成、ショートコードで表示する、というもの。管理も楽そうです。CSVのインポート/エクスポートにも対応してるみたい。 テーブルは管理画面で列や行を追加、中身を書き込んでいく形となります。Advanced Editorを使えばセル内でWYSIWYGを利用できます。 セル同士の結合も可能なのでそこそこ複雑なテーブルも作れそうです。 一部有料ですが、レスポンシブWebデザイン対応やセル内でのPHPコード実行用のエクステンション等もあ
範囲を指定して切り抜き。jQuery製の画像クロップライブラリ·Jcrop MOONGIFT
Jcropは画像を四角くクロップするjQueryプラグインです。 写真アップロードサービスやプロフィール画像の切り抜きで活躍しそうなライブラリがJcropです。マウスで範囲指定して画像を四角く切り抜けます。 はい、まずは普通の表示です。マウスで範囲指定します。 こんな感じで範囲指定できます。一度指定した後、マウスで微調整もできます。 正方形に限らず形を決められます。 コールバックにも対応していて、マウスを動かしたタイミングなどが座標付きで取り出せます。 サムネイルビューにも対応しています。範囲指定した部分が小さくなって右側に表示されています。 範囲を大きくしたらサムネイルが自動調整されています。 CSSを使って決められた範囲だけクロップ表示することもできます。 サーバサイドに飛ばしたところです。PHP+GDのスクリプトサンプルも用意されています。 Jcropはサーバサイドに座標を飛ばせるの
大量の絵文字を使えるようになるWordPressのプラグイン・Emoji Emoticons
Githubで使える絵文字があるんですが、その絵文字をWordPressでも使えるようにするプラグイン、Emoji Emoticonsのご紹介。かなり大量の絵文字が用意されているので結構便利だと思います。 絵文字はWordPressでも、もともと使えるんですけど、Emoji Emoticonsは絵文字の種類が凄く豊富でGithubでもコメントに使えるように導入されています。その絵文字をWordPressで同じように使えるようにする、というもの。 絵文字の種類はEMOJI CHEAT SHEETにてご確認下さい。クリックすればクリップボードにコピーされますので記事部分にそのままペーストするだけ。 CSSの影響でズレズレですけど、導入テストです。プラグインは有効化するだけで絵文字が使えるようになります。 絵文字は割と汎用的なデザインなのでクライアント向けでも使えなくも無い気がしました。 Emo
Facebookページの投稿を表示するボックスを実装するjQueryプラグイン・Facio
Facebookページの投稿を任意のWebサイトに表示するjQueryのプラグイン・Facioのご紹介です。公式のが嫌、という方はこちらをご利用になってみては如何でしょうか。 Facebookページの投稿を羅列させる事が出来る、というもの。以下が動作デモです。 動作サンプルもう投稿しなくなりましたけど・・当ブログのFBページを表示させてみました。少し表示に時間かかります。 ※input要素が必要と言うわけではありません。貴方のFBページのURLを入力すれば表示テストが可能です。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script>jQueryのプラグインなのでコアを読み込みます。 <div id="facio"></d
ログイン不要でブログ記事を限定公開できるWordPressプラグイン「Share a Draft」が鬼便利 - カイ士伝
このプラグインは使う人によって感想さまざまだとは思いますが、その筋の人には神がかり的に喜ばれる便利なプラグインです。 長いことブログを運営していると、ブログをごく一般公開するよりも前に、一部の人だけに事前確認して欲しいという時がたまにあります。 WordPressには記事ごとパスワードをかける設定があるのですが、それだとブログに最新エントリとして表示されてしまうし、時間を多少いじったとしてもRSSが飛んだりタイトルが見えてしまうのには変わりない。代わりに固定ページだったらRSSは飛ばないしURLも自由に設定できるからブログ上は見えないんだけど、事前確認が終わった後ブログで公開したい、という時に記事ページへデータ移すのが二度手間だったりします。 そういう時のために今まで使っていたのが「Public Post Preview」というプラグインでした。 WordPress / Public Po
今こそ安心できるWordPressバックアップを！復旧作業まで実際にやってみたWordPress丸ごとバックアップ法
※BackWPup3が公開されました。BackWPup3でのバックアップ＆復旧手順についてはこちらをご覧ください データのバックアップは大切ですよね！疑う余地はないと思います。 WordPressのブログも例外ではありません。バックアップしている人も多いですよね？ でも、 「WordPress全体をバックアップできていますか？」 そして、 「実際にリストア（復元）作業を試してみたことはありますか？」 GoogleでWordPressのバックアップ方法を調べてみると、データベースだけバックアップして安心していたり、復元方法の解説がない場合がとても多いです。 しかし、私はこう思います。 実際にリストア作業をやってみなきゃ、安心はできない！ リストアできないバックアップは役に立ちません。やはり、一度リストア作業を試してみて、初めて安心できるのではないでしょうか。 そこで今回は、「プラグインを使っ
WordPressの多言語化プラグイン”qTranslate”の設定と使い方。その１ - Shinichi Nishikawa's
WordPressの多言語化プラグイン”qTranslate”の設定と使い方。その１ 2012 1/16 追記: 2016/07/03 僕はこのプラグインの利用は推奨しません。多言語化については、WordPress の多言語化で考えることとプラグインの比較という記事を書いていますので、こちらを参照してみてください。 WordPressを多言語化するプラグインqTranslateの管理画面の設定について見ていきます。 インストールしてから設定すること まず、インストールするといきなり管理画面が英語になります。メニューも何もかも全部です。「あれ？日本語で使えないの？」と思ったのですが、できました。 qTranslateでは、「このサイトでは何語を使うのか」というのをまず設定します。 管理画面 ＞ 設定 ＞ Languagesと進んだ上で、下の方にあるLanguagesの欄で、使う言語を選びます
今こそ知っておくLightbox風プラグイン20+:phpspot開発日誌
20 Useful jQuery Lightbox Plugins 今こそ知っておくLightbox風プラグイン20+。 LightBoxが登場して7年ぐらい経つんでしょうかね。色々なところで見るようになったLightBoxのインタフェース。 新しいウィンドウを開く部分の軽量化、ポップアップブロック対策などとして広く使われるようになりました。 派生スクリプトも多数出てきていますので、定番からマイナーなものまで、まとまっていて選択の際に便利かも。 そんなこんなで、このブログも7年ぐらいほぼ毎日更新を続けていますが、LightBox登場あたりから7年も経つのかと時の流れの速さを感じています。 関連エントリ CSS3で出来たクールなLightBox実装チュートリアル
WordPressの管理画面内にヘルプを作成・管理できるプラグイン・WP Help
珍しいタイプだったので何となく ご紹介。WordPressの管理画面内 のヘルプを作成・管理できる、 というWordPressのプラグイン。 記事を書くようにヘルプコンテ ンツを作成出来ます。 クライアントワーク向け、マルチユーザーサイト向けのプラグインでしょうか。管理画面内のヘルプを作成出来るWordPressのプラグインです。いろいろ思いつきますね・・ 管理画面内でヘルプを作るプラグイン。コード見てないけど、カスタム投稿タイプでやってるっぽいです。こんなのも出来るんですね。 こんな感じで作れます。ネストも出来るしドラッグ&ドロップで順番を変える事も可能です。 ヘルプの作成は記事を書くように作成出来ます。 なかなか面白い。他の用途もありそうですね。コードも参考になりそうなので暇を見てチェックしたい。 WP Help (via:WPMU)
iView Slider
画像だけでなく、動画やiframe, HTMLコンテンツにも対応し、レスポンシブレイアウトやタッチデバイスもサポートしたスライダーをHTML5ベースで実装するjQueryのプラグインを紹介します。 iView Slider (jQuery) iView Sliderの特徴 iView Sliderのデモ iView Sliderの使い方 iView Sliderの特徴 iViewはキャプションやサムネイルをアニメーションで表示できるjQueryのスライダーで、イメージスライダー、コンテンツスライダー、バナー広告、プレゼンテーションなどさまざまな用途で利用できます。 IE6/7/8/9, Firefox, Chrome, Safari, Operaなど、主要ブラウザを全てサポート。 iOS, Androidのスマートフォンもサポート。 サイズは変更可能で、レスポンシブレイアウトに対応。 フレ
PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」
PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」 PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」を作成したので公開しておきます。 このライブラリを利用すると スマートフォンでPCサイトにアクセスした場合、指定したスマートフォン用のURLに転送されます。 PCでスマートフォンサイトにアクセスした場合、指定したPC用のURLに転送されます。 スマートフォン用ページでは「PCサイトを見る」なリンクが設定可能で、それがクリックされると、スマートフォンでPC用のサイトが閲覧できます。クリック後は1の転送機能が無効になります PC用のサイトでは、スマートフォンで見た場合のみ表示される「スマートフォンサイトを見る」なリンクが設定可能で、これがクリックされるとスマートフォン用のURLに転送され1の機能が復活します。 個々のページでどのPCページとスマートフォンページが対応
ktai entryで＠以前にピリオドがある場合の対処とカスタム投稿へのポスト
メールからＷｏｒｄｐｒｅｓｓに投稿したいとのことでKtai entryを導入したのですがどうも上手く動作しません。 おかしいなとメールを調べてみるとメールアドレスが aaa..bb@cc.jp なのに “aaa.bb”@cc.jpで受け取っているのが原因のようです。 これはWordpressではなくメールサーバーの仕様らしいですが、＠以前にドットが二個連続で続くか、＠の直前にある場合は＠以前を””で囲んで表示されるそうです。 そもそもそんなメールアドレス登録できるのか？と思ったのですがどうも携帯だとできるようですね。 そういうわけで受信メールアドレスは”aaa..bb”@cc.jpで、ユーザーとして登録されているのはaaa..bb@cc.jpだったためにユーザー不一致で登録できなかったようです。 というわけでktai entryの一部を変更。ついでにメール投稿だと投稿にしか投稿できなかった
アニメーションしながら少しずつ文字を表示させていくエフェクトを実装するjQueryプラグイン・Lettering Animate
使いどころもありそうだったので 備忘録。文字をアニメーションし ながら少しずつ表示させていく様 なエフェクトを実装できるjQuery プラグイン・Lettering Animate です。 プロダクトのキャッチコピーなんかもこの方法でユーザーの視点を誘導出来るかもしれないですね。Flashでは昔からよく見かける表現かもしれません。 lettering.jsにアニメーションエフェクトを追加したものになります。8種類のアニメーションエフェクトが用意されていました。 以下動作サンプルです。 Sample コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script type="text/javascript" src
[JS]画像をホバー時にさまざまなアニメーションで目立たせるスクリプト -Adipoli
シンプルなものからちょっと面白いものまで、20種類以上のアニメーションのエフェクトを備えた画像を目立たせるjQueryのプラグインを紹介します。 デモ 用意されているエフェクトは20種類以上で、ホバー時のエフェクトは下記のものが揃っています。 normal popout sliceDown sliceDownLeft sliceUp sliceUpLeft sliceUpRandom sliceUpDown sliceUpDownLeft fold foldLeft boxRandom boxRain boxRainReverse boxRainGrow boxRainGrowReverse 画像のデフォルト時のエフェクト（オーバーレイ・半透明）も用意されており、組み合わせて利用できます。 [ad#ad-2] 以下、デモページのエフェクトを紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5のAudioPlayerを使ってMP3を公開する方法
Transit - CSS transitions and transformations for jQuery
Open links in new window - Plugins - Redmine)
Redmine プラグインリスト - r-labs
5509.me