はてなブログだと簡単にデザインをリニューアルできたのでやったことをメモ

はじめに

　気づいた人もいるかと思いますが、ブログのデザインを久しぶりに変えてみました。むしろ気づかなかったらどうかしています。今までわけもわからずテンプレートからデザイン選択していたのですが、少し調べてみたらはてなブログだと結構簡単にデザインをカスタマイズできたのでやり方を書いておきます。主にデザイン戻せるようにするための自分へのメモです。

スクリーンショット

　こんな感じ。2014年はこれで行こうかなと思いますが、評判悪かったり気が変わったら1ヶ月くらいで変えるかもしれません。

きっかけ

　すけこむ(id:sukecom)さんという方のブログをたまたま拝見して「なにこのブログ、凄いステキデザイン！！」と胸がキュンキュンしてしまい、そうだ自分のブログの人気が無いのはデザインが原因だ、全て悪いのはデザインだというわけで、すかすかのコンテンツを棚上げしてデザインを弄りたいという衝動に駆られてしまったのです、ピュー（謎の効果音）。

　早速すけこむさんのブログの下記の記事とかみて見出しを弄ろうとしたのですが…大問題が発生、私かわいいアイコンのデザインとかできません！挫折、悔しいです！早くもピンチ！

はてなブログの見出しをオリジナル画像でカスタマイズしてみる - すけこむブログ

ちまちまとはてなブログのカスタマイズを進めています。今回ははてなブログの見出しを味気のあるデザインにしようと思い、オリジナルの画像を作成し、h3とh4のCSSを...

とにかくデザインかえるんじゃい！

　しかし一旦火がついたデザイン変えたい欲は止まりません。そうだ、はてなブログって全然デザインとかできないしCSSとか理解できない、もうわけわかんないというショボショボのクズみたいな人間にでも、簡単に見た目をかえることができたはず。
　そしてデザインセンスの固まりみたいな人、ファッションモンスターが生み出したおしゃれなブログのデザインのセットをテーマとして惜しげも無く無料で公開していたはず！（はてなブログのステマ）と思って探したら…ありました！！テーマストア！参ったかファッションモンスターども！！

テーマ ストア - はてなブログ

　とにかく人気あるテーマがきっと良いデザインなのだろうと思い人気テーマをクリック。Mistilteinn？？これだ！！と思いプレビューしてインストール。OK！！デザイン変更やったね！

Mistilteinn - テーマ ストア - はてなブログ

綺麗なジャイアン的な感じのテーマ。魔改造したい方は以下の記事を。はてなブログ...

カスタマイズ

　Mistilteinnのテーマを公開しているぷらち (id:platism)さんがカスタマイズ方法をブログ記事にして下さっているので色々カスタマイズしてみました。あんまりよく分かってないのですがはてなブログの設定画面のデザインからデザインCSSってやつを弄れば色々デザイン変わるみたいです。
　ほへー、昔HTML手打ちでmarqueeタグとか打ってた時代から進化しているのだね。CSSってのは、いわゆるデザインのパラメータを保存しているものみたいでHTMLからデザインのパラメータを切り離すことで汎用性を持たせているのでしょう、とかさも分かったようなことを言ってみます。

はてなブログテーマ「Mistilteinn」を公開しました - KYOHON

※ミクさんはテーマに付属しません＞＜Mistilteinn - テーマ ストア...

　ついでに見た目が気に入らなかったはてなブックマークのブログパーツのデザインも見なおすことに。こちらは池田仮名 (id:bulldra)さんの下記の記事を参考にしました。

ブログの直帰率や離脱率を減らしたい　おかわり - 情報学の情緒的な私試論β

ブログの直帰率や離脱率を減らしたい　おかわり『ブログの直帰率&...

CSS

　CSSのコード全文は以下。ほとんど上記記事のコピペです。Mistilteinnテーマをインストールして下記コードをはてなブログのデザインCSSというところにコピペしてやれば簡単にkaraage.デザイン2014年版がパクれます。まあそんな酔狂な人がいるかわかりませんが。

/* <system section="theme" selected="11696248318755805834"> */
@import url("http://hatenablog.com/theme/11696248318755805834.css");
/* </system> */
#blog-description {
    margin-left: 0;
	display: block;
}

.hatena-bookmark-widget-title {
    display:none;
}

.hatena-bookmark-widget-title img { 
    display:none; 
}

.hatena-bookmark-count a {
	color: #ff0606;
	background: #ffcbcb;
	font-weight: bold;
	text-decoration: underline;
}

.hatena-bookmark-widget-footer {
    display:none;
}


.hatena-module, .entry-inner, .pager-next a, .pager-prev a, .page-archive #main-inner, .header-image-enable #blog-title-inner, .header-image-only #blog-title-inner, .breadcrumb div, .erg {
    box-shadow: 0 0 5px #999;
}

.entry-content {
    line-height: 1.8; /* 1.5〜2.0くらい */
	font-size: 100%; /* 80%〜110%くらい */
}

#container {
    width: 1105px;
}

#content, #blog-title, .breadcrumb, #top-editarea, #bottom-editarea {
	width: 1085px;
}

#wrapper, .page-index .pager-next a, .page-search .pager-next a ,.page-category-category_name .pager-next a, .page-entries-year-month-day .pager-next a, .breadcrumb div, .pager  {
	width: 770px;
}

.page-about #main .entry-content::before, .page-archive #main-inner::before {
	width: 730px;
}

.page-entry .pager-next a,.page-entry .pager-prev a, .page-archive .pager-next a, .page-archive .pager-prev a {
	width: 378px; /* この箇所のみpx/2の値を加算 */
}

.header-image-enable #blog-title-inner, .header-image-only #blog-title-inner {
	background-size: cover;
}

/* <system section="background" selected="fbe6ee"> */
body{background:#fbe6ee;}
/* </system> */

カスタマイズした部分のメモ

　自分用のメモ。

　タイトルの下の本文「からあげにレモンをかけたら死刑〜」がはみ出していたので下記を追加

#blog-description {
	margin-left: 0;
	display: block;
}

　境界をはっきりさせるために影を追加。自分は影あったほうが好きなので。

.hatena-module, .entry-inner, .pager-next a, .pager-prev a, .page-archive #main-inner, .header-image-enable #blog-title-inner, .header-image-only #blog-title-inner, .breadcrumb div, .erg {
    box-shadow: 0 0 5px #999;
}

　メインカラム（ブログ記事本文）の幅を広げるために下記追加。本文はできるだけ広い方が好きなので。

#container {
	width: 1105px;
}

#content, #blog-title, .breadcrumb, #top-editarea, #bottom-editarea {
	width: 1085px;
}

#wrapper, .page-index .pager-next a, .page-search .pager-next a ,.page-category-category_name .pager-next a, .page-entries-year-month-day .pager-next a, .breadcrumb div, .pager  {
	width: 770px;
}

.page-about #main .entry-content::before, .page-archive #main-inner::before {
	width: 730px;
}

.page-entry .pager-next a,.page-entry .pager-prev a, .page-archive .pager-next a, .page-archive .pager-prev a {
	width: 378px; /* この箇所のみpx/2の値を加算 */
}

.header-image-enable #blog-title-inner, .header-image-only #blog-title-inner {
	background-size: cover;
}

　文字の大きさを修正するために下記コード修正。デフォルトの文字は小さい気がしたので、自分はフォントサイズ100%にしました。

.entry-content {
	line-height: 1.8; /* 1.5〜2.0くらい */
	font-size: 100%; /* 80%〜110%くらい */
}

　はてなブックマークブログパーツのデザインを修正するため、下記コード追加。コピペ元から変えているのは、タイトルが2つ重なる感じになってしまったので、.hatena-bookmark-widget-title を display:none; にして消しています。

.hatena-bookmark-widget-title {
    display:none;
}

.hatena-bookmark-widget-title img { 
    display:none; 
}

.hatena-bookmark-count a {
	color: #ff0606;
	background: #ffcbcb;
	font-weight: bold;
	text-decoration: underline;
}

.hatena-bookmark-widget-footer {
    display:none;
}

　個性を出すために背景をピンクにしてみました。そうです、これが個性をはき違えているというやつです。

/* <system section="background" selected="fbe6ee"> */
body{background:#fbe6ee;}
/* </system> */

終わりに

　デザインに終わりはないね！一度弄り出すと際限なく弄りたくなるので怖いです。iOSも7でフラットデザインとかやったりしてトレンドが色々変わっているようですが、まあ結局は好みとか慣れなので1年に1回くらい変えてやるのもよいのかなとか思いました。はてなブログならテーマストアからパクるチョイスするだけなので簡単ですしね。
　新しいデザインの感想とかあったら教えて下さい。けなされると興奮します、私が。

　そして今気づいたのですが、敬愛する ろんすた (id:lonestartx) さんのブログと完全にデザイン被ってる！！！！多分好き過ぎて！！無意識に！！同じテーマ選んでたっっっ！！！あわわわわわ。これがはてなブログの恐ろしさ。皆様ご利用は計画的に。