ふい字を表示できるようにしたみた

f:id:tsukisai:20210110105827g:plain 最近目にしたテーマにふい字が使われていたので、表示できるように設定してみました。

参考サイト
まず始めにやること
ブログのどの部分をふい字にするのか設定
ボックスで囲んだ部分をふい字に変更

参考サイト

まずは参考にさせて頂いたサイト。
f:id:tsukisai:20200521113204g:plain 【常時SSL化対応】はてなブログのタイトルを手書き風フォント「ふい字」にカスタマイズしてほっこりする作戦＋追記 - 自由ネコ
黒板風囲み枠CSSでブログの解説記事をまとめよう - Minimal Green
はてなブログでふい字が使えたのでメモ風cssを作ってみた – FOXISM
f:id:tsukisai:20200521113204g:plain CSSでwebフォントの読み込みが遅い問題を改善する方法 - Qiita

まず始めにやること

上記サイトの「自由ネコ」さんにも書かれていますが、ネット上にあるふい字データを自分のブログに引っ張っておく必要があります。そこで、CSS内にふい字を引っ張れるように設定しておきます。

デザイン→カスタマイズ→｛｝デザインCSSを開き、以下のコードを貼り付けます。

@font-face {
font-family: 'HuiFontP109';
src:url('/fonts/public/HuiFont/HuiFontP109.eot');
src:url('/fonts/public/HuiFont/HuiFontP109.eot?#iefix') format('embedded-opentype'),
url('/fonts/public/HuiFont/HuiFontP109.woff')format('woff'),
url('/fonts/public/HuiFont/HuiFontP109.ttf')format('truetype'),
url('/fonts/public/HuiFont/HuiFontP109.svg#HuiFontP109') format('svg');
font-weight: normal;
font-style: normal;
}

貼り付けたら、「変更を保存」ボタンをクリック。

ブログのどの部分をふい字にするのか設定

ふい字に変更する箇所の設定を行います。ブログタイトル、ブログの説明文、記事本文、引用文などなど。

ブログタイトルをふい字に変更

#title a {
font-family: 'HuiFontP109', sans-serif;
}

ブログの説明文をふい字に変更

#blog-description {
font-family: 'HuiFontP109', sans-serif;
}

記事本文

.entry-content p {
font-family: 'HuiFontP109', sans-serif;
}

上記のように、ふい字に変更する箇所のコードをCSSに書き込みます。

ふい字はファイルサイズが大きいので、環境にもよりますが、記事全てをふい字にするとサイトが開くのに時間がかかる場合もあり、使用する場合は注意が必要のようです。

ボックスで囲んだ部分をふい字に変更

このブログでは、ボックスで囲んだ文字をふい字にする設定をしました。
現在3つのボックスデザインを使用していますが、その中のタイトル付きボックスにふい字バージョンを追加したかたちになります。

今までのパターン

囲むテキストはここ

ふい字に変更したもの

囲むテキストはここ

今まで使用していたコードに赤字部分を変更又は書き加えて、CSSに記述します。

.box4{
font-family: HuiFontP109, sans-serif;
position: relative;
background-color: #fff; / 背景色 /
border: 1px solid #ccc; / 線の太さ・種類・色 /
box-shadow:1px 1px 6px 0px #ccc;
-moz-box-shadow:1px 1px 6px 0px #ccc;
-webkit-box-shadow:1px 1px 6px 0px #ccc;
-o-box-shadow:1px 1px 6px 0px #ccc;
margin: 20px 5px; / 外側の余白上下・左右 /
padding: 30px 20px 20px 20px; / 内側の余白上・右・下・左 /
position: relative;
z-index: 0;
}
.box4 .box-title{
background-color: #d9ccb3; / マステ部分の色1 /
background-image: linear-gradient(45deg, #dfd4be 25%, transparent 25%, transparent 75%, #dfd4be 75%, #dfd4be), linear-gradient(45deg, #dfd4be 25%, transparent 25%, transparent 75%, #dfd4be 75%, #dfd4be); / マステ部分の色2 / background-position: 0 0, 12px 12px;
background-size: 24px 24px;
border-left: 2px dotted rgba(255,255,255,0.9);
border-right: 2px dotted rgba(255,255,255,0.9);
box-shadow: 0 0 5px rgba(255,255,255,0.5);
display: block;
margin: 0 0 10px 0;
padding: 5px 20px;
color: #fff; / マステ部分文字色 / text-align: center;
position: absolute;
top: -10px;
left: 20px;
transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
}
.box4 p {
font-size: 120%;
color: #65513f;
padding: 10px;
}

上記コード内でやったこと
f:id:tsukisai:20200521112937g:plain .boxの後ろに来る数字を元のものと違うものにした。
これはべつに数字である必要はないので、自分でわかりやすい英数字でOK。
font-family: HuiFontP109, sans-serif;を書き加えた。