pplogで使われているinuiconフォントを使えるようにしました 以下がポイント
/* inuicon */ @font-face { font-family: 'inuicon'; src:url('https://github.com/taea/inuicon/raw/master/fonts/inuicon.eot?-k8ef5i'); src:url('https://github.com/taea/inuicon/raw/master/fonts/inuicon.eot?#iefix-k8ef5i') format('embedded-opentype'), url('https://github.com/taea/inuicon/raw/master/fonts/inuicon.woff?-k8ef5i') format('woff'), url('https://github.com/taea/inuicon/raw/master/fonts/inuicon.ttf?-k8ef5i') format('truetype'), url('https://github.com/taea/inuicon/raw/master/fonts/inuicon.svg?-k8ef5i#inuicon') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { font-family: 'inuicon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Enable Ligatures ================ */ -webkit-font-feature-settings: "liga"; -moz-font-feature-settings: "liga=1"; -moz-font-feature-settings: "liga"; -ms-font-feature-settings: "liga" 1; -o-font-feature-settings: "liga"; font-feature-settings: "liga"; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-piyo:before { content: "\e608"; } .icon-egg:before { content: "\e609"; } .icon-tori-atama:before { content: "\e60a"; } .icon-tori-home:before { content: "\e60b"; } .icon-nena:before { content: "\e605"; } .icon-fish:before { content: "\e601"; } .icon-fish-bone:before { content: "\e602"; } .icon-shachihoko:before { content: "\e603"; } .icon-shrimp:before { content: "\e604"; } .icon-bone:before { content: "\e600"; } .icon-mola:before { content: "\e000"; } .icon-footprint:before { content: "\e001"; } .icon-niku:before { content: "\e606"; } .icon-pplog:before { content: "\e607"; } /* inuicon */
他にもついでにデザイン変更をしまいた。
- 記事の幅を広げる
- 日付の位置調整
- 日付のフォント調整
- 記事タイトルに肉球つける
- 本文の文字色を調整
とかとか。 それらのcssを合わせたものがこれ。
@import url(https://fonts.googleapis.com/css?family=Varela+Round); /* <system section="theme" selected="alpha2"> */ @import "/css/theme/alpha2/alpha2.css"; /* </system> */ /* <system section="background" selected="fff"> */ body{ background:#fff;} /* </system> */ /* inuicon */ @font-face { font-family: 'inuicon'; src:url('https://github.com/taea/inuicon/raw/master/fonts/inuicon.eot?-k8ef5i'); src:url('https://github.com/taea/inuicon/raw/master/fonts/inuicon.eot?#iefix-k8ef5i') format('embedded-opentype'), url('https://github.com/taea/inuicon/raw/master/fonts/inuicon.woff?-k8ef5i') format('woff'), url('https://github.com/taea/inuicon/raw/master/fonts/inuicon.ttf?-k8ef5i') format('truetype'), url('https://github.com/taea/inuicon/raw/master/fonts/inuicon.svg?-k8ef5i#inuicon') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { font-family: 'inuicon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Enable Ligatures ================ */ -webkit-font-feature-settings: "liga"; -moz-font-feature-settings: "liga=1"; -moz-font-feature-settings: "liga"; -ms-font-feature-settings: "liga" 1; -o-font-feature-settings: "liga"; font-feature-settings: "liga"; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-piyo:before { content: "\e608"; } .icon-egg:before { content: "\e609"; } .icon-tori-atama:before { content: "\e60a"; } .icon-tori-home:before { content: "\e60b"; } .icon-nena:before { content: "\e605"; } .icon-fish:before { content: "\e601"; } .icon-fish-bone:before { content: "\e602"; } .icon-shachihoko:before { content: "\e603"; } .icon-shrimp:before { content: "\e604"; } .icon-bone:before { content: "\e600"; } .icon-mola:before { content: "\e000"; } .icon-footprint:before { content: "\e001"; } .icon-niku:before { content: "\e606"; } .icon-pplog:before { content: "\e607"; } /* inuicon */ body { color: #666666; background-color: #f2eff0; } a { color: #0077ac; } a:visited { color: #0077ac; } aside a { color: #86a1a8; font-size: 12px; } aside a:visited { color: #6197aa; } .hatena-module-title { font-family: "Varela Round", "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif; font-style: normal; font-weight: 800; color: #cec8c8; } #blog-title { font-family: "Varela Round", "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif; font-style: normal; font-weight: 900; text-align: left; margin-bottom: 60px; } #blog-title h1 { font-size: 24px; font-weight: 800; letter-spacing: -2px; padding: 0 0 0 30px; } #blog-title h1 a { color: #cec8c8; } header h2 { padding-left: 31px; color: #cec8c8; } #container { width: 1060px; background-color: #f2eff0; } #main { width: 830px; } #wrapper { width: 860px; } #box2 { width: 140px; } .entry-title { font-size: 160%; line-height: 1.5; margin-bottom: 30px; } .entry-title:before { font-family: 'inuicon'; speak: none; font-size: 16px; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; content: "\e001"; color: #0077ac; } .entry-content { font-size: 16px; line-height: 1.8; } .entry-content img { max-width: 768px; } .date { font-family: "Varela Round", "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif; font-size: 38px; font-style: normal; font-weight: 800; border-right-style: none; position: static; width: 300px; margin-bottom: 5px; } .date a { color: #cec8c8; } pre { font-size: 11px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background-color: #f8f8f8; padding: 12px; }