Top Page > Seesaaブログ > 【Seesaaブログ新デザインシステム】ここまでのCSS記述

【Seesaaブログ新デザインシステム】ここまでのCSS記述

SeesaaブログのここまでのCSS記述
■Seesaaブログのテンプレート「シンプルA. ホワイト 右カラム」編集
■カスタマイズ後のCSS記述すべて
■記述内容の確認(デモブログ)→<■テンプレートをいじってみる>  

Seesaaブログ新デザインシステムのテンプレート「シンプルA. ホワイト 右カラム」に関するカスタマイズがとりあえず終わった感じなので、ここまでの「CSS」「HTML」「コンテンツHTML」の記述をすべて書きます。



記述すべてをこのままコピペすれば、私が作っているデモブログと同じブログが出来ます。
‥‥必要ないですよね。(わかってますってw)
まあ、色々と動きを試してみたい場合は、下記で紹介しているデモブログを触ってみてください。


デモブログの紹介
テンプレートをいじってみる
デモブログ「テンプレートをいじってみる」(Seesaaブログ)

テンプレートをいじってみる



このブログでは、Seesaaブログのソースやコード記述を掲載したら、その後は、思い付いた部分のカスタマイズを記事にする感じでいこうと思います。
とりあえずの基本形はコレ!ってことで、ここまでのカスタマイズ全部のコードを書き出した記事を紹介しておきます。







CSSの記述(すべて)


@charset "UTF-8";

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}

body {
margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section,
summary {
display: block;
}

audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}

audio:not([controls]) {
display: none;
height: 0;
}

[hidden],
template {
display: none;
}

a {
background: transparent;
}

a:active,
a:hover {
outline: 0;
}

abbr[title] {
border-bottom: 1px dotted;
}

b,
strong {
font-weight: bold;
}

dfn {
font-style: italic;
}

h1 {
font-size: 2em;
margin: 0.67em 0;
}

mark {
background: #ff0;
color: #000;
}

small {
font-size: 80%;
}

sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}

sup {
top: -0.5em;
}

sub {
bottom: -0.25em;
}

img {
border: 0;
}

svg:not(:root) {
overflow: hidden;
}

figure {
margin: 1em 40px;
}

hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}

pre {
overflow: auto;
}

code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0;
}

button {
overflow: visible;
}

button,
select {
text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}

button[disabled],
html input[disabled] {
cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}

input {
line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}

input[type="search"] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}

fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}

legend {
border: 0;
padding: 0;
}

textarea {
overflow: auto;
}

optgroup {
font-weight: bold;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

td,
th {
padding: 0;
}

/* reset */

div,
span,
iframe,
p,
blockquote,
cite,
h1,
h2,
h3,
h4,
h5,
h6,
img,
dl,
dt,
dd,
ol,
ul,
li,
form,
label,
article,
aside,
figcaption,
figure,
footer,
header,
nav,
section,
time,
mark,
input,
textarea {
margin: 0;
padding: 0;
border: none;
background: transparent;
vertical-align: baseline;
font-weight: normal;
font-style: normal;
font-size: 100%;
}

/* other */

i,
em {
font-style: italic;
}

blockquote {
padding: 20px;
color: #666;
background-color: #ddd;
}

.article__content ul,
.article__content ol {
margin: 12px 0;
}

.article__content ul li {
list-style: disc;
margin: 0 0 0 2.4em;
}

.article__content ol li {
list-style: decimal;
margin: 0 0 0 2.4em;
}

.article__content table {
border-color: #333;
}

.article__content thead {
background-color: #999;
}

.article__content tfoot,
.article__content tbody {
background-color: #fff;
color: #333;
}

.article__content td,
.article__content th {
padding: 0px 10px;
}

* {
box-sizing: border-box;
}

html,
body {
height: 100%;
}


/******* 全体の領域 *******/

body {
color: #333;
vertical-align: baseline;
word-break: break-all;
font-size: 14px;
font-family: 'メイリオ', Meiryo,'Helvetica Neue','Helvetica', 'Arial', '游ゴシック', YuGothic,'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
line-height: 1.8;
letter-spacing: 0;
zoom: 1;
background-image: url("http://tenpureijiru.up.seesaa.net/image/background.jpg"); /* 背景画像*/
background-repeat:repeat; /* 画像の繰り返し */
}

li {
list-style: none;
}

img {
vertical-align: bottom;
}

a {
color: #2B5782;
text-decoration: underline;
}

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


/******* ヘッダー・メインコンテンツ・サイドバーを含む領域 *******/

.l-wrapper {
width: 1080px; /* 全体の幅 */
position: relative;
height: auto !important;
height: 100%;
min-height: 100%;
display: block;
margin-left: auto;
margin-right: auto;
background-color:#fff; /* 背景色(白) */
}

.l-content {
padding-bottom: 150px; /* (コンテンツ下)powerd byとの空間 */
margin-top:0px; /* (コンテンツ上)ナビメニューとの空間 */
}

.l-footer {
width: 100%;
clear: both;
}

.l-left {
float: left;
}

.l-right {
float: right;
}


/******* ヘッダー *******/

.header {
padding: 30px 0 15px 20px; /* ヘッダーの高さ */
text-align: left;
margin-top:30px; /* ヘッダーの上余白 */
color:#4E667D;
}

.header h1 {
margin: 0px 0;
font-size: 32px;
line-height: 1.4;
font-weight: bold;
color:#4E667D;
}

.header h1 a {
color:#4E667D;
text-decoration: none;
}


/******* フッター *******/

.footer .poweredby {
width: 138px;
margin: 0 auto;
}

.footer .poweredby__body {
background: #9C9C9C;
text-align: center;
font-size: 10px;
padding: 3px;
color: #fff;
}

.footer .poweredby__body a {
color: #fff;
}


/******* メインコンテンツ *******/

.main {
width: 740px; /* メインコンテンツの幅 */
margin: 0px;
padding-right: 10px;
padding-left: 15px;
}


/******* サイドバー *******/

.side {
width: 330px; /* サイドバーの幅 */
margin-right: 0px; /* サイドバーの右余白 */
margin-left: 5px; /* サイドバーの左余白 */
padding-right: 15px;
padding-left: 5px;
}

.side--right {
float: right;
}

.side--left {
float: left;
}


/*** カテゴリ・タグ一覧ページ等のタイトル
*****************************************************/

.heading {
font-size: 16px;
background-color:#4E667D;
color:#fff;
text-align:left;
margin-bottom: 5px;
padding:3px 15px;
border-radius: 3px;
-webkit-border-radius: 3px; /* Safari,Google Chrome用 */
-moz-border-radius: 3px; /* Firefox用 */
}


/*** トップページ(entry)
*****************************************************/

.entry {
margin-bottom: 40px; /* コンテンツとコンテンツの間 */
padding: 10px 10px 15px 10px;
border:1px dotted #4E667D; /* コンテンツを点線で囲む */
line-height:1.5em; /* トップページの行間 */
}

.entry__thumbnail { /* サムネイルのサイズ */
margin-bottom: 10px;
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
float: left;
border: 1px solid #D3D3D3;
margin-right: 15px;
}

.entry__thumbnail a:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
opacity: 0.9;
}

.entry__thumbnail img {
max-width: 100%;
position: relative;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.entry__thumbnail {
text-align: center\9;
}

.entry__thumbnail:not(:target) {
text-align: left\9;
}

.entry__thumbnail img {
top: auto\9;
left: auto\9;
}

.entry__thumbnail img:not(:target) {
top: 50%;
left: 50%;
}

/*** トップページの個別記事タイトル ***/
.entry__title {
font-size: 20px;
font-weight: bold;
border-bottom: 1px dotted #4E667D;
padding-bottom:5px;
margin-bottom:8px;
line-height:1.5em;
}

.entry__title a {
color: #333;
text-decoration: none;
}

/*** 日付・タグ ***/
.meta {
color: #909090;
font-size: 12px;
margin-bottom: 10px;
}

.meta .date {
display: inline-block;
margin-right: 5px;
}

.meta .tag {
display: inline-block;
}

/*** タグのスタイル ***/
.meta .tag a {
margin-right: 5px;
padding: 2px 4px 1px 4px;
text-decoration: none;
display: inline-block;
line-height: 1.2em;
border: 1px solid #BDCDCD;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
font-size: 94%;
background: #E2E2E2;
color: #5F5F5F;
}

.meta .tag a:hover{
color: #C0C0C0;
}


/*** 個別記事(article)
*****************************************************/

/*** 個別記事の外枠点線 ***/
.article_kobetu {
margin-bottom: 40px; /* コンテンツとコンテンツの間 */
padding: 10px;
border:1px dotted #4E667D; /* コンテンツを点線で囲む */
}

.article--all {
margin-bottom: 60px;
}

/*** 個別記事のタイトル・日付部分 ***/
.article__heading {
margin-bottom: 20px; /* 記事本文との間 */
}

.article__title {
font-size: 20px;
font-weight: bold;
border-bottom: 1px dotted #4E667D;
padding-bottom: 5px; /* タイトルと下線の間 */
margin-bottom: 5px; /* 下線と日付の間 */
}

.article__title a {
color: #333;
text-decoration: none;
}

/*** 個別記事の本文 ***/
.article__content {
margin-bottom: 10px;
padding: 0px 5px;
line-height: 1.5em; /* 個別記事の行間 */
}

.article__content img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}

.article__content img:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
opacity: 0.9;
}

.article__content--comments {
padding-bottom: 10px;
}

/*** posted by 部分 ***/
.article__footer .posted {
margin-top: 50px; /* 記事本文とpostedの間 */
margin-bottom: 5px;
padding-right: 5px;
text-align: right;
}

.article__footer .posted .partition:before {
content: "|";
margin-left: 5px;
margin-right: 5px;
display: inline-block;
}

.article__footer .bookmark {
text-align: center;
margin-bottom: 10px;
}


/*** サイドバー
*****************************************************/

.module {
margin-bottom: 60px;
}

/*** サイドバータイトル ***/
.module__heading {
font-size: 16px;
background-color:#4E667D;
color:#fff;
text-align:center;
margin-bottom: 15px;
padding:3px 0px;
border-radius: 3px;
-webkit-border-radius: 3px; /* Safari,Google Chrome用 */
-moz-border-radius: 3px;
}

/*** サイドバータイトル(枠線あり) ***/
.module__heading2 {
font-size: 16px;
background-color:#4E667D;
color:#fff;
text-align:center;
margin-bottom: 5px;
padding:3px 0px;
border-radius: 3px;
-webkit-border-radius: 3px; /* Safari,Google Chrome用 */
-moz-border-radius: 3px;
}

/*** サイドバー枠線 ***/
.side-waku {
border: 2px solid #A7B3BE;
background-color: #FBFBFB;
padding: 8px;
color: #7A8C9E;
}

.side-waku .module__body a {
text-decoration: none;
}

/*** サイドバープルダウン ***/
.side-pull {
border: 2px solid #A7B3BE;
background-color: #FBFBFB;
padding: 8px 4px;
color: #586572;
width: 100%;
}


/****** サイドバー(最近の記事) ******/
.module--recent-entry .recent-entry__item {
border-bottom: 1px dotted #ADADAD;
}

.module--recent-entry .recent-entry__item a {
display: block;
color: #2B5782;
padding: 10px 0;
overflow: hidden;
text-decoration: none;
line-height:1.5em;
}

.module--recent-entry .recent-entry__item a:hover {
color: #A9A9A9;
text-decoration: none;
}

.module--recent-entry .recent-entry__item a img:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
opacity: 0.9;
}

.module--recent-entry .recent-entry__thumbnail {
margin-right: 10px;
margin-top:5px;
float: left;
width: 60px;
height: 60px;
overflow: hidden;
position: relative;
border: 1px solid #aaa;
}

.module--recent-entry .recent-entry__thumbnail img {
position: relative;
min-width: 60px;
min-height: 60px;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.module--recent-entry .recent-entry__thumbnail img {
top: auto\9;
left: auto\9;
}

.module--recent-entry .recent-entry__thumbnail img:not(:target) {
top: 50%;
left: 50%;
}

.module--recent-entry .recent-entry__title {
font-size: 14px;
font-weight: bold;
overflow: hidden;
}

.module--recent-entry .recent-entry__body {
line-height: 1.5;
overflow: hidden;
}

/****** サイドバー(カレンダー) ******/
.module--calendar table {
width: 98%;
margin-left: auto;
margin-right: auto;
}

.module--calendar caption {
font-weight: bold;
padding-bottom: 5px;
}

.module--calendar th,
.module--calendar td {
text-align: center;
padding: 2px;
}

.module--calendar .month {
display: inline-block;
margin-left: 25px;
margin-right: 25px;
}

.module--calendar .prev,
.module--calendar .next {
font-weight: 100;
}

.module--calendar td a{ /* リンクに背景 */
display:block;
width: 100%;
height: 100%;
background-color: #D3D9DE;
padding: 2px;
text-decoration: none;
}

.module--calendar td a:hover{
background-color: #B3B8BD;
}

/****** サイドバー(タグクラウド) ******/
/*.module--tag-cloud ._tag {
padding: 3px 2px 2px 2px;
margin: 2px;
display: inline-block;
line-height: 1.2em;
border: 1px solid #aaa;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}*/


/*** 個別記事の下(関連記事)
*****************************************************/

.module--category-recent-entry { /* 外枠 */
margin-bottom: 0px;
padding-left: 20px;
}

.module--category-recent-entry .module__heading {
margin-bottom: 10px;
}

.module--category-recent-entry .recent-entry__item {
display: inline-block;
margin-right: 10px;
margin-bottom: 20px;
width: 124px;
height: 124px;
}

.module--category-recent-entry .recent-entry__item p {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size:85%;
}

.module--category-recent-entry .recent-entry .recent-entry__thumnail {
display: block;
width: 124px;
height: 124px;
overflow: hidden;
position: relative;
border: 1px solid #aaa;
}

.module--category-recent-entry .recent-entry .recent-entry__thumnail img {
position: relative;
min-width: 124px;
min-height: 124px;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.module--category-recent-entry .recent-entry .recent-entry__thumnail img:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
opacity: 0.9;
}

.module--category-recent-entry .recent-entry .recent-entry__thumnail img {
top: auto\9;
left: auto\9;
}

.module--category-recent-entry .recent-entry .recent-entry__thumnail img:not(:target) {
top: 50%;
left: 50%;
}

/****** ページ下のタイトル(サブ) ******/
.subheading {
margin-top: 100px;
}

.subheading .module__heading { /* タイトル */
text-align: left;
padding: 3px 15px;
}


/*** サイドバー(プラグイン)
*****************************************************/

.module--profile .profile__heading {
float: left;
margin-right: 5px;
}

.module--profile .profile__image {
margin-top: 5px;
margin-bottom: 10px;
text-align: center;
}

.module--profile .profile__image img {
max-width: 100%;
height: auto;
}

/****** ブログ内検索 ******/
.module--search .search {
border: 2px solid #A7B3BE; /* 枠線 */
position: relative;
background-color: #FBFBFB;
}

.module--search .search__text {
padding: 8px 10px;
width: 80%;
line-height: 1.2;
color: #687786; /* 文字の色 */
}

.module--search .search__submit { /* 検索ボタン */
background: #8E98A2;
color: #fff;
width: 20%;
height: 100%;
position: absolute;
right: 0;
border-radius: 0;
}

.module--search .search__submit:hover {
background: #ccc;
}


/*** 個別記事の下(コメント欄)
*****************************************************/

.module--comments .module__heading {
margin-top: 100px;
text-align: left;
padding: 3px 15px;
}

.module--comments .comments__item { /* コメント全体 */
margin: 0px 12px 20px 12px;
padding: 5px 10px;
border: 1px dotted #4E667D;
}

.module--comments .comments__user-name { /* コメント名前 */
font-weight: bold;
font-size: 105%;
margin-bottom: 5px;
}

.module--comments .comments__content { /* コンテンツ */
margin-bottom: 5px;
line-height: 1.5em;
}

.module--comments .comments__meta { /* コメント日付 */
font-size: 12px;
color: #909090;
text-align: right;
}

/****** コメントを書くボタン ******/
.module--comments .comments__leave {
text-align: right;
}

.module--comments .comments__leave a {
float: right;
border: 1px solid #909090; /* 外枠 */
padding: 3px 10px 3px 10px;
text-decoration: none;
background: #909090; /* ボタン全体背景色 */
color:#fff; /* 文字色(白) */
border-radius: 3px;
-webkit-border-radius: 3px; /* Safari,Google Chrome用 */
-moz-border-radius: 3px;
}

.module--comments .comments__leave a:hover {
border: 1px solid #bbb; /* 外枠 */
background: #ccc; /* ボタン全体背景色 */
color: #fff; /* 文字色(白) */
}

.module--comments .comment-form {
margin-bottom: 15px;
}

.module--comments .comment-form__heading {
font-weight: bold;
}

.module--comments .img-confirm-form__heading {
font-weight: bold;
margin-bottom: 5px;
}

.module--comments .img-confirm-form__body p {
margin-bottom: 15px;
}

/****** 人気記事 ******/
.module--popular-entry .module__body li {
margin-bottom: 5px;
list-style-type: decimal;
list-style-position: inside;
padding-left: 1em;
text-indent: -0.5em;
border-bottom: 1px dotted #ADADAD;
line-height: 1.5em;
padding-bottom: 5px;
}

.module--popular-entry .module__body li a {
text-decoration: none;
}


/*** アップロード画面
*****************************************************/

.upload-detail__entry-title { /*上部タイトル*/
font-size: 16px;
background-color:#4E667D;
color:#fff;
text-align:left;
margin-bottom: 15px;
padding:3px 15px;
border-radius: 3px;
-webkit-border-radius: 3px; /* Safari,Google Chrome用 */
-moz-border-radius: 3px; /* Firefox用 */
}

.upload-detail__entry-title a {
color: #72CEE8;
font-weight: bold;
}

.upload-detail__entry-title a:hover {
color: #B0B0B0;
}

.upload-detail__entry-title .date {
display: inline-block;
color: #ccc;
font-size: 12px;
margin-left: 15px;
}

.upload-detail__date {
margin-bottom: 40px;
}

.upload-detail__date .upload-year {
font-weight: bold;
border-bottom: 1px dotted #4E667D;
font-size: 22px;
margin-bottom: 5px;
text-align: center;
}

.upload-detail__date .upload-month {
text-align: center;
}

.upload-detail__date .upload-month__item {
display: inline-block;
margin: 0 8px;
}

.upload-detail__date .upload-month__item.is-active {
background: #4E667D;
color: #fff;
padding: 2px 4px;
}

.upload-detail__date .upload-month__item.is-active a {
color: #fff;
}

.upload-detail__content .content-heading { /* 画像タイトル */
text-align: center;
}

.upload-detail__content .content-body { /* 画像外枠 */
text-align: center;
margin: 10px auto 15px;
height: 400px;
display: table;
table-layout: fixed;
width: 100%;
}

.upload-detail__content .content-body .content-inner {
display: table-cell;
vertical-align: middle;
}

.upload-detail__content .content-body img {
max-height: 400px;
max-width: 100%;
}

.upload-detail .upload-list { /* サムネイル表示部分外枠 */
margin-top: 5px;
margin-bottom: 20px;
}

.upload-detail .upload-list__item {
display: inline-block;
margin-right: 10px;
margin-bottom: 15px;
width: 131px;
height: 131px;
}

.upload-detail .upload-list__item.is-mg-hidden {
margin-right: 0;
}

.upload-detail .upload-list__item a:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
opacity: 0.9;
}

.upload-detail .upload-list__thumnail {
display: block;
width: 131px;
height: 131px;
overflow: hidden;
position: relative;
border: 1px solid #aaa;
}

.upload-detail .upload-list__thumnail img {
position: relative;
min-width: 131px;
min-height: 131px;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.upload-detail .upload-list__thumnail img:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
opacity: 0.9;
}

.upload-detail .upload-list__thumnail img {
top: auto\9;
left: auto\9;
}

.upload-detail .upload-list__thumnail img:not(:target) {
top: 50%;
left: 50%;
}


/*** タグクラウド
*****************************************************/

.tag-cloud {
background: #D3D9DE;
padding: 10px 20px;
margin-bottom: 30px;
line-height: 1.8;
border-radius: 3px;
border:1px solid #4E667D;
}

.tag-search {
text-align: right;
}

.tag-photos__item {
display: inline-block;
margin-right: 16px;
margin-bottom: 15px;
width: 163px;
}

.tag-photos__item--nmgr {
margin-right: 0;
}

.tag-photos__thumnail {
display: block;
width: 163px;
height: 163px;
overflow: hidden;
border: 1px solid #aaa;
}

.tag-photos__thumnail img {
position: relative;
min-width: 163px;
min-height: 163px;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}

.tag-photos__title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.tag-photos__detail {
font-size: 12px;
line-height: 1.2;
}

.message {
margin-bottom: 15px;
text-align: center;
background: #ccc;
border: 1px dotted #999;
padding: 5px;
}

.message--error {
border: 1px dotted #f00;
background: #FFE4E4;
padding: 0;
}

.message__title--error {
color: #f00;
font-weight: bold;
}


/*** ページ案内(12345ボタン・続きを読む・もっと見る)
*****************************************************/

/****** 12345案内ボタン ******/
.pager {
text-align: center;
margin-bottom: 0px;
}

.pager__item {
display: inline-block;
margin-right: 3px;
margin-left: 3px;
margin-bottom: 10px;
}

.pager__item a,
.pager__item span {
display: block;
/* For IE 6/7 */
*display: inline;
*zoom: 1;
color: #333;
width: 28px;
height: 28px;
text-align: center;
font-weight: lighter;
line-height: 2;
border: 1px solid #aaa;
text-decoration: none;
}

.pager__item a:hover {
background: #4E667D;
border: 1px solid #4E667D;
color: #fff;
}

.pager__item.is-active span {
border: 1px solid #4E667D;
background: #4E667D;
color: #fff;
}

/****** 続きを読む(外枠) ******/
.read-more {
margin-top: 20px;
text-align: right;
}

/****** もっと見る ******/
.read-more--bdt {
padding-top: 10px;
margin-top: 45px;
}

.read-more--bdt a{ /* もっと見るボタン */
text-decoration: none;
background-color: #80C0C0;
display: block;
position: relative;
margin:0 auto;
top: 0;
width: 60%;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
text-align: center;
border: 1px solid #577798;
color: #800000;
padding:10px 0px 7px 0px;
}

.read-more--bdt a:hover { /* もっと見るボタン(hover時) */
background: #4E667D;
color: #fff;
}

.read-more--mgb-60 { /* もっと見る 下の余白 */
margin-bottom: 5px;
}


/*** ページ案内(前のページ・次のページ)
*****************************************************/

/****** ページ案内ボタン(外枠) ******/
.permalink {
text-align: center;
width:70%;
margin:0 auto 40px;
}

/****** ページ案内ボタン ******/
.permalink .prev:before,
.permalink .next:after { /* 三角マーク(基本) */
content: "";
display: inline-block;
margin: auto;
width: 0px;
height: 0px;
border: 6px solid transparent; /* 三角形 */
}

.permalink .prev { /* 前のページ案内ボタン(四角) */
float: left;
border: 1px solid #aaa; /* 外枠 */
padding:3px 10px 3px 0px;
text-decoration:none;
color:#404040; /* 文字色(少し黒) */
}

.permalink .prev:hover { /* 前のページ案内ボタン(四角)(hover時) */
border: 1px solid #4E667D; /* 外枠 */
background: #4E667D; /* ボタン全体背景色 */
color:#fff; /* 文字色(白) */
}

.permalink .prev:before { /* 前のページ案内の三角形マーク */
border-right: 6px solid #333; /* 三角形(黒) */
margin-right: 10px; /*テキストとの距離*/
}

.permalink .prev:hover:before { /* 前のページ案内の三角形マーク(hover時) */
border-right: 6px solid #60d3f2; /* 三角形(水色) */
}

.permalink .next { /* 次のページ案内ボタン(四角) */
float: right;
border: 1px solid #aaa; /* 外枠 */
padding:3px 0px 3px 10px;
text-decoration:none;
color:#404040; /* 文字色(少し黒) */
}

.permalink .next:hover { /* 次のページ案内ボタン(四角)(hover時) */
border: 1px solid #4E667D; /* 外枠 */
background: #4E667D; /* ボタン全体背景色 */
color:#fff; /* 文字色(白) */
}

.permalink .next:after { /* 次のページ案内の三角形マーク */
border-left: 6px solid #333; /* 三角形(黒) */
margin-left: 10px; /*テキストとの距離*/
}

.permalink .next:hover:after { /* 次のページ案内の三角形マーク(hover時) */
border-left: 6px solid #60d3f2; /* 三角形(水色) */
}


/*** ページ案内2(前のページ・次のページ)記事ページ
*****************************************************/

/****** ページ案内ボタン(外枠)******/
.permalink2 {
position: relative;
text-align: center;
overflow: hidden;
width: 80%;
margin: 0 auto 40px;
}

/****** プレビュー(前のページ)******/
.permalinkprev { /* 画像を含めた範囲 */
position: relative;
float: left;
width: 45%;
}

.prev-mark { /* プレビュー矢印画像 */
position: relative;
float: left;
}

.prev-mark a:hover { /* hoverした時 */
opacity: 0.6;
filter: alpha(opacity=60);
}

.permalinkprev .prev a { /* プレビュー案内ボタン */
border: 1px solid #aaa; /* 外枠 */
padding: 6px;
text-decoration: none;
color: #404040; /* 文字色(少し黒) */
word-break: break-all;
line-height: 1.4em;
text-align: left;
display: block;
width: 82%;
float: right;
height: 50px;
overflow: hidden;
}

.permalinkprev .prev a:hover { /* hoverした時 */
border: 1px solid #4E667D; /* 外枠 */
background: #4E667D;
color: #fff;
}

/****** ネクスト(次のページ)******/
.permalinknext { /* 画像を含めた範囲 */
position: relative;
float: right;
width: 45%;
}

.next-mark { /* ネクスト矢印画像 */
position: relative;
float: right;
}

.next-mark a:hover { /* hoverした時 */
opacity: 0.6;
filter: alpha(opacity=60);
}

.permalinknext .next a { /* ネクスト案内ボタン */
border: 1px solid #aaa; /* 外枠 */
padding: 6px;
text-decoration: none;
color: #404040; /* 文字色(少し黒) */
word-break: break-all;
line-height: 1.4em;
text-align: left;
display: block;
width: 82%;
height: 50px;
overflow: hidden;
}

.permalinknext .next a:hover { /* hoverした時 */
border: 1px solid #4E667D; /* 外枠 */
background: #4E667D;
color: #fff;
}


.quote__source {
font-size: 10px;
text-align: right;
}


/****** image(関連記事)******/
.no-image {
border: 1px solid #aaa; /* 画像部分の外枠 */
width: 100%;
height: 100%;
position: relative;
}

.no-image2{
width: 100%;
height: 100%;
position: relative;
}

.no-image--inner { /* no image 文字 */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
height: 16px;
line-height: 1;
color: #314150;
}

.no-image--txt {
width: 100%;
text-align: center;
padding: 100px 0;
color: #4E667D;
border: 1px solid #ccc;
margin-bottom: 40px;
}

/**
* module
*/

.icn {
display: inline-block;
background: url(http://blog.seesaa.jp/img/bg/simple_2015_01/icn_sprite.png) no-repeat;
margin-right: 5px;
}

.icn--calendar {
background-position: 0 0;
width: 14px;
height: 12px;
vertical-align: -2px;
}

.icn--tag {
background-position: -29px 0;
width: 12px;
height: 12px;
vertical-align: -2px;
margin-right: 2px;
}

.form .input {
padding: 6px 10px;
line-height: 1.2;
border: 1px solid #ccc;
width: 60%;
}

.form .input--submit { /* 投稿するボタン */
border: 1px solid #4E667D;
padding: 7px 0;
width: 20%;
display: block;
background: #4E667D;
color: #fff;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}

.form .input--submit:hover {
background: #ccc;
border: 1px solid #bbb;
}

.form textarea {
border: 1px solid #ccc;
width: 80%;
padding: 6px 10px;
}

.font-s {
font-size: 12px;
}

.l-content,
.entry,
.module--recent-entry .recent-entry__item,
.module--profile .profile,
.upload-detail .upload-list,
.permalink {
*zoom: 1;
}

.l-content:after,
.entry:after,
.module--recent-entry .recent-entry__item:after,
.module--profile .profile:after,
.upload-detail .upload-list:after,
.permalink:after {
content: "\0020";
display: block;
height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
}


@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

.entry__thumbnail {
text-align: left !important;
}

.entry__thumbnail img {
top: 50% !important;
left: 50% !important;
}

.module--recent-entry .recent-entry__thumbnail img {
top: 50% !important;
left: 50% !important;
}

.module--category-recent-entry .recent-entry .recent-entry__thumnail img {
top: 50% !important;
left: 50% !important;
}

.upload-detail .upload-list__thumnail img {
top: 50% !important;
left: 50% !important;
}
}


@media screen and (-webkit-min-device-pixel-ratio: 2) {

.icn {
background: url(http://blog.seesaa.jp/img/bg/simple_2015_01/icn_sprite_2x.png) no-repeat;
background-size: 28px auto;
-webkit-background-size: 28px auto;
}

.icn--tag {
background-position: -16px 0;
}
}


@media screen and (min-width: 321px) and (max-width: 767px) {

.module--category-recent-entry .recent-entry__item {
width: 100px;
height: 100px;
}

.module--category-recent-entry .recent-entry .recent-entry__thumnail {
width: 100px;
height: 100px;
}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {

.l-wrapper {
width: 768px;
}

.main {
width: 448px;
}

.entry__thumbnail {
width: 448px;
height: 244px;
}

.module--category-recent-entry .recent-entry__item {
width: 136px;
height: 136px;
}

.module--category-recent-entry .recent-entry .recent-entry__thumnail {
width: 136px;
height: 136px;
}
}


@media screen and (max-width: 1024px) {

.form .input {
width: 100%;
}

.form .input--submit {
width: 100%;
}

.form textarea {
width: 100%;
}
}


@media screen and (max-width: 767px) {

.l-wrapper {
width: 93%;
display: block;
margin-left: auto;
margin-right: auto;
word-wrap: break-word;
overflow: hidden;
}

.main {
width: 100%;
float: none;
margin-bottom: 80px;
}

.side {
width: 100%;
float: none;
}

.entry__thumbnail {
width: 100%;
height: 200px;
}

.meta .date {
display: block;
}

.meta .tag {
display: block;
}

.module--calendar table {
margin: 0;
}
}


@media screen and (max-width: 320px) {

.module--category-recent-entry .recent-entry {
position: relative;
}

.module--category-recent-entry .recent-entry__item {
width: 86px;
height: 86px;
}

.module--category-recent-entry .recent-entry .recent-entry__thumnail {
width: 86px;
height: 86px;
}
}


/*** その他、追加
*****************************************************/

.midasi1 { /* 個別記事内に見出しを付ける */
font-size: 16px;
border-left:8px solid #4E667D;
border-bottom:3px solid #4E667D;
color:#333;
text-align:left;
padding:5px 10px;
margin-right:10px;
margin-top:30px;
font-weight:bold;
}

.midasi2 { /* 個別記事内に見出しを付ける */
font-size: 16px;
border-left:6px solid #4E667D;
color:#333;
text-align:left;
padding:5px 10px;
margin-top:30px;
font-weight:bold;
}

.article_kobetu2 { /* 上部掲載の記事リストの囲み線 */
margin-bottom: 40px;
padding: 10px 10px 15px 10px;
border: 1px dotted #4E667D;
line-height: 2.3em;
}

.article_kobetu2 a{
font-size:105%;
}


/*** ナビ(ドロップダウンメニュー)
*****************************************************/

#navi-bar {
margin-top:0px;
padding:0px 15px;
}

/*** ドロップダウンメニュー全体 ***/
#dropmenu{
list-style-type: none;
width: 100%;
height: 40px;
margin: 15px auto 60px;
padding: 0px 0px;
background: #BDCDCD; /* タブの背景色 */
border-bottom: 5px solid #A1AEAE; /* タブ下の濃い線 */
border-radius: 3px 3px 0 0;
}

/*** 親メニュー(5つに分ける)***/
#dropmenu li{
position: relative;
width: 20%;
float: left;
margin: 0;
padding: 0;
text-align: center;
}

/*** 親メニューのリンク ***/
#dropmenu li a{
display: block;
margin: 0;
padding: 15px 0 11px;
color: #5C6976; /*親メニューの文字色*/
font-size: 14px;
line-height: 1;
text-decoration: none;
}

/*** 親メニューにマウスをあてた時の親メニューの背景色 ***/
#dropmenu li:hover > a{
background: #7e8888;
color: #B6BCC3;
}

/*** 子メニューにマウスをあてた時の子メニューの背景色 ***/
#dropmenu > li:hover li:hover > a {
background: #707070;
}

/*** 親メニューの上を角丸に ***/
#dropmenu > li:hover > a{
border-radius: 3px 3px 0 0;
}

/*** 親メニューを開いた時の右端の折り返し ***/
#dropmenu li:last-child ul{
left: -100%;
width: 100%
}

/*** 子メニュー全体 ***/
#dropmenu li ul {
list-style: none;
position: absolute;
z-index: 100;
top: 100%; /* メインメニューの真下に表示 */
left: 0;
width: 100%;
margin: 0;
padding: 0;
}

/*** 子メニューの幅 ***/
#dropmenu li ul li{
overflow: hidden;
width: 200%; /* 親メニューの2倍の横幅 */
height: 0;
color: #fff;
-moz-transition: .3s; /* メニューが出てくる速度 */
-webkit-transition: .3s;
-o-transition: .3s;
-ms-transition: .3s;
transition: .3s;
}

/*** 子メニューのリンク ***/
#dropmenu li ul li a{
padding: 13px 15px;
background: #7e8888; /* 子メニューの背景色(親と同じ) */
text-align: left;
font-size: 12px;
font-weight: normal;
color: #fff;
}

/*** 親メニューにマウスを乗せた時の子メニュー。不等号が抜けると孫もひ孫も一気に開く。***/
#dropmenu li:hover > ul > li{
overflow: visible;
height: 38px;
border-top: 1px solid #A2A5A8; /* 子メニューの間の線 */
}

/*** 子メニュー間の線の一番上の線削除 ***/
#dropmenu li:hover ul li:first-child{
border-top: 0;
}

/*** 子メニュー間の線の一番下の線削除 ***/
#dropmenu li:hover ul li:last-child{
border-bottom: 0;
}

/*** 一番下の子メニューの下の角を丸く ***/
#dropmenu li:hover ul li:last-child a{
border-radius: 0 0 3px 3px;
}

/*** 孫メニュースタートの位置(横に開かせる)***/
#dropmenu li ul li ul {
top: 0;
left: 100%; /* 右側に開かせる */
width: 25%; /* 孫メニューの幅 */
}

/*** 一番下の孫メニューの折り返し(横に開かせる)***/
#dropmenu li ul li:last-child ul {
left: 100%; /* 右側に開かせる */
width: 25%; /* 孫メニューの幅 */
}

/*** 孫メニュー右端折り返し ***/
#dropmenu li:last-child ul li ul {
left: -50%;
width: 25%;
}

/*** 孫メニューの背景色 ***/
#dropmenu li ul li ul li a {
background: #5F5F5F;
}

/*** 孫メニューにマウスをあてた時 ***/
#dropmenu li:hover ul li ul li:hover > a {
background: #5C6976;
}

/*** 孫メニューがあることを示す三角マーク ***/
#dropmenu li ul li ul:before {
position: absolute;
content: "";
top: 10px;
left: -30px;
width: 0;
height: 0;
border: 8px solid transparent;
border-left-color: #D0D0D0;
}

/***メニューの三角マーク(折り返し。右端用)***/
#dropmenu li:last-child ul li ul:before {
position: absolute;
content: "";
top: 10px;
left: 600%;
margin-left: -40px;
border: 8px solid transparent;
border-right-color: #D0D0D0;
}


/*** パンくずリスト
*****************************************************/

.crumb {
margin: -15px 10px 10px 20px;
font-size: 14px;
line-height: 18px;
}


/*** ツリーメニュー
*****************************************************/

.treemenu {
width: 100%;
}

.tree-menu {
margin: 0;
padding: 0;
}

.tree-menu ul {
display: none;
}

.tree-menu li {
list-style-type: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.tree-menu input[type=checkbox] {
position: absolute;
opacity: 0;
display: none;
}

.tree-menu label, .tree-menu a { /*第1階層*/
position: relative;
display: block;
padding: 7px 10px;
}

.tree-menu label:before, .tree-menu label:after, .tree-menu a:after { /*アイコンの位置*/
content: '';
display: inline-block;
width: 16px;
height: 16px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}

.tree-menu label { /*第1階層*/
cursor: pointer;
padding-left:55px;
}

.tree-menu label:before { /*第1階層の丸矢印アイコン(90度傾ける)*/
left:10px;
background-image: url(http://tenpureijiru.up.seesaa.net/image/i_arrow01.png);
background-repeat: no-repeat;
background-position: 0 0;
-webkit-transform: translateY(-50%) rotate(-90deg);
-moz-transform: translateY(-50%) rotate(-90deg);
-ms-transform: translateY(-50%) rotate(-90deg);
-o-transform: translateY(-50%) rotate(-90deg);
transform: translateY(-50%) rotate(-90deg);
}

.tree-menu label:after { /*フォルダアイコン(プラス)*/
left: 32px;
background-image: url(http://tenpureijiru.up.seesaa.net/image/i_folder01.png);
background-repeat: no-repeat;
}

.tree-menu a:after { /*オレンジ矢印アイコン*/
background-image: url(http://tenpureijiru.up.seesaa.net/image/i_arrow02.gif);
background-repeat: no-repeat;
}

.tree-menu input[type=checkbox]:checked + label:before {/*丸矢印アイコンを回転する*/
-webkit-transform: translateY(-50%) rotate(360deg);
-moz-transform: translateY(-50%) rotate(360deg);
-ms-transform: translateY(-50%) rotate(360deg);
-o-transform: translateY(-50%) rotate(360deg);
transform: translateY(-50%) rotate(360deg);
}

.tree-menu input[type=checkbox]:checked + label:after {/*フォルダアイコン(マイナス)*/
background-image: url(http://tenpureijiru.up.seesaa.net/image/i_folder02.png);
background-repeat: no-repeat;
}

.tree-menu input[type=checkbox]:checked + label + ul,
.tree-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {
display: block;
}

.tree-menu ul label,
.tree-menu ul a {
padding-left: 80px; /*第2階層文字の位置*/
}

.tree-menu ul label:before { /*第2階層の丸矢印の位置*/
left: 30px;
}

.tree-menu ul label:after,
.tree-menu ul a::after { /*第2階層のフォルダアイコン、オレンジ矢印の位置*/
left: 52px;
}

.tree-menu ul ul label,
.tree-menu ul ul a {
padding-left: 100px;/*第3階層文字の位置*/
}

.tree-menu ul ul label:before { /*第3階層の丸矢印の位置*/
left: 50px;
}

.tree-menu ul ul label:after,
.tree-menu ul ul a::after { /**第3階層の丸矢印、オレンジ矢印の位置*/
left: 72px;
}

.tree-menu ul ul ul label,
.tree-menu ul ul ul a {
padding-left: 100px; /*第4階層文字の位置*/
}

.tree-menu.animated label:before {
-webkit-transition: -webkit-transform 0.8s;
-moz-transition: -moz-transform 0.8s;
transition: transform 0.8s;
}


/*** 上部掲載の記事リストのスタイル ***/
.top-list li {
line-height: 1.5em;
padding: 6px 0;
word-wrap : break-word;
overflow-wrap : break-word;
padding-left: 1em;
text-indent: -1.3em;
border-bottom:1px dotted #A1A8AF;
margin-left:5px;
}

.top-list li a {
font-size: 110%;
text-decoration:none;
}

.top-list li:before {
content: url(http://tenpureijiru.up.seesaa.net/image/yajirushi_04.png);
position: relative;
margin-right: 7px;
top: 1px;
}




次の記事の紹介

次の記事では「Seesaaブログ編集に関するここまでのHTML記述」を掲載します。


【Seesaaブログ新デザインシステム】ここまでのHTML記述(1)
Seesaaブログ新デザインシステムのテンプレート「シンプルA. ホワイト 右カラム」をカスタマイズしたので、HTMLの記述を全部書き出します。と思って記事を投稿しようとしたら、さくらのブログの文字制限に引っ掛かってしまいました‥‥






posted by mameemon | Comment ( 0 ) | Category ( Seesaaブログ )
この記事へのコメント
コメントを書く
お名前:
コメント:
認証コード: [必須入力]

※画像の中の文字を半角で入力してください。