Q&A
WP初心者です。的外れな質問かもしれないですが教えて頂けるととありがたいです。
よろしくお願いいたします。
＜環境＞
パソコン：mac ver10.13.6
ブラウザ：google chrome ver72.0.3626.121
ワードプレス：ver5.1.1–ja
上記のツールをMAMP ver5.3を使いローカル環境にてWPを勉強しています。
書籍：WordPressレッスンブックHTML5&CSS3準拠を参考書に進めています。
書籍に添付されていた以下のindex.phpとstyle.cssでなんとなくのカタチは
表示されたのですが、体裁を変更（正確には記事タイトルのフォントの大きさ）しようと
style.cssの23行目のfont-size: 32px;を64pxにしてブラウザ上で確認しても
反映されていないのは、何か原因があるのでしょうか？
一応はわかる範囲で初歩的な保存の確認やリロードなどはしましたが
やはり反映されていないです。
ちなみにMAMP内のhtdocs→wp-content→themes→mytheme_02フォルダにある
style.cssをmi ver2.1.12r5で変更して保存しました。
記事タイトルのフォントだけでなく、様々な箇所に変更を加え、その反映具合をみて
どこを変えるとどう変わるのかといったところを覚えようとしています。
以下にindex.phpとstyle.cssのソースを掲載しています。
まずは記事タイトルのフォントを変更して反映させるには、どのような手順が
必要なのか教えてください。
初めての質問で、このような質問の仕方でいいか分かりませんが
教えていただける方がおられましたらよろしくお願いいたします。
＜index.php＞
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title><?php bloginfo( 'name' ); ?><?php wp_title(); ?></title> <link href='http://fonts.googleapis.com/css?family=Acme' rel='stylesheet' type='text/css'> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet"> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <header> <div class="siteinfo"> <div class="container"> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1> <p><?php bloginfo( 'description' ); ?></p> </div> </div> </header> <div class="container"> <?php if(have_posts()): while(have_posts()): the_post(); ?> <article <?php post_class(); ?>> <?php if( is_single() ): ?><?php else: ?><h1><?php the_title(); ?></h1>
<?php endif; ?> <div class="postinfo"> <time datetime="<?php echo get_the_date( 'Y-m-d' ) ?>"> <i class="fa fa-clock-o"></i> <?php echo get_the_date(); ?> </time><h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
</div> <?php the_content(); ?> <?php if( is_single() ): ?> <div class="pagenav"> <span class="old"> <?php previous_post_link( '%link', '<i class="fa fa-chevron-circle-left"></i> %title' ); ?> </span><span class="postcat"> <i class="fa fa-folder-open"></i> <?php the_category( ', ' ); ?> </span>
</div> <?php endif; ?> </article> <?php endwhile; endif; ?> <?php if ( $wp_query->max_num_pages > 1 ): ?> <div class="pagenav"> <span class="old"> <?php next_posts_link( '<i class="fa fa-chevron-circle-left"></i> 古い記事' ); ?> </span><span class="new"> <?php next_post_link( '%link', '%title <i class="fa fa-chevron-circle-right"></i>' ); ?> </span>
</div> <?php endif; ?> </div> <!-- container --> <footer> <div class="container"> <small>Copyright © <?php bloginfo( 'name' ); ?></small> </div> </footer> <?php wp_footer(); ?> </body> </html><span class="new"> <?php previous_posts_link( '新しい記事 <i class="fa fa-chevron-circle-right"></i>' ); ?> </span>
＜style.css＞
@charset "UTF-8";
/*
Theme Name: MY THEME (Chapter 2)
Author: TRAVEL SKETCH
Description: This is my original theme.
Version: 1.0
*/
body {margin: 0;
font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif}
.container {max-width: 650px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px}
/* 記事 */
article {margin-bottom: 40px;}
article h1 {margin: 0;
font-size: 32px;
font-weight: normal}
article h1 a {color: #000000;
text-decoration: none}
/* 記事の付加情報 */
.postinfo {margin-top: 15px;
font-size: 14px}
.postinfo a {color: #000000;
text-decoration: none}
.postinfo .postcat {margin-left: 20px}
.postinfo i {color: #888888}
/* 前後の記事へのリンク */
.pagenav a {padding: 5px 10px;
border: solid 1px #cccccc;
border-radius: 10px;
color: #666666;
font-size: 12px;
text-decoration: none}
.pagenav .old a {float: left}
.pagenav .new a {float: right}
.pagenav {overflow: hidden;
margin-top: 40px;
margin-bottom: 40px}
/* ヘッダー */
header {margin-bottom: 40px;
background-color: #4a5f7e;
color: #ffffff}
header a {color: #ffffff;
text-decoration: none}
.siteinfo {overflow: hidden;
padding-top: 14px;
padding-bottom: 14px}
.siteinfo h1 {
float: left;
margin: 0;
font-family: 'Acme', sans-serif;
font-size: 20px}
.siteinfo p {float: right;
margin: 0;
margin-top: 5px;
font-size: 12px}
/* フッター */
footer {margin-top: 40px;
padding-top: 14px;
padding-bottom: 14px;
background-color: #4a5f7e;
color: #ffffff}
回答1件
0
ベストアンサー
webブラウザ上で「ソースの表示」などして、
font-sizeを書き換えたという箇所、
article要素の中にあるh1要素を指定しているので、
htmlがそうなっているかどうかを点検してください。
また、webブラウザの「開発ツール」とか「デベロッパーツール」など使い、
本当に変更したい箇所のhtml構造を確認した上で、
スタイルシートを調整してみてください。
投稿2019/03/20 09:46
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/20 10:33
退会済みユーザー
2019/03/20 10:41 編集
2019/03/20 11:19
退会済みユーザー
2019/03/20 11:33
2019/03/20 12:00