WordPressの記事投稿時に「アイキャッチ」を利用する事が多いと思います。
例えば「最新記事をアイキャッチ付きで一覧表示」したり「OGP 設定にアイキャッチを使う」など、非常に利用頻度の高い画像ですので、今回はこの アイキャッチ を取得する方法をまとめました。
続きを読む
ブログの関連記事を自動で取得してサムネイルとタイトル付きで表示してくれる LinkWithin。
LinkWithin のサイトでメールアドレスやブログURLなどを登録するだけでjavascriptのタグ(ソースコード)が発行されますので、それを自分のブログの関連記事を表示したい場所に貼付けるだけで動きます。
続きを読む
WordPressのテンプレートファイルの中で、page.php が固定ページ用のテンプレートになります。
企業サイトを構築すると「トップページと会社概要ページでデザインが異なる」なんてことは良く有りますが、WordPressの場合、このpage.php 内で「ページID」か「ページスラッグ」で条件分岐しながら、ページ別にデザインを変更することができます。
続きを読む
Flashファイル(.swf)を扱う際にはキャッシュの問題が結構面倒くさくて…
固定のFlash ムーヴィならさほぼ気にはならないですが、情報が頻繁に更新されるようなFlash の場合はキャッシュをさせないようにしておかないと、SWFファイルが更新されてもユーザが最新のファイルを見ているとは限りません。
続きを読む
サイトにSWFファイル(Flash)を埋め込む際の便利なJavascriptが「SWFObject」です。
設置が簡単な点はもちろんですが、Flash に対応していない環境(iPad とか iPhone とか)向けに、画像やテキストで代替表示できる点も、未だにSWFObject が手放せない要因です。
続きを読む
WordPressでカテゴリリンクを出力する際には、
wp_list_categories()
や the_category()
を利用しますが、
ソースコードには <a title=" の投稿をすべて表示">
も一緒に出力されてしまいます。
続きを読む
meta viewport
は、デバイスに応じてウィンドウの幅や高さを調整できたり、画面を拡大縮小率を調整したりと、表示領域を設定する上で重要なメタデータです。
特に、スマートホンやiPad などのタブレット向けにサイトを構築したり最適化する際に、<head> 内に meta viewport を設定しておかないと上手く収まってくれません。
続きを読む
jQuery ベースのコンテンツスライダーには色々ありますが、今回紹介させていただく「bxSlider」は設置が簡単で、自動再生やフェードインによる画像切り替えなどのカスタマイズも手軽にできる便利なプラグインです。
また、レンスポンシブWEBデザイン対応なのでスマフォやタブレットでも使える所も嬉しいですね。
続きを読む
WordPRessのカテゴリを自由に並べ替えたいと思っても、固定ページのように「順序欄に数字を入れて調整…」のような機能はありません。
カテゴリの順番を入れ替えるプラグインは色々ありますが、シンプル且つ、ドラッグ & ドロップで並び替えるという直感的で分かりやすい操作のWordPressプラグイン Category Order がイチ押しです。
続きを読む
クライアント向けにサイトを作っていると、案件によっては「デモページのキャプチャを撮ってパワポに貼って…」なんて作業があるのですが、
画面ごとに地道にキャプチャを撮るとフォトショで加工するのが面倒なので、ページのキャプチャをいい感じに撮ってくれるMac のアプリケーション「Paparazzi!」を使うと作業は捗ります。
続きを読む
<img>
<map>
<area>
によりイメージマップを利用する上で、「マウスを乗せた画像に変化を付けてリンクであることを分かりやすくしたい!」という要望に応えるカスタマイズです。
Javascript を利用すれば、ロールオーバー時の画像を変更することが可能です。
続きを読む
WordPressで「記事の1件目にだけ広告を表示する」みたいなことをするための方法です。
記事の1件目に広告を挟むような特定の処理を入れたりできる他、1件目の記事にだけ特別なクラスを指定することもできます。
また、偶数件数や奇数件数の記事、ループで回した最後の記事に対しても特別なクラスを指定することができるなど、デザインの自由度がかなり上がるカスタマイズです。
続きを読む
Mac のローカルIPアドレスを確認する方法です。
「Snow Leopard」や「Mountain Lion」共通の確認方法です。
OSのバージョン(例えばTiger とか)によっては微妙に確認場所が異なりますが、「システム環境設定」→「ネットワーク」から確認する方法は同じです。
続きを読む
個人的には、ブラウザ判定を行う場合はPHPで行うことが多いのですが、PHPが使えない(.htmlファイルなど)場合にjavascript でユーザーエージェントを調べて、ブラウザ別に処理を行う方法が使えます。
ブラウザ情報を返す処理だけでなく、IE6の時は body にie6 のクラスを振る、なんてこともできます。
続きを読む