Javascript・jQuery [JS]ソースコードをハイライト表示できるGoogle Code Prettify
WordPressの場合はSyntaxHighlighter Evolvedプラグインを利用することで簡単にソースコードをハイライト表示させることが可能ですが、WordPressではないブログやサイトの場合にはGoogle Code Pre...
Javascript・jQuery 
WordPress [WP]Contact Form 7で完了画面に遷移させる方法
WordPressのContact Form 7は高機能なメールフォームのプラグインですが、メール送信完了画面が用意されていません。 そこで、メールフォームの画面で送信ボタンがクリックされたら、あらかじめ用意した完了画面にJavascrip...
jQueryプラグイン・ライブラリ [jQuery]Pinterestっぽいサイトを作れるプラグインjQuery Masonry
Pinterest風のタイルを敷き詰めたようなレイアウトを実現するために、jQueryプラグインの「The Wookmark jQuery plugin」を使う方法は以前にも紹介させていただきましたが、やはりjQuery Masonryの方...
WordPress [WordPress]jQueryを利用してオートコンプリート（検索サジェスト機能）を実装する方法
利用する機会があるか？どうか？？は別として、jQueryを利用してWordPressでオートコンプリート（検索サジェスト機能）を実装する方法のまとめです。 Googleサジェストのような高機能なモノは実現できませんので…。あらかじめこちらで...
CSSプロパティ [CSS]テキストに影を落とすCSS3プロパティtext-shadow
テキストに影を落とすCSS3のプロパティtext-shadowについてまとめました。 前回紹介させていただいたボックスに影を付けるbox-shadowプロパティと使い方は似ています。 text-shadow の記述方法 以下、text-sh...
WordPress [WP]WordPressで月別アーカイブのリンクをプルダウン式で出力する方法
WordPressでは、テンプレートタグwp_get_archivesを利用することでアーカイブ一覧を出力させることができます。 しかし年数を重ねてくるとアーカイブリストの数が増えてくるので、「ドロップダウンリストにしてスッキリ収めたい!!...
jQueryプラグイン・ライブラリ [JS]jQuery Text ResizerとjQuery Cookieを利用して文字サイズを大中小と変更する
企業サイトであれば「文字の大中小」ボタンをクリックしてページ内のフォントサイズを変更することがよくあると思いますが、jQueryプラグインjQuery Text Resizerを使えば手軽に実装できます。 また、jQuery Cookieと...
Google Youtubeの動画で様々なサイズのサムネイル画像を取得する方法
ブログやサイトにYoutube動画を貼付ける場合は、Youtubeのページで発行されるタグを貼付けるだけで簡単に設置できます。 ただ、動画のサムネイルを掲載する場合は、Youtubeの右っちょに表示されているサムネイルを利用したくても、画像...
WordPress [WP]the_title()やthe_excerpt()、カスタムフィールドなどの出力文字数を制限する方法のまとめ
WordPressで企業サイトを構築する場合、「トップページにタイトルと記事本文を30文字で表示制限をかけて出力する」などの処理を施すことが多いのですが、忘れがちなので備忘録も兼ねてまとめました。 他にも「ブログのサイドメニューに記事のタイ...
WordPress [WP]WordPressでタグクラウドを出力する方法とカスタマイズのまとめ
WordPressではテンプレートタグwp_tag_cloud()を利用してサイドバーなどにタグクラウドを表示させることができます。 タグ一覧のデザインも変更しやすく便利です。 今回はタグクラウドの基本的な使い方に加えて、簡単なカスタマイズ...
CSS擬似要素・擬似クラス [CSS]チェックボックスにチェックを入れた時に要素に変化を付ける方法
チェックボックにチェックを入れることで、指定した要素の文字の色や幅(widthの値）を変えたり、表示非表示を切替えたりする方法のご紹介です。 サイトやブログにも馴染むように、チェックボックスのデザインをボタンっぽく変更する方法も合わせて紹介...
Javascript・jQuery [JS]Javascriptでa要素のリンクを無効にする方法のまとめ
以前に紹介させていただいたCSSの pointer-eventsで<a>タグのリンクを無効化する方法にも関連しますが、今回はJavascriptによる<a>タグリンクの無効化を行う方法のまとめです。 jQueryでaタグのリンクを無効 <a...
ソーシャルメディア OGP設定における<meta name=”author”>について
OGPの設定方法とFacebookデバッガー の利用方法の記事でも紹介させていただいた通り、OGP設定が正常になされているか？を確認するツールとして便利な「Facebookデバッガー」ですが、 別のブログでデバッグをかけると <meta n...
WordPress [WordPress]記事一覧へのカスタムタクソノミーが出力できるなど便利なプラグインPS Taxonomy Expander
WordPressでカスタムタクソノミーを使う際は、管理画面の記事一覧やダッシュボードにタクソノミーが表示されるようにカスタマイズしてあげる必要があります。 functions.phpから手動で設定できるかもしれませんが、カスタムタクソノミ...
jQueryプラグイン・ライブラリ [JS]レスポンシブWEBデザイン対応のコンテンツスライダーFlex Slider
スライドショーのjQuery プラグインは山ほどありますがFlexSliderはレスポンシブWEBデザイン対応なので、スマホサイトでスライドコンテンツを利用する際には重宝しています。 また、カルーセルが使えるなどカスタマイズ性にも優れており...
CSS [CSS]CSSでフッター要素をブラウザ下部に固定する方法
コンテンツの情報量が少ないページでは、フッター要素がページ中段くらいまで上がってきて見栄えが良くない場合もあるので、フッターは常にブラウザの下部に固定させる方法をまとめました。 CSS でフッター要素をブラウザの下部に固定 まずはHTMLで...
WordPress [WordPress]記事の閲覧数を表示できるプラグインWP-PostViewsの基本的な使い方
WordPressの管理画面やフロント画面に「100 Views」のような記事閲覧数を表示できるプラグインWP-PostViewsのご紹介です。 記事の閲覧数は、今までにどれくらい閲覧数があったか？という「累計表示」になりますが、工夫次第で...
WordPress [WP]wp_list_categories() とthe_category() を使ったカテゴリリンクで「に含まれる投稿をすべて表示」を非表示にする方法
wp_list_categories()やthe_category()を利用してカテゴリリンクを表示させる場合、<a title="の投稿をすべて表示">のような文言が出力されます。 特に気にならない方はこのままでも問題ないのですが、不要な...
CSSプロパティ [CSS]ボックスに影を付ける（ドロップシャドウ）CSS のプロパティ「box-shadow」
ボックスに影を付ける（ドロップシャドウ）ことができるCSS3のプロパティがbox-shadowです。 IE8以下には対応していないものの、影はボックスの「内側」「外影」に付けることができますし、影の色やぼかし具合などを調整することで質感のあ...
Macアプリケーション [Mac]Macで不可視ファイルを見るにはTinker Toolが便利
WIndowsの場合は「フォルダオプション」の「表示」メニューから「べてのファイルとフォルダを表示する」を選択すれば、.htaccessなどの不可視ファイルを見ることができますが、 MacではTinker Toolというアプリケーションを利...
WordPress [WordPress]Contact form 7で自動返信メールを設定する方法
WordPressのお問い合わせフォーム用プラグインContact Form 7。 高機能で便利なプラグインですが、Contact Form 7 をインストールしてメールフォームを生成しただけでは、自動返信機能が無ければ確認画面（確認フェイ...
jQueryプラグイン・ライブラリ [jQuery]WYSIWYGエディタを実装できるシンプルで軽量なプラグインCLEditor
シンプルなWYSIWYGエディタを簡単に設置できるjQueryプラグインCLEditorです。 各種ボタンのカスタマイズができる他、フルブラウザ対応（リサイズ）や幅固定バージョンも用意されていますのでサイトに合わせて利用できます。 ※注意点...
Macアプリケーション [Mac]WMVファイルをSWFに変換できるMac用アプリケーションTotal Video Converter Lite
WMV 形式のファイルを SWF に変換したかったので、Mac で変換可能なソフトを探しているとTotal Video Converter Liteがありました。 単純にファイル形式を変換するだけの作業であれば、操作も簡単で便利そうでしたの...
WordPress [WP]WP PageNaviによるページ送りのデザインは「WP PageNavi Style」が便利
WordPressのページング用プラグイン「WP PageNavi」のデザインを簡単手軽に変更できるプラグインがWP PageNavi Styleです。 最初から豊富なデザインが用意されているだけでなく、色番号を指定して独自のスタイルを適用...
CSSプロパティ [CSS]CSSのdisplay:inline-blockで並べた要素間の隙間を埋める方法
float を利用せずに display:inline-block で要素を横並びにする方法の記事でも紹介していますが、display:inline-blockで要素を横並びにした場合に発生する「要素間の隙間を埋める」方法の紹介です。 PX...