メイケロのブログ

メイケロの自宅カフェ

自宅オフィスをカフェに改装しようとたくらむブログ

    f:id:meikellog:20181009134535p:plain
    改装中
    f:id:meikellog:20181009134535p:plain
    改装中
    f:id:meikellog:20181009134535p:plain
    改装中
    f:id:meikellog:20181009134535p:plain
    改装中

ブログのテーマ、フォントを変更(その2)。コピペ以外でフォントをいじるのは割に合わない。

 

先日、メイケロのブログのテーマ、フォントを変更しました。

 

meikellog.hatenablog.com

 

その時は、ほぼコピペで変更を完成させました。

 

もう少し調べて、(その2)としてwebでフォントを自由に使うためにはどうするかという解説を書くつもりでしたが、思いのほか大変で、断念しました。

 

 

まずは、前回コピペ参照した「ふい字」フォント設定の方法がこちらです。

 

gattolibero.hatenablog.com

 

解説通りに設定すれば、タイトルを「ふい字」フォントにできます。

最短にして、最速のフォント変更です。

 

巷(ちまた)では、自由に使えるフォントのデータがあふれています。

例えば、こんなものとか。

 

fontfree.me

 

こういったフォントをwebで使うためには、サーバー上において、都度、読み込まなければいけません。

 

上で紹介した「自由ネコ」さんの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;
}



/* ---------ブログの本文のフォントを変更------------ */
body {
    font-family: 'ヒラギノ丸ゴ Pro W4','ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Pro', メイリオ, Meiryo, 'MS Pゴシック', 'MS P', sans-serif;
}



/* ---------記事タイトルのフォントを変更------------ */
.entry-title {
font-family: 'Lucida Grande', Verdana, Arial, 'Hiragino Kaku Gothic Pro', Meiryo, メイリオ, sans-serif;
}



/* ---------ブログの見出しのフォントを変更------------ */
.entry-content h3{
font-family: 'Lucida Grande', Verdana, Arial, 'Hiragino Kaku Gothic Pro', Meiryo, メイリオ, sans-serif;
}

 

 データの上書きにはお気を付けください。あらかじめ、設定されている場合は、メモ帳などにバックアップを取ることをおすすめします。

 

P.S. はてなブログSSLに対応して、上記コードを修正しました。上記、自由ネコさんのブログにも記載のある通り、ふい字のリンク先から”http://hatenablog.com”の部分を全部で5ヶ所、削除しています。

(2018.4.10)

 

 

読んでくれてありがとうございます。よかったら読者登録をお願いします。