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