カテゴリー別アーカイブ: ウェブサイトのデザイン

comemo 10:11 AM | 2016/04/08  

WordPress.com のテーマ「Origin」のアーカイブ表示をワイドにするための CSS

最終更新日：2016-05-07

WordPress.com のテーマ「Origin」に以下の CSS を追加すると、

続きを読む →

comemo 11:20 AM | 2015/06/04  

さまざまな色覚タイプに配慮した色使いについて

私自身はほとんど配慮しておらず、まったくの素人ですが、以前から気になっていたので、この記事に覚書したいと思います。

全体の約５％の人は色の見え方が違っているらしい

ネットでいくつかぐぐってみたうち、以下の記事がよくまとめられているなと私自身は感じました。

この記事によると、一部の人には右のように緑色と赤色がどちらも黄土色になってしまい、識別がつかないようです。

続きを読む →

comemo 11:38 PM | 2014/09/15  

私が記事中で使っているショートコード「display-posts」用の CSS を WordPress.com の多くのテーマでも使えるようにして公開します

最終更新日：2016-01-06

!

2015-01-04現在、ショートコード「display-posts」の仕様が一部、変更されているらしいことに気づきました。この変更に伴い、記事リストの表示が崩れていたので、 適宜、CSS を修正しました。

私がこのブログの記事中で使っているショートコード「display-posts」用の CSS を WordPress.com の多くのテーマでも使えるように一部修正・抜粋したものを公開します。

私が記事中で使っているショートコード「display-posts」用のものを WordPress.com の多くのテーマでも使えるようにした CSS を公開します | comemo-1

続きを読む →

comemo 3:49 PM | 2014/09/11  

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

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

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

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

続きを読む →

comemo 10:59 AM | 2013/05/01
タグ:   

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

CSS スタイルシートエディターに追加する CSS（２〜４カラム共通）
/* 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%;
	}
}

２カラム

２カラム | ブログ「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>

３カラム

３カラム | ブログ「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>

４カラム

４カラム | ブログ「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 9:39 PM | 2013/04/30
タグ:   

各構成要素のデザイン – 「構成要素：ボックス、デザイン：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 8:26 PM | 2013/04/30
タグ:   

各構成要素のデザイン – 「構成要素：新着情報、デザイン：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