Twenty Fourteenテーマ改造 メモ (CSS部)

Last Updated on 2015年4月20日 by kabekin

Twenty Fourteen改造の作業メモ

今回のスタイルシート変更の差分を抽出してメモっておきます。

長いので、コードのみ・・・

/*
Theme Name: Twenty Fourteen child
Theme URI: http://asakita.net/kabekin/twenty-fourteen-child
Author: the kabekin
Author URI: http://asakita.net/kabekin
Template: twentyfourteen
Description: Twenty Fourteen child theme
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
Text Domain: twenty-fourteen-child
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	font-weight: 700;
	margin: 36px 0 12px;
}
/* H1~H3を弄るとサイドバー等もデザインが変わるのでできればH4以降でカスタマイズ */
h1 {
	font-size: 26px;
	line-height: 1.3846153846;
}
h2 {
	font-size: 24px;
	line-height: 1;
}
h3 {
	font-size: 22px;
	line-height: 1.0909090909;
}
h4 {
    /*+++ Kabekin Modify 20150328 装飾付き見出し 26px(H1相当) */
	/* font-size: 20px;
	line-height: 1.2; */
    font-size: 26px;
	line-height: 1.3846153846;
	border-left:12px solid #48832C;
	padding:3px 15px;
}
h5 {
    /*+++ Kabekin Modify 20150328 装飾付き見出し 22px(H2相当) */
    /* font-size: 18px;
	line-height: 1.3333333333; */
	font-size: 22px;
	line-height: 1.0909090909;
	border-left:8px solid #48832C;
	border-bottom:1px solid #48832C;
	padding:3px 15px 5px;
}
h6 {
    /*+++ Kabekin Modify 20150328 装飾付き見出し 22px(H3相当) */
	/* font-size: 16px;
	line-height: 1.5; */
	font-size: 22px;
	line-height: 1.0909090909;
    border-bottom:1px solid #48832C;
	padding:3px 15px 5px;
}
table,
th,
td {
	/*+++ Kabekin Modify 20150325 テーブルの罫線を黒色に変更 */
	/* border: 1px solid rgba(0, 0, 0, 0.1); */
	border: 1px solid #000000;
}
/* Input fields */
input,
textarea {
	/*+++ Kabekin Modify 20150328 入力欄の枠線色変更 */
	/* border: 2px solid rgba(0, 0, 0, 0.1); */
	border: 1px solid #000000;
	border-radius: 2px;
	color: #2b2b2b;
	padding: 8px 10px 7px;
}
textarea {
	/* コメント欄背景色 */
	background: #ffffff;
	width: 100%;
}
/* Responsive images. Fluid images for posts, comments, and widgets */
.comment-content img,
.entry-content img,
.entry-summary img,
#site-header img,
.widget img,
.wp-caption {
	max-width: 100%;
	/* Kabekin Add 20150321 画像に枠線を入れる */
	border: 1px #000000 solid;
}
/**
 * Make sure images with WordPress-added height and width attributes are
 * scaled correctly.
 */
.comment-content img[height],
.entry-content img,
.entry-summary img,
img[class*="align"],
img[class*="wp-image-"],
img[class*="attachment-"],
#site-header img {
	height: auto;
}
img.size-full,
img.size-large,
.wp-post-image,
.post-thumbnail img {
	height: auto;
	max-width: 100%;
	/* Kabekin Add 20150321 画像に枠線を入れる */
	border: 1px #000000 solid;
}
.alignright {
	float: right;
	/*+++ Kabekin Add 20150323 右寄せ位置調整 */
	/* position: relative;
	left: -140px; */
}
/**
 * 3.0 Basic Structure
 * -----------------------------------------------------------------------------
 */
.site {
	/*+++ Kabekin Modify 20150325 コンテンツエリア色変更 #fff->fffff0 */
	background-color: #ffffff0;
	max-width: 1260px;
	position: relative;
	/*+++ Kabekin Add 20150325 コンテンツエリア中央寄せ */
	margin: 0 auto;
}
.site-navigation a {
	color: #fff;
	display: block;
    /* Kabekin Modify 20150321 大文字変換を無効 */
	/* text-transform: uppercase; */
	text-transform: none;
}
.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
	margin: 0 auto;
	max-width: 840px;
}
.entry-title {
	font-size: 33px;
	font-weight: 300;
	line-height: 1.0909090909;
	margin-bottom: 12px;
	margin: 0 0 12px 0;
	/* text-transform: uppercase; *+++  Kabekin Modify 20150321 */
	text-transform: none;
	/*+++ Kabekin Add 20150325 コンテンツエリア色追加 #fffff0 */
	background-color: #fffff0;
}
.site-content .entry-header {
	/*+++ Kabekin Modify 20150328 記事背景色変更 */
	background-color: #fffff0;
	padding: 0 10px 12px;
}
/**
 * 6.3 Entry Meta
 * -----------------------------------------------------------------------------
 */
.entry-meta {
	clear: both;
	color: #767676;
	/*+++ Kabekin Modify 20150321 エントリ情報の文字を大きく */
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3333333333;
    /*+++ Kabekin Commentout 20150328 エントリ情報のuppercase中止 */
	/* text-transform: uppercase; */
}
.site-content .entry-meta {
    /*+++ Kabekin Modify 20150325 コンテンツエリア色変更 #fff->#fffff0 */
	background-color: #fffff0;
	margin-bottom: 8px;
}
.site-content .entry-content,
.site-content .entry-summary,
.page-content {
	/*+++ Kabekin 20150409 Modify #fff->#fffff0 */
  	background-color: #fffff0;
	padding: 12px 10px 0;
}
.entry-content .more-link {
	white-space: nowrap;
    /*+++ Kabekin Add 20150321 続きを読むを太字で大きく */
  	font-weight:bold;
	font-size:x-large;
}
.post-navigation,
.image-navigation {
	margin: 24px auto 48px;
	max-width: 840px;
	padding: 0 10px;
}
/**
 * 6.9 Archives
 * -----------------------------------------------------------------------------
 */
.archive-header,
.page-header {
	margin: 24px auto;
	max-width: 840px;
}
.contributor-info {
	margin: 0 auto;
	max-width: 840px;
}
.comments-area {
	margin: 48px auto;
	max-width: 840px;
	padding: 0 10px;
}
/**
 * 10.0 Multisite
 * -----------------------------------------------------------------------------
 */
.site-main .widecolumn {
	padding-top: 72px;
	width: auto;
}
.site-main .mu_register,
.widecolumn > h2,
.widecolumn > form {
	margin: 0 auto 48px;
	max-width: 840px;
	padding: 0 30px;
}
	.list-view .site-content .hentry {
		/*+++ Kabekin Modify 20150328 投稿ページ記事区切り線の太さ変更 1px->4px */
  		border-top: 4px solid rgba(0, 0, 0, 0.1);
		padding-top: 48px;
	}
	.content-area {
		float: left;
		width: 100%;
  		/*+++ Kabekin 20150411 Add */
  		background-color: #fffff0;
	}
	.archive-header,
	.comments-area,
	.image-navigation,
	.page-header,
	.page-content,
	.post-navigation,
	.site-content .entry-content,
	.site-content .entry-summary,
	.site-content footer.entry-meta {
		padding-right: 30px;
		padding-left: 30px;
  		/*+++ Kabekin Add 20150328 横幅縮小時の記事背景色 */
  		background-color: #ffffff0;
	}
	.masthead-fixed .site-main {
		margin-top: 48px;
  		/*+++ Kabekin Add 20150325 コンテンツエリア色追加 #fffff0 */
		background-color: #fffff0;
	}
	/* Primary Navigation */
	.primary-navigation {
		float: right;
  		/*+++ Kabekin Add 20150323 トップメニュの文字を少し大きく 非選択時=11->18px */
		font-size: 18px;
		margin: 0 1px 0 -12px;
		padding: 0;
  		/* Kabekin Modify 20150321 大文字変換を無効 */
		/* text-transform: uppercase; */
		text-transform: none;
	}
	.primary-navigation li:hover > a,
	.primary-navigation li.focus > a {
		background-color: #24890d;
		color: #fff;
  		/*+++ Kabekin Add 20150323 トップメニュの文字を少し大きく 選択時=20px */
  		font-size: 20px;
	}
@media screen and (min-width: 846px) {
	.content-area,
	.content-sidebar {
		padding-top: 72px;
	/*+++ Kabekin Add 20150325 コンテンツエリア色追加 #fffff0 */
    background-color: #ffffff0;
	}
	#secondary {
          /*+++ Kabekin 20150325 Commentout サイドバーの左右バランスを調整 */
		/*background-color: transparent; */
		border: 0;
		clear: none;
		float: left;
		margin: 0 0 0 -100%;
		min-height: 100vh;
		width: 122px;
	}
	.secondary-navigation a {
		padding: 10px 30px;
  		/*+++ Kabekin 20150323 Add サイドメニューの文字を大きく 非選択時=18px */
  		font-size: 18px;
	}
	.secondary-navigation li:hover > a,
	.secondary-navigation li.focus > a {
		background-color: #24890d;
		color: #fff;
		/*+++ Kabekin 20150323 Add サイドメニューの文字を大きく 選択時=20px */
		font-size: 20px;
	}
	.footer-sidebar .widget,
	.primary-sidebar .widget {
		/* Kabekin Modify 20150323 サイドバーの文字を少し大きく 12px->16px */
  		font-size: 16px;
		line-height: 1.5;
	}
	.footer-sidebar .widget .widget-title,
	.primary-sidebar .widget .widget-title {
		/*+++ Kabekin Modify 20150323 サイドバーメニュー文字を少し大きく 11px->14px */
  		font-size: 14px;
		font-weight: 900;
		line-height: 1.6363636363;
		margin-bottom: 18px;
	}
	.full-width .archive-header,
	.full-width .comments-area,
	.full-width .image-navigation,
	.full-width .page-header,
	.full-width .page-content,
	.full-width .post-navigation,
	.full-width .site-content .entry-header,
	.full-width .site-content .entry-content,
	.full-width .site-content .entry-summary,
	.full-width .site-content footer.entry-meta {
		padding-right: 30px;
		padding-left: 30px;
  		/*+++ Kabekin Add 20150328 横幅縮小時の記事背景色 */
		background-color: #fffff0;
	}
}
@media screen and (min-width: 1080px) {
	.search-box .search-field {
		width: 324px;
	}
	.site-content,
	.site-main .widecolumn {
		margin-left: 300px;
	}
	.full-width .archive-header,
	.full-width .comments-area,
	.full-width .image-navigation,
	.full-width .page-header,
	.full-width .page-content,
	.full-width .post-navigation,
	.full-width .site-content .entry-header,
	.full-width .site-content .entry-content,
	.full-width .site-content .entry-summary,
	.full-width .site-content footer.entry-meta {
		padding-right: 30px;
		padding-left: 30px;
  		/*+++ Kabekin Add 20150328 横幅縮小時の記事背景色 */
		background-color: #fffff0;
	}
}
@media screen and (min-width: 1080px) {
	.search-box .search-field {
		width: 324px;
	}
	.site-content,
	.site-main .widecolumn {
		/*+++ Kabekin Modify サイズ変更 222px->300px */
		margin-left: 300px;
	}
	.site:before {
		/*+++ Kabekin Modify サイズ変更 222px->300px */
		width: 300px;
	}
	.search-box-wrapper,
	.featured-content {
		/*+++ Kabekin Modify サイズ変更 222px->300px */
		padding-left: 300px;
	}
	#secondary {
        /*+++ Kabekin Modify 20150323 サイドバーの横幅を260pxに変更 */
		width: 260px;
	}
	.secondary-navigation,
	.secondary-navigation ul ul {
		/*+++ Kabekin Modify サイズ変更 222px->300px */
		width: 300px;
	}
	.full-width .archive-header,
	.full-width .comments-area,
	.full-width .image-navigation,
	.full-width .page-header,
	.full-width .page-content,
	.full-width .post-navigation,
	.full-width .site-content .entry-header,
	.full-width .site-content .entry-content,
	.full-width .site-content .entry-summary,
	.full-width .site-content footer.entry-meta {
		margin-right: auto;
		/*+++ Kabekin Add 20150325 コンテンツエリア色追加 #fffff0 */
		background-color: #fffff0;
	}
/*+++ Kabekin Add 20150323 検索窓色変更&文字サイズを大きく */
.primary-sidebar .widget input {
	background-color: #ffffff;
	border-color:#00ff00;
	color: #000000;
    font-size: 26px;
}
/*+++ Kabekin Add 20150325 引用部分に背景追加 */
/* テーマディレクトリのimages/postquote.png に画像をアップロード */
blockquote {
    border: 1px solid #E7E492;
    margin: 10px 10px 10px 50px;
    padding: 4px 4px 4px 41px;
    background-color: #F5F4D1;
    background-image: url("images/postquote.png");
    background-position: left top;
    background-repeat: no-repeat;
    overflow: auto;
    clear: both;
}

 

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください