wordpressのテーマを修正しなくてもサイドバーに最近の投稿を表示することはできますが、アイキャッチ画像が表示されません。そこでプラグインを使用しないでアイキャッチ画像を表示できるように作成しました。
このスライドショーのjqueryプラグインは、軽量コンパクトでレスポンシブな3Dイメージスライダーです。画像の切り替えが立体的になっていて見ていて楽しいです。
これはcssのみのマウスホバーエフェクトで、画像をマスクしてその上に文字列(キャプション)を表示します。今回は割とシンプルな動きのあるものを13種類作成しましたので書き留めておきます。
以前「私がadd_theme_support(title-tag)を使わない理由」という記事を投稿しましたが、wordpress4.4にバージョンアップしたところ、不具合も解消されてtitleタグの内容も改善されたので、add_theme_support('title-tag')を使用します。
続きを読む»
スマートホンなどに使われているハンバーガーメニューのアイコンを画像を使わずにCSSで作成しました。マウスでクリックすると３本線のハンバーガーメニューが「X」に変わるようにjqueryで操作しています。
ただの３本線ではメニューだとわかりにくいと思うので、枠で囲んで影をつけてボタンのように見えるようにしました。
続きを読む»
マウスホバーで画像を拡大・縮小・回転などの動きは、今ではよく見るマウスホバーエフェクトです。マウスホバーのエフェクトは、アイデア次第でかなりのパターンが作成できますね。ここでは基本的なパターンを示します。ちなみにマウスホバーとマウスオーバーは同じ意味です。
続きを読む»
このスライドショーのjqueryプラグインは、軽量コンパクトなレスポンシブ＆スワイプ対応のイメージスライダーです。設定でカルーセルのような表示もできますし、背景画像のスライドショーとしても使用できる事がいいです。
フォームで住所を入力する場面が出てきますが、郵便番号を入力したら住所を途中まで自動入力してくれると大変便利です。そんなjQueryプラグインもいろいろ出回っていますが、簡単に使用できていいなと思った「ajaxzip3」の使い方を書き留めます。
CSSのpositionプロパティを使用して画像の上に文字列を重ねて表示する方法を示します。おまけとしてアニメーション機能を使用して文字列をスクロールさせます。重ねることにより文字の内容や位置の変更にも早く対応できて良いですね。
