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

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

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

[JS]ソースコードをハイライト表示できる「Google Code Prettify」

WordPressの場合は SyntaxHighlighter Evolved プラグインを利用することで簡単にソースコードをハイライト表示させることが可能ですが、WordPressではないブログやサイトの場合には、Google Code Prettify を使うと簡単にハイライト表示させることができます。
続きを読む

[Mac]MAMP で MySQL が起動しない場合の対処方法

Mac のローカル環境でサイトを構築する場合に便利なアプリケーションMAMP ですが、MAMP を起動してもMySQL サーバが起動しない場合がたまにあります。

「Apache サーバは正常に起動するけど、何故かMySQL サーバが正常に起動しない…」なんて場合の対処法を紹介します。
続きを読む

[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 プロパティと使い方は似ています。
続きを読む

[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デザイン対応なので、スマホサイトでスライドコンテンツを利用する際には重宝しています。

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