子テーマ – トモデジ tomodigi.com https://tomodigi.com デジタルもアナログも Wed, 15 Oct 2014 13:24:06 +0000 ja hourly 1 https://wordpress.org/?v=6.8.3 WordPress 標準テーマ Twenty Fourteen の色を変更する https://tomodigi.com/web/wordpress/wordpress-%e6%a8%99%e6%ba%96%e3%83%86%e3%83%bc%e3%83%9e-twenty-fourteen-%e3%81%ae%e8%89%b2%e3%82%92%e5%a4%89%e6%9b%b4%e3%81%99%e3%82%8b/ https://tomodigi.com/web/wordpress/wordpress-%e6%a8%99%e6%ba%96%e3%83%86%e3%83%bc%e3%83%9e-twenty-fourteen-%e3%81%ae%e8%89%b2%e3%82%92%e5%a4%89%e6%9b%b4%e3%81%99%e3%82%8b/#respond Wed, 15 Oct 2014 19:10:22 +0000 http://www.tomodigi.com/?p=2332 続きを読む WordPress 標準テーマ Twenty Fourteen の色を変更する →]]> WordPressである標準テーマ「Twenty Fourteen」はレスポンシブル対応で使いやすいテーマです。そのまま使ってもよいのですが、ワンポイントの色を変更するために子テーマを作りました。

緑系の2色を赤系の2色に変更しています。文字で使っているはっきりした赤の#C2002Aと薄いピンク系の#C45A72をそれぞれ青と水色などとしても使えると思います。

子テーマは、テーマで使用されているファイルを置き換えたり追加したりするもので、親テーマが更新されても上書きされません。

使い方は以下のコードをwordpressディレクトリ内のwp-contents/themes/にtwentyfourteen_childというディレクトリを作成し、style.cssとして保存するだけです。

子テーマのスタイルシートは親テーマの後に読み込まれ、子テーマに記述のある項目のみを再設定することで、部分的な色の変更を実現しています。

以下がstyle.cssの内容です。

/*
Theme Name: Twenty Fourteen Child
Template: twentyfourteen
twentyfourteen子テーマ

tomodigi.com
*/

@import url('../twentyfourteen/style.css');

/* 検索トグルの背景色を変更する */
.search-toggle {
background-color: #C2002A;
}
.search-toggle:hover,
.search-toggle.active {
background-color: #C45A72;
}

/*テキストリンクの色 */
a {
color: #C2002A;
}

a:active,a:hover {
color: #C45A72;
}

/* メインサイドバーのウィジェットの色を変更する */
.widget a {
color: #C2002A;
}
.widget a:hover {
color: #C45A72;
}

/* コンテンツサイドバーのウィジェットの色を変更する */
.content-sidebar .widget a {
color: #C2002A;
}
.content-sidebar .widget a:hover {
color: #C45A72;
}

/* ページネーションの色を変更する */
.paging-navigation .page-numbers.current {
border-top: 5px solid #C2002A;
color: #C2002A;
}
.paging-navigation a:hover {
border-top: 5px solid #C45A72;
color: #C45A72;
}

/* ポストナビゲーションの色を変更する */
.post-navigation a:hover,
.image-navigation a:hover {
color: #C45A72;
}

/* Buttonsの色を変更する */
button,
.contributor-posts-link,
input[type="button"],
input[type="reset"],
input[type="submit"] {
background-color: #C2002A;
}

button:hover,
button:focus,
.contributor-posts-link:hover,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
background-color: #C45A72;
color: #fff;
}

/* Calendar Widget*の色を変更する/

.widget_calendar tbody a {
background-color: #C2002A;
color: #fff;
display: block;
}

.widget_calendar tbody a:hover {
background-color: #C45A72;
}

/* テキスト選択時の色
*/
::selection {
background: #c45a72;
color: #fff;
text-shadow: none;
}

::-moz-selection {
background: #c45a72;
color: #fff;
text-shadow: none;
}

]]> https://tomodigi.com/web/wordpress/wordpress-%e6%a8%99%e6%ba%96%e3%83%86%e3%83%bc%e3%83%9e-twenty-fourteen-%e3%81%ae%e8%89%b2%e3%82%92%e5%a4%89%e6%9b%b4%e3%81%99%e3%82%8b/feed/ 0