実装方法を教えてもらったので、復習も兼ねた備忘録です。 WordPressで記事を表示する際に、特定の件数時にclassを付けたり表示する内容を変更させる方法です。 やろうと思えばスタイルの調整とかclass付ける程度であればCSSやjQueryで疑似classを使って実装することも可能ですが、中身をガラッと変えるときや特定の件数後に何かを表示させたいというときなどに非常に便利です。 最初とそれ以外とでclassを変更する たまに実装しているブログを見かけることもある、記事一覧などで最初の記事だけ背景色や文字サイズを変更するといったことをやりたいときに便利な方法です。 実装にはまずfunctions.phpへ下記のように記述します。

サイト制作時にTwitterやFacebookなどのソーシャルメディアサービスのボタンを設置する機会が多いと思いますが、それらを特に独自デザインなどで実装する場合はロゴデータが必要だったり、どのようなカラーコードを使用しているかなどを調べることがあります。 自分もそのような場合は公式からデータをもらったりカラー確認したりするのですが、毎回ググるのが面倒なのとサービスによってはすぐに該当ページを見つけられないなんてことも稀にあるので、個人的にサイトやブログ制作時によく設置・利用されると思う各種サービスのガイドラインへのリンクを一覧化しました。 サービスによってはリンク先で全ての内容を確認できないものもありますが、ほとんどがロゴデータをダウンロードすることができ、ブランドカラーなども確認できるページとなっています。 また、利用条件や禁止事項についても同ページ内に記載されているところが多いので、

WordPressでカスタムフィールドの値入力欄で改行入力した際、単純に表示させるだけでは改行は反映されずに表示されます。 それをしっかり改行も反映させて表示させたり、改行された各行を任意のタグで括ってから表示させたりする方法です。 紹介している内容は下の入力イメージのように入力欄がテキストエリアの場合で説明しています。 ここではいずれもget_post_meta( $post_id, $key, $single );を利用する形で紹介します。 また、エスケープしたり値有無のチェックを行うなどの記述は省いているので、その辺は必要に応じて追記してください。 単純に表示する 例としてキーがfooだった場合、表示する方法としてよく見るひとつが下記のような記述になります。 この方法で表示しようとした場合、例えば上に合った入力イメージのようにカスタムフィールド入力欄で「あいうえお（改行）かきくけこ（

文章内のテキストリンクやテキストのみで実装しているようなナビゲーションリンクなどで使えそうなホバーエフェクト・デザインのサンプルです。 文字数が変化したり改行が頻繁に入るような場所などでは正直使い辛くて利用できる場面が限られてしまうものも多いのですが、シンプルなHTMLとCSSで様々な見せ方ができます。 サンプルの中で特にdisplay: inline-block;を記述しているタイプのものが意図しない箇所で改行されたり、逆にされなかったりということがあるので注意して下さい。 実際にどのような動きになってしまうのかはブラウザを縮めて確認してもらったり、または自身で環境を用意して実装・確認をしてもらうとよりわかりやすいと思います。 ここで紹介するエフェクトは、基本的に<a href="#">リンク</a>のようなHTMLに対して実装したものになります。 また、サンプルコードに含まれていません

少し古いのもありますが、今年見かけたものを中心にフォーム周りでいつか使う機会がありそうだと思ったjQueryプラグインのまとめです。 バリデーションや各フォームエレメントのデザイン変更といったオーソドックスなものから、上手く使えばユーザビリティの向上に繋がりそうなもの、他ではあまり見ないユニークな動きを実装できるものまで様々なタイプがあります。 中にはCSS3を併用したりそのままでは日本語に対応していないというものも幾つかあるので、使う際にはブラウザやデバイス環境によっていろいろ確認する必要はあるんですが、いずれも便利なプラグインばかりです。 exValidation プラグイン作者が日本の方なので、ひらがなやカタカナといった日本語のチェックもできるバリデーションプラグイン。 Validetta シンプルで軽量なバリデーションプラグイン。 jQuery Valideasy 見た目がシンプル

CSSやJavaScriptなどの外部ファイルを読み込む際、全ページ共通で且つよく見かける方法だとheader.phpのhead内に記述するということが多いと思いますが、例えば投稿ページでは使うけど固定ページでは必要ないので読み込ませたくない場合があります。 head内で条件分岐させる方法もありますが、それをfunctions.phpを使って一元管理する方法です。 また、その際に追記されてしまうバージョン表記を消す方法も合わせて紹介します。 JavaScriptを管理する 例としてIDがそれぞれ1～3まで設定されている固定ページに、以下の4つのjsを適応させるという想定で説明していきます。 jquery-1.7.2.min.js（全ページに適応） common.js（全ページに適応） slide.js（固定ページ1のみに適応） lightbox.js（固定ページ2と3に適応） 上記のような

WordPressには便利なプラグインが沢山あり、それらを使うことであまり知識がない方でも様々な機能を実装して自分好みのブログやサイトを作ることができます。 ソーシャルボタンやページネーションを簡単に設置できたり、関連記事や人気記事を手軽に表示できるといったような見栄えを変えたりするユーザー向け（表向き）の機能を実装するタイプのプラグインはよく見かけるのでご存じの方も多いと思いますが、WordPressにはこういったプラグインだけでなく、何かと捗る開発者向けの裏方タイプのプラグインも便利なものが数多くあるので、それらの中から自分が覚えておいて損はないと思うものを紹介します。 全部のプラグインを普段の開発時に使用しているというわけではありませんが、以下で紹介しているものはいずれも個人的に開発時に便利だと思ったプラグインです。 有名なデバッグ系プラグインをはじめ、テンプレートファイルやIDを容

body_class()はbody要素に使用するWordPressのテンプレートタグで、これを使うことで表示されるページによって様々なclassがbody要素に付加されて非常に便利なのですが、たまに「このclassもほしい」というときがあるので、そういった際に使えるbody_class()に独自のclassを追加する方法です。 また、いっそのことbody_class()を使用せずに、その代替としてbody要素に完全に独自のidやclassのみを指定するという方法も備忘録を兼ねて併せて紹介します。 body_class()の使い方 Twenty Fourteenなどデフォルトテーマのheader.phpを見ると確認できますが、body_class()の基本的な使い方は下記のように記述するだけで使用できます。 上記を記述して各ページのソースを確認するとbody要素に様々なclassが付加されて

バナーデザインは決められた領域内でどれだけユーザーやターゲットの目にとまるようなデザインにできるかが重要になってきます。 デザイン制作したことあるなら一度は経験したことあると思いますが、領域が決められているけどその中でしっかり伝えたい内容を目立たせる必要があるので、何度もレイアウトを調整したり、結局時間をかけて完成してもいまいちな出来になってしまったりなんてことも...。 そこで今回は、バナーデザインをするにあたって覚えておきたいレイアウトやデザインパターンをはじめ、効率良く制作していくことができる制作フロー、特に新米デザイナーさんなどには非常に参考になると思うので是非目を通して欲しいエントリー、インスピレーションをもらえるバナー関連のデザインギャラリーといった、バナーデザインの制作に関連することをまとめてみました。 バナーデザインの制作フロー 後ほど紹介するエントリーでこのような内容に関

画像は使用せずにCSSのみを使って実装したハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクトサンプルなど全10種類です。 以前にもハンバーガーメニューをクリックした時のエフェクトを紹介しましたが、あれからまた備忘録として残しておきたいものが幾つか出てきたのでシェアします。 共通のHTML・CSS サンプルで使用しているHTMLとCSSは下記をベースとして使用しています。 スタイルの中には幅や高さを指定している部分やラインの色を指定している部分などあるので、紹介しているものを使用する場合はこれらを自身の環境に合わせて調整してください。 <button class="menu-trigger"> <span></span> <span></span> <span></span> </button> .menu-trigger, .menu-trigger span { dis

画像の軽量化やコード圧縮といったツールをはじめ、各種リファレンスサイト、利用している人が多いエディタやデザインツールのショートカット一覧など、web制作時に便利だと思うツール・サイト・チートシートを自分のブックマークがかなり乱雑化してきたのでその整理も兼ねて一気にまとめてみました。 もちろん他にもこういった便利なものは沢山ありますし、自分も普段からここで紹介しているもの全てを利用しているというわけではないのですが、こういったものを利用することで人によっては大幅に制作時間を減らすこともできると思います。 また、覚えておくとど忘れした時に容易に確認等もできたり、勉強時の参考にすることができるものもあります。 September 01, 2020 更新 リンク切れサイトを削除しました。（100サイト以下に縮小しました...。） January 16, 2016 追記 新たに5サイトを追加して10

CSSのグラデーションはよく見る単純なグラデーションを作るだけでなく、記述の仕方によって様々な見栄えをつくることができます。 画像で切り出してしまった方が圧倒的に早く実装できるような場合も正直ありますし、古いIEをサポートするために使えなかったりもしましたが、最近では旧ブラウザをサポート対象外にすることも多くなってきて今後ますますレスポンシブやRetinaディスプレイなどを考慮して使う機会が増えるように思うので、利用する機会が多いと思う背景パターンをCSSのグラデーションを使っていくつか作ってみました。 ここでの表示は全てイメージになるので、実際の表示は以下デモページをご覧ください。

ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開しているときなどのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。

数多くのサイトで実装されているのを見かける、ページを一定量スクロールすると出現する「このページの先頭へ」のようなページトップを実装する方法を紹介します。 このブログでも実装している（現在は未実装）のですが、同じような動きを実装したいというお問い合わせをいただいたのでその方への回答も兼ねて、動きが被っている感じですが全7タイプの実装方法を紹介します。 最近ではちょっと変わったタイプも多く見かけますが、今回は凝ったアニメーションなども特にないシンプルなものなので、どんなタイプのサイトにも合わせやすいかと思います。 はじめに ここで紹介している実装方法は全てjQueryを使用していますので、あらかじめjQueryを読み込ませてください。 また、HTMLは全て下記のものを使用しています。 紹介しているサンプルはclassにpagetopを用いて実装していますので、class名を変更した場合はCSS

有名なサイトだとPinterestやBehanceなどで取り入れているような、グリッドレイアウトを簡単に実装できるjQueryプラグインのまとめです。 少し前はポートフォリオのギャラリー部分などのような箇所で主に使われている印象が個人的にあったのですが、最近ではブログの記事一覧やECサイトなどでもよく見かけますし、コーポレートサイトのトップに採用しているサイトなども多く見かけます。 基本的な動きは同じようなものでもサポートブラウザやアニメーションの有無などがプラグインによって違うので、自分の中で幾つか使いやすいものを見つけておくと良いと思います。 一応グリッドレイアウトを実装するためのプラグインということでまとめていますが、中にはフィルタリング・ソート・ドラッグ&ドロップなどの機能も併せて実装できるプラグインもあります。 また、基本的にフリーで使用できるもの中心でまとめていますが、商用利用

CSSで片方の幅が可変で、もう片方の幅が固定というタイプのカラムレイアウトを実装する方法を全4パターン紹介します。 対象ブラウザやOSなど環境によっては使えないものもありますが、全て同じ見た目（レイアウト）を実装することができます。 HTMLと実装イメージについて 紹介する方法はいずれも下記のようなHTMLを使用したものになり、ご覧のようにメイン・サイド・それらを括る親要素の3つのdiv要素で実装していきます。 <div class="wrapper"> <div class="main"> <!-- 可変 --> </div> <div class="side"> <!-- 固定 --> </div> </div> また、今回はこのイメージのようにdiv class="main"（青い背景色の領域）を可変、div class="side"（赤い背景色の領域）を固定にそれぞれする方法で、固

実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ

メモしていたものが溜まってきて一覧化したのでシェアします。 以前にもCSSのみでボタンデザインやホバーエフェクトを実装できるエントリーを書きましたが、今回はCSSのみで実装するゴーストボタンと相性が良さそうなホバーエフェクトのサンプルです。 もちろんゴーストボタンに限らず様々なタイプのボタンで使用でき、対応しているブラウザであればコピペで簡単に実装できると思うので、気になるエフェクトがあれば是非使ってみてください :) 閲覧の際にChromeまたはFirefoxで見てもらえるとほぼ問題なく動きの確認ができると思いますが、ブラウザによって動きや見栄えが説明と異なる場合があります。

自分用にひと通りの動きを一覧化したものが欲しかったので備忘録です。 画像ホバー時にエフェクト付きでキャプションを表示させる動きをCSSのみで実装する方法です。 キャプションとはしていますが、例えばブログであればリンク付きのアイキャッチに実装してマウスオーバー時に「もっと見る」のような文言を表示させたりといった用途にも使えます。 共通のHTML・CSS 一部をのぞき、今回はサンプルとして基本的に下記のようなHTMLを使用しています。 <figure> <img src="image.jpg" /> <figcaption> <h3>Caption Title</h3> <p>caption text here ...</p> </figcaption> </figure> CSSに関してはそれぞれ動きに関係する部分のみ記述しており、figcaption内にあるh3とpの見栄えに関するフォント

自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。 リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいというときに使えそうなエフェクトのサンプルです。 CSS3を多用しているので全ブラウザで実装できるわけではありませんが、いずれもCSSのみを使用して実装したもので、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類です。 共通のHTML・CSS サンプルはいずれも下記のようなHTMLを使用しており、CSSについても共通スタイルとしてそれぞれに指定しています。 CSSでは幅や高さを指定している部分もあるので、参考にされる際はこれらを自身の環境に合わせて調整してください。