読者です 読者をやめる 読者になる 読者になる

pblog

pplog.net を作っている @ppworks こと越川直人(Koshikawa Naoto)のブログ。esa LLCで働いてます(\\( ⁰⊖⁰)/)

hatenablogでinuiconを使う

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;
}