Web サイト制作
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 プラグインをわざわざ使わなくても、スムーズスクロールを実装する方法をご紹介します。 ここで紹介する方法は、ハッシュタグを使って簡単にページ内をスクロールさせる方法です。 使用方法 まずは jQuery を、head 内に記述し読み込みます。 <script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>
手動で 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& に変更します。
wp_list_categories で特定カテゴリーを指定・除外
WordPress の テンプレートタグ、 wp_list_categories を使用する場合のカテゴリーのリスト表示の指定の仕方について。 特定のカテゴリーのみリスト表示する場合 表示したいカテゴリー ID を include を使用して、カンマ区切りで指定します。 カテゴリー ID 3と5と9のみを表示させたい場合は次の記述します。 wp_list_categories(‘sort_column=name&optioncount=1&hide_empty=1&hierarchical=1&include=3,5,9′) 特定のカテゴリー以外をリスト表示する場合 非表示にしたいカテゴリー ID を exclude を使用して、カンマ区切りで指定します。 カテゴリー ID 10を非表示にする場合は次の記述します。
WordPress のコメントフィードを削除する
WordPress 2.8 以降 RSS が、記事全体、コメント、記事単体コメントの3種を表示するようになりました。 このブログのようにコメントが少ないサイトでは、不必要な機能と言えます。 なので削除することにしました。 WordPress のコメントフィードを削除したい方は、以下の作業を行ってください。 functions.php の add_theme_support( ‘automatic-feed-links’ ); を削除し remove_action(‘wp_head’, ‘feed_links_extra’, 3); を追加する。 その後 header.php に <link rel=”alternate” type=”application/rss+xml” title=”RSS” href=”<?php bloginfo(‘rss2_url’); ?>” /> を追加する。
nth-child() 疑似クラス
任意の順番の要素を指定することができる nth-child() 疑似クラスを使用し、コードをスマートにしましょう！ 偶数の要素に CSS を適用 li:nth-child(2n) または li:nth-child(even) 奇数の要素に CSS を適用 li:nth-child(2n+1) または li:nth-child(odd) 指定数ごとの要素に CSS を適用 li:nth-child(指定数n) 指定スタート数から指定数ごとの要素に CSS を適用 li:nth-child(指定数n+指定スタート数) 指定数の要素に CSS を適用 li:nth-child(指定数) 最後から指定数の要素に CSS を適用 li:nth-last-child(指定数) 最初から指定数までの要素に CSS を適用 li:nth-child(-n+指定数) 最後から指定数からの要素に CSS を適用 li:nth-child(n+指定数) 最初の要素に CSS を適用 li:first-child() 最後の要素に CSS を適用 li:last-child()
WordPress for iPhone でブログ投稿
思ったことを文字に置き換えることが苦手な僕は、投稿した記事を何度か見直し修正することが多々あります。そこで、どこでも編集できるようにと、WordPress for iPhone を使うことにしました。 WordPress for iPhone をダウンロード後、ログインしようとすると「options-writing.phpを有効にしてください」と表示がでます。 options-writing.php を有効にする ダッシュボードの「設定画面」→「投稿設定」→「XML-RPC」にテェックを入れて投稿プロトコルを有効にします。 iPhone で safari を使ってブログを投稿するよりはサクサク動いてくれるので、使い勝手はとても良いです。WordPress を使っている方にはおすすめです！
IE6, IE7 のバグ取りに最も簡単な CSS ハック
イライラする IE のバグ！簡単に解決して、次ぎの作業に取りかかりたいものです。 私は管理するするのが簡単な、以下の方法を使用して対処しています。 IE6 以下に CSS を指定 * html {} IE7 のみに CSS を指定 *:first-child+html {} 一応使用例 * html .your_class { color: #990000; /* IE6 */ } *:first-child+html .your_class { color: #990000; /* IE7 */ }
