私が記事中で使っている CSS を WordPress.com の多くのテーマでも使えるようにした CSS を「comemo ベーシック」として公開します

私がこのブログで現在使っている CSS のうち、記事内で使っているものの一部を WordPress.com の多くのテーマでも使えるようにしたものを「comemo ベーシック」という名前をつけて公開します。たとえば、テーマ「Twenty Eleven」にこの CSS を適用すると以下のような感じになります。

t demo | WordPress.com のデモ用-2

テーマ「Twenty Eleven」に CSS セット「comemo ベーシック」を適用した場合

続きを読む

各構成要素のデザイン – 「構成要素:カラム、デザイン:comemo ベーシック、テーマ:Twenty Twelve」編 –

CSS スタイルシートエディターに追加する CSS(2〜4カラム共通)
/* comemo column basic -twenty twelve- */
.tablecolumn {
	display: table;
	width: 100%;
	border-collapse: separate;
	border-spacing: 10px;
}

.tablecolumn > div {
	display: table-cell;
	border: 5px solid #cccccc;
	border-radius: 7px;
}

.entry-content .tablecolumn > div .text {
	text-align: left;
	padding: 10px 5%;
	font-size: 13px;
}

.entry-content .tablecolumn > div > h3 {
	background-color: #cccccc;
	text-align: center;
	font-size: 14px;
	color: #fff;
	border: none;
	padding: 10px 0;
	margin: -1px;
}

@media (max-width: 767px) {
	.tablecolumn,.tablecolumn > div {
		display: block;
		width: 100%;
		margin: 1.625em 0;
	}
}

.tablecolumn .w100 {
	width: 100%;
}

.tablecolumn .w50 {
	width: 47%;
}

.tablecolumn .w33 {
	width: 31%;
}

.tablecolumn .w25 {
	width: 22%;
}

@media screen and (max-width: 767px) {
	.tablecolumn .w50,.tablecolumn .w33,.tablecolumn .w25 {
		width: 100%;
	}
}

2カラム

2カラム | ブログ「comemo」のデザインシリーズ「comemo ベーシック」の各構成要素の保管庫

記事中の記述
<div class="tablecolumn">
<div class="w50">
<h3>見出し</h3>
<div class="text">本文 本文 本文 本文 本文 本文</div>
</div>
<div class="w50">
<h3>見出し</h3>
<div class="text">
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文</div>
</div>
</div>

3カラム

3カラム | ブログ「comemo」のデザインシリーズ「comemo ベーシック」の各構成要素の保管庫

記事中の記述
<div class="tablecolumn">
<div class="w33">
<h3>見出し</h3>
<div class="text">本文 本文 本文 本文 本文 本文</div>
</div>
<div class="w33">
<h3>見出し</h3>
<div class="text">
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文</div>
</div>
<div class="w33">
<h3>見出し</h3>
<div class="text">本文 本文 本文 本文 本文 本文</div>
</div>
</div>

4カラム

4カラム | ブログ「comemo」のデザインシリーズ「comemo ベーシック」の各構成要素の保管庫

記事中の記述
<div class="tablecolumn">
<div class="w25">
<h3>見出し</h3>
<div class="text">本文 本文 本文 本文 本文 本文</div>
</div>
<div class="w25">
<h3>見出し</h3>
<div class="text">
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文</div>
</div>
<div class="w25">
<h3>見出し</h3>
<div class="text">本文 本文 本文 本文 本文 本文</div>
</div>
<div class="w25">
<h3>見出し</h3>
<div class="text">
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文</div>
</div>
</div>

#2013

各構成要素のデザイン – 「構成要素:ボックス、デザイン:comemo ベーシック、テーマ:Twenty Twelve」編 –

ボックス | ブログ「comemo」のデザインシリーズ「comemo ベーシック」の各構成要素の保管庫

記事中の記述
<div class="comemo_box_basic">
<h3>タイトル</h3>
<div class="text">
てすてす
</div>
</div>
CSS スタイルシートエディターに追加する CSS
/* comemo box basic -twenty twelve- */
.entry-content .comemo_box_basic {
	border: 5px solid #cccccc;
	border-radius: 7px;
	text-align: center;
}

.entry-content .comemo_box_basic .text {
	text-align: left;
	padding: 10px;
	font-size: 13px;
}

.entry-content .comemo_box_basic h3 {
	background-color: #cccccc;
	text-align: center;
	font-size: 14px;
	color: #fff;
	border: none;
	padding: 10px 0;
	margin: -1px;
}

#2013

各構成要素のデザイン – 「構成要素:新着情報、デザイン:comemo ベーシック、テーマ:Twenty Twelve」編 –

新着情報 | テーマ「Twenty Twelve」のデザイン -「comemo ベーシック」編-
記事中の記述
&lt;div class=&quot;comemo_box_basic&quot;&gt;
&lt;h3&gt;新着情報&lt;/h3&gt;
&lt;div class=&quot;text&quot;&gt;
&lt;div class=&quot;boxlist&quot;&gt;
[display-posts posts_per_page=&quot;5&quot; include_date=&quot;true&quot; date_format=&quot;Y年n月j日&quot;]
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
CSS スタイルシートエディターに追加する CSS
  • 記事「各構成要素のデザイン – 「構成要素:新着情報、デザイン:comemo ベーシック、テーマ:Twenty Twelve」編 -」の CSS の更新履歴
    最終更新日:2013年6月30日

    変更内容:「/* comemo box basic -twenty twelve- */」部分を追加

    /* comemo recentposts basic -twenty twelve- */
    .entry-content .comemo_box_basic .display-posts-listing {
        line-height: 1.2em;
    }
     
    .entry-content .comemo_box_basic .boxlist ul.display-posts-listing {
        padding-left: 0!important;
        text-align: left;
        margin: 0;
    }
     
    .entry-content .comemo_box_basic .boxlist ul.display-posts-listing li {
        width: 70%;
        position: relative;
        list-style: none;
        display: inline-block;
        vertical-align: top;
        white-space: normal;
        word-wrap: normal;
        font-size: 11px;
        line-height: 1.2;
        margin: 0;
        padding: 17px 0 13px 30%;
        border-bottom: 1px dashed #aaa;
    }
     
    .entry-content .comemo_box_basic .boxlist ul.display-posts-listing li:last-child {
        border: none;
        padding-bottom: 0;
    }
     
    .entry-content .comemo_box_basic .boxlist ul.display-posts-listing li a {
        font-weight: bold;
    }
     
    .entry-content .comemo_box_basic .display-posts-listing .date {
        font-size: 12px;
        display: block;
        color: #aaa;
        position: absolute;
        top: 0;
        left: 0;
    }
     
    @media (min-width: 768px) {
        .entry-content .comemo_box_basic .boxlist ul.display-posts-listing {
            margin: -10px 0 0;
        }
         
        .entry-content .comemo_box_basic .boxlist ul.display-posts-listing li {
            padding: 13px 0 13px 30%;
        }
         
        .entry-content .comemo_box_basic .display-posts-listing .date {
            top: 13px;
        }
    }
     
    /* comemo box basic -twenty twelve- */
    .entry-content .comemo_box_basic {
        border: 5px solid #cccccc;
        border-radius: 7px;
        text-align: center;
    }
      
    .entry-content .comemo_box_basic .text {
        text-align: left;
        padding: 10px;
        font-size: 13px;
    }
      
    .entry-content .comemo_box_basic h3 {
        background-color: #cccccc;
        text-align: center;
        font-size: 14px;
        color: #fff;
        border: none;
        padding: 10px 0;
        margin: -1px;
    }
    作成日:2013年4月30日
    /* comemo recentposts basic -twenty twelve- */
    .entry-content .comemo_box_basic .display-posts-listing {
        line-height: 1.2em;
    }
     
    .entry-content .comemo_box_basic .boxlist ul.display-posts-listing {
        padding-left: 0!important;
        text-align: left;
        margin: 0;
    }
     
    .entry-content .comemo_box_basic .boxlist ul.display-posts-listing li {
        width: 70%;
        position: relative;
        list-style: none;
        display: inline-block;
        vertical-align: top;
        white-space: normal;
        word-wrap: normal;
        font-size: 11px;
        line-height: 1.2;
        margin: 0;
        padding: 17px 0 13px 30%;
        border-bottom: 1px dashed #aaa;
    }
     
    .entry-content .comemo_box_basic .boxlist ul.display-posts-listing li:last-child {
        border: none;
        padding-bottom: 0;
    }
     
    .entry-content .comemo_box_basic .boxlist ul.display-posts-listing li a {
        font-weight: bold;
    }
     
    .entry-content .comemo_box_basic .display-posts-listing .date {
        font-size: 12px;
        display: block;
        color: #aaa;
        position: absolute;
        top: 0;
        left: 0;
    }
     
    @media (min-width: 768px) {
        .entry-content .comemo_box_basic .boxlist ul.display-posts-listing {
            margin: -10px 0 0;
        }
         
        .entry-content .comemo_box_basic .boxlist ul.display-posts-listing li {
            padding: 13px 0 13px 30%;
        }
         
        .entry-content .comemo_box_basic .display-posts-listing .date {
            top: 13px;
        }
    }
/* comemo recentposts basic -twenty twelve- */
.entry-content .comemo_box_basic .display-posts-listing {
	line-height: 1.2em;
}

.entry-content .comemo_box_basic .boxlist ul.display-posts-listing {
	padding-left: 0!important;
	text-align: left;
	margin: 0;
}

.entry-content .comemo_box_basic .boxlist ul.display-posts-listing li {
	width: 70%;
	position: relative;
	list-style: none;
	display: inline-block;
	vertical-align: top;
	white-space: normal;
	word-wrap: normal;
	font-size: 11px;
	line-height: 1.2;
	margin: 0;
	padding: 17px 0 13px 30%;
	border-bottom: 1px dashed #aaa;
}

.entry-content .comemo_box_basic .boxlist ul.display-posts-listing li:last-child {
	border: none;
	padding-bottom: 0;
}

.entry-content .comemo_box_basic .boxlist ul.display-posts-listing li a {
	font-weight: bold;
}

.entry-content .comemo_box_basic .display-posts-listing .date {
	font-size: 12px;
	display: block;
	color: #aaa;
	position: absolute;
	top: 0;
	left: 0;
}

@media (min-width: 768px) {
	.entry-content .comemo_box_basic .boxlist ul.display-posts-listing {
		margin: -10px 0 0;
	}

	.entry-content .comemo_box_basic .boxlist ul.display-posts-listing li {
		padding: 13px 0 13px 30%;
	}

	.entry-content .comemo_box_basic .display-posts-listing .date {
		top: 13px;
	}
}

/* comemo box basic -twenty twelve- */
.entry-content .comemo_box_basic {
    border: 5px solid #cccccc;
    border-radius: 7px;
    text-align: center;
}

.entry-content .comemo_box_basic .text {
    text-align: left;
    padding: 10px;
    font-size: 13px;
}

.entry-content .comemo_box_basic h3 {
    background-color: #cccccc;
    text-align: center;
    font-size: 14px;
    color: #fff;
    border: none;
    padding: 10px 0;
    margin: -1px;
}

#2013

各構成要素のデザイン – 「構成要素:自分用メモ、デザイン:comemo ベーシック、テーマ:Twenty Twelve」編 –

自分用メモ | ブログ「comemo」のデザインシリーズ「comemo ベーシック」の各構成要素の保管庫
記事中の記述
<div class="memo">
自分用のメモです。
このボックスは、ログインしている人だけが見ることができます(ソースデータには残っています。)
</div>
CSS スタイルシートエディターに追加する CSS
/* comemo memo basic -twenty twelve- */
.memo {
	display: none;
	border: 1px solid #c9c9c9;
	padding: 10px 5%;
	width: 80%;
	margin: 10px auto 10px 14px;
	background-color: #efefef;
	border-radius: 4px;
	overflow: hidden;
	position: relative;
	font-size: 13px;
}

.memo:before {
	position: relative;
	content: "";
	width: 70px;
	height: 40px;
	float: right;
}

.memo p {
	margin: 1em 0;
}

.memo ul,.memo ol {
	margin: 1em 0 1em 2%;
}

@media (max-width: 767px) {
	.memo ul,.memo ol {
		margin: 1em 0 1em 5%;
	}
}

.memo:after {
	position: absolute;
	content: "memo";
	background-color: rgba(0,0,0,0.2);
	color: #777777;
	border: 1px solid rgba(150,150,150,0.2);
	top: -2px;
	right: -17px;
	transform: rotate(30deg);
	-ms-transform: rotate(30deg);
/* IE 9 */
	-webkit-transform: rotate(30deg);
/* Safari and Chrome */
	-o-transform: rotate(30deg);
/* Opera */
	-moz-transform: rotate(30deg);
/* Firefox */
	padding: 2px 20px 2px 50px;
	box-shadow: 0 0 0 2px rgba(255,255,255,0.4), 0 0 10px rgba(255,255,255,0.4);
	text-shadow: 1px 1px 1px rgba(255,255,255,0.2);
	font-weight: bold;
}
safari の stylish 等に追加する CSS
.logged-in .memo {
	display: block;
}

#2013

各構成要素のデザイン – 「構成要素:注意書き、デザイン:comemo ベーシック、テーマ:Twenty Twelve」編 –

注意書き | ブログ「comemo」のデザインシリーズ「comemo ベーシック」の各構成要素の保管庫
記事中の記述
<div class="caution">
注意書き
</div>
CSS スタイルシートエディターに追加する CSS
/* comemo caution basic -twenty twelve- */
.caution {
	border: 1px solid #eceff6;
	padding: 10px 5%;
	width: 80%;
	margin: 30px auto 30px 14px;
	background-color: #f5f6f9;
	border-radius: 4px;
	overflow: hidden;
	position: relative;
	box-shadow: 1px 1px 5px white inset, 0 0 3px #cccccc;
	color: #777777;
	text-shadow: 1px 1px 1px white;
	font-size: 14px;
}

.caution:before {
	position: relative;
	content: "";
	width: 40px;
	height: 40px;
	float: right;
}

.caution:after {
	position: absolute;
	content: "!";
	background-color: #b0b1b4;
	color: #fff;
	border: 1px solid #b0b1b4;
	top: 10px;
	right: 10px;
	padding: 2px;
	box-shadow: 0 0 0 2px white, 0 0 0 4px #b0b1b4;
	text-shadow: -1px -1px 1px #9c7c81;
	font-weight: bold;
	font-size: 20px;
	width: 30px;
	height: 30px;
	text-align: center;
	border-radius: 20px;
}

.caution p {
	margin: 1em 0;
}

.entry-content .caution h5 {
	display: inline-block;
	margin-top: 1em;
}

#2013

各構成要素のデザイン – 「構成要素:表(テーブル)、デザイン:comemo ベーシック、テーマ:Twenty Twelve」編 –

表(テーブル) | ブログ「comemo」のデザインシリーズ「comemo ベーシック」の各構成要素の保管庫

記事中の記述
<table width="387" border="1" cellspacing="0" cellpadding="2">
<tbody>
<tr>
<th valign="top" width="148">項目</th>
<th valign="top" width="237">内容</th>
</tr>
<tr>
<td valign="top" width="148">項目1</td>
<td valign="top" width="237">てすてす</td>
</tr>
<tr>
<td valign="top" width="148">項目2</td>
<td valign="top" width="237">てすてす</td>
</tr>
<tr>
<td valign="top" width="148">項目3</td>
<td valign="top" width="237">てすてす</td>
</tr>
<tr>
<td valign="top" width="148">項目4</td>
<td valign="top" width="237">てすてす</td>
</tr>
</tbody>
</table>
CSS スタイルシートエディターに追加する CSS
   /* comemo table basic -twenty twelve 20131218-  */
.entry-content table {
    display: table;
    border-radius: 5px;
    border: 5px solid #cccccc;
}

.entry-content tbody {
    border: 0;
}

.entry-content table tr th {
    background-color: #cccccc;
    color: #ffffff;
    padding: 7px 15px 10px;
    letter-spacing: 15px;
    font-weight: bold;
    text-shadow: -1px -1px 1px #999;
    font-size: 14px;
    border: 0;
    margin: -1px;
}

.entry-content table tr td {
    padding: 10px 15px;
}
以下は Simplenote の表示テストです。

#2013