フォントを変えてみた

閲覧数: 33(12)

ネタ切れです。テーマ変更も時間が無くて手付かずです。イメージを変えるためにサイトで使用しているフォントを変更してみました。元々グーグルフォントを使用していたので、種類を変えただけですが、だいぶイメージが変わったと思います。やり方を簡単に説明すると、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閑話, 公開タグ
google fontsのlocal化
2017年10月20日

google fontsの使い方では「web fonts」の使い方を簡単に説明しました。結果的に以下  続きを読む

google fontsの使い方
blank
2015年7月14日

いろいろなところでお世話になっている、グーグルのリソース。これはフォント。google web fo  続きを読む

Death in Paradise
blank
2020年12月27日

イギリスBBC制作のテレビドラマ、邦題は何故か「ミステリーinパラダイス」。。。原題の「Death.  続きを読む

検索精度を高める
blank
2020年11月1日

検索ネタを連発するのはElasticsearchやElasticPressがバージョンアップした時の  続きを読む

EP日本語設定2020年版
blank
2020年10月29日

ElasticsearchをWordpressで利用するためのプラグインであるElasticPres  続きを読む

ElasticPress 3.5
blank
2020年10月22日

Elasticsearch用のプラグインであるElasticPressがメジャーバージョンアップ(3  続きを読む

コメントを残す

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