• RSS
[WP]WordPressの「Contact form 7」で自動返信メールを設定する方法

WordPressのお問い合わせフォーム用プラグイン Contact Form 7

高機能で便利なプラグインですが、Contact Form 7 をインストールしてメールフォームを生成しただけでは、自動返信機能が無ければ確認画面(確認フェイズ)も無いため、諸々の細かい設定をしておく必要があります。
続きを読む

[JS]WYSIWYGエディタを実装できるシンプルで軽量なjQueryプラグイン「CLEditor」

シンプルなWYSIWYGエディタを簡単に設置できるjQueryプラグイン CLEditor です。

各種ボタンのカスタマイズができる他、フルブラウザ対応(リサイズ)や幅固定バージョンも用意されていますのでサイトに合わせて利用できます。
続きを読む

[WP]WP PageNavi によるページ送りのデザインは「WP PageNavi Style」が便利

WordPressのページング用プラグイン「WP PageNavi」のデザインを簡単手軽に変更できるプラグインが WP PageNavi Style です。

最初から豊富なデザインが用意されているだけでなく、色番号を指定して独自のスタイルを適用することができるなど、どちらの場合でやってもWP PageNavi Style でレイアウトを管理した方が楽かなと思います。
続きを読む

[CSS]CSS の display:inline-block で並べた要素間の隙間を埋める方法

[CSS]float を利用せずに display:inline-block で要素を横並びにする方法の記事でも紹介していますが、display:inline-block で要素を横並びにした場合に発生する「要素間の隙間を埋める」方法の紹介です。
続きを読む

[JS]Pinterestのようにタイル状にコンテンツを配置できるjavascript「The Wookmark jQuery plugin」

Pinterestのようなサイトをよく見るようになりました。

この手のサイトは jQuery Masonry を利用することが多いのですが、今回は The Wookmark jQuery plugin を使ったPinterest 風のタイル状サイトを構築しましたので、その備忘録です。
続きを読む

[CSS]CSS3 のborder-radius で角丸を作る方法

CSS3 より border-radius のプロパティを使う事で簡単に角丸のオブジェクトが表現できるようになりました。

今回は border-radius を使って様々な角丸のサンプルを紹介したいと思います。
続きを読む

[CSS]CSSの pointer-events で <a> タグのリンクを無効化する方法

<a>タグをクリックして何も起きないようにする、ということをしようと思います。

一番簡単な方法は、CSS3の pointer-events を利用することですが、CSS3なのでIEでの動きは微妙。

スマフォサイトなら気にせずに使えるのかなという印象。
続きを読む

[IE]IE6でも min-width、min-height、max-width、max-height を使う方法

またまたIE6ですが、

IE6 ではCSSの「min-width」「min-height」「max-width」「max-height」が効かないため、javascript などを利用して別途対応してあげる必要があります。

今回紹介させていただく minmax.js は、設置するだけでIE6でも「min-width」や「min-height」が使えるようになりますので、企業サイト構築時にIE6対応までやる場合は外せません。
続きを読む

[WP]ソースコードをハイライトできるWordPressプラグイン「SyntaxHighlighter Evolved」

SyntaxHighlighter 自体はプラグインを利用せずともWordPressに組み込む事は可能ですが、設置が少々面倒なのでプラグイン化された SyntaxHighlighter Evolved を使うと楽です。
続きを読む

[CSS]スマホサイトで、端末を横にしても文字サイズを拡大させない方法

iPhone など向けにスマホサイトを作っていると「端末を横にすると、文字が拡大表示されちゃう!」と困った経験があるかもしれませんが、

CSS の -webkit-text-size-adjust:100% を使って端末横回転時の文字拡大表示を防ぎます。
続きを読む

[JS]IE 下位バージョンで smoothRollOver.js が正常に動かない時の対処法

[JS]IE6でも滑らかなロールオーバを実現させるには「smoothRollOver.js」が便利の記事で紹介させていただいた便利なjavascript smoothRollOver.js ですが、 smoothRollOver.js を使うと画像のレイアウトがおかしくなる!! という時の対処法です。
続きを読む

[WP]IE6 や IE7 でのアクセス時にアラートメッセージを表示できるプラグイン「IE6 No More」

当ブログでは、IE下位バージョン向けの特別な対応(動作チェックも)はしていませんため、WordPressプラグイン「IE6 No More」というプラグインを利用して、IE7以下で閲覧させた際にページ上部にアナウンスを表示しております。

ちなみにプラグインの名称はIE6 No More ですが、IE7でもIE8でもアラートを出すことは可能です。

また、プラグインを有効化しただけではアラートメッセージは英語ですが、日本語に変更することも可能です。
続きを読む

[CSS]float を利用せずに display:inline-block で要素を横並びにする方法

グローバルナビのメニューリンクを横並びにしたり、ギャラリー型サイトで画像をタイル状に横に並べたりと、サイト構築時に要素を横並びにするに当たってCSSの floatdisplay を使うことが多いと思います。

floatdisplay とでは見え方にどのような違いがあるか?について、サンプルも交えて紹介いたします。
続きを読む

[JS]ランダムで、しかも指定件数分だけ要素を表示させるjavascript「randomDisplay.js」

例えば「5件の記事の中から2件をランダム表示させる」のような処理を、jQueryを利用して実現させる方法です。

jQuery を使うので、小難しいプログラムを書いてランダムで記事を取ってくる…なんて処理は不要ですし、(javascriptが使えれば)無料のブログサービスや企業サイトなどでも利用できるので、汎用性が高く便利なjavascript です。
続きを読む