フォノクラフト株式会社：作業メモや備忘録など » HTML

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

admin — Mon, 08 Apr 2013 09:17:42 +0000

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

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

HTML

でページのURLを取得していますので、Wordpressの一覧ページ（アーカイブや検索）で使う際にはパーマネントリンク（）に変更する必要があります。
また「○○○○」の箇所はタイトル等をいれます。



	 
	
	&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true">
	
	

	
	
	" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="『○○○○』をはてなブックマークに追加">
	
	
	
	
	
	
			Scriptが読み込まれなかった場合に表示される文字
	*/ ?>
	"data-text="○○○○"  data-via="○○○○"  data-lang="ja" data-related="○○○○">ツイート

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;
		}

[html] で表示される「参照」ボタンを画像にする

admin — Fri, 18 Jan 2013 08:29:08 +0000

の「参照」ボタンを画像にする

こういった制御はJSを使うのが慣例だったりしますがが複数並んだ際に対応が煩雑化してしまうので（ふつうに作ると複数の中の一つしか適応されない）、今回はJavaScriptを使わずにHTML/CSSのみで実装しています。

また、おまけとして画像変更された「参照」ボタンはオンマウス時に画像が切り替わります。（onmouseoverとCSSで制御しています）

※Mac Safari/FF/Chrome の他に Win IE6〜IE9 で表示確認をしています。

サンプルダウンロード

・input_fileupload_sample1.zip

[html/css]
でリスト表示

admin — Mon, 21 May 2012 11:41:53 +0000

でリスト表示

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

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


	2011.12.1
	歳末大還元セール

		（期間2011年12月1日〜12月31日まで）


	2011.10.1
	乾燥する季節にスペシャルケアキャンペーン

		（期間2011年10月1日〜10月31日まで）


	2011.9.1
	乾燥する季節に向けての基本ケアキャンペーン

		（期間2011年9月1日〜9月30日まで）


	2011.7.1
	ご好評につきキャンペーン延長

		（期間2011年7月1日〜7月31日まで）


	2011.6.16
	出展企画

		（期間2011年6月16日〜6月19日まで）

		16日〜19日まで出荷業務を休業させて頂きます。

		期間中のご注文の発送は20日より行いますので予めご了承ください。

AmazonのアフィリエイトURL

admin — Fri, 23 Mar 2012 08:19:49 +0000

こういったルールを知っておくとwordpress等でいちいちプラグインを使わないでも、
カスタムフィールドに『ASINまたはISBNコード』を入れるだけで良くなる。


http://www.amazon.co.jp/gp/product/（ASINまたはISBNコード）/ref=as_li_tf_tl?ie=UTF8&tag=（アフィリエイトID）&linkCode=as2&camp=247&creative=1211&creativeASIN=（ASINまたはISBNコード）

aタグ疑似クラス、指定の順番。

admin — Wed, 01 Feb 2012 18:00:47 +0000

いつも忘れてしますので….

この順番です、はい。

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

[css] CSSだけで奇麗なナビゲーションボックスを作る

admin — Sat, 28 Jan 2012 15:24:02 +0000

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






test






	カテゴリ
	
		
		大カテゴリ
			
			小カテゴリ
			小カテゴリ
			小カテゴリ
			
		
		大カテゴリ
		大カテゴリ
		大カテゴリ
		大カテゴリ
			
			小カテゴリ
			
		
		大カテゴリ

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

admin — Sat, 28 Jan 2012 12:52:48 +0000

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

[GoogleMap] 地図にオリジナルのピンを使う

admin — Sat, 28 Jan 2012 07:54:36 +0000

サンプル

画像サイズは32×32が適頃。

ピンの画像はこれ → （/note/wp-content/uploads/2012/01/NeedleLeftYellow.png）

Loading…

ソース

		

		
		

		

		
		
			Loading...

[ec-cube] お問い合わせフォームに規約同意を追加

admin — Fri, 27 Jan 2012 06:26:34 +0000

必要な場面で使ってください

ec-cubeでのお問い合わせフォームはデフォルトでは規約の同意など無くても送信できてしまうので、そこの所を簡易的にちょこっと改変。

アップロードするファイル

・/data/Smarty/templates/default/contact/index.tpl
　（お問い合わせフォームのtpl）
・/html/user_data/packages/default/html/pp.html
　（iframeで表示する規約文面を追加）
・/html/user_data/packages/default/img/button/btn_confirm_disabled.jpg
　（灰色のボタンを追加）

ファイル一式ダウンロード

・eccube_contact.zip

aタグでsubmit

admin — Fri, 13 Jan 2012 16:33:47 +0000

サンプルソース

忘れがちなのでメモ。
↓これだけです。








ログイン

フォノクラフト株式会社：作業メモや備忘録など » HTML

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

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

HTML

CSSは

[html] で表示される「参照」ボタンを画像にする

の「参照」ボタンを画像にする

サンプルダウンロード

[html/css] でリスト表示

でリスト表示

CSS

HTML

AmazonのアフィリエイトURL

aタグ疑似クラス、指定の順番。

いつも忘れてしますので….

[css] CSSだけで奇麗なナビゲーションボックスを作る

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

CSS

HTML

カテゴリ

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

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

[GoogleMap] 地図にオリジナルのピンを使う

サンプル

ソース

[ec-cube] お問い合わせフォームに規約同意を追加

必要な場面で使ってください

アップロードするファイル

ファイル一式ダウンロード

aタグでsubmit

サンプルソース

[html/css]
でリスト表示