質問編集履歴

1 記載URL、使用WordPressテーマのリンク追加

tuckQ

tuckQ score 64

2017/08/19 21:24  投稿

子テーマのCSSが部分的に反映されない。
###前提
- WordPressのwriteeというテーマを使用しております。
- WordPressの[writee](https://ja.wordpress.org/themes/writee/)というテーマを使用しております。
- 子テーマでCSS設定しても部分的に反映されないスタイルがあります。
- ソースを確認したところ「親スタイル→子スタイル→親スタイル→その他のスタイル」のような順でCSSが当たっていることがわかりました。
###実現したいこと
子スタイルが一番最後に当たるスタイルになるようにしたいです。
###発生している問題・エラーメッセージ
ソースのCSS書き出し順は以下のような感じです。
```
<link rel='stylesheet' id='parent-style-css' href='http://xxx.jp/wp/wp-content/themes/writee/assets/css/style-ltr.css?ver=4.8.1' type='text/css' media='all' />
<link rel='stylesheet' id='child-style-css' href='http://xxx.jp/wp/wp-content/themes/writee-child/assets/css/style-ltr.css?ver=4.8.1' type='text/css' media='all' />
<link rel='stylesheet' id='WRT-style-css' href='http://xxx.jp/wp/wp-content/themes/writee/style.css?ver=4.8.1' type='text/css' media='all' />
<link rel='stylesheet' id='WRT-main-style-css' href='http://xxx.jp/wp/wp-content/themes/writee/assets/css/style-ltr.css?ver=4.8.1' type='text/css' media='all' />
<link rel='stylesheet' id='parent-style-css' href='http://example.com/wp/wp-content/themes/writee/assets/css/style-ltr.css?ver=4.8.1' type='text/css' media='all' />
<link rel='stylesheet' id='child-style-css' href='http://example.com/wp/wp-content/themes/writee-child/assets/css/style-ltr.css?ver=4.8.1' type='text/css' media='all' />
<link rel='stylesheet' id='WRT-style-css' href='http://example.com/wp/wp-content/themes/writee/style.css?ver=4.8.1' type='text/css' media='all' />
<link rel='stylesheet' id='WRT-main-style-css' href='http://example.com/wp/wp-content/themes/writee/assets/css/style-ltr.css?ver=4.8.1' type='text/css' media='all' />
<style type="text/css">.entry-content a,a:active, a:focus, a:hover{color:#bf9e3b}.social-navigation.theme-colors,
       .comments-area .comments-list .comment .comment-meta .comment-header .comment-reply,
       .entry .entry-header .entry-meta .entry-cat,
       .entry .entry-quote-author,
       .widget.widget_recent-post .entry-list .entry .entry-meta .entry-cat,
       .widget.widget_popular-post .entry-list .entry .entry-meta .entry-cat,
       .widget.widget_posts .entry-list .entry .entry-meta .entry-cat,
       .widget.widget_recent_posts .entry .entry-meta .entry-cat,
       .widget.widget_related_posts .entry .entry-meta .entry-cat,
       .widget.widget_categories ul li a:hover,
       .widget.widget_product_categories ul li a:hover,
       .widget.widget_archive ul li a:hover,
       .widget.widget_archives ul li a:hover,
       .widget.widget_twitter .tweets-list .tweet a,
       .widget.widget_recent_comments .recentcomments span a{ color :#bf9e3b}.widget.widget_categories ul li a:before,
       .widget.widget_product_categories ul li a:before,
       .widget.widget_archive ul li a:before,
       .widget.widget_archives ul li a:before
       .widget.widget_archives ul li a:before {background-color: #bf9e3b }.widget.widget_tag_cloud .tagcloud a:hover {
           color:#bf9e3b;
           border-color:#bf9e3b}.pace-running .pace{background-color:#ffffff;}
   .pace-done .pace{background-color:transparent;}
   .pace {
     -webkit-pointer-events: none;
     pointer-events: none;
     -webkit-user-select: none;
     -moz-user-select: none;
     user-select: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index:9999;
     -webkit-transform: translate3d(0, -50px, 0);
     -ms-transform: translate3d(0, -50px, 0);
     transform: translate3d(0, -50px, 0);
     -webkit-transition: -webkit-transform .5s ease-out;
     -ms-transition: -webkit-transform .5s ease-out;
     transition: transform .5s ease-out;
   }
   .pace.pace-active {
     -webkit-transform: translate3d(0, 0, 0);
     -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
   .pace .pace-progress {
     display: block;
     position: fixed;
     z-index: 2000;
     top: 0;
     right: 100%;
     width: 100%;
     height: 5px;
     background:#bf9e3b;
     pointer-events: none;
   }
  </style><script>
   var RTL = false;
   </script><style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
   html { margin-top: 32px !important; }
   * html body { margin-top: 32px !important; }
   @media screen and ( max-width: 782px ) {
       html { margin-top: 46px !important; }
       * html body { margin-top: 46px !important; }
   }
</style>
```
こテーマのfunction.phpには下記のように記述しております。
###該当のソースコード
```ここに言語を入力
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/assets/css/style-ltr.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/assets/css/style-ltr.css',
array('parent-style')
);
}
```
  • WordPress

    15695 questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る