Animate.cssを使用してスクロールに応じてコンテンツにアニメーションエフェクトを追加できる軽量スクリプト・「Josh.js」 - かちびと.net
Josh.jsはAnimate.cssを使用してスクロールに応じてコンテンツにアニメーションエフェクトを追加できる軽量スクリプトです 他のJSライブラリを必要としない非依存型で、アニメーションにはAnimate.cssを使用するため2kbと非常に軽量です 使い方も簡単です <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css" /> <script src="https://cdn.jsdelivr.net/npm/joshjs@1.0.0/dist/josh.min.js"></script> Animate.cssとJosh.jsを読み込みます const josh = new Josh({ initClass: "foo", anima
WordPressをクライアントワークで使用する際に覚えておくと良さそうな管理画面のカスタマイズ用コードいろいろ - かちびと.net
今日もWordPressの記事です。今日は、クライアントワークで、納品物としてWordPressを使うときに覚えておくと便利な管理画面をカスタマイズ出来るコードのまとめです。ほとんど地味な施工ですけど。 今日はクライアントワーク向けの管理画面カスタマイズコードをいろいろご紹介します。こちらも、昨日お知らせしたWordPressスニペットに掲載しますのでそちらでもご確認頂けます。と言うわけで宣伝でした。 WordPressスニペット まだ未完成ですけど暇を見て使いやすく出来たらなぁと思います。 更新をWebに疎いクライアントさん側で行うのであれば、管理画面の利便性の向上は更新モチベーションに繋がりますし、工数分の売り上げ増加にも繋げられます。地味だけど、覚えて置いて損はありません。 では、コードいろいろです。コピペはあまり良く無いですけど、今日はまとめ記事なのでコードの解説は割愛させてくださ
WordPressでページ毎にbodyタグのidを振る - かちびと.net
久々にWP関連の記事。bodyに、 ページ毎にユニークなidを振る というもの。body_classを使え ない状況、使いたくない理由が ある場合等の代替方法として、 またはidにしたい場合などに。 body_class()以外の代替案です。自分用メモ。 コード $body_id =""; if ( is_single() || is_page() ) { $body_id = ' id="'.$post->post_name.'" '; } else if ( is_category() ) { $category = get_the_category(); $body_id = ' id="category_'.$category[0]->category_nicename.'" '; } ページ名やカテゴリ名を取得します。で、 <body <?php echo $body_id; ?
シンプルで使いやすく、IE7にも対応可能なレスポンシブWebデザイン向けフレームワーク・BASE
結構良さそうなフレームワーク だったのでメモがてらご紹介。 シンプルなレスポンシブWeb デザイン向けフレームワーク・ BASEです。IE7にも対応可能だそ うです。 IE7でも表示が崩れず、スマフォ等の幅狭なデバイスにも対応できるレスポンシブなWebデザイン向けのフレームワークです。 個人的には好みのフレームワークでした。多分使わせてもらう事になりそう。IE7でも表示が崩れないクロスブラウザ対応との事です。 デモページのキャプチャです。 CSSはリセット込みで11KBほど。フレームワークにはMedia Queriesが使用されていませんので、必要に応じてブレークポイントを指定してCSSを書く感じです。自分好みだったので使ってみようと思います。 BASE
チェックボックスやinput要素などのフォーム周りのユーザビリティを少しだけ向上できる地味に便利なjQueryコードいくつか - かちびと.net
フォームで利用するjQueryのスニペット コードをいくつか。どれも既出だと思う のでおさらいという事で。とはいえ、所詮 はスニペットですので実際に導入する際 は動作をしっかりと検証する事を強く 推奨します。 フォーム周りのjQueryスニペットです。自分用のメモも兼ねて。 フォーム関係は色々面倒なので参考にならない事もあるかと思います。「ふーん」程度にご覧頂くと丁度いいと思います。 Placeholder属性を、非対応ブラウザでは表示/非表示に 便利なHTML5のPlaceholder属性をオールドブラウザでは表示/非表示として対応します。 if(!$.support.placeholder) { var active = document.activeElement; $(':text').focus(function () { if ($(this).attr('placeholde
ダミー画像を超手軽に生成出来るWebサービス・PLACEHOLD.ITがやたら便利 - かちびと.net
昨日知ったWebサービスに久々に感激したので勢いでシェアします。Web制作で必ずと言っていいほど必用になるダミー画像を生成してくれるサービスなんですが、これが個人的にかなり便利でした。 PLACEHOLD.ITはダミー画像の生成サービスなんですが、凄く手軽に生成出来るのでかなりオススメです。 ダミー画像を生成する、というシンプルなサービスですが、これが想像以上に有用的でした。 使い方 使い方は至って簡単。placehold.itというドメインの後にサイズを指定すればいいだけ。 例えば350×150ピクセルの画像が欲しいなら http://placehold.it/350×150 にアクセスすれば指定したサイズの画像が表示されます。 なので、 <img src="http://placehold.it/350x150" /> これで以下のようにダミー画像を表示させる事ができます。 勿論、細か
WordPressのプラグイン・Contact Form 7で使える「特別なメールタグ」の普及に貢献してみる
今まで機会が無かったんですが、最近必要になって改めて便利だったので今更ながらご紹介です。WordPressでコンタクトフォームと言えば、Contact Form 7が定番になっていますが、このCF7にある機能に「特別なメールタグ」っていうのがあります。 フォーラムによく顔を出すような方はご存知の方も多いですが、ググってみると案外紹介されていなかったので普及活動してみます。 まずはContact Form 7のご紹介。WPユーザーなら大抵はご存知ですよね。柔軟性と操作性に優れたコンタクトフォーム用プラグイン。日本製ですが、世界中で愛用されています。 CF7は管理画面内でフォームを作成し、ショートコードで実装します。そのフォーム作成もショートコードを発行する形ですので、HTMLの知識は無くとも作成する事が出来ますが、PHPであるテンプレートタグなどは直接使用できません。 ただ、場合によっては、
著作権放棄のレスポンシブWebデザイン対応CSSフレームワーク・ingrid
シンプルで良さそうだったのでメモ。 パブリックドメインのCSSフレームワ ークです。レスポンシブWebデザイン にも対応していますし、グリッドレイ アウトにも利用出来るのでなかなか 汎用性があるのでは無いかなと。 ライセンスはCC0(クリエイティブコモンズ版のパブリックドメイン)で、著作権は放棄されていますので、気軽に使えますね。 凄く特殊な性能をもったフレームワークという訳ではありませんが、個人的には余計な物が備わってない方がありがたいのでカスタマイズしやすいです。 グリッドレイアウトにも対応しています。 以下、サンプルです。 Sample css/* UNITS These divider classes are set on .ingrid container --------------------------------------------------------*/ .in
要素をレンガ風に配列するスクリプト・jQuery Masonryで、配列させる要素を下揃えにする - かちびと.net
要素をレンガ風に配列するjQueryプラグイン のMasonryで、要素を下揃えに配置出来るよ うにしたい、という内容です。オプション 項目を追加してオンオフを出来るようにカス タマイズします。下揃えにする機会があるか どうかは置いといてｗ jQuery Masonryというのは要素を時系列を崩さずに配列させる事が可能なjQueryのプラグインです。以前少し記事書いたので合わせてご覧下さい。 ボックス要素を綺麗に整列出来るjQueryプラグイン・jQuery MasonryにInfinite Scroll（無限スクロール）機能を加えたサンプル ご覧の通りテキストコンテンツとは非常に相性が悪く、通常のブログやWebサイトではほぼ使いどころが皆無なプラグインですが、個人的にはギャラリーコンテンツの作成機会が多いので多少調べる機会が多いかもしれません。 こんな感じで下揃えにします。まぁそんだけな
日本の企業サイト向けに作成された高性能でレスポンシブWebデザイン対応の無料WordPressテーマ・BizVektor - かちびと.net
ご連絡頂いたのですが、とても良い感じ だったのでご紹介。日本向けのコーポ レートサイトを作成する為に作られた レスポンシブWebデザイン対応のフリー WordPressテーマ・BizVektorです。機能 も優れていて参考になりました。 凄く良く出来てましたよ。とっても勉強になりました。無料で配布って凄いですね・・WordPressをCMSとして企業向けに導入したい、という方は一度ご覧頂くことをオススメします。 CMSとしての機能が最初から備わっており、上図のようにレスポンシブWebデザインにも対応した日本企業サイト向けのフリーのWordPressテーマです。※iPadのキャプチャがおかしいのは気にしないで下さい 機能は以下のような感じ。 レシポンシブWebデザイン対応 カスタム投稿タイプによるお知らせコンテンツ 独自テーマオプション 主要SNSとの連携 カスタムメニュー対応 カスタムヘッ
WordPressのカスタム投稿タイプを使用したサイトのサイト内検索をチェックボックスで絞り込み検索できるようにする - かちびと.net
購読してるブログの記事が気になった のでメモ。カスタム投稿タイプを使った サイトのサイト内検索をもうちょい使い やすくする的な方法です。良く見かける 検索方法なので覚えたいですね。 今日は僕得な記事です。複数のカスタム投稿タイプを使ったサイトで、カスタム投稿別で絞り込み検索を、ユーザーがチェックボックスを使って出来るようにする方法です。 ↑こういうやつね。 コード <form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>"> <input type="text" name="s" id="s" <?php if(is_search()) { ?>value="<?php the_search_query(); ?>" <?php } else { ?>value="キーワー
連続した要素を分割してページネーションを実装、移動時にエフェクトを加えるjQueryプラグイン・jPages - かちびと.net
ちょっと珍しいタイプでしたので備忘録。 連続した要素を、指定した数に達したら 分割して、ページネーションを自動で 生成し、移動時にエフェクトが加わえる、 というもの。大量のリストをコンパクト に、という方に向いてそうですね。 連続した要素になら基本的になんでも使えるっぽいので何かしら応用できるかもしれません。コンパクトにまとめられるのは素敵ですね。 例えばli要素が100個くらいあったとして、これを10個ごと、10ページに分割し、ページ移動時にエフェクトも実装する、というもの。少々カスタマイズ性には欠けますがこれはこれで手軽に大量の要素をコンパクト化出来るので覚えておいて損はないかなと思います。 以下動作サンプルです。 Sample ページネーションの数字が小さすｇ コード <script src="http://ajax.googleapis.com/ajax/libs/jquery/1
ページ内スクロールのjQueryプラグインいろいろ - かちびと.net
ページ内、要素間のスムースな スクロールを実装する事が可能な jQueryプラグインのメモ。使ってい るサイトも随分見かけるようになっ てきましたね。 個人的には特定のものしか使っておらず、いろいろと挑戦したいと考えているのでそのとき用にメモ。カルーセルとかギャラリーみたいなスライダータイプは今回割愛しています。 ScrollTo Posts With jQuery ページ内をダイナミックにスクロール。サイドのメニューっぽいところで操作します。 ScrollTo Posts With jQuery Create a Vertical, Horizontal and Diagonal Sliding Content Website with jQuery 3種類あります。div要素を1ページ表示してスムーズなスクロールで移動。 Create a Vertical, Horizontal an
WordPressテーマ開発者向けの、様々な機能を兼ね備えたフレームワーク・WordPress Bootstrap - かちびと.net
少し気になってたテーマにようやく触れて みたのでついでにご紹介。WordPressテーマ デベロッパー向けに作られたフレームワーク WordPress Bootstrapです。様々な用途に 応用しやすいように作られていますよ。 ベースにBonesが使われています。 テーマ開発者と言ってもかなり幅が広いんですが、こちらはそれなりに触りなれてる方でないと使うのは少し難しいかもしれません。プログラマーさん向けかもですね。 例えばテーマ独自のオプションや、カスタム投稿タイプを応用したシステムなど、割と高性能なテーマのスタートラインとして作ったみたいです。HTML5製でレスポンシブWebデザインにも対応しています。 高性能なテーマ開発にも柔軟に対応できるフレームワークです。今までのWordPressフレームワークの大半は普通のテーマが目的でしたが、こちらは少しシステムよりなイメージです。 レスポンシ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryスニペット | かちびと.net
お手軽WordPress Tips：カスタムタクソノミーで作成した特定のタームに属する記事の一覧を表示数を指定して表示する - かちびと.net
WordPressをCMSとして利用する際、固定ページの親ページと子ページに共通のナビゲーションを作るTips - かちびと.net
WordPressで非推奨になった関数と代わりに利用する関数まとめ | かちびと.net
WordPressスニペット | かちびと.net
ショートコードで使えるタブやスライダー、Twitterのツイート表示など、30以上の機能を搭載したWordPressプラグイン・Shortcodes Ultimate - かちびと.net
