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″ の数値を変更してください。

Published: 2011年7月8日 | Category & Tags: Web サイト制作, , | Comment: 0

jQuery を使ってページ内をスクロールさせる

ページ内の任意の箇所へ、アニメーションしながらスクロールすることが可能な jQuery プラグインはたくさんありますが、スクロールさせるためだけの jQuery プラグインってのも気が進みません。 jQuery プラグインをわざわざ使わなくても、スムーズスクロールを実装する方法をご紹介します。 ここで紹介する方法は、ハッシュタグを使って簡単にページ内をスクロールさせる方法です。 使用方法 まずは jQuery を、head 内に記述し読み込みます。 <script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>

Published: 2011年7月1日 | Category & Tags: Web サイト制作, | Comment: 2

手動で Facebook の「いいね!」ボタンを配置する

WordPress で、記事ごとに Facebook の「いいね!」ボタンを、プラグインを使わずに手動で配置場合は、下記のコードを記述します。 WordPress のタグ <?php the_permalink(); ?> を使って、記事ごとの URL を自動で取得します。 <iframe src=”http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;layout=button_count&amp;show_faces=true&amp;width=120&amp;action=like&amp;colorscheme=light” scrolling=”no” frameborder=”0″ allowTransparency=”true” style=”border:none; overflow:hidden; width:120px; height:22px;”></iframe> ボタンのレイアウトを変更したい場合は、 layout=button_count&amp; を layout=standard&amp; に変更します。

Published: 2011年6月4日 | Category & Tags: Web サイト制作, , , | Comment: 0

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を非表示にする場合は次の記述します。

Published: 2011年5月9日 | Category & Tags: Web サイト制作, | Comment: 0

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’); ?>” /> を追加する。

Published: 2011年5月7日 | Category & Tags: Web サイト制作, | Comment: 1

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

Published: 2009年12月5日 | Category & Tags: Web サイト制作, | Comment: 0

WordPress for iPhone でブログ投稿

思ったことを文字に置き換えることが苦手な僕は、投稿した記事を何度か見直し修正することが多々あります。そこで、どこでも編集できるようにと、WordPress for iPhone を使うことにしました。 WordPress for iPhone をダウンロード後、ログインしようとすると「options-writing.phpを有効にしてください」と表示がでます。 options-writing.php を有効にする ダッシュボードの「設定画面」→「投稿設定」→「XML-RPC」にテェックを入れて投稿プロトコルを有効にします。 iPhone で safari を使ってブログを投稿するよりはサクサク動いてくれるので、使い勝手はとても良いです。WordPress を使っている方にはおすすめです!

Published: 2009年9月3日 | Category & Tags: Web サイト制作, , | Comment: 0

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 */ }

Published: 2008年11月2日 | Category & Tags: Web サイト制作, | Comment: 0

CSS だけで要素をブラウザの中央に配置

Flash を使わずに CSS で <div> をブラウザの中央に配置する方法 実際に使用した例 » www.ludhaus.com CSS #wrap {    position: absolute;    width: 800px;    height: 600px;    left: 50%;    top: 50%;    margin-left: -400px;    margin-top: -300px; } 注意! margin-left は width の半分 margin-top は height の半分 HTML <div id=”wrap”>    your contents </div>

Published: 2007年8月22日 | Category & Tags: Web サイト制作, | Comment: 0

tagrolls at del.icio.us

my del.icio.us のタグをサイトに表示 del.icio.us / help / Blogging » tagrolls の script を貼付けるだけで OK!

Published: 2006年12月26日 | Category: Web サイト制作 | Comment: 0