独自CSSをWordPressのソースに追加
dukehideこのカスタマイズですが、テーマ毎に追加修正しなければならないという点がちょっと面倒です。
しかしCSSファイルをエディタ等で気軽に編集できるので便利…といえば便利かもしれませんが、問題もあります。
例として「twentysixteen」を挙げてみます。
→ wordpress/wp-content/themes/twentysixteen
twentysixteenディレクトリ直下にCSSファイルを置いても大丈夫ですが、新たにディレクトリ(custom)を作成して、そこにファイルを置くことにします。
オリジナルCSSファイル置き場のディレクトリを作成
→ wordpress/wp-content/themes/twentysixteen/custom
（例）
wordpress/wp-content/themes/twentysixteen/custom/dukehide.css
border-style: solid;
border-width: 1px;
padding: 8px 10px 8px 15px;
border-color: #e7e7ff;
color: #101013;
background-color: #ffd700;
font-family: sans-serif;
border-radius: 10px;
}
wordpress/wp-content/themes/twentysixteen/header.php に記載
21行目辺り
：
（略）
：
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php endif; ?>
<?php wp_head(); ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/custom/dukehide.css" type="text/css" />
</head>
：
（略）
：
wordpress/wp-content/themes/twentysixteen/functions.php に記載
240行目辺り
function twentysixteen_scripts() {
：
（略）
：
// Theme stylesheet.
wp_enqueue_style( 'twentysixteen-style', get_stylesheet_uri() );
// Custom stylesheet.
wp_enqueue_style( 'twentysixteen-style-custom', get_template_directory_uri() . '/custom/dukehide.css', array(), '1.0' );
：
（略）
：
}
方法1、2どちらでも可。あとはCLASS指定をすればOK。
（例）
文字列
</div>
本来はCSSカスタマイズ用のページがあるので、そちらに直接記載していくのが正しいやり方っぽいです。
また上記のようなカスタマイズは、テーマアップデート後に再度記述し直すという欠点があるので、正直オススメは出来ません (^^;)
じゃあ何故こんな面倒なことをやったのか？ と言われたら、単に自宅サーバーのメリットを活かした…と言ったところでしょうか。
Follow me!
