CSS
@charset "utf-8";
/*
-----------------------------------------
【CSS編集 目次】
(1) 文字のスタイル
(2) ボタンのスタイル
(3) エリアのスタイル
(4) その他、拡張
※CSS編集で広告を修正しないでください
（規約違反に該当する可能性があります）
-----------------------------------------
*/
/*
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
(1) 文字のスタイル
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
*/
/* (1-1) 全体の文字
--------------------------------------------*/
/* 通常文字 */
.skinTextColor,.skinBaseTextColor,.skinBlock,body{
color:#333333;
}
/* リンク */
.skinAnchorColor,.skinBaseAnchorColor,.skinBlock a,a{
color:#0066cc;
}
/* 訪問済のリンク */
.skinAnchorVisitedColor,.skinBaseAnchorVisitedColor,.skinBlock a:visited,a:visited{
color:#996699;
}
/* マウスオーバーしたときのリンク */
.skinAnchorHoverColor,.skinBaseAnchorHoverColor,.skinBlock a:focus,.skinBlock a:hover,a:focus,a:hover{
color:#ff3366;
}
/* 弱い文字 （日付など）*/
.skinWeakColor,.skinBaseWeakColor{
color:#999999;
}
/* 強い文字 （NEW! 更新!など）*/
.skinStrongColor,.skinBaseStrongColor{
color:#ff3399;
}
/* (1-2) ブログタイトル文字
--------------------------------------------*/
/* skinTitle ブログタイトル文字 */
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus{
color:#000000;
font-weight:bold;
font-size:2.11em;
}
/* skinDescription ブログの説明文字 */
.skinDescription{
color:#333333;
}
/* (1-3) 記事／メッセージボード内の文字のスタイル
--------------------------------------------*/
/* skinArticleTitle 記事タイトル文字 */
.skinArticleTitle,.skinArticleTitle:hover,.skinArticleTitle:focus,.skinArticleTitle:visited{
font-size:1.31em;
font-weight:bold;
color:#0066cc;
}
/* (1-4) サイドバー内の文字のスタイル
--------------------------------------------*/
/* skinMenuTitle サイドメニュータイトル文字 */
.skinMenuTitle{}
/*
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
(2) ボタンのスタイル
※ボタンの背景画像や文字の色などを指定
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
*/
/* (2-1) ボタン[横180px 縦35px]
--------------------------------------------*/
/* ボタンの背景画像 ※[横180px 縦35px]のボタンの背景画像を指定 */
.skinImgBtnM{
background-image:url(http://stat100.ameba.jp/p_skin/wu_pf_cssedit/img/skin_btn_m.png);
}
/* ボタンの文字色 */
.skinImgBtnM:hover span,.skinImgBtnM:focus span,.skinImgBtnM span{
color:#333333 !important;
}
/* (2-2) アイコン付きボタン[横128px 縦28px]
--------------------------------------------*/
/* アイコン付き ボタンの背景画像 ※[横128px 縦28px]のボタンの背景画像を指定 */
.skinImgBtnS{
background-image:url(http://stat100.ameba.jp/p_skin/wu_pf_cssedit/img/skin_btn_s.png);
}
.skinImgBtnS:hover span,.skinImgBtnS:focus span,.skinImgBtnS span{
/*
アイコン画像は下記から指定
menu_icons_pastel.png (パステル）
menu_icons_gray.png（グレー）
menu_icons_black.png（黒）
menu_icons_white.png（白）
*/
background-image:url(http://stat100.ameba.jp/common_style/img/skin/cmn/icons/menu_icons/menu_icons_pastel.png);
color:#333333 !important;/* ←ボタンの文字色 */
}
/* (2-3) ページ送りボタンの << 次へ 、前へ >> 、「次の記事タイトル」 >> ボタン
--------------------------------------------*/
.skinSimpleBtn,.skinSimpleBtn:visited,.skinSimpleBtn:hover,.skinSimpleBtn:focus{
border:1px solid #dddddd;
background:#ffffff;
color:#0066cc !important;
}
/* ボタンにマウスオーバー */
.skinSimpleBtn:hover,.skinSimpleBtn:focus{
background:#f7f7f7;
}
/*
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
(3) エリアのスタイル
※背景画像、サイズ、ボーダーなどを各部分ごとに指定
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
*/
/* (3-1) ボディ（全体）
--------------------------------------------*/
/* skinBody ボディ */
.skinBody{}/* ←ブログ全体に背景を敷きたいとき */
.skinBody2{}
.skinBody3{}
/* (3-2) ブログヘッダー
--------------------------------------------*/
/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{}/* ←ブログヘッダーに背景画像を敷きたいとき */
/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea{
padding:20px 0 30px;
}
/* skinTitleArea ブログタイトルのエリア */
.skinTitleArea{
padding-bottom:4px;
}
/* skinDescriptionArea ブログの説明エリア */
.skinDescriptionArea{}
/* (3-3) コンテンツエリア
--------------------------------------------*/
/* skinContentsArea コンテンツ980pxエリア */
.skinContentsArea{
/* 注 ベースのcssにwidth:980px;の記述有り */
}
/* (3-4) メインエリア
--------------------------------------------*/
.skinMainArea{}
/* (3-5) メッセージボード
--------------------------------------------*/
.skinMessageBoard{
/* 注 ベースのcssに margin-bottom の記述有り */
border-top:1px dotted #979797;
border-bottom:1px dotted #979797;
background:#ffffff;/* ←メッセージボードに背景を敷きたいとき */
}
.skinMessageBoard2{}
.skinMessageBoard3{
padding:16px 30px;
}
/* (3-6) 記事
--------------------------------------------*/
/* skinArticle 記事エリア */
.skinArticle{
/* 注 ベースのcssに margin-bottom の記述有り */
padding:16px 0;
border:1px solid #dddddd;
background:#ffffff;/* ←記事に背景を敷きたいとき */
}
.skinArticle2{}
.skinArticle3{}
/* skinArticleHeader 記事タイトルエリア */
.skinArticleHeader{
margin:0 29px;
padding:2px 10px;
border-left:5px solid #e4e4e4;
}
.skinArticleHeader2{}
/* skinArticleBody 記事本文エリア */
.skinArticleBody{}
.skinArticleBody2{
margin:0 29px;
}
/* skinArticleFooter 記事フッターエリア */
.skinArticleFooter{
margin:10px 29px 0;
border-top:1px dotted #949494;
}
/* (3-7) サイドバーエリア
--------------------------------------------*/
.skinSubArea{} /* サイドバーエリア共通 */
.skinSubA{} /* 300pxのサイドバーエリア */
.skinSubB{} /* 180pxのサイドバーエリア */
/* (3-8) サイドバー メニュー
--------------------------------------------*/
/* skinMenu サイドバー メニューのエリア */
.skinMenu{
/* 注 ベースのcssに margin-bottom の記述有り */
background:#f7f7f7;/* ←サイドメニューに背景を敷きたいとき */
}
.skinMenu2{}
/* skinMenuHeader サイドメニュータイトルエリア */
.skinMenuHeader{
padding:5px 10px;
background:#e4e4e4;/* ←サイドメニューのタイトルに背景を敷きたいとき */
}
/* skinMenuBody サイドメニュー本文エリア */
.skinMenuBody{
margin:10px;
padding:10px;
background:#ffffff;/* ←サイドメニューの本文に背景を敷きたいとき */
}
/* (3-9) サイドバーの リスト画像、ボーダー ※要素のbottomに指定すること
--------------------------------------------*/
.skinSubHr,
.skinSubList li{
margin-bottom:3px;
padding-bottom:3px;
border-bottom:1px dotted #b3b3b3;
}
/* (3-10) コメント欄、記事一覧などの一覧
--------------------------------------------*/
/* 背景色 */
.skinBgColor,.skinBaseBgColor,.skinBlock{
background-color:#ffffff;
}
/* 弱い背景色 */
.skinWeakBgColor,.skinBaseWeakBgColor{
background-color:#f7f7f7;
}
/* 強い背景色 */
.skinStrongBgColor,.skinBaseStrongBgColor{
background-color:#f7f7f7;
}
/* 枠線の色 */
.skinBorderColor,.skinBaseBorderColor,.skinBlock{
border-color:#dddddd;
}
/* 境界線の色 */
.skinBorderHr,.skinBorderList li{
border-color:#b3b3b3;
}
/* Reset While Creative ! */
.cf:after{ content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden; } .cf {display: inline-block;} * html .floatcontainer {height: 1%;} .cf {display:block;}
.columnB .skinMainArea {
width: 640px;
}
.columnB .skinSubA {
width: 320px;
}
/*-----------------------------------
Base - ヘッダー
-----------------------------------*/
.skinContentsFrame {
margin-top: 0;
}
.skinFrame {
padding-top: 0;
}
.skinHeaderFrame {
padding: 0;
}
.skinBlogHeadingGroupArea {
padding: 48px 0;
}
.skinTitleArea {
font-size: 24px;
line-height: 1.2;
}
.skinDescriptionArea {
font-size: 18px;
line-height: 1.5;
}
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus,
.skinDescription {
text-decoration: none;
}
.globalLinkArea {
padding-top: 0px;
padding-bottom: 10px;
}
.pagingPrev, .pagingNext {
border-radius: 0px;
}
.globalLinkArea .globalLinkAreaInner {
left: 0;
float: none;
padding: 0;
}
.globalLinkArea .globalLinkAreaInner li {
left: 0;
margin-right: 0;
width: 212px;
}
.globalLinkArea .globalLinkAreaInner li:not(:first-child) {
border-left: 2px solid #fff;
}
.globalLinkArea .globalLinkAreaInner li a {
width: 100%;
padding: 4px 0;
font-size: 16px;
}
/* 記事 */
.skinMainArea2 {
background: #fff;
}
.skinArticle {
padding: 0px;
border: 0px;
}
.skinArticleHeader {
margin: 0;
padding: 0;
border-left: none;
}
.skinArticleTitle, .skinArticleTitle:hover, .skinArticleTitle:focus, .skinArticleTitle:visited {
font-size: 36px;
font-weight: bold;
line-height: 1.4;
}
.skinArticleBody2 {
margin: 0;
}
.articleDetailArea, .articleText, .articleBtnArea, .articleLinkArea, .skinArticleFooter, .pagingArea, subAdBannerHeader{
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
}
.articleDetailArea {
/*
background: #c7c7c7;
*/
}
.articleDetailArea .articleTime, .articleDetailArea .articleTheme {
line-height: 1.5;
}
.articleText {
color: #333;
font-size: 16px;
padding-top: 32px;
}
.articleText ul, .articleText ol, .articleText dl {
margin-top: 0;
margin-bottom: 0;
}
.articleText ul {
padding-left: 24px;
}
.articleText ol {
padding-left: 32px;
}
.articleText dl {
padding-left: 8px;
}
.articleText dl dd {
margin-left: 1em;
}
.articleText img {
max-width: 100%;
margin: 0;
padding: 0;
}
.skinWeakBgColor, .skinBaseWeakBgColor {
background: transparent;
}
.at-wrap {
margin-top: 36px!important;
}
/* サイド */
.skinMenu {
margin-bottom: 20px;
background: #fff;
}
.skinMenuHeader {
padding: 0;
background: transparent;
}
.skinMenuTitle {
font-size: 20px;
font-weight: bold;
color: #666;
line-height: 36px;
}
.skinMenuBody {
margin: 0;
padding: 0;
}
.skinMenuBody2 {
margin: 0;
padding: 10px;
}
.skinSubList li {
line-height: 1.6;
padding: 5px 0;
margin-bottom: 0;
}
.skinSubList li a {
color: #666;
font-size: 16px;
display: block;
}
.skinMenuBody .listLink {
padding-right: 6px;
padding-bottom: 6px;
}
.skinImgBtnS {
background-image: none;
background-color: rgba(52, 73, 94, 0.6);
}
.skinImgBtnS:hover span, .skinImgBtnS:focus span, .skinImgBtnS span {
color: #ffffff !important;
}
.skinSubA .profileBtnArea .skinImgBtnS {
margin: 0;
width: 160px;
}
.skinSubA .profileBtnArea li .readerBtn, .skinSubA .profileBtnArea li .messageBtn {
margin: 0;
width: 159px;
border-right: 1px solid #fff;
}
.skinSubA .profileBtnArea li .messageBtn, .skinSubA .profileBtnArea li .presentBtn {
border-top: 1px solid #fff;
}
.skinSubA .calendar {
padding: 10px 0;
}
.skinSubA .calendarMenu table {
width: 300px;
}
.skinSubA .blogSearchForm {
width: 320px;
}
.skinSubA .blogSearchInput {
width: 287px;
}
/*-----------------------------------
Base - メニューバー
-----------------------------------*/
.skinContentsFrame {
position: relative;
padding-top: 80px;
}
#headerMenuArea {
width: 100%;
position: absolute;
left: 0;
top: 0;
}
#headerMenuArea, #headerMenu, #headerMenu ul, #headerMenu li, #headerMenu a {
margin: 0;
padding: 0;
background-color: transparent;
}
#headerMenu {
width: 980px;
margin: 0 auto;
line-height: 1.0;
overflow: visible;
}
#headerMenu ul.menu {
list-style: none;
overflow: visible;
}
#headerMenu ul.menu:after {
display: block;
clear: both;
content: ".";
height: 0px;
overflow: hidden;
visibility: hidden;
}
#headerMenu ul.menu li {
position: relative;
display: block;
float: left;
overflow: visible;
margin-right: 16px;
}
#headerMenu ul.menu li a {
display: block;
width: auto;
white-space: nowrap;
overflow: hidden;
background-repeat: repeat;
background-position: center center;
background-color: transparent;
font-size: 18px;
color: #333;
font-weight: normal;
text-align: center;
text-decoration: none;
padding: 8px 0;
}
#headerMenu ul.menu li a:hover {
text-decoration: underline;
}
/* フッターメニュー */
#footerMenuArea {
width: 100%;
background: #999;
}
#footerMenu {
width: 980px;
text-align: center;
font-size: 12px;
padding: 30px 0;
margin: 100px auto 0;
}
#footerMenuArea ul {
list-style-type: none;
margin: 0 auto;
}
#footerMenuArea ul li {
display: inline-block;
padding: 0;
margin: 0;
}
#footerMenuArea .copyright {
color: #fff;
clear: both;
margin: 0;
padding: 30px 0 0;
font-size: 24px;
}
/*
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
(4) その他、拡張
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
*/
/*------------------------------------
全体
------------------------------------*/
/*------------------------------------
ヘッダー部
------------------------------------*/
.skinHeaderFrame {
background: #3498db;
}
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus,
.skinDescription {
color: #fff;
text-align: left;
}
/*------------------------------------
ヘッダー下メニュー
------------------------------------*/
#headerMenuArea {
background: #fff;
border-top: 1px solid rgba(0,0,0,.2);
border-bottom: 1px solid rgba(0,0,0,.2);
}
#headerMenu {
}
#headerMenu ul.menu li {
margin-right: 0;
width: 20%;
}
#headerMenu ul.menu li a {
color: #333;
font-weight: normal;
background-color: transparent;
padding: 12px 20px;
border-right: 1px solid rgba(0,0,0,.2);
}
#headerMenu ul.menu>li:first-child a {
border-left: 1px solid rgba(0,0,0,.2);
}
#headerMenu ul.menu li a:hover {
color: #fff;
font-weight: normal;
text-decoration: none;
background-color: #333;
}
/*------------------------------------
記事上のナビ
------------------------------------*/
/*------------------------------------
記事エリア
------------------------------------*/
/*------------------------------------
サイドメニュー
------------------------------------*/
.skinMenuHeader, .skinMenuBody {
padding-left: 10px;
padding-right: 10px;
}
.skinMenuBody2 {
padding: 10px 0;
}
.skinMenu2 {
border: 1px solid rgba(0,0,0,.25);
}
.skinMenuHeader {
background: #f9f9fc;
border-bottom: 1px solid rgba(0,0,0,.25);
}
.skinSubA .profileBtnArea .skinImgBtnS {
width: 149px;
}
.skinSubA .profileBtnArea li .readerBtn, .skinSubA .profileBtnArea li .messageBtn {
width: 148px;
}
/*------------------------------------
フッター
------------------------------------*/
フリースペース
<img src="http://placehold.jp/333399/eeeeee/320x120.png?text=画像リンク" /> <img src="http://placehold.jp/339933/eeeeee/320x120.png?text=画像リンク" /> <img src="http://placehold.jp/993333/eeeeee/320x120.png?text=画像リンク" /> <div id="headerMenuArea"><!-- --><div id="headerMenu"><!-- --><ul class="menu"><!-- --><li><a href="#">ヘッダー１</a></li><!-- --><li><a href="#">ヘッダー２</a></li><!-- --><li><a href="#">ヘッダー３</a></li><!-- --><li><a href="#">ヘッダー４</a></li><!-- --><li><a href="#">ヘッダー５</a></li><!-- --></ul><!-- --></div><!-- --></div> <div id="footerMenuArea"><!-- --><div id="footerMenu"><!-- --><ul class="menu"><!-- --><li><a href="#">フッター１</a> ｜ </li><!-- --><li><a href="#">フッター２</a> ｜ </li><!-- --><li><a href="#">フッター３</a> ｜ </li><!-- --><li><a href="#">フッター４</a> ｜ </li><!-- --><li><a href="#">フッター５</a></li><!-- --></ul><!-- -></div><!-- --><div class="copyright"><!-- --><div class="copyright-inner">While Creation</div><!-- --></div><!-- --></div>
フリープラグイン
<a class="twitter-timeline" href="https://twitter.com/web_weapon" data-widget-id="503276002940690433">@web_weapon からのツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery', '1.6.2');</script>
<script type="text/javascript">(_JQ162_=jQuery)(function(){$=jQuery=_JQ162_;});</script>
<script type="text/javascript">
$(function(){
/*
$(".articleText").after('<div class="articleTemplate"><a href="#"><img src="http://placehold.jp/600x280.png?text=メルマガ登録はコチラ"></a></div>');
*/
});
</script>