ホーム > 2015年

WordPressのサイドバーにアイキャッチ画像付きで最近の投稿を表示する方法

ブログアイキャッチ画像032

read more

wordpressのテーマを修正しなくてもサイドバーに最近の投稿を表示することはできますが、アイキャッチ画像が表示されません。そこでプラグインを使用しないでアイキャッチ画像を表示できるように作成しました。

続きを読む»

3DスライドショーjqueryプラグインjR3DCarouselの使い方

ブログアイキャッチ画像031

read more

このスライドショーのjqueryプラグインは、軽量コンパクトでレスポンシブな3Dイメージスライダーです。画像の切り替えが立体的になっていて見ていて楽しいです。

続きを読む»

CSSでマウスホバー時に文字列を表示するエフェクト

ブログアイキャッチ画像030

read more

これはcssのみのマウスホバーエフェクトで、画像をマスクしてその上に文字列(キャプション)を表示します。今回は割とシンプルな動きのあるものを13種類作成しましたので書き留めておきます。

続きを読む»

WordPress4.4ではadd_theme_support(‘title-tag’)を使用します。

ブログアイキャッチ画像029

read more

以前「私がadd_theme_support(title-tag)を使わない理由」という記事を投稿しましたが、wordpress4.4にバージョンアップしたところ、不具合も解消されてtitleタグの内容も改善されたので、add_theme_support('title-tag')を使用します。
続きを読む»

cssでハンバーガーメニューのアイコンを作成

ブログアイキャッチ画像028

read more

スマートホンなどに使われているハンバーガーメニューのアイコンを画像を使わずにCSSで作成しました。マウスでクリックすると3本線のハンバーガーメニューが「X」に変わるようにjqueryで操作しています。
ただの3本線ではメニューだとわかりにくいと思うので、枠で囲んで影をつけてボタンのように見えるようにしました。
続きを読む»

CSSで画像のマウスホバーエフェクト

ブログアイキャッチ画像027

read more

マウスホバーで画像を拡大・縮小・回転などの動きは、今ではよく見るマウスホバーエフェクトです。マウスホバーのエフェクトは、アイデア次第でかなりのパターンが作成できますね。ここでは基本的なパターンを示します。ちなみにマウスホバーとマウスオーバーは同じ意味です。
続きを読む»

スライドショーjqueryプラグインjSliderの使い方

ブログアイキャッチ画像026

read more

このスライドショーのjqueryプラグインは、軽量コンパクトなレスポンシブ&スワイプ対応のイメージスライダーです。設定でカルーセルのような表示もできますし、背景画像のスライドショーとしても使用できる事がいいです。

続きを読む»

郵便番号から住所を変換するjavascriptライブラリajaxzip3

ブログアイキャッチ画像025

read more

フォームで住所を入力する場面が出てきますが、郵便番号を入力したら住所を途中まで自動入力してくれると大変便利です。そんなjQueryプラグインもいろいろ出回っていますが、簡単に使用できていいなと思った「ajaxzip3」の使い方を書き留めます。

続きを読む»

画像の上に文字列を表示する方法

ブログアイキャッチ画像024

read more

CSSのpositionプロパティを使用して画像の上に文字列を重ねて表示する方法を示します。おまけとしてアニメーション機能を使用して文字列をスクロールさせます。重ねることにより文字の内容や位置の変更にも早く対応できて良いですね。

続きを読む»

wordpressでtwitter共有ボタンを付ける方法

ブログアイキャッチ画像023

read more

ブログでは一般的になったtwitterの共有ボタンをプラグインを使用しないで、付ける方法を書き留めます。

続きを読む»