CSSで画面中央に配置して上下左右が消えない方法
2009 年 5 月 6 日 水曜日画面中央配置にする方法はposition:absoluteで上下左右50%をとれば出来、幾つかのサイトで紹介されているのが、画面を小さくした時に消える場合が多い。
CSS Happylifeで紹介されている方法ならデザインが崩れない。
‘タグ’ カテゴリーのアーカイブ
Firefoxでfloatを使うと背景が伸びない時の対処方法：after擬似クラス
2009 年 5 月 5 日 火曜日IEでは問題がないが、FirefoxやSafariでfloatを用いると背景が伸びない場合がある。以下がafter擬似クラスを使った対処方法のサンプル。
#name{
background-image: url();
}
#name:after{
content : "";
display : block;
height : 0;
clear : both;
}
text-align:distribute で文字間隔と単語間隔を調整して均等割付する
2009 年 4 月 24 日 金曜日text-align:distribute はIEのみ採用されているプロパティで、文章を綺麗に整えたい場合に使用する。現在はIEのみ使えるが、今後他ブラウザ(FirefoxやSafari)で採用されるかは不明。
CSSとJavaScriptによるドロップダウンメニューの作成方法
2009 年 4 月 24 日 金曜日CSSのみで作るドロップダウンメニューやJavaScriptのみの方法、それらが混在した方法などがあるが、アクセシビリティなど云々を取っ払って、一番使いやすいのは
JavaScript + Ajax 実践サンプル集さんのドロップダウンメニューだと思う。
http://jsajax.com/DropDownMenuArticle286.aspx
CSSオンリーはコードが複雑になりがちだし、JavaScriptオンリーの場合はさすがにSEO関連の問題もある。Flashもしかり。この辺はサイトの性質やブランディングによって判断すれば良いが、このサンプルは汎用性的に使えるし、わかりやすい。
ただ、サンプルそのものの状態ではクロスブラウンジングされていないので、CSSを少しいじれば(submenuにwidthを指定するなど）問題ない。
WordPressでPluginを用いずにパンくずナビを用いる方法
2009 年 3 月 22 日 日曜日WordPressでパンくずナビを用いるにはPluginを用いる方法が多くのサイトで紹介されている方法だが、Pluginを用いなくともパンくずナビを表示する事が可能。
ソースはパンくずリストを表示させるコードを参照。
<?php if (is_home()) { ?>
<a href="<?php bloginfo('url'); ?>">ホーム</a>
<?php } else if (is_page()) { ?>
<a href="<?php bloginfo('url'); ?>">ホーム</a> > <?php the_title(); ?>
<?php } else if (is_category()) { ?>
<a href="<?php bloginfo('url'); ?>">ホーム</a> > ’<?php single_cat_title(); ?>’カテゴリー内の記事一覧
<?php } else if (is_month()) { ?>
<a href="<?php bloginfo('url'); ?>">ホーム</a> > ’<?php the_time('Y年m月'); ?>’月別アーカイブ内の記事一覧
<?php } else if (is_single()) { ?>
<a href="<?php bloginfo('url'); ?>">ホーム</a> > <?php the_category(',') ?> > <?php the_title(); ?>
<?php } ?>
文字や引数を変更して好みに応じて表示する事が可能。
link rel="canonical"による重複コンテンツ対策
2009 年 3 月 22 日 日曜日重複コンテンツがあまりにも多いとサイトの評価が下がる場合がある。
そこで、link rel="canonical"を用いる事で正規のページに対して検索エンジンを誘導する事ができる。
<head>
<link rel="canonical" href="http://**************">
</head>
注意する点として
link rel="canonical"は同一ドメイン内でしか適用されないという事。
ミラーサイトの場合はlink rel="canonical"ではなくrobots.txtや.htaccess, noindex等を用いて検索エンジンのクロールを回避する必要がある。
WordPressで特定のカテゴリのみ非表示にする
2009 年 3 月 22 日 日曜日WordPressで特定のカテゴリのみ非表示にする方法としてAdvanced Category Excluderといったプラグインがあるが、任意カテゴリの非表示はphp wp_list_catsの引数にexclude='カテゴリID'を指定する事で可能。
例１：<?php wp_list_cats('exclude=3'); ?>
例２：<?php wp_list_cats('exclude=3,4,5,6'); ?>
WordPressで次の投稿と前の投稿を表示するタグ
2009 年 3 月 21 日 土曜日WordPressで次の投稿と前の投稿を表示するタグは以下の通り。
<?php previous_post_link('%link') ?>
<?php next_post_link('%link') ?>
デフォルトテーマでは以下のようになっている。
<?php previous_post_link('« %link') ?>
<?php next_post_link('%link »') ?>
safariのみ適用するCSS hack(ハック)：body:first-of-type
2009 年 3 月 4 日 水曜日Safari 3のみの適用になるが body:first-of-type でSafariのみCSSを適用する事が可能。
参考：http://coliss.com/articles/build-websites/operation/css/247.html
Safariのみ適用するCSS hack(ハック)
2009 年 3 月 1 日 日曜日html:\66irst-child *****{
SafariのみCSSを記載
}
※但しIE - Safariには適用されない