‘タグ’ カテゴリーのアーカイブ

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> &gt; <?php the_title(); ?>
<?php } else if (is_category()) { ?>
  <a href=”<?php bloginfo(‘url’); ?>”>ホーム</a> &gt; &rsquo;<?php single_cat_title(); ?>&rsquo;カテゴリー内の記事一覧
<?php } else if (is_month()) { ?>
  <a href=”<?php bloginfo(‘url’); ?>”>ホーム</a> &gt; &rsquo;<?php the_time(‘Y年m月’); ?>&rsquo;月別アーカイブ内の記事一覧
<?php } else if (is_single()) { ?>
  <a href=”<?php bloginfo(‘url’); ?>”>ホーム</a> &gt; <?php the_category(‘,’) ?> &gt; <?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’を指定する事で可能。

例1:<?php wp_list_cats(‘exclude=3′); ?>
例2:<?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(‘&laquo; %link’) ?>
<?php next_post_link(‘%link &raquo;’) ?>

このエントリーを含むはてなブックマーク

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には適用されない

このエントリーを含むはてなブックマーク