【初心者〜中級者向け】はてなブログ絶対にやった方が良いカスタマイズ集!
今回ははてなブログ絶対にやった方が良いカスタマイズ集!
です。
CSSの説明やどこに入力するなどの基本的な事は省略します。
1.右上の「読者になる」ボタン非表示
ヘッダーの右上にある読者になる。
雰囲気が悪くなるので
消してしまいましょう!
このコードをデザインCSSに入力!
2.星の見た目をカスタマイズ
大抵にブログでつけられるhatenaスター
その見た目をカスタマイズします
CSSはこちら
.hatena-star-container { padding-top: 5px; padding-bottom: 5px; } .hatena-star-container a { display: inline-block; vertical-align: bottom; width: 32px; height: 60px; margin: 2px; line-height: 1; position: relative; } .hatena-star-container .hatena-big-star-star-container { width: 18px; height: 18px; left: 50%; margin: 0 0 0 -10px; position: relative; background: #ffffff !important; border: 1px solid #cccccc !important; overflow: visible; } .hatena-star-container .hatena-big-star-star-container:after, .hatena-star-container .hatena-big-star-star-container:before { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .hatena-star-container .hatena-big-star-star-container:after { border-color: rgba(255, 255, 255, 0); border-top-color: #ffffff; border-width: 3px; margin-left: -3px; } .hatena-star-container .hatena-big-star-star-container:before { border-color: rgba(255, 255, 255, 0); border-top-color: #cccccc; border-width: 4px; margin-left: -4px; } .hatena-star-container .hatena-big-star-star-container > .hatena-star-star { background: transparent; position: absolute; top: 0; left: 0; padding: 4px!important; } .hatena-star-container .hatena-star-user { width: 32px; height: 32px; margin-left: -16px; position: absolute; top: 27px; left: 50%; max-width: inherit; border-radius: 16px; background: #fff; }
説明は省略します
3.はてなブログヘッダー&フッダーのカスタマイズ
#globalheader-container{ display:none; } #footer{ display:none; }
4.はてなブログ文字を大きくするカスタマイズ
.entry-content {
font-size:19px;
}
今回はこの辺で