• RSS
[WP]「WP-PostViews」プラグインで記事に閲覧数を表示する方法と、人気記事一覧の作り方

記事の閲覧数を表示できるWordPressプラグイン「WP-PostViews」の基本的な使い方 の記事では WP-PostViews の設定方法などの紹介にとどまりましたが、

今回は WP-PostViews を利用したフロント画面への閲覧数の表示方法、及び、閲覧数順に記事を指定件表示させる方法を中心に紹介させていただきます。
続きを読む

[WP]WordPressのテーマファイルのチェック用プラグイン「Theme Authenticity Checker」

Theme Authenticity Checker は、有効化にするだけでWordPressブログ内のテーマファイルの検証を行い、結果を表示してくれるセキュリティ対策用のプラグインです。
続きを読む

[JS]jQuery と jQueryUI を利用したお手軽Datepicker の実装方法

日付を入力するフォームを用意する際、手打ちで年月日を入れると面倒なので、jQuery の Datepicker を利用して、カレンダーから日付を選んで自動入力できるようにする方法です。
続きを読む

[CSS]CSS3 の border-radius で要素や画像で円形に表示する方法

CSS3 の border-radius は要素を角丸にすることができる便利なプロパティで、
角丸の値を調整することで、画像や要素を正円(円形)で表示することもできます。

IE 7以下でも利用したい場合は(試していませんが)、PIE などを使えば実現可能かと思います。
続きを読む

[WP]「Open Graph Pro」プラグインによるWordPress のOGP 設定方法

WordPressの管理画面内でOGP 設定を一元管理したい場合に便利なプラグイン Open Graph Pro のご紹介です。

Facebook との連携部分が少々ややこしいため、本ブログ記事の序盤をFacebook の設定、後半を Open Graph Pro という具合に順を追って設定方法を紹介致します。
続きを読む

[WP]WordPressの「Contact Form 7」で完了画面に遷移させる方法

WordPressの Contact Form 7 は高機能なメールフォームのプラグインですが、メール送信完了画面が用意されていません。

そこで、メールフォームの画面で送信ボタンがクリックされたら、あらかじめ用意した完了画面にJavascript を使って遷移させる方法を紹介します。
続きを読む

[JS]Pinterestっぽいサイトを作れるjQueryプラグイン「jQuery Masonry」

Pinterest風のタイルを敷き詰めたようなレイアウトを実現するために、jQueryプラグインの「The Wookmark jQuery plugin」を使う方法は以前にも紹介させていただきましたが、やはり「jQuery Masonry」の方が有名かな。

と言うことで、基本的な使い方になりますがザックリとご紹介。
続きを読む

[CSS]テキストに影を落とすCSS3 のプロパティ「text-shadow」

テキストに影を落とすCSS3 のプロパティ text-shadow についてまとめました。

前回紹介させていただいた、ボックスに影を付ける box-shadow プロパティと使い方は似ています。
続きを読む

[JS]「jQuery Text Resizer」と「jQuery Cookie」を利用して文字サイズを大中小と変更する

企業サイトであれば「文字の大中小」ボタンをクリックしてページ内のフォントサイズを変更することがよくあると思いますが、jQuery プラグイン jQuery Text Resizer を使えば手軽に実装できます。

また、jQuery Cookie と併用することで、現在のフォントサイズ(の状態)を Cookie に保持できるので、サイト内の別ページへ遷移したりページを離脱してもう一度戻ってきた場合でもサイズを維持することができます。
続きを読む

[CSS]チェックボックスにチェックを入れた時に要素に変化を付ける方法

チェックボックにチェックを入れることで、指定した要素の文字の色や幅(width の値)を変えたり、表示非表示を切替えたりする方法のご紹介です。

サイトやブログにも馴染むように、チェックボックスのデザインをボタンっぽく変更する方法も合わせて紹介させていただきます。
続きを読む

[JS]Javascript で a 要素のリンクを無効にする方法のまとめ

以前に紹介させていただいた CSSの pointer-events で <a> タグのリンクを無効化する方法にも関連しますが、今回は Javascript による<a> タグリンクの無効化を行う方法のまとめです。
続きを読む

[JS]レスポンシブWEBデザイン対応のコンテンツスライダー「Flex Slider」

スライドショーのjQuery プラグインは山ほどありますが、FlexSlider はレスポンシブWEBデザイン対応なので、スマホサイトでスライドコンテンツを利用する際には重宝しています。

また、カルーセルが使えるなどカスタマイズ性にも優れており、非常に使い勝手がよいプラグインだと思います。
続きを読む

[WP]記事の閲覧数を表示できるWordPressプラグイン「WP-PostViews」の基本的な使い方

WordPressの管理画面やフロント画面に「100 Views」のような記事閲覧数を表示できるプラグイン「WP-PostViews」のご紹介です。

記事の閲覧数は、今までにどれくらい閲覧数があったか?という「累計表示」になりますが、工夫次第で「人気記事」のような見せ方も可能になります。
続きを読む

[CSS]ボックスに影を付ける(ドロップシャドウ)CSS のプロパティ「box-shadow」

ボックスに影を付ける(ドロップシャドウ)ことができる CSS3 のプロパティが box-shadow です。

IE8以下には対応していないものの、影はボックスの「内側」「外影」に付けることができますし、影の色やぼかし具合などを調整することで質感のあるボタンをCSS だけで表現することもできますので、個人的には使用頻度の高いプロパティです。
続きを読む