iHatena

このデザインについて

iHatenafumichu サンプル
カテゴリー:シンプルベーステーマ:なしヘッダー:標準(細)
登録日:2010/01/30更新日:2017/04/16利用数:119
http://a.hatena.ne.jp/designset/76
Ocean Noteのカスタマイズ版です。
パソコンとスマートフォンの両方から使いやすくしました。

推奨設定
アンテナの設定>表示設定>更新内容の表示文字数>100文字
アンテナの設定>表示設定>1ページの表示件数>30件
アンテナの設定>表示設定>スクリーンショット画像>大(200x150)

推奨画面サイズ
1024 × 768 pixel以上のパソコン
iPhone , iPad , Android

動作確認
Mac , Windows (Chrome Edge)
iPad , iPhone , Android (Chrome)

更新履歴
2017年4月9日 マイナーアップデート

ヘッダ/フッタ/スタイルシート

ページのヘッダ

<a name="top" id="top"></a>
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width,">
<div id="hatena-header">
<form method="get" action="search" class="search-form"> 
<input type="text" class="search-word" name="wd" value="">
<input type="submit" name=".submit" value="Search" class="css3button"></form>
<div id="pager_group" class="pager">
<a href="simple">簡素</a> | 
<a href="image">画像</a> |
<a href="edit">管理</a> | 
<a href="add">追加</a> | 
<a href="http://www.hatena.ne.jp/my">MYはてな</a>
</div>
</div><a href="#top"><h1>はてなアンテナ</h1></a>

ページのフッタ

<div align="center">Think different.</div>

スタイルシート

.search-word{
width:400px;
border:none;
margin-top:10px;
margin-left:10px;
vertical-align:-9px;
font-size:2.5em;
}
.css3button {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #ffffff;
	padding: 10px 20px;
	background: -moz-linear-gradient(
		top,
		#00c8ff 0%,
		#0095ff 50%,
		#0066ff);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#00c8ff),
		color-stop(0.50, #0095ff),
		to(#0066ff));
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border: 4px solid #0040ff;
	-moz-box-shadow:
		1px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,0.1);
	-webkit-box-shadow:
		1px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,0.1);
	text-shadow:
		0px 0px 0px rgba(000,000,000,0.5),
		0px 0px 0px rgba(255,255,255,1);
}

 
a	{
    border-top: 1px solid #;  
    border-right: 1px solid #;  
    border-bottom: 1px solid #;  
    border-left: 1px solid #; 
    font-weight: bold;
}
body{
/* --------------------
	mobile safari
	-webkit-text-size-adjust:none;
-------------------- */
	-webkit-text-size-adjust:auto;
}

#hatena-header form.search-form {
	display: inline;
}
#simple-header {
	display: none;
}

*{
	margin:0;
	padding:0;
}

/* --------------------
	全体    
-------------------- */
body{
	top:0;
	left:0;
	width:850px;
	overflow-x:hidden;
	border-right:solid 1px #ccc;
	border-left:solid 1px #ccc;
	background-color:#222;
	font-size:100%;
	color:#3B3C3D;

 background-image: url(http://cdn-ak.f.st-hatena.com/images/fotolife/f/fumichu/20100116/20100116030504.png);
 background-position : 50% 50%;
 background-repeat: no-repeat;
 background-attachment: fixed;

}
div.hatena-body{
	background-image: url(http://b.hatena.ne.jp/images/alpha/alpha-035.png);
}


/* --------------------
	h1 , pager   
-------------------- */
h1{
        position: fixed;
	top:0;
	left:850px;
	width:1em;
	overflow:hidden;
	color:#eee;
	text-align:center;
	font-size:780%;
	line-height:1em;
        font-family: SF Pro JP,SF Pro Text,SF Pro Icons,AOS Icons,Hiragino Kaku Gothic Pro,"ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"MS Pゴシック",Helvetica Neue,Helvetica,Arial,sans-serif;
}
.feed-icon{
	display:none;
}

.pager{
	font-size:1.0em;
	padding:0.3em;
	margin:0.3em;
}
#pager_top{
}
#pager_top b,
#pager_bottom b{
}
#pager_top b,
#pager_bottom b{
}
a{

}
a:link{
	color:#0095ff;
	background-color:#;
        text-decoration: none;
	padding:0.1em;
	margin:0.1em;
}
a:visited{
	color:#0095ff;
        text-decoration: none;
}
a:hover {                   /* カーソルが上にある時のリンク */
	_color: #ccc;
	background-color:#;
	text-decoration: underline;
}
/* --------------------
	ol内 
-------------------- */
ol{
	padding:0.5em 1em;
	list-style-type:none;
}
.modified{
	margin-left:2px;
	padding-right:420px;
	width:12em;
	display:block;
	background-color:#0066ff;
    border-top: 1px solid #ccc;  
    border-right: 1px solid #999;  
    border-bottom: 1px solid #999;  
    border-left: 1px solid #ccc;
	color:#fff;
	font-family:Georgia,serif;
	text-align:center;
    font-weight: bold;
}

#hatena-antenna-normal .modified,
#hatena-antenna-detail .modified{
	margin-top:2em;
	margin-bottom:0.55em;
}
.diff{
	margin-top:0.55em;
	padding-left:5px;
	border-left:solid 6px #0033ff;
	font-size:0.8em;
	text-align: justify;
	text-justify: inter-ideograph;
	line-height:1.55;
}

#hatena-antenna-simple ol li{
	margin:10px 0;
	line-height:1.45;
}
#hatena-antenna-simple .modified{
	padding:2px 5px;
	display:inline;
}

#hatena-antenna-image .modified{
	margin-left:0;
	width:12.5em;
}

a.screenshot img {
  float:right;
  border:1px solid #AAA;
  margin:3px;
}

/* --------------------
	footer   
-------------------- */
.footer{
	font-size:0.9em;
	text-align:center;
	margin-top:2em;
    border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;
}


/* --------------------
	IE6用   
-------------------- */
div.hatena-body{
	_position:absolute;
	_left:20px;
	_top:0px;
	_width:850px;
	_border-right:solid 1px #2B5782;
	_border-left:solid 1px #2B5782;
	_background-image: url(http://b.hatena.ne.jp/images/alpha/alpha-035.png);
}
#banner{
	_position:absolute;
	_lef:0px;
	_width:620px;
	_border-right:solid 1px #2B5782;
	_border-left:solid 1px #2B5782;
}

h1{
	_position:absolute;
	_top:0px;
}
.modified{
	_margin-left:0;
}


div.message{
	position:fixed;
	bottom:0;

}