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;
}