CSSプロパティ [CSS]CSS3のborder-radiusで要素や画像で円形に表示する方法
CSS3のborder-radiusは要素を角丸にすることができる便利なプロパティで、角丸の値を調整することで、画像や要素を正円（円形）で表示することもできます。 IE7以下でも利用したい場合は（試していませんが）、PIEなどを使えば実現可...
CSSプロパティ 
WordPress [WordPress]Open Graph ProプラグインによるOGP設定方法まとめ
WordPressの管理画面内でOGP 設定を一元管理したい場合に便利なプラグインOpen Graph Proのご紹介です。 Facebookとの連携部分が少々ややこしいため、本ブログ記事の序盤をFacebookの設定、後半をOpen Gr...
Javascript・jQuery [JS]ソースコードをハイライト表示できるGoogle Code Prettify
WordPressの場合はSyntaxHighlighter Evolvedプラグインを利用することで簡単にソースコードをハイライト表示させることが可能ですが、WordPressではないブログやサイトの場合にはGoogle Code Pre...
WordPress [WP]Contact Form 7で完了画面に遷移させる方法
WordPressのContact Form 7は高機能なメールフォームのプラグインですが、メール送信完了画面が用意されていません。 そこで、メールフォームの画面で送信ボタンがクリックされたら、あらかじめ用意した完了画面にJavascrip...
jQueryプラグイン・ライブラリ [jQuery]Pinterestっぽいサイトを作れるプラグインjQuery Masonry
Pinterest風のタイルを敷き詰めたようなレイアウトを実現するために、jQueryプラグインの「The Wookmark jQuery plugin」を使う方法は以前にも紹介させていただきましたが、やはりjQuery Masonryの方...
jQuery [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がありました。 単純にファイル形式を変換するだけの作業であれば、操作も簡単で便利そうでしたの...