Web サイト制作
目を温めてスッキリお仕事！
1日中パソコンのディスプレイを見ていると、目が痛くなって、頭が痛くなって、首が、肩が痛くなりますよね。 ここでわかるのは、目から疲労が始まっているということ。 原因はわかっているけど、集中すればするほど、ずっと目を見開いたままになってしまい、目に不可がかかってしまいます。 疲れた目を休めるために、外を見てみたり。 ドライアイを防ぐために、目薬を注してみたり。 頭が痛くなるので、首を回して。 肩が痛くなるので、腕を回してみたりして。 どれもやってるんですが、酷くなるとどーにもなりません。 耐えるのみでした。 やはり、目から疲労が始まっているということは、それを防ぐのが一番！ということで、いろいろある中から、私は目を温める方法を私は選びました。 ご存知の方が多いかとは思いますが、この方法がとても良いのです。
960 グリッドシステムを取り入れる
今更ではありますが、960px グリッドデザインについて！ 960 という数値 多くの数字で区切ることができるので、グリッド設計に適しています。 最近のモニタは 1024×768 以上の解像度が標準となってきているため 960 は、心地の良いサイズ。 グリッドデザイン 単純な手法なので、取り入れやすい。 コーディングがしやすくなるので、幅広い表現が可能となります。 僕は基本的に、以下の2つのグリッドを元に、サイトのデザインを構築しています。 16 columns ~ margin left: 10px ~ margin right: 10px の利点 160px, 580px, 160px の3カラムを作ることができます。 コンテンツとなる 580px は、2, 5 分割することができます。 220px, 700px の2カラムを作ることができます。 コンテンツとなる 700px は、2, 3, 6 分割することができます。
Facebook のサムネイル画像のキャッシュを削除
Facebook のウォールやニュースフィードに、URL を入力すると、対象の Web サイトの情報 (サムネイル画像など) が表示されます。 これらは「シェアする」ボタンを押した際に、Facebook にキャッシュされてしまうので、Web ページを更新しても、キャッシュが残っているために、新しい情報に置き換わりません。 Debugger (旧 URL Linter) を使うと、Facebook のウォールやニュースフィードに投稿した Web サイトのキャッシュを簡単に削除 (クリア, 空に) するとができます。 操作方法は簡単です。以下の URL にアクセスして、キャッシュを削除 (クリア, 空に) したい URL を入力後「デバッグ」をクリックするだけです。 Debugger http://developers.facebook.com/tools/debug
WordPress の投稿リビジョンを削除・無効にする
WordPress には、投稿を自動的に保存してくれる “オートセーブ (自動保存) 機能” があり “リビジョン” という項目に保存されます。リビジョンは簡単に記事を元に戻すことができる機能です。 ただ、1記事にいくつものリビジョンが保存されてしまうため、データーベースが圧迫されてしまいます。 僕は今までこの機能を使用したことが無いので、無効にすることにしました。 wp-config.php や functions.php を編集する方法もあるみたいですが、WordPress のアップグレードの際に、問題が起きるリスクがありそうなので、プラグインを使用することにしました。 注意: 事前にデーターベースをバックアップ後、作業を行ってください。 これまでに保存された、リビジョンを削除する Delete-Revision プラグインをダウンロードし、プラグインを有効化してください。
WordPress でトップページだけに表示する
僕は WordPress でトップページだけに表示させる方法を、下記のように記述するものだと勘違いしていました。 恥ずかしい話です。 <?php if (is_home()) : ?> トップページだけで表示させたいコンテンツ <?php endif; ?> このままだと 次のページ にも表示されてしまいます。正確には、 <?php if (is_home() && !is_paged()) : ?> トップページだけで表示させたいコンテンツ <?php endif; ?> と記述するのが正しいようです。 この方法を使えば、トップページだけに Keywords や Description を指定させることができます。 このサイトの場合は、こんな感じ！ <?php if (is_home() && !is_paged()) : ?> <meta name=”Keywords” content=”Bluespeaker,ブルースピーカー” /> <meta name=”Description” content=”モノ忘れの激しく、とってもマイナス思考なデザイナーのサイト。” /> <?php endif; ?>
Facebook のコメント欄を配置する
WordPress に、Facebook のコメント欄を配置する場合は、以下のプラグインを使用するのが手軽です。 wp-facebook-comment.zip をダウンロード後、wp-facebook-comment.php を plugins フォルダにアップロードします。 後は、配置したい場所に下記のコードを記述すれば OK！ WordPress のタグ <?php the_permalink(); ?> を使って、記事ごとの URL を自動で取得します。 <script src=”http://connect.facebook.net/ja_JP/all.js#xfbml=1″></script> <fb:comments href=”<?php the_permalink(); ?>” width=”400″></fb:comments> サイズを変更したい場合は width=”400″ の数値を変更してください。
jQuery を使ってページ内をスクロールさせる
ページ内の任意の箇所へ、アニメーションしながらスクロールすることが可能な jQuery プラグインはたくさんありますが、どれを使って良いものやら… 選ぶのも大変！ プラグインをわざわざ使わなくても jQuery だけで、スムーズスクロールを実装する簡単な方法をご紹介します。ここで紹介する方法は、ハッシュタグを使ってページ内をスクロールさせる方法です。 使用方法 jQuery をダウンロード後、ファイルをサーバーにアップロードし、head 内に以下を記述し読み込みます。 <script type=”text/javascript” src=”/ファイルのパス/jquery.js”></script> <script type=”text/javascript”> $(function(){ $(‘a[href^="#"]‘).click(function() { $(‘html:not(:animated), body:not(:animated)’).animate({ scrollTop: $($(this).attr(‘href’)).offset().top}, ‘slow’, ‘swing’ ); return false; }); }); </script> あとは、ハッシュタグを使って、スクロールさせたい場所を指定するだけです。 サンプル <a href=”#top”>ページの先頭へ</a> <a href=”#comments”>コメントの先頭へ</a> ページ内に、指定の要素がない場合は、ページの先頭へスクロールします。 ページの先頭へスクロールさせたい場合は #header によりも、#top なんかが適当かと思います。
手動で Facebook の「いいね！」ボタンを配置する
WordPress で、記事ごとに Facebook の「いいね！」ボタンを、プラグインを使わずに手動で配置場合は、下記のコードを記述します。 WordPress のタグ <?php the_permalink(); ?> を使って、記事ごとの URL を自動で取得します。 <iframe src=”http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&layout=button_count&show_faces=true&width=120&action=like&colorscheme=light” scrolling=”no” frameborder=”0″ allowTransparency=”true” style=”border:none; overflow:hidden; width:120px; height:22px;”></iframe> ボタンのレイアウトを変更したい場合は、 layout=button_count& を layout=standard& に変更します。
