欲まみれ日記

物欲にまみれた人間が買ったものの感想が並ぶ場所

はてなブログテーマを変更してタイトル文字色を変えるだけで1時間

本日、私の選択しているテーマがスマホタブレットで見辛いことに気が付きました。

なので気に入ってはいるものの現在のテーマとお別れです。

テーマ設定とかカスタマイズとかよくわからないのです。
前途多難。

テーマストアからNakedを選択しました。

オシャレ・レスポンシブ・カスタム可能なはてなブログテーマ「Naked」リリース! - Yukihy Life

作者の方ありがとうございます。

 

ヘッダーのデフォルトの画像があまり好きじゃなかった…けれど、スマホの画面が良さげに見えたので選びました。

その点は、背景色を指定したら変わったので簡単に解決。

 

しかし、水色っぽい背景色にしたために、白文字のタイトルが見え辛い。

 

そこで検索して、

はてなブログでタイトルや本文の文字色を変える方法 - マトリョーシカ的日常

こちらを参考にしてCSSに適用。

ちなみに、CSSがどういうものかくらいしか分かっていない人間です。

 

しかーし。

タイトル下のブログ説明しか変わらないのです。

(でも変わったのでありがとうございます。)

 

そこから色々検索するけれど、

きっとそんなことは初心者すぎるからと、説明してくれているサイトはない訳ですよ。

いや、私もね?さすがに、colorで指定する、idだ#だ、くらいはわかりますよ?

だけれどもね、

どんなID名かっていうのは業界では慣習的なのかもしれないですけど、

初心者的には見ず知らずの人が付けたID名なんてわかる訳がないじゃないか!ってことなんですよね。

はてなブログCSSをいじる時のIDやクラス名の探し方まで教えてくれ…!

って、これ、別に誰に向かって言ってる訳でもないですよ^^;

 →先ほどのサイトをよく読んだところ、リンクを貼ってくださっていて、どうやら、テーマを個人が作るときにも、ID名やクラス名は固定なのかな??とも思えます。

 しかし、テーマ作者が任意の値を指定することもありえる気がしてやっぱりよくわかりません。

 

どうしても色を変えたいので、F12を押して目を皿にしてIDを探す方法しか思い付かないので頑張ってID名探しました。

 

すると、h1とid定義その中にaタグでタイトルとブログのリンクが書いてありました。

 

もちろん初心者らしく、

#id名〜で更新。

 

…変わりません。

aとかも付けてみるけど変わりません。

 

うーん、これじゃね?

aタグじゃね?aタグにきかないんじゃね?

と疑って試行錯誤。

 

そしてやっと変わりました!

もうわかんないから、全部一緒の色!

#title a:link { color:#5b5b5b; }

#title a:visited { color:#5b5b5b; }

#title a:hover { color:#5b5b5b; }

#title a:active { color:#5b5b5b; }

#blog-description { color:#5b5b5b; }

はあ、これで変わりました。

(通常は #title a { color:#5b5b5b; } だけで変わるようです。私は追記にも書きましたが、なぜかダメでした。でも、私はタイトルはいつも同じ色がいいので結果オーライです。)

 

もちろん初心者は、

a#title:link やa:link#titleとかにしてだめだったので検索した訳です。

 

とまあ、いろんなサイトを見て言いたいことは、

初心者向けの説明を書く方には、途中で話を飛躍させるのはダメよ〜と言いたいのです。

ここまで細かく言わないと分からない?

→そうなんです!分からないんです!

を意識していただきたいと思うんです。

 

テーマ変更で少しは読みやすくなってたらいいんですが。

 

↓続編です。

キャッシュのせいで表示が変わらない、ということがあるようなので、こちらも試して見てください。

 

aoiumi.hatenablog.jp

 

 

追記

あれからまた色々検索してみました。

DUDEに特化といっても、はてなブログであればcssのクラスやidの指定は基本的に同じなので、そのままコピペでこの記事のコードを使えるものも多い。

コピペで始めるはてなブログテーマDUDEのカスタマイズ集!フォント・色から自分らしく - F Lab.

 だそうです。これは朗報!

でもやっぱり基本的ってことは?っていう疑問は消えないのですが。

 

ということで、こちらが参考になりそうです。 

しかし安心してほしい。以下のサイトにははてなブログのclassとかidの構造が書かれている。色で分けられていて非常にわかりやすい。 はてなブログのidとかclassとか - kyabana's blog

はてなブログでタイトルや本文の文字色を変える方法 - マトリョーシカ的日常

 

そんな中、

参考程度に、フォント変更と色変更をまとめて #title a { font-family: フォント名; /*ブログタイトルのフォント変更*/ color: 色コード; /*ブログタイトルの色コード変更*/ } こんな感じに書くこともできる。

コピペで始めるはてなブログテーマDUDEのカスタマイズ集!フォント・色から自分らしく - F Lab.

と書いてあり、ここで、まさか、やったつもりで全角スペースだっただけ!?

とか思って#title a ~にしてみたところ、

…変わるじゃん、え?!変わるじゃん!

と冷や汗だらだら。

 

でも、それで変わるなら、1時間もかからなかったわけなんです。

え~と思いながら、以前書いていて今は非公開にしているはてなブログ

公式テーマで黒文字タイトルにしていたので、白文字にする検証をしてみました。

 

すると、そちらはやっぱり#title aでは変わりませんでした。

#title a:link~としてからだと、有効になる何かがあるとかなのでしょうか。

(一応、#title a~はコピペで両方に。)

何がだめで、何がOKなのか、もう初心者にはお手上げです。

(キャッシュか?プロフィール画像みたいに時間差攻撃なのか?なんなんだー!?)

ただ、変わらなかったので試行錯誤で1時間かかった、

これは事実なのです (`・ω・´)