はてなブログをマテリアルデザインっぽくするためのあれこれ

当ブログがオシャレになりました（強弁）。

とくにスマートフォン版のページは今まではてなブログのデフォルトほぼそのままだったので、相対的にかなりイイ感じになったと思います。

むろんこれはchocoxinaががんばってオシャレにしたわけではなく、先人が作ったテーマ（はてなブログには、体裁をがっつり変えるためのスキン変更みたいな機能があるのだ）をポチっと反映しただけなんですけれども。 http://blog.hatena.ne.jp/-/store/theme/8454420450093337097

とはいえ、ほんとうに「ただ反映しただけ」ではいくらか満足できない点があったので、そのへんの修正方法を備忘録がてら共有しようと思います。ブログデザインでGoogle信仰を表明したい方は参考にしてください。

記載のない場合、はてなブログのダッシュボードから「デザイン→カスタマイズ→デザインCSS」と遷移して、表示されるテキストボックスの最下部にコードを突っ込めばいいようになっているはずです。

不具合修正

デフォルトの状態だと、ページ下部に表示される「前へ・次へ」のボタンがどうも反応しにくかったので、頑張って直しました。そのついでによりボタンっぽい感じに。

/*pagerの修正・変更*/
.pager{
    width:100%;
    display: flex;
    align-items: stretch;
    justify-content: space-between ;
}
.pager .pager-prev {
    background: #607D8B;
    display:block;
    float: left;
    text-align: center;
    width: 47%;
    box-shadow: 0 3px 5px rgba(0,0,0,0.3);
    border-radius: 2px;
    order:0;
}
.pager .pager-prev a{
    display: block;
    padding:0 0.5em;
    color:#fff;
    height:100%;
    transition: .3s ease-out;
}

.pager-prev a:before {
    padding-top: 10px;
}
.pager-prev a:hover{
    color:#fff;
    box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.pager .pager-next {
    background: #607D8B;
    display:block;
    float: right;
    text-align: center;
    width: 47%;
    box-shadow: 0 3px 5px rgba(0,0,0,0.3);
    border-radius: 2px;
    order:1;
}
.pager .pager-next a{
    display: block;
    padding:0 0.5em;
    color:#fff;
    height:100%;
    transition: .3s ease-out;
}
.pager-next a:before {
    padding-top: 10px;
}
.pager-next a:hover{
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

ただボタンの利きを直すだけなら↓のみでも。

/*pagerの不具合修正*/
.pager .pager-prev a{
    display: block;
}
.pager .pager-next a{
    display: block;
}

あと、ページタイトルがなぜかやや右に寄せてあり、とくにスマホで見ると違和感があったのでこちらも修正。

/*なぜかページタイトルがやや右に寄せてあるのを修正*/
.header-image-enable #title, .header-image-enable #blog-description {
     padding-left: 0px;
}

各所をマテリアルデザインに合わせる

せっかくブログ全体がマテリアルデザインになったので、準拠していないいろんな部分も体裁を合わせよう。

/*twitter埋め込みもマテリアルデザインっぽく*/
.twitter-container {
    display: block;
    border:1px solid #dde5e8;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    border-radius: 2px;
}
/*最上部に出てくるヘッダに影をつける*/
#globalheader-container{
    box-shadow:0 5px 10px rgba(0,0,0,0.24);

※twitter埋め込みについては、サイドバーに埋め込んだコードを以下で囲む作業が必要。

<div id="twitter-container">～</div>

あとヘッダにつけた影がスマホ版だと反映されないんですが、たぶんはてなブログpro向けの諸々の兼ね合いっぽいので諦めました。

その他調整

このテーマが反映されたブログをスマホで見ると、どうもヘッダー画像がでかすぎるというか、ファーストビューで記事本文が見えないのが気に入らなかったので、ちょっとおとなしくしました。before画像も用意せず何言ってるんでしょうね。

/*ヘッダ画像の表示領域をおとなしくする*/
.header-image-enable #blog-title #blog-title-inner {
    margin: 0 0 -1em;
    padding: 0 0 6em;
}

さいごに

とってもオシャレになったchocoxinaのover140を引き続きご愛顧下さい。