Warning: Invalid argument supplied for foreach() in /home/takemitasaki/route58.org/wp-content/plugins/head-cleaner/head-cleaner.php on line 2895

Warning: Invalid argument supplied for foreach() in /home/takemitasaki/route58.org/wp-content/plugins/head-cleaner/head-cleaner.php on line 2895

Warning: Invalid argument supplied for foreach() in /home/takemitasaki/route58.org/wp-content/plugins/head-cleaner/head-cleaner.php on line 2895

Warning: Invalid argument supplied for foreach() in /home/takemitasaki/route58.org/wp-content/plugins/head-cleaner/head-cleaner.php on line 2895
2010 5月 11 | 国道58号線をのんびりと行く

アーカイブ

2010 年 5 月 11 日 のアーカイブ

外部リンクにだけ「別ウィンドウで開く」よ、というアイコンを自動的に表示するCSS

2010 年 5 月 11 日 コメントはありません

外部リンクにだけ「別ウィンドウで開く」よ、というアイコン 外部リンクを自動的に表示するCSSをやってみる。

a[href^="http"],
a[href^="https"]{background:url(/images/arrow04.gif) no-repeat right center;padding-right:15px;}
a[href^="http://www.route58.org"],
a[href^="http://route58.org"]{padding:inherit;background:transparent;}
* html a.external{ /* IE-expression (attr-selector) */
background:url(/images/arrow04.gif) no-repeat right center;padding-right:15px;}

サンプル http://route58.org
サンプル http://miyoya.com

CSSで背景として出すのではなく、イメージ画像として出す場合のCSSは以下。
素敵なアイコンと以下のCSSソースはCool Web Window さんから頂きました!ありがとうございます!

a[href^="http"]:after,
a[href^="https"]:after {content:url(/images/arrow04.gif);}
a[href^="http://www.route58.org"]:after,
a[href^="http://route58.org"]:after {content:"";}

いろいろなカラーやタイプのアイコンとソースの詳細はCool Web Windowさんのページから。
http://www.coolwebwindow.com/w……000157.php

カテゴリー: CSS タグ: ,

WordPressのサイドバー 三段組のメインを先に持ってくるCSS

2010 年 5 月 11 日 コメントはありません

WordPressのサイドバー 三段組のメインを先に持ってくるCSS
というのをいい加減やってみた。
前々からやらなきゃと思っていたのですがCMSのワードプレスはほとんどのテーマがindex.php(single.php,archive.phpなども)とsidebar.phpが分かれているので所謂メインコンテンツと右メニューを一括りにして、その後に左メニューを配置するという、定番ワザが使えない。
SEOは後回しでとにかくコンテンツ作りってやってたら、もうDIVとか訳分からなくなってしまい。。。
ということで次のWordpress用にメモ。
サイトの全体幅を1000px、メインコンテンツを600px(左右のMarginを10px取るので正味580px)、左右のサイドバーを200pxとしてみる。

HTMLソースは以下のような感じで作成。

<div id="wrap">
	<div id="header">
		ヘッダー。ロゴとかH1とか。
	</div>
		<div id="content">
			<div id="center">
				メイン記事
			</div>
			<div id="leftbar">
				左サイドバー
			</div>
			<div id="rightbar">
				右サイドバー
			</div>
		</div>
	<div id="header">
		フッター。コピーライトとか。
	</div>
</div>

このソースに合うようにCSSを作成していく。

#content {
width: 1000px;
text-align: left;
margin:0px;
padding:0px;
background-color: #CCCCCC;
}

#center {
position:relative;
float: left;
left:200px;
width: 600px;
height:100%;
margin:0px;padding:0px 10px;
background-color: #FFFFFF;
overflow: hidden;
}

#leftbar {
position:relative;
float: left;
left:-800px;
width: 200px;
height:100%;
margin:0px;padding:0px;
background-color: #CCCCCC;
overflow: hidden;
}
#rightbar {
position:relative;
float: left;
left:200px;
width: 600px;
height:100%;
margin:0px;padding:0px 10px;
background-color: #CCCCCC;
overflow: hidden;
}

僕が生まれた所が世界の片隅なのか~ ♪

Positions by Seo-Watcher