hublog.bizThis domain name registration has expired and renewal or deletion are pending. If you are the registrant and want to renew the domain name, please contact your registration service provider. 2023 著作権. 不許複製 プライバシーポリシー
【WordPress】プラグイン Advanced Custom Fields の全フィールドの出力方法
ワードプレスで構築したウェブサイトで、ちょっと変わった機能を実装したいとき。非常に多くのケースで［Advanced Custom Fields］（以下「ACF」）が役に立ちます。 今日は［ACF］での全フィールドタイプの出力方法を紹介します。 フィールドタイプ：基本 テキスト <?php if( get_field('text') ) { ?> <p><?php the_field('text'); ?></p> <?php } ?> テキストエリア <?php if( get_field('textarea') ) { ?> <p><?php the_field('textarea'); ?></p> <?php } ?> 数値 <?php if( get_field('number') ) { ?> <p><?php the_field('number'); ?></p> <?php
jQueryプラグイン「pjax」でスムーズにページ遷移するサイトの作り方 | Neganin(ネガニン)
Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/users/1/neganin/web/neganin/wp/wp-content/plugins/jetpack/_inc/lib/class.media-summary.php on line 77 Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/users/1/neganin/web/neganin/wp/wp-content/plugins/jetpack/_inc/lib/class.media-summary
私が普段WordPress案件で入れてるプラグインを紹介(2014年秋版)
WordBench Nagoya 11月勉強会の最後にアンカンファレンス（班別質問タイム的な感じの）をやった時、「Kさんが毎回必ず入れるプラグインを教えてほしい」という質問をいただいたのですが、残念ながらタイムアップとなったため、ブログにまとめることとなりました。 前提として サイトの用途によって必要なプラグインも変わってきますが、スタンスとしては クライアントワークで、企業サイトを作るというケースを想定 公式ディレクトリ登録プラグイン なるべく高機能ではない（負担の低そうな）もの 迷った時は国産（知人作） という感じです。 基本的なWordPress関数で済むような処理は原則として自分で書きますので、なるべくコードを書かずに表示をいじったり機能を追加したい、という方向けではないと思います。 ですので、よくある「使えるプラグイン○個まとめ」的なエントリーとはまた違ったプラグイン選定になって
【WordPress】便利なのはわかってる！…それでも「使わない」ことに決めたプラグイン。
巷の多くのブログなどで「使用中のお勧めプラグイン」などのタイトルで、WordPressの便利なプラグインを紹介している記事があります。 …もちろんオンズのブログでも同様の記事を書いているのですが。 今日は、その真逆のコンセプトで、『便利なのはわかっているけど使わないことに決めたプラグイン』を紹介していきます。 All in One SEO Packまずはこれ。 SEO対策の代名詞的プラグインとして多くの記事で取り上げられている有名なプラグイン［All in One SEO Pack］です。 確かに、このプラグインを使うとサイトのメタデータ、keywordsやdescriptionを細かく設定できて、ほぼ完璧なSEO対策ができます。 でもこれ、ある程度のPHPの知識があれば、プラグインを使わずとも同様の機能をサイトに付加できるんですよね。 それに［All in One SEO Pack］を使
Web制作者が捗る！知識が増える2014年トレンドまとめ
作成：2014/06/9 Web制作 > トレンド感のある動きや、洗練された見え方を実現するために、知っておきたいことや方法など。Web制作の現場で知っておくべきことをまとめました。全部取り入れるのは無理ですが、押さえておくことで今以上に見栄えのするサイトを作れると思います。ここ最近のトレンドをおさらいしたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビューで使いたいエフェクト １．ロングシャドウ ２．ポリゴン ３．ラージフォトスタイル ４．ブラーエフェクト ５．フルスクリーン動画 ６．画像シーケンス 脱ビットマップ画像 ７．SVG ８．Webフォントを円で囲む 配色・フォント ９．配色(フラットデザイン) １０．タイポグラフィ(フラットデザイン) １１．フォント(フラットデザイン) 効果 １２．Infinite Scroll(無限スク
レスポンシブなタブを実装できるjQueryプラグイン「Responsive-Tabs」:phpspot開発日誌
jellekralt/Responsive-Tabs GitHub レスポンシブなタブを実装できるjQueryプラグイン「Responsive-Tabs」。 レスポンシブデザインでタブはわりと厄介で、いろいろなアプローチが取られていたりしますが、このアプローチはなかなかスマートかもしれません。 通常のタブUI 画面幅縮小で、タブが下に表示表示されます。スマホなどでは操作がし易いかも。 関連エントリ タブ切り替え時のエフェクトがクールなタブUI実装jQueryプラグイン「Tabulous.js」 電話番号入力時等に自動でタブを入力してくれるjQueryプラグイン「Autotab」 シンプルすぎるモバイルファーストなタブ実装jQueryプラグイン「Tabby」
ユーザーに届かない登録確認メールを半減させるプラグイン「mailcheck.js」
By Helga Weber ユーザー登録やアカウント作成を行ったあと、登録したメールアドレス宛に仮登録メールや最終確認メールが届く流れになっているシステムはあちこちにありますが、登録時にメールアドレスを間違えてしまうとこのメールが届かず、「もう面倒だからいいや……」と諦めてしまう人が出てしまいます。サービス提供者にとって大きな痛手であるこの「確認メール不達」という事態を減らすため作られたJavaScriptライブラリとjQuery用プラグインが「mailcheck.js」です。 Kicksend/mailcheck · GitHub https://github.com/Kicksend/mailcheck How we decreased sign up confirmation email bounces by 50% - The Kicksend Blog http://blog.
[JS]複数のパネルを1ページに垂直に配置した際にベストポジションにスクロールを補正するスクリプト -jQuery.panelSnap
Event Capturing 各イベントを取得することもできます。 jQuery.panelSnapの使い方 Step 1: 外部ファイル スクリプトをhead内に外部ファイルとして記述します。 <head> ... <script src="/path/to/jquery.js"></script> <script src="/path/to/jquery.customEvents.js"></script> <script src="/path/to/jquery.panelSnap.js"></script> </head> Step 2: HTML コンテンツは一つずつsection要素（変更可能）で並列に配置します。 スタイルシートは各コンテンツ自由にしてください。 <body> <section>コンテンツ：1</section> <section>コンテンツ：2</sect
jquery小技まとめ３２
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
[JS]これは楽しい！FPS値の設定もできるスプライトベースのアニメーションを作成するスクリプト -Motio
FPSとはFrames Per Secondの略で、1秒あたりのフレーム数のことです。 このFPS値やスピードを簡単に調整できるCSSスプライトベースのアニメーションを実装できるjQueryのプラグインを紹介します。
[JS]スクロールするのが楽しくなる！多彩なパララックスのエフェクトを簡単に実装できるオープンソースのスクリプト -Jarallax
Loodsmedia ディスプレイ内のコンテンツもパララックスします。 Jarallaxの使い方 「Demo 3」を例に、実装方法を簡単に紹介します。 外部ファイル 「jquery.js」と当スクリプトをhead内に外部スクリプトとして記述します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jarallax-0.2.3b.js"></script> HTML HTML自体は通常通りに実装し、アニメーションのエフェクトを適用するエレメントには参照できるようid, classなどを付けます。 <h1 class="logo">Jarallax</h1> <div class="container" id="slide1"> <h2>見出し：slide
[JS]セレクトボックスの使い勝手をパワーアップするスクリプト -Select2
セレクトボックスを美しいデザインにするだけでなく、各アイテムに画像を配置したり、タグやプレースホルダテキストや検索の対応、セレクトボックスのコントロールなど、さまざまなことができるjQueryのプラグインを紹介します。 Select2 GitHub [ad#ad-2] Select2の対応ブラウザ Select2のデモと実装 Select2の対応ブラウザ Select2の対応ブラウザは下記の通りです。 IE8+ ※IE7はz-indexを使った一部のものにバグあり。 Chrome8+ Firefox3.5+ Safari3+ Opera10.6+ Select2のデモと実装 各デモとともに実装方法を紹介します。 jQueryは1.7+推奨で、1.4.2から対応しています。 デモ：ベーシック（上：既存、下：Select2適用） まずは、ベーシックなデモから。 下記のシンプルな記述で、既存のセ
アニメーションしながら少しずつ文字を表示させていくエフェクトを実装する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
デザインがクールなタグクラウドを実装できるjQueryプラグイン「jQCloud」:phpspot開発日誌
DukeLeNoir/jQCloud GitHub デザインがクールなタグクラウドを実装できるjQueryプラグイン「jQCloud」 作ってみると意外と難しいタグクラウド。それを次のように美しく実装できるタグクラウド実装用プラグインです ワードのリストを次のように配列で渡してあげて初期化するだけです。デザインとかは全部やってくれるみたいです 文字の羅列だけをデザインする上に、毎回ワードが変わるわけなのでなかなかデザインが難しいところですね。 Web2.0と言われた２００５年当時は何処でも見る程よく使われていたインタフェースですが、CSS3を使ってrotateさせたりすることで今ならより進んだ面白い表現ができるかもしれませんね 関連エントリ 瞬時にタグクラウドが形成できるjQueryプラグイン「Jimpl Tag Cloud」 HTML5のcanvasを使ったアニメーションするタグクラウド
[JS]パララックスもApple風スライダーもOK、エレメントごとに動作が設定できるスライダー -Sequence.js
普通のかっこいいスライダーだけでなく、パララックスを使ったスライダー、AppleのiPhoneページに使用されているようなスライダーなどを簡単に、そしてセマンティックに実装できるjQueryのプラグインを紹介します。 Sequence.js - The jQuery Slider Plugin with Infinite Style [ad#ad-2] Sequence.jsの特徴 Sequence.jsのデモ Sequence.jsの使い方 Sequence.jsの特徴 エレメント単位で設定できるCSS3アニメーションを使ったスライダーです。 オープンソース。 すべてのモダンブラウザをサポート。 スマートフォンなどのタッチデバイスをサポート。 古いブラウザでも機能します。 ※IE7とFirefox3.6でもテスト済み。 セマンティックなマークアップ。 Responsive Web Des
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
