フォントを変えてみた

ネタ切れです。テーマ変更も時間が無くて手付かずです。イメージを変えるためにサイトで使用しているフォントを変更してみました。元々グーグルフォントを使用していたので、種類を変えただけですが、だいぶイメージが変わったと思います。やり方を簡単に説明すると、WordPress管理画面の外観「カスタマイズ」からテーマの「追加CSS」を選び「@import」でフォントを呼び出します。追加するコードはグーグルフォントのサイトで使いたいフォントを選択すると自動生成してくれるので、そのコードをコピペするだけでOKです。至れり尽くせりです。

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@300&display=swap');

使いたい要素の「font-family:」で「M PLUS 1p」を指定します。

.site-title,
.site-description {
    font-family: 'M PLUS 1p', sans-serif;
}

ヘッダーやフッター、メタ情報などで細かく要素指定するテーマだったので、一つ一つ「font-family」指定の変更が必要でした。結果はご覧の通りで、これまでの硬い雰囲気のフォントから、丸文字系のちょっと柔らかいフォントを使った事で、優しい雰囲気のサイトになりました、文字面だけですが。と安心したのも束の間、どこかに不具合が起きるのがお約束でして(笑)

今回は記事一覧のメタ情報に不具合発生です。「閲覧数: 38(1)」のように表示している部分が、フォントを変えただけなのに「閲覧数:」と「38(1)」で改行されてしまいました。パソコン上のブラウザでは再現せず、スマホやタブレット上のブラウザだけで再現するので気がつくのが少し遅れてしまいました。元々のメタ情報には閲覧数はなく、作成者とコメントを「/」で区切る仕様でした。その後方に閲覧数を追加したのですが、その際にコメント要素をクローズしていないことが原因でした。いつものことですが、分かって仕舞えば簡単な事でも調べている時は全く想像しない原因なので、一瞬諦めかけましたが、閃きに助けられました。下の7行目「span」要素がクローズされていないことが原因でしたので「/span」を追加することで無事解決出来ました。

<?php if ( ! is_single() && ! post_password_required() ) : ?>
    <footer class="entry-footer entry-meta">
        <?php fotografie_blog_entry_author(); ?>
        <?php if ( comments_open() || get_comments_number() ) :
            fotografie_blog_entry_comment(); ?>
        <?php endif; ?>
        <?php echo '<span class="comments-link"></span>'; ?>
        <?php pvc_post_views(); ?>
    </footer><!-- .entry-meta -->
<?php endif;