スベリミナル効果

技術的なことを書こうと思ってたけど何でも書くことにします

技術的なことを書きたいんですけどね… 指摘・質問・罵倒コメントください…
ダジャレ好きの方はこちらにどうぞ→スベリブログ2.0

はてなDiaryのデザインをいじる、はてなき戦い(1スベリ)

ブログデザインを少し変えました(もう3週間くらい経ってますけど…)。
htmlとかcssとか普段イジる人ではないこともあり、結構時間がかかりました…

なんとなくやった手順を書いておこう、すぐ忘れそうだし。
たぶんもっとスマートにできるんだろうけど。

もとになるデザインの選択

はてな様にログインして、"管理>デザイン>デザイン管理>新しいデザインを作る"を実行


・適当に名前をつけて、鉛筆ボタンを押して編集画面にGO


・まずは「かんたん」タブで元になりそうなテーマを探しましょう。
 良さそうなテーマを選択して、画面下の「この内容に変更」を押します。

 ※ここで注意しなければいけないのは、テーマを見るためにテーマ画面に遷移して、
  「お、これええやん」 → "このテーマを使う"ポチ → ブログデザインに反映されてしまう
  という過ちを犯す可能性があります、気を付けて!


・不要なサイドバーは消してしまいます

 「動けないサイドバーなど必要ない!」


・気に入ったらおしまい(え!?)

 いや、テーマが気に入ったなら

 こんなことにテーマ(手間)をかける必要なんか無いんですから(2スベリ)

気になる部分をいじくる

既存テーマ色々見たんですけど、結局 "hatena" というシンプルなテーマが一番良さそう。
でも色は某ダジャレブログと合わせて灰色ベースがいい。

でも灰色のヘッダと記事のヘッダが合わないわけで…


これはもうスタイルさんとこのシートをいじるしかない、うんうんうん、、、

右クリックでソースを表示する探検隊、ソースの探検隊!!(懐かしい)

<div class="day day-br">
<h2><a href="http://d.hatena.ne.jp/hijili2/20150530" rel="nofollow"><span class="date">2015-05-30</span></a>
    <a href="http://d.hatena.ne.jp/hijili2/edit?date=20150530" class="edit">編集</a></h2>

<div class="body">

<!-- rakuten_ad_target_begin -->
<!-- google_ad_section_start -->

<div class="section">
    <h3 class="title"><a href="/hijili2/20150530/1432971452" name="1432971452">全角スペース(全角空白)ってどうやって打つの?@CentOS7デフォルト</a></h3>
    <p class="sectionheader"><span class="sectioncategory"><a href="/hijili2/searchdiary?word=%2A%5BLinux%5D" class="sectioncategory">Linux</a></span></p>


このあたりですね。ふむふむ、まずは日付のあたりの色を変えたいですね。
h2のスタイルを見てみましょう、スタイルシートはどこかな。

<link rel="stylesheet" href="http://d.st-hatena.com/statics/css/base.css?845afa966323b83dfb25972c9ad94129f2586c5e" type="text/css" media="all">
<link rel="stylesheet" href="http://d.st-hatena.com/statics/css/headerstyle_lg.css?1e7f1ae8a305b254105e3093bcf711b2af81c2a0" type="text/css" media="all">
<link rel="stylesheet" href="http://d.st-hatena.com/statics/theme/hatena/hatena.css?1e7f1ae8a305b254105e3093bcf711b2af81c2a0" type="text/css" media="all">

うん、見るからにこの一番下のやつやな、きっとたぶんおそらく。
ブラウザにURLをはっつけてみましょう。

/*
Title: はてなダイアリー
Author: hatena
Access: info@hatena.ne.jp
License: GPL
Comment: はてなダイアリーのテーマ
*/

(中略)

h2 {
	font-size: 100%;
	background-color: #5279e7;
	padding: 3px 0px 2px 10px;
	margin: 5px 0 0 0;
	width: auto;
	_width: 100%;
}

ありましたありました、国見比呂と橘英雄 h2。
#5279e7 がきっと青色なんでしょう。

Google先生で「html カラーコード」とかググってみれば、確かめられる仕組みは沢山でてきます。
今回はこちらにお世話になりましょう。 HTMLカラーコード

#5279e7 の色がこれだとわかりました。

なのでこの #5279e7 を全面的に灰色にしてやりましょう。


"管理>デザイン>デザイン管理>対象デザインの鉛筆>詳細タブ>「スタイルシート」欄
にて、以下のように書いてみます。

h2 { background-color: #BDBAB5; }

「プレビュー」を押してみます。

変わりました。イエーイ!(なんか古い)

こうやって変更できるのは、CSSのカスケード処理というもののおかげです。
肝心の説明は分かりやすいサイト様に任せましょう(そればっかやん)。

CSS解説 -カスケード (スタイル指定が重複した場合)-

スタイルシート」に記述したものが後勝ちで反映されているわけです。
そんな感じで、気に食わない色などを塗りつぶしていきましょう。

結局、色くらいしかいじってないんですけどね…

保存して反映

めでたしめでたし。