WordPress 記事タイトルの文字の大きさ変更

Question

現在「Fukasawa」テーマを使用しています。
http://www.andersnoren.se/themes/fukasawa/
テーマの編集にて
style.cssで記事一覧のタイトルや記事詳細画面のタイトルを小さくしたいです。
しかし、postheaderの

/*  Post header  ----------------------------------------- */


.posts .featured-media + .post-header { margin-top: 16px; }

.posts .post-title {
	font-size: 1.25em;
	line-height: 120%;
	font-weight: 700;
	color: #333;
	word-break: break-word;
	-ms-word-break: break-word;
}

.posts .post-title a { color: #333; }
.posts .post-title a:hover { color: #019EBD; }

font-size: 1.25emを1pxや0.5emに変更したところで文字サイズが何も変更されません。

content.phpを見るかぎり、 <h2 class="post-title">と記載があるので、投稿のタイトルのclassはpost-titleという認識です。

<div class="post-container">

	<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	
		<?php if ( has_post_thumbnail() ) : ?>
		
			<a class="featured-media" title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>">	
				
				<?php the_post_thumbnail('post-thumb'); ?>
				
			</a> <!-- /featured-media -->
				
		<?php endif; ?>
		
		<?php 
			$post_title = get_the_title();
			if ( !empty( $post_title ) ) : 
		?>
					
			<div class="post-header">
				
			    <h2 class="post-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
			    	    
			</div> <!-- /post-header -->
		
		<?php endif; ?>
		
		<div class="post-excerpt">
		
			<?php /* the_excerpt(); */ ?>
		
		</div>
		
		<?php if ( empty( $post_title ) ) : ?>
			    
		    <div class="posts-meta">
		    
		    	<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_time(get_option('date_format')); ?></a>
		    	
	    	</div>
	    
	    <?php endif; ?>
	
	</div> <!-- /post -->

</div> <!-- /post-container -->

どなたか変更方法をご存知の方がいらっしゃればご教授いただけると幸いです。
宜しくお願いいたします。

-------追記-------

font-sizeを追加

.posts .post-title a { 
	color: #333;
	font-size: 1.5em;

}
.posts .post-title a:hover {
color: #019EBD; 
font-size: 1.5em;
}

font-sizeを0.5emへ変更

/* Post header  ----------------------------------------- */


.post.single .post-title {
	font-size: 0.5em;
	line-height: 120%;
	font-weight: 700;
	margin-bottom: 40px;
	word-break: break-word;
	-ms-word-break: break-word;
}

.post.single .post-title a { color: #333; }
.post.single .post-title a:hover { color: #019EBD; }

Comments

[kei344]

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

[sori-]

ご指摘いただきありがとうございます！解決済みにさせていただきました。ありがとうございます。

Answer 1

style.cssにて
記事一覧のタイトルは

.posts .post-title a { color: #333; }

記事詳細画面のタイトルは

.post.single .post-title {
font-size: 2em;
省略

を編集してみてください。
ブラウザの開発者ツールを使えば楽に調べられます。
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能
http://www.buildinsider.net/web/chromedevtools/01

Chromeに限らずIEやFirefoxでも使えますが個人的にはFirefoxが使いやすいかなぁと思います。

あと、管理画面からテーマを編集しないでFTPなどを使った方が良いです。

WordPressの管理画面からテーマを編集するのは危険！
https://bge.jp/wordpress-custom/

Comments

[sori-]

ご回答いただきありがとうございます！
デベロッパーツールや直接編集するのは危険とのこと、教えていただきありがとうございます。
貼っていただいた部分を変更し、追記に記載しました。
しかし、文字の大きさが変わらず、苦戦しています。

style.cssの他にfukasawa-editor-styles.cssというファイルがありました。
そちらの方が優先されているかな、とおもいのぞいて見ましたが上記のようなコードは見当たりませんでした。
何か別の原因の可能性をご存知ならご教授いただけると幸いです。
申し訳ございませんが宜しくお願いします。

[sori-]

デベロッパーツール上で直接
.posts .post-title a { color: #333; }を
.posts .post-title a {
color: #333;
font-size: 1.5em;
}
に直接変更し、サイズが変わることを確認できたのですが、テーマにそのまま反映させても文字の大きさは変わりませんでした・・・。

[sori-]

なんどもすみません！safariで開くと反映されました！！
キャッシュの問題だったんですね。。
色々勉強になりました。ありがとうございました。