読者です 読者をやめる 読者になる 読者になる

Minimal Green

はてなブログカスタマイズや、HTML、CSS、サイト制作などについて書いています。

ピンクストライプでガーリーにカスタマイズ(訂正あり)

テンプレート ブログカスタマイズ CSS ガーリーデザイン

f:id:syofuso:20161110031659j:plain
新しく投稿したはてなブログテーマ「stripe」の当初デザインはピンクのストライプでした。このブログも気分転換にしばらくピンクストライプでいきます。
お色直しのカスタマイズ用CSSコードをまとめました。

stripe - テーマ ストア

【訂正】タイトル下の説明文、#blog-descriptionの文字色指定が抜けていました。.pagerページャのデザインを変更しました。タイトルに画像を使わない方は下の修正済みコードに変えて下さい。

「stripe」インストール後、デザインcssに以下のコードを追記して下さい。

a {
	color: #8AEAEA;
        text-decoration: none;
}
a:hover {
	color:#9FD6D2;
        text-decoration: underline;
}

.entry-header::after {
	width: 100%;
	background: -webkit-repeating-linear-gradient(-45deg, #F5A2A2, #F5A2A2 5px, #FFD8D8 5px, #FFD8D8 10px);
	background: repeating-linear-gradient(-45deg, #F5A2A2, #F5A2A2 5px, #FFD8D8 5px, #FFD8D8 10px);
}
.hatena-module-title::after {
	background: -webkit-repeating-linear-gradient(-45deg, #F5A2A2, #F5A2A2 5px, #FFD8D8 5px, #FFD8D8 10px);
	background: repeating-linear-gradient(-45deg, #F5A2A2, #F5A2A2 5px, #FFD8D8 5px, #FFD8D8 10px);
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited,.archive-heading {
	color: #65513f;
}
html, body {
	color: #65513f;
}
.hatena-module-title, .hatena-module-title a, .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5 {
	color: #65513f!important;
}
#title a,
#blog-description {
	color: #65513f;
}
.leave-comment-title {
	color: #65513f;
	border: 1px solid #65513f;
}
.leave-comment-title:hover {
	color: #65513f;
	opacity: 0.7;
}
.date {
	color: #9FD6D2;
}
.date a {
	color: #9FD6D2;
}
.categories {
	color: #F5A2A2;
}
.categories::before {
	content: "\f04a";
}
.categories a {
	color: #F5A2A2;
}
.categories a:hover {
	color: #f8bdbd;
        background: -webkit-repeating-linear-gradient(-45deg, #f8f8f8, #f8f8f8 2px, #fff 2px, #fff 4px);
	background: repeating-linear-gradient(-45deg, #f8f8f8, #f8f8f8 2px, #fff 2px, #fff 4px);
}
.page-archive .categories a {
	color: #fff;
	background: #F5A2A2;
}
.entry-content h2 {
	border-left: 6px solid #F5A2A2;
}
.entry-content h3::before {
	background-color: #F5A2A2;
}
.entry-content h3::after {
	background: #FFD8D8;
}
.entry-content h4 {
	border-bottom: 2px solid #F5A2A2;
}
.entry-content h4::before {
	background: #F5A2A2;
}
.entry-content h4::after {
	background: #FFD8D8;
}
/*続きを読む*/

a.entry-see-more {
	background: #F5A2A2;
	border: 1px solid #F5A2A2;
	color: #fff;
}
a.entry-see-more::after {
	border: 2px dashed #fff;
}
a.entry-see-more:hover {
	color: #F5A2A2;
	background-color: #fff;
	border: 2px dashed #F5A2A2;
}
/* ナビゲーション */

#nav-menu {
	;
	background: #F5A2A2;
}
#nav-menu li:hover > a {
	background: #f8bdbd;
	color: #fff;
}
#nav-menu li ul li a {
	background: #F5A2A2;
}
#nav-menu li:hover ul li {
	background: #F5A2A2;
}
@media (max-width: 760px) {
	#nav-menu li:hover > a {
		background: #f8bdbd;
		color: #fff;
	}
}
/* ホバー・クリック開閉 */
.hover-click > a {
	background: #F5A2A2;
	color: #fff;
}
#hover-click > ul {
	background: #f8bdbd;
}
.pagetop a {
	background-color: #F5A2A2;
}
.pagetop a:hover {
	background-color: #9FD6D2;
}

#footer {
	background: #F5A2A2;
}
/* pager修正済み */
.pager a,
.pager-next a,
.pager-prev a {
	color: #65513f;
}
.pager .pager-next, .pager .pager-prev {
	background: -webkit-repeating-linear-gradient(-45deg, #fad7d7, #fad7d7 5px, #fff 5px, #fff 10px);
	background: repeating-linear-gradient(-45deg, #fad7d7, #fad7d7 5px, #fff 5px, #fff 10px);
}
.pager .pager-next:hover, .pager .pager-prev:hover {
	border: 1px solid #F5A2A2;
	color: #F5A2A2;
}
/* アーカイブタイトル修正追加 */
.archive-heading {
	color: #65513f;
}