ソーシャルボタンを横一列で奇麗に揃える

ソーシャルボタン（Twitter/Facebook/Google+）を横一列に揃えるメモ。

HTML

<?php print(“http://” . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]); ?> でページのURLを取得していますので、Wordpressの一覧ページ（アーカイブや検索）で使う際にはパーマネントリンク（<?php the_permalink(); ?>）に変更する必要があります。
また「○○○○」の箇所はタイトル等をいれます。

<div id="header">
<div class="social_button">
	<!-- FaceBook Button --> 
	<div class="fb">
	<iframe src="http://www.facebook.com/plugins/like.php?href=<?php print("http://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]); ?>&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
	</div>
	<!-- /FaceBook Button -->

	<!-- はてなブックマーク Button -->
	<div class="hb">
	<a href="http://b.hatena.ne.jp/entry/<?php print("http://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]); ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="『○○○○』をはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="○○○○をはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button_wo_al.js" charset="utf-8" async="async"></script>
	</div>
	<!-- /はてなブックマーク Button -->
	
	<!-- Twitter -->
	<div class="tw">
	<?php /*
		【パラメータ一覧】
			<a href="https://twitter.com/share" class="twitter-share-button"
			data-url="共有されるURL"
			data-text="ツイート本文"
			data-via="ユーザー名"
			data-lang="言語"
			data-size="ボタンの大きさ"
			data-related="関連アカウント"
			data-count="ツイート数のカウントの有無"
			data-hashtags="ハッシュタグ">
			Scriptが読み込まれなかった場合に表示される文字</a>
	*/ ?>
	<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php print("http://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]); ?>"data-text="○○○○"  data-via="○○○○"  data-lang="ja" data-related="○○○○">ツイート</a>
	<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
	</div>
	<!-- /Twitter -->
</div><!-- /social_button --> 
</div><!-- /header --> 

CSSは

参考です。.social_buttonは#headerの中で配置場所を絶対指定していたので、position:absolute;やtop:30px;/left:590px;が入っていますが、必要に応じて削除してください。

/* -------------------------------------------------------------- 
header
-------------------------------------------------------------- */
#header {
	position:relative;
	width:1046px;
	height:225px;
	overflow:hidden;
	}
/* -------------------------------------------------------------- 
social_button
-------------------------------------------------------------- */
.social_button{
	position:absolute;
	top:30px;
	left:590px;
	width:428px;
	height:25px;
	}
	.social_button .tw{
		position:relative;
		width:105px;
		height:25px;
		float:right;
		white-space: nowrap;
		}
	.social_button .fb{
		position:relative;
		width:120px;;
		height:25px;
		float:right;
		white-space: nowrap;
		}
	.social_button .gg{
		position:relative;
		width:80px;;
		height:25px;
		float:right;
		white-space: nowrap;
		margin-top:-2px;
		}
	.social_button .hb{
		position:relative;
		width:70px;;
		height:25px;
		float:right;
		white-space: nowrap;
		margin-bottom:-2px;
		}
	.social_button .mx{
		position:relative;
		width:70px;;
		height:25px;
		float:right;
		white-space: nowrap;
		}
	.social_button .day{
		position:relative;
		width:140px;;
		height:25px;
		float:right;
		white-space: nowrap;
		text-align:right;
		}

うちで主に必要になるのは、アップした画像の回り込みやセンター寄せ等のスタイルと、プラグイン「wp-pagenavi」用のスタイルです。

アップした画像の回り込みやセンター寄せ等のスタイル

（※marginの値は適所変更してください）

/* ================================================= */
/* wordpress UPLOAD IMG */
/* ================================================= */

img.centered {
	display: block;
	clear: both;
	margin: 0.25em auto 1.5em;
	/*margin: 10px auto;*/
	}

img.aligncenter {
	display: block;
	clear: both;
	margin: 0.25em auto 1.5em;
	/*margin: 10px auto;*/
	}
img.alignleft {
	float: left;
	clear: both;
	margin: 0.25em 1.5em 1.5em 0;
	/*margin: 0 10px 5px 0;*/
	}
img.alignright {
	float: right;
	clear: both;
	margin: 0.25em 0 1.5em 1.5em;
	/*margin: 0 0 5px 10px;*/
	}

プラグイン「wp-pagenavi」用のスタイル

（※colorやmargin/paddingの値は適所変更してください）

/* ================================================= */
/* wordpress Plugin [wp-pagenavi] */
/* ================================================= */

/*#post p{padding-bottom:20px;}*/

.navigation {
	display: block;
	text-align: center;
	margin-bottom: 30px;
	font-size:12px;
	}

.wp-pagenavi {
	clear: both;
	}

.wp-pagenavi a, .wp-pagenavi span {
	text-decoration: none;
	border:0px solid #FFFFFF;
	padding: 3px 5px;
	margin: 2px;
	}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
	color:#fff
	font-weight:bold;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	}

.wp-pagenavi span.current {
	border:1px solid #4A872A;
	background:#4A872A;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	color:#fff;
	}

.wp-pagenavi .pages {
	display: none;
	}

<dl><dt><dd>でリスト表示

「ニュース」や「最新情報」などで使う頻度が高いタグなのでコピペー用にメモ

CSS

/* CSS Document */
*{padding:0px;margin:0px;}
body{margin-left:5px;margin-top:5px;}
dl:after{content: ".";display: block;visibility: hidden;clear: both;height: 0.1px;font-size: 0.1em;line-height: 0;}
dl {display: inline-block;}
/* Hides from IE-mac \*/
dl {height: 1%;}
dl {display: block;}
/* End hide from IE-mac */
dl{border-bottom:1px dotted #cccccc;padding:2px 0;font-size:12px;line-height:18px;}
dt{color:#CA4D66;text-align:left;font-weight:bold;float:left;width:80px;display:block;}
dd{color:#666666;float:left;display:block;width:410px;}
a{color:#CA4C65;text-decoration:none;}
a:link{color:#CA4C65;text-decoration:none;}
a:hover{color:#CA4C65;text-decoration:underline;	
}

HTML

<dl>
	<dt>2011.12.1</dt>
	<dd><b>歳末大還元セール</b><br />
		（期間2011年12月1日〜12月31日まで）</dd>
</dl>
<dl>
	<dt>2011.10.1</dt>
	<dd><b>乾燥する季節にスペシャルケアキャンペーン</b><br />
		（期間2011年10月1日〜10月31日まで）</dd>
</dl>
<dl>
	<dt>2011.9.1</dt>
	<dd><b>乾燥する季節に向けての基本ケアキャンペーン</b><br />
		（期間2011年9月1日〜9月30日まで）</dd>
</dl>
<dl>
	<dt>2011.7.1</dt>
	<dd><b>ご好評につきキャンペーン延長</b><br />
		（期間2011年7月1日〜7月31日まで）</dd>
</dl>
<dl>
	<dt>2011.6.16</dt>
	<dd><b><a href="http://jsdt56.umin.ne.jp/" target="_blank">出展企画</a></b><br />
		（期間2011年6月16日〜6月19日まで）<br />
		16日〜19日まで出荷業務を休業させて頂きます。<br />
		期間中のご注文の発送は20日より行いますので予めご了承ください。</dd>
</dl>

margin:0 20px 0 0; /* 汎用 */
margin:0 -15px 0 0¥9; /* IE8 とそれ以下 */
*margin:0 -15px 0 0; /* IE7 とそれ以下 */
_margin:0 -15px 0 0; /* IE6 */

widthだとこんな感じ

width:294px; /* all browsers, of course */
width:310px¥9; /* IE8 and below */
*width:300px; /* IE7 and below */
_width:300px; /* IE6 */

この順番です、はい。

1. a:link（←未訪問）
2. a:visited（←訪問済み）
3. a:hover（←マウスオーバー）
4. a:active（←クリック）

CSSだけでも割と奇麗につくれます。

ダウンロード：navi_box.zip

CSS

a {color:#666;text-decoration:none;}
a:hover {color:#666;text-decoration:underline;}

 .side_list{
	margin: 0 0 8px;
	padding: 0 0 10px;
	border: 1px solid #92B724;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	width: 248px;
	background: #FDFDFD;
	}

.side_list h3{
	width: 232px;
	color: #FFF;
	text-shadow: 1px 1px 0px #336600;
	display: block;
	margin: 0 0 10px 0;
	padding: 6px 6px 6px 10px;
	font-size: 14px;
	
	border-top: 1px solid #D3E894;
	
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	border-radius-topleft: 4px;	/* Firefox */
	border-radius-topright: 4px;	/* Firefox */
	
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	-moz-border-radius-topleft: 4px;	/* Firefox */
	-moz-border-radius-topright: 4px;	/* Firefox */
	
	background: #9ABE2C; /* old browsers */
	background: -moz-linear-gradient(top, #B3D748 0%, #7B9F09 100%, #ededed 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#B3D748), color-stop(100%,#7B9F09), color-stop(100%,#ededed)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#B3D748', endColorstr='#7B9F09',GradientType=0 ); /* ie */
	}

	* html .side_list h3{width: 204px;border:1px solid #993300;}
	
	.side_list li{
	border-bottom: 1px dotted #CCC;
	margin: 0 5px;
	padding: 5px;
	}
	
	.side_list ol,ul {list-style-type: none;}
	.side_list li ul li{
	background: url(../img/arrow.jpg) 0px 6px no-repeat;
	border: none;
	margin: 0;
	padding: 0 0 0 15px;
	}
	
	ul li ul{ padding: 0px 4px;}
	
	ul {
	margin: 0;
	padding: 0;
	}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="./css/style.css" />
<title>test</title>

<body>

<ul>
<li class="side_list">

	<h3>カテゴリ</h3>
	
		<ul>
		<li><a href="####" title="大カテゴリ">大カテゴリ</a>
			<ul>
			<li><a href="####" title="小カテゴリ">小カテゴリ</a></li>
			<li><a href="####" title="小カテゴリ">小カテゴリ</a></li>
			<li><a href="####" title="小カテゴリ">小カテゴリ</a></li>
			</ul>
		</li>
		<li><a href="####" title="大カテゴリ">大カテゴリ</a></li>
		<li><a href="####" title="大カテゴリ">大カテゴリ</a></li>
		<li><a href="####" title="大カテゴリ">大カテゴリ</a></li>
		<li><a href="####" title="大カテゴリ">大カテゴリ</a></li>
			<ul>
			<li><a href="####" title="小カテゴリ">小カテゴリ</a></li>
			</ul>
		</li>
		<li><a href="####" title="大カテゴリ">大カテゴリ</a></li>
		</ul>

</li>
</ul>

</body>
</html>

「outline」をつかった二重の枠

右のキャプチャだと分かりづらいけど、結構使えると思う。

.box {
	float: left;
	display: block;
	width: 150px;
	overflow: hidden;
	margin: 0 8px 8px 0;
	padding: 7px;
	outline: 1px solid #CCC;
	border: 1px solid #FFF;
	background: #FFFEEF;
	background: -moz-linear-gradient(top, #FEFEFE 70%, #F7F7F7 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(70%,#FEFEFE), color-stop(100%,#F7F7F7)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FEFEFE', endColorstr='#F7F7F7',GradientType=0 ); /* ie */
	}

	white-space: pre;           /* CSS 2.0 */
	white-space: pre-wrap;      /* CSS 2.1 */
	white-space: pre-line;      /* CSS 3.0 */
	white-space: -pre-wrap;     /* Opera 4-6 */
	white-space: -o-pre-wrap;   /* Opera 7 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap;  /* HP Printers */
	word-wrap: break-word;      /* IE 5+ */

CSS記述例

#aaaaaa pre{
	width:650px;
	word-break: break-all;
	white-space: pre;           /* CSS 2.0 */
	white-space: pre-wrap;      /* CSS 2.1 */
	white-space: pre-line;      /* CSS 3.0 */
	white-space: -pre-wrap;     /* Opera 4-6 */
	white-space: -o-pre-wrap;   /* Opera 7 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap;  /* HP Printers */
	word-wrap: break-word;      /* IE 5+ */
	}

なんで左寄りなんでしょうね。

左寄りでもいいのですが、
（１）なんとなく使いづらく感じる
（２）時代遅れ感が否めない
といった理由からセンター寄せにさくっと修正してみました。

ついでにクライアントに納品する際には「ホーム」画面右側に表示される開発側からの「インフォメーション」欄は不要なので非表示にしています。

EC-CUBEバージョン 2.11.4 です。

CSSファイルのダウンロード

こちらの user_data.zip からダウンロードして解凍した後
　…/user_data/packages/admin/css/admin_contents.css（←上書きする）
　…/user_data/packages/admin/img/admin_bg.png（←新たに配置する）
でOKです。

またロゴは
　…/user_data/packages/admin/img/header/logo.jpg（←ログイン前のロゴ）
　…/user_data/packages/admin/img/contents/admin_login_logo.jpg（←ログイン後のロゴ）
にありますので任意に変更するとよいかと思います。

※上書きする前に既存のcssファイルのバックアップはお忘れなきよう。。