CSSの content プロパティの便利な使い方いろいろ
今まであまり知らなかったのですが、contentプロパティを使うと自動的に文字や画像を自動的に挿入したりできて便利ですね。最近調べて知った、contentプロパティを使用した表示の仕方をいくつか書きだしてみました。 IE8以上でないとcontentプロパティを使った、:beforeや :after擬似要素は対応していませんが、「 IE9.js」を使用すれば使える範囲も広がります。ちなみにIE9.jsを適用しても5.の連番表示は8以下では表示できませんでした。 1. リストの最初の要素に”★new!”を表示する 更新記事一覧などで最新の記事に自動的に”★new!”等の表示や画像を表示する事ができます。文字だけでなく画像も表示できます。Webフォントを使えばいろんなアイコンが表示できますね。 デモ See the Pen リストの最初の要素に”★new!”を表示するサンプル by Saomoc
[jQuery] プラグインを使わずに横からスライドインするメニューを簡単に作る
Modified 2015-10-17 更新情報 メニュースライドイン時スクロールできるサンプルを追記しました。コメント欄での返答で誤りがあった箇所を削除しました。 コンテンツ 部分をクリックしても閉じることができるようにするコードを追記しました。 スマートフォンやレスポンシブサイトなどでよく見かける、メニューボタンをクリックするとコンテンツを押し出してメニューがスライドインしてくる動きを jQuery と CSS で作る方法です。やってみると意外と簡単なコードで作ることができます。 サンプルデモとダウンロード ◆ 横からスライドインするメニュー demo｜memocarilog このサンプルコードは以下よりダウンロードできます。 ◆ SaoriMiyazaki/SlideIn_Menu HTMLコード スライドインしてくるメニューとメニューボタンの記述をします。 <!-- スライドメニュ
![[jQuery] プラグインを使わずに横からスライドインするメニューを簡単に作る](https://cdn-ak-scissors.b.st-hatena.com/image/square/90e0d5fd2040a360e7449fe29a2efc39e3dd577c/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2014%2F11%2FjQueryicon.png)
WordPressのカスタムフィールドのデータ取得と表示いろいろ
WordPressのカスタムフィールドに入力したデータを取得する方法と表示する方法です。データを取得するにはいくつか方法がありますので、分かる範囲で書き出してみました。（カスタムフィールドに値があるかないかで表示を分ける条件分岐も追加しました。） 1. get_post_meta() でデータを取得して表示する パラメータ <?php $meta_values = get_post_meta($post_id, $key, $single); ?> $post_id データを取得する投稿のIDを指定します。表示中の投稿を指定するなら $post->ID を指定する。 $key 表示したいカスタムフィールドに入れた名前（日本語で大丈夫） $single trueかfalseを指定。falseで配列でデータを出力する。trueで指定されたフィールドの”値”の1つを文字列で出力。 使用例 下のよ
[WordPress] カスタムメニューのコードから余計なタグやクラスを削除しスッキリさせ、かつカレントクラス機能を付ける
カスタムメニューを使うとオリジナルのメニューを管理画面で簡単に作れて便利ですが、カスタムメニューで生成されるコードは余計な div や id、class が入ってしまいます。この余分な部分を削除して、カレントクラス表示の機能は残す方法です。 カスタムメニューをデフォルトのまま表示したコードは以下のようになっています。 これをスッキリ必要なものだけにしていきます。具体的には、ul 要素を囲っている div 要素を削除し、ul と li 要素に付与されているID、クラスを削除します。 ただ、現在開いているページメニューに付けられる current-menu-item クラスは便利なので、それと同じように表示中ページの li には current のクラスを付けるようにします。 メニューを囲っている div要素と、ul要素に付与されているID・クラスを削除する カスタムメニューは表示したいテンプ
![[WordPress] カスタムメニューのコードから余計なタグやクラスを削除しスッキリさせ、かつカレントクラス機能を付ける](https://cdn-ak-scissors.b.st-hatena.com/image/square/442a98fb6e69ee7af1c30f705b701eb78785381f/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2012%2F12%2Fwp-dkblue-orange-640x960.png)
border-radius と jQueryプラグイン-jQuery.corner を使って角丸を IE にも簡単に適応させる
border-radius と jQueryプラグイン-jQuery.corner を使って角丸を IE にも簡単に適応させる IE8以下にはjQuery.cornerプラグインを適用するようにして、IE9とその他のブラウザにはborder-radiusで角丸を作れば、実用的にborder-radiusを使っていけそうです。 ！IE9でborder-radiusが適用されない場合 IE9でborder-radiusが適用されない事がありました。調べたら後方互換モードになってしまう事が原因のようです。以下のメタタグをヘッド内へ追加して解決しました。IE9 モードでレンダリングしなさいという指定です。 <meta http-equiv="X-UA-Compatible" content="IE=IE9" /> 以下のように content に IE=edge と指定すると、最新のバージョンで読
ショッピングカート等が入ったECサイトで使えそうなモノクロのアイコンセット
シンプルなモノクロのアイコンセットが色々紹介されていたので、その中からECサイト等で使えそうなショッピングカートが入ったセットのメモです。 GLYPHICONS – library of precisely prepared monochromatic icons and symbols. こちらは沢山アイコンが入っていますが、フリーでダウンロードできるのはpngファイルのみが入ったファイルです。 GraphicsFuel.com | 20 Minimal ecommerce icons (vector PSD) pngファイルとpsdファイルがダウンロードできます。 Free Mega Pack Vector Icons Set – 129 Clean Icons – DesignModo pngファイルとpsdファイルがダウンロードできます。こちらも沢山アイコンが入っています。 New
カスタム投稿タイプのアーカイブページへのアドレスのみ取得する方法
get_post_type_archive_link を使用するとカスタム投稿のアーカイブページのアドレスのみを取得できます。取得したアドレスを書きだして画像へのリンクにする事等ができます。 get_post_type_archive_link の使用方法 <?php get_post_type_archive_link( '投稿タイプ名' ); ?> ‘投稿タイプ名’には表示させたい投稿タイプの名前を入れます。 例えば、現在表示しているカスタム投稿タイプの個別ページに、その投稿タイプのアーカイブページへのアドレスを取得するには以下のように get_post_type() を記入すれば現在の投稿タイプ名を取得して、アドレスを表示してくれます。 <?php echo get_post_type_archive_link( get_post_type() ); ?>
カスタム分類をタグ型として設定した場合の出力方法
カスタム分類をタグのようにして使用した場合に、普通のタグと同じく”wp_tag_cloud”関数でタグクラウドの様に表示できます。 使用例 最小文字サイズ10px、最大文字サイズ20pxのタクソノミーのタグクラウドを表示するには下記の様に記入します。 <?php wp_tag_cloud(array( 'taxonomy'=>'タクソノミー名', 'smallest' => 10, //最小文字サイズ 'largest' => 20, //最大文字サイズ )); ?> </p> タグクラウドと同じく＜a＞タグで出力され、投稿数が多い場合には多い文字で表示するようにできます。 タグクラウドの表示についてはCodexのwp_tag_cloudのページにパラメータなど詳しく載っています。並び替えや表示数など設定できます。 テンプレートタグ/wp tag cloud – WordPress Cod
body_class を使ってページごとに違う表示をする
body_classはbody要素用のテンプレートタグです。 下記のようにbodyタグに記述すれば、表示するページの種類などによってbodyに自動的にクラスを付加してくれます。そのクラスを使いcssをページごとに変えたりする事ができます。 <body <?php body_class(); ?>> body_class( $class ); $class にはクラス名が入ります。独自のクラスを付けることもできます。 使用例 <body <?php body_class(); ?>> トップページには body class=”home” というクラスが付くので、下のようにcssに記入すれば、トップページのヘッダーだけ背景を黒にしたりできます。 .home #header{ background-clor:black; } #header{ background-clor:grey; } 独自
サムネイル付スライドショーギャラリー jQueryプラグイン-Galleriffic
サムネイルが付いた画像スライドショーのjQueryプラグインです。サムネイルがフォーカスされた時に大きい画像を読み込む為、画像が大量にあっても読み込みに時間がかかりません。 オプションも豊富で、ページャー、画像タイトルやキャプションを同時に表示させることもできます。 スライドショーのオンオフやページ送りをつけることも可能です。 Galleriffic配布先 Galleriffic opacityrolloverが同包されておりサムネイル画像がフェードされるようになっています。 配布先の●Examplesのところよりサンプルが一式もダウンロードできます。 “サンプルデモ“も作りました。 使い方 head内またはbodyタグ直前でjQuery本体とgalleriffic.js、opacityrollover.jsを読み込みます。 <script src="https://code.jquery
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スライドショー ページ 2｜memocarilogWordPress jQuery などの Web 制作関連のメモと iPhone Macのこと - アーカイブ