• RSS
[WP]WordPressで月別アーカイブのリンクをプルダウン式で出力する方法

WordPressでは、テンプレートタグ wp_get_archives を利用することでアーカイブ一覧を出力させることができます。

しかし年数を重ねてくるとアーカイブリストの数が増えてくるので、「ドロップダウンリストにしてスッキリ収めたい!!」という場合のカスタマイズのご紹介です。
続きを読む

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

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

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

Youtube の動画で様々なサイズのサムネイル画像を取得する方法

少し必要になったのでメモ。

ブログやサイトにYoutube 動画を貼付ける場合は、Youtube のページで発行されるタグを貼付けるだけで簡単に設置できます。

ただ、動画のサムネイルを掲載する場合は、Youtube の右っちょに表示されているサムネイルを利用したくても、画像サイズがサイトやブログに合わない場合がありますので、「小」「中」「大」と3種類あるYoutube のサムネイルの取得方法をまとめました。
続きを読む

[WP]WordPressで「タグクラウド」を出力する方法とカスタマイズのまとめ

WordPressではテンプレートタグ wp_tag_cloud() を利用して、サイドバーなどに「タグクラウド」を表示させることができます。

タグ一覧のデザインも変更しやすく便利です。

今回はタグクラウドの基本的な使い方に加えて、簡単なカスタマイズもまとめて紹介させていただきます。
続きを読む

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

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

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

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

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

OGP設定における <meta name=”author”> について

OGPの設定方法とFacebookデバッガー の利用方法 の記事でも紹介させていただいた通り、OGP設定が正常になされているか?を確認するツールとして便利な「Facebookデバッガー」ですが、

別のブログでデバッグをかけると <meta name=”author”> の部分でエラーが返ってきたので調べてみました。
続きを読む

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

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

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

[CSS]CSS でフッター要素をブラウザ下部に固定する方法

よく忘れるのでメモ。

コンテンツの情報量が少ないページでは、フッター要素がページ中段くらいまで上がってきて見栄えが良くない場合もあるので、フッターは常にブラウザの下部に固定させる!ための方法です。
続きを読む

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

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

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

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

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

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

[Mac]Mac で不可視ファイルを見るには「Tinker Tool」が便利

WIndowsの場合は「フォルダオプション」の「表示」メニューから「べてのファイルとフォルダを表示する」を選択すれば、.htaccessなどの不可視ファイルを見ることができますが、Mac では Tinker Tool というアプリケーションを利用すると手軽に不可視ファイルを閲覧したり、ファイルを開くことができます。
続きを読む

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

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

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

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

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

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