フォントを変えてみた

閲覧数: 65(0)

ネタ切れです。テーマ変更も時間が無くて手付かずです。イメージを変えるためにサイトで使用しているフォントを変更してみました。元々グーグルフォントを使用していたので、種類を変えただけですが、だいぶイメージが変わったと思います。やり方を簡単に説明すると、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」を追加することで無事解決出来ました。

カテゴリーIT閑話, 公開タグ,
今週のトップ10

前回の「閲覧数を記録してみる」で記事の閲覧記録を取ることには成功しましたが、このプラグインでは細かい  続きを読む

閲覧数を記録してみる
blank

いろいろ便利なプラグインがあるので、いくつか試してみて、最終的に採用したのが、Post Views  続きを読む

閃きは大事だw
blank

このサイトは、あくまでもCMSであるWordPressの構築やクラウドであるAWSの運用ノウハウ取得  続きを読む

Simple Author Box
blank

「この記事を書いた人」を表示するプラグイン。これまでは「Fancier Author Box」を使用  続きを読む

閲覧数まとめ
blank

閃きついでに総合計と週合計をフラグで制御する方式に変更してみた。これまではベタに関数をまるまるコピー  続きを読む

閲覧数の記録’18
blank

引き続き、新しいテーマのカスタマイズ対応です。今回は「閲覧数」です。過去記事「閲覧数を記録してみる」  続きを読む

スポンサーリンク

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください