-
-
Save Andou666/fff8b9138180d37a4cdd9b2048802cff to your computer and use it in GitHub Desktop.
Amebaブログデザインテンプレート
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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(https://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(https://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(https://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; | |
} | |
/* | |
*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::* | |
(4) その他、拡張 | |
*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::* | |
*/ | |
/* その他、拡張があれば記述 */ | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment