matsuko to 5fun

東京都世田谷のWEB屋さん・Ｂ面ブログ

HatenaBlog はじめのカスタム

Hatena Blog カスタマイズ

はてなブログ OPEN♪

用意されているデザインテーマを選んでそのまま使うのも･･･ということで、どのくらいカスタマイズできるのかな･･･という遊びも含めていじった段取りの備忘録。

 ◎レスポンシブ対応のデザインテーマも選べる。

テーマストア

こちらのデザインをベースにさせていただきました。

Material - テーマ ストア

 

◎選んだテーマをベースにCSSでカスタム

「デザイン」→「カスタム」→「デザインCSS」

※テンプレートによっては簡単なカスタム方法の説明も載っていてなかなか便利。

※あえてデザインCSSだけを使ったカスタムに統一しました。

 

◎タイトルフォントは、GoogleFontから「Cabin Sketch」。

<head>にソースを入れる箇所

「設定」→「詳細設定」→「headに要素を追加」

 

◎文章フォントは、手描き系「ふい字」さんを使ってみたい。

はてなの公式テーマにも使われているので、はてなサーバにフォルダがあがっているだろうと思いつつも探すのは一苦労。

と思ったらデベロッパーツールで探したという貴重なブログが。なんて素晴らしい。

 

これを「デザインCSS」にコピペ。

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

 

あとは、ふい字にしたい箇所をCSSで指定。
このブログでは、見出しと文章テキストに適用したいので、こんな感じ。

p,h1 {
font-family: 'HuiFontP109', sans-serif;
}

 

 ひとまず。

 

 

HOME