質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.75%

  • WordPress

    6644questions

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

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 983

sori-

score 29

現在「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; }
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/10/28 02:38

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

    キャンセル

  • sori-

    2017/10/28 02:41

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

    キャンセル

回答 1

checkベストアンサー

+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/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/28 01:57

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

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

    キャンセル

  • 2017/10/28 02:13

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

    キャンセル

  • 2017/10/28 02:15

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.75%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • WordPress

    6644questions

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