WordPressでサイト作成するときに知っておくといいことあれこれ2013年10月12日のWordBench神戸で発表した内容です。私がやったWordPressの勉強法とそれで得たもの？あと参考にした本の紹介を書いています。
[JS]Twitterのように残りの文字数をカウント表示するスクリプト -charCount
TwitterのUIのように、入力できるテキストの残りの文字数をカウントして表示するスクリプトをcss globeから紹介します。 Simplest Twitter-like dynamic character count for textareas and input fields デモページ 上記デモページではデフォルト版とカスタム版の二種類があり、デフォルト版は残りの文字数をカウントして表示し、カスタム版は設定した残りの文字数を超えると表示が強調されるようになっています。 スクリプトのオプションでは入力可能な文字数、強調表示する文字数の設定と、カウンターを配置する要素やクラス名やテキストデータを設定できます。 charCountはjQueryのプラグインのため、実装にはjquery.jsが必要です。
Vegas Background SlideShow
Vegas2Background SlideShowjQuery/Zepto PluginProject by Jay Salvat, Pictures from Unsplash. Need support? Don't waste your precious time, Hire me Feeling Generous? Buy me a beer, beer is good for motivation Need support?Don't waste your precious time, support is available for 24$. Ask your question and quickly receive a ZIP file with a clear running example with commented code and assets solving y
WordPress で新サイトを開設する時に必ず入れるプラグイン14選 | キャリコ
WordPress は4つ運営中、キャリコ（ @calicocatxyz ）です。 やりたいことを叶えるために WordPress を覚えるところから始まり、初めて開設したキャリコ、MT から引っ越しさせた旅ブログ、仕事で扱うブログ、スコにゃん劇場と、気付けば4つのサイトを抱えるまでになっていました。 そうなると WordPress の扱いには慣れたもので、使うプラグインも大体決まってくるのです。基本的なプラグインを決めておいて、あとはそのサイトの特色に合わせて選ぶといった感じですね。それではいってみましょう。 WordPress プラグイン Autoptimize ダウンロードAutoptimize Web サイトのページ表示速度がエライ上がると評判の Autoptimize はインストールするだけで段違いに速くなります。特に JavaScript の縮小によりスマホ・パソコン表示のスコ
semooh plugin sample site
Index of Semooh jQuery Sample Site 画像 1.画像を切り替える（フェード） 2.画像を切り替える（フェード2） 3.画像を切り替える（サイズ、フェード） 4.画像を切り替える（スライド） 5.画像を切り替える（奥行き） 6.画像を切り替える（サイコロ） 7.画像を切り替える（シャッター） 8.画像を切り替える（カルーセル） 9.画像を切り替える（色々） 10.画像の一部分を拡大する 11.縮小した全景で画像を見る 12.画像をパノラマ風に表示する 13.画像を反射する 14.LightBoxを表示する 15.画像にマスク処理を施す 16.マウスオーバーで画像を拡大表示する 17.透過PNGをIE6でも表示させる スタイル 1.マーキーを滑らかに実装する 2.クリックできる範囲を広げる 3.要素の高さを最大のものに揃える 4.グラデーションを作成する 5.文
[JS]画像切り替えやパネル表示にフェードを使ったスライドショーのスクリプト -Fade-in slideshow
画像の切り替えやパネルの表示にフェード効果を使用したスライドショーのスクリプトをDynamic Driveから紹介します。
第1回 プラグインを見つけよう | gihyo.jp
はじめに この連載では、プログラムはあまり知らないという方に向け、今話題のJavascriptライブラリの一つであるjQueryのプラグインを用いた、ワンランク上のWebサイト制作方法を解説します。 第1回では「プラグインをどのように見つけるか」について、その方法を紹介していきます。今後も増加の傾向にあるjQueryプラグイン。インターネットの海の中から自分に必要なプラグインを効率よく探すテクニックは、jQueryを使いこなす上での重要なポイントとなるはずです。 jQueryプラグインの見つけ方 インターネットの海から必要なプラグインを探す方法は、ざっと次の3パターンに分けることができます。 検索エンジンで探す リスティングサイト/ブログから探す RSS/ML購読など 当然、それぞれの探索方法は一長一短であり、以下にそれぞれの方法に対し、詳しく紹介していくことにします。 検索エンジンで探す
ギャラリープラグインデモいろいろ
jShowOff is a jQuery plugin for creating a rotating content module. It works by creating 'slides' from the child elements (eg. <li>) inside a specified wrapper element (eg. <ul>) on which .jshowoff() is invoked. It then rotates through the slides, with options for controls, links, and more. This type of module is often used to promote pages, sections, or features on a site. Required Files the jQue
WordPressでテキストリンクをさまざまなデザインのボタンに変更するプラグイン -Button Shortcodes
WordPressのショートコード：Black Glass [button link="#" variation="black_glass" size="large"]Your Text[/button] [button link="#" variation="black_glass"]Your Text[/button] WordPressのショートコード：Hot Pink [button link="#" variation="hot_pink" size="large"]Your Text[/button] [button link="#" variation="hot_pink"]Your Text[/button] ボタンで使用している画像は下記のようになっています。 自分用にカラーやサイズを変更する時は参考にしてください。
PhotoshopでのUIデザインが楽になる！レイヤーの作業を便利にする無料の機能拡張 -LayerCraft
PhotoshopでWebページやアプリのUIデザインをしている時に役立つ、レイヤー作業が便利になる無料の機能拡張を紹介します。 各ページのデザインを作るためにヘッダとフッタだけがあるPSDにしたい、ナビゲーションやボタンなどパーツのみのPSDが欲しい、スマホ用の画像を書き出したい、などいろいろです。
[JS]WordPressにも最適！シンプルなHTMLをさくっとアコーディオンにしてしまうスクリプト -Magic Accordion
h2の見出し、コンテンツ（テキストや画像）、h2の見出し、コンテンツ（テキストや画像）、、、と実装されたシンプルなHTMLをアニメーションで開閉するアコーディオンにするjQueryのプラグインを紹介します。 ↓上の赤いボタンは切替で、見出し付きのコンテンツをアコーディオンにしています。 「Some amazing header」「And yet another」が見出しです。 Magic Accordion Magic Accordion -GitHub Magic Accordionのデモ Magic Accordionの使い方 Magic Accordionのデモ スクリプトのコンセプトは、WordPressなどのCMSで簡単に利用できるようシンプルなコードからアコーディオンが生成できるよう設計されています。 デモは上部に切替ボタンがあり、見出し付きコンテンツの状態、それをアコーディオ
![[JS]WordPressにも最適！シンプルなHTMLをさくっとアコーディオンにしてしまうスクリプト -Magic Accordion](https://cdn-ak-scissors.b.st-hatena.com/image/square/1e2783ce385857ea9b172089f4da3c1407bf06c5/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014092505.gif)
よく使うWordperssプラグインをまとめておいて、サイト構築時に一括インストールでできる「WPCore」 - WEBマーケティング ブログ
Wordperssでいくつもサイトを構築する際に、面倒なのはいつも必ず使うプラグインをインストールすること。必ず使うものを覚えておくのも面倒ですし、ひとつひとつインストールしていくのも億劫になります。 そんなときに便利なのが、今回ご紹介するサービスとプラグインのセットです。 １人で頑張っているウェブ担当者さま必見！業界トップに教えてもらえるチャンス 10枚とじタイプもある針のいらないホッチキス コクヨ ハリナックス 毎回使うプラグインをまとめてインストールできる「WPCore」 「WPCore.com」は、よく使うプラグインをサービスサイト上にまとめておいて、専用のプラグインを使って一括インストールできるオンラインサービス。 まとめたプラグインをコレクションとして公開し、共有することもできるようになっています。 サービスサイト上にプラグインをまとめられる WPCore.comに無料会員登録
[JS]動画をブラウザいっぱいやエレメントの背景として配置できるスクリプト（スマホにも配慮） -Vide
.mp4, .webm など、動画をブラウザいっぱいやdivなどのエレメントの背景として配置できるjQueryのプラグインを紹介します。 デスクトップでは動画が再生され、スマホでは仕様のため代替の静止画像が表示されます。 デモページ iOSでは動画はネイティブのプレイヤーのみ再生可能なので、静止画像が表示されます。Androidでは一部の機種で動画が再生されてしまいますが、基本的には静止画像が表示されます。 Videの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部スクリプトとして記述します。 <body> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/jquery.vide.min.js"></scr
jQueryで1ページごとにスクロールして画面遷移させるUIを実装する方法｜BLACKFLAG
以前、iPhone5sのプロダクトページがリリースした頃に『簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」』と題して1ページをフルスクリーン表示にして、画面全体をスクロールさせることで、1ページ分（1コンテンツ分）を画面遷移させるUIを実装できるjQueryプラグインを紹介しましたが、自分なりにもっと使いやすい形で実現できないかやってみた実験をご紹介してみます。 【2014/08/05 追記】 各ブロック内での横スライド機能を追加しました。 まずは動作サンプルから。 下記のサンプル画面でマウスホイールスクロールもしくは画面右側のナビゲーションボタン等を使って画面（ページ）を切り替えてみてください。 「jQueryで1ページごとにスクロールして画面遷移させるU
[JS]クルマのメーターのようなアニメーションが気持ちいい、ゲージが変化するスクリプト -Gauge.js
使うシーンは限られると思いますが、アニメーションが気持ちよかったのでご紹介。 ゲージと数字が連動して、クルマのメーターのようなアニメーションです。 Gauge.js -GitHub Gauge.jsの特徴 Gauge.jsのデモ Gauge.jsの使い方 Gauge.jsの特徴 アニメーションでゲージが変化します。 HTML5 Canvasを使ってJavaScript/CoffeScriptで作成。 画像や外部スタイルシートファイルは無し。 jQueryはサポートしてますが、特に必要ありません。 さまざまな設定が可能。 MITライセンス。 対応ブラウザ Chrome Safari 3.2+ Firefox 3.5+ IE 9 Opera 10.6+ Mobile Safari (iOS 3.2+) Android 2.3+ Gauge.jsのデモ デモでは右のオプションを変更すると、直ちに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MixItUp | KunkaLabs
WordPressで企業サイトをつくる時に入れておきたいプラグインまとめ - 株式会社bridge
Glide.js
3media.biz
店舗サイトをWordpressで制作するときに役立つプラグイン５選 | Wordpress boy（ワードプレスボーイ）
