どこよりも詳しい万能スライダーjQueryプラグインslick.jsの使い方 | ITハット
どこよりも詳しい万能スライダーjQueryプラグインslick.jsの使い方 いろいろなスライダー・カルーセルjQueryプラグインを利用してみて、一番簡単でカスタマイズ性に富んだものがこのslickです。非常に便利な分、注意しなければならないこともあるので、その点も含めて紹介したいと思います。 導入 ダウンロード http://kenwheeler.github.io/slick/ サイト上部のメニューのget it nowをクリックします。 Download Nowをクリックでダウンロードすることができます。 読み込み <head> ... <link href=".../path/to/slick.css" rel="stylesheet"> </head> head 内で slick.css を読み込みます。 ... <script src="https://ajax.google
CSSで矢印を作る方法 | Designmemo（デザインメモ）-初心者向けWebデザインTips-
画像は使わずにスタイルシートだけを使って矢印を表現する方法を紹介します。「::before疑似要素」と「::after疑似要素」を利用して矢印を付けたい要素の前後に指定をするだけで簡単に作ることができます。 矢印の作り方 サンプルとして右方向の矢印を作成する場合のCSS設定を見ていきます。 .btn { position: relative; } .btn span { display: block; } .btn span::before { position: absolute; right: 10px; top: 20.5px; display: block; content: ""; width: 15px; height: 1px; background: #fff; } .btn span::after { position: absolute; right: 10px; to
Advanced Custom Fields で画像を出力する方法 – THIRDPARTY
画像のカスタムフィールドを作った際の備忘録 以前にWordPressのプラグイン「Advanced Custom Fields」を利用したカスタムフィールドの設定を紹介しましたが、画像の設定の際に色々な出力の方法があって悩んだので備忘録として残しておきたいと思います。 カスタムフィールドの設定自体は以前の記事を参考にしていただければ幸いです。 Advanced Custom Fieldsでカスタムフィールドを簡単に設定する 今回の記事の目的 画像のカスタムフィールドを設定する 出力の方法を考える 条件分岐で出力を制御する 今回は画像のフィールドの設定とその出力方法、さらにカスタムフィールドを利用しない場合には非表示にするような条件分岐も紹介しながら進めていきたいと思います。 画像の場合は「返り値」として画像そのものやURL、画像IDなど取得できる値がいくつかありますので、順番に見ていきまし
Advanced Custom FieldsのアドオンThe Repeater Field(繰り返しフィールド)の使い方と出力方法 | KERENOR { ケレンオール }
The Repeater Field（繰り返しフィールド）で何ができるの？ 繰り返しフィールドは、カスタムフィールドの中にサブフィールドを作成し、そのサブフィールドをカスタムフィールド入力画面で任意に増やしたり減らしたりできる機能です。 入力項目は決まっているけど、数は決まっていない場合などに非常に便利です。サブフィールドはどんなフィールドタイプでも使えるので、工夫次第で使い道が広がります。 The Repeater Field（公式ページ） The Repeater Fieldの作成方法 今回は、上図のように左側に画像、右側にタイトルと説明文が配置されたパターンを想定し、カスタムフィールドで繰り返しフィールドを作成します。画像には任意のリンクを設定します。 繰り返しフィールドを使えば、「画像・タイトル・説明文・画像リンク」を一つのブロックとして扱い、投稿画面で必要に応じてブロックごとにコ
jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
