無料会員でCSSをどこまでいじれるのか試してみた

せっかくはてなブログに移転したので
CSSをいろいろいじいじしてみたい！と思いまして、
忘れないためにも何をしたかっていうのをメモしとこうと思います。

テーマの決定

いくつもあるデザインテーマの中から自分好みのテーマを選択できるんですが、今回このサイトのテーマは「Pathbook」というものにしました。

タイムライン風でスッキリ綺麗に仕上がっているのが好みです。
また、レスポンシブデザインにも対応していることが魅力的。

pathbook.hatenablog.com

テーマの詳細ページはこちら
Pathbook - テーマ ストア - はてなブログ

「続きを読む」ボタンのレイアウト

「続きを読む」のリンクがデフォルトだとただの文字リンクになって寂しい感じがしたので、見かけることの多いボタンチックな「続きを読む」にしたいと思います。

CSSの参考に、以下のサイトを参照させてもらいました。
シンプルで分かりやすい仕上がりになってるのがすごいです。

akiueo.hatenablog.com

a.entry-see-more{
    display: inline-block;
    width: 200px;　　　　　　　　←ボタンの幅
    height: 40px;
    text-align: center;
    text-decoration: none;
    font-weight:bold;
    outline: none;
    position: relative;
    background-color: #1abc9c;　　←通常時の色
    border-radius: 4px;
    color: #fff;
    line-height: 40px;
    -webkit-transition: none;
    transition: none;
    box-shadow: 0 3px 0 #0e8c73;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
a.entry-see-more::before,
a.entry-see-more::after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
}
a.entry-see-more,
a.entry-see-more::before,
a.entry-see-more::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}
a.entry-see-more:hover {
    background-color: #31c8aa;
    box-shadow: 0 3px 0 #23a188;
}
a.entry-see-more:active {
    top: 3px;
    box-shadow: none;
}

上は参考にさせていただいたサイトに記載されているCSSをそのまま添付していますが、矢印でごにょごにょ書いている部分についてちょこっといじりました。
「続きを読む」ボタンは、「.entry-see-more」のクラスをいじればいいのね。なるほど。

余裕があれば、全体の色味も考えながらカラー変更していきたいです。

フォントの変更

デフォルトのままでもいいんですけど、せっかくなので綺麗なフォント使ってみたい！ということで、変えてみました。

itkeijyoshilog.hatenablog.com

body {　　　←　※1
font: 16px/1.8 "游ゴシック", "YuGothic", "Yu Gothic", 'ヒラギノ角ゴ ProN W3', "Hiragino Kaku Gothic ProN", "Meiryo", Helvetica, Arial, sans-serif;
}
h1.entry-title a {
font: 18px/1.8 "游ゴシック", "YuGothic", "Yu Gothic", 'ヒラギノ角ゴ ProN W3', "Hiragino Kaku Gothic ProN", "Meiryo", Helvetica, Arial, sans-serif;
color: #00addd;
font-weight: bold;
} 

ここで、「Pathbook」のテーマでこれを設定すると問題が。
記事左に記事を書いた日付がついてるんですが、全体のフォントを変更してしまうせいで、ここの表示がずれてしまいます。

なので、とりあえずの案として、記事内の文字のみ反映させるようにしました。

.entry-content {　　← bodyではなくクラス名に変更
 font:(略)
}
(略)

引用文を引用文っぽく

おそらく引用文を書くときに使われるタグ blockquote の、「引用されてる感」をオシャレに出そうとしました。

引用タグをCSSとFont Awesomeでデザインしてみた - hatena chips

blockquote{
    background-color:#ddd;
    padding:1em;
    position:relative;
    z-index:1;
}
blockquote:before, blockquote:after{
    font-family:"FontAwesome";
    font-size:3em;
    line-height:1em;
    color:#fff;
    position:absolute;
    z-index:-1;
}
blockquote:before{
    content:"\f10d";
    left:5px;
    top:5px;
}
blockquote:after{
    content:"\f10e";
    right:5px;
    bottom:5px;
}

リンク先のサンプル２として挙げられている、背景にうっすら引用符マークがつくレイアウトにしました。

こんな感じになります。超おしゃれ。

とりあえず、以上の３つを適用させました。

細かくいうと、H3の見出しだったり、preタグ?の背景色をいじったりしてますが、簡単な内容なので割愛。また機会があればまとめたいと思います。

それより、その辺はいろいろいじいじしなくても、はてな記法で記述すれば結構いろんなことができそうな気がしないでもない...。内容が書きやすいっていいですね。また勉強してみます。