はてなブログでオリジナルテンプレートを作ってみたよ＾＾

また「はてなブログ」の話題で恐縮ですが、先日も「参考になりました」とコメントを頂き、かなり調子に乗っています。(^^;

今日は「はてなブログ」でオリジナルのテンプレートが簡単に作れることを発見したので、そのことを（自分でも後で思い出せるように）書いておこうと思います。しかも既存のをちょっと変えるだけで簡単に作れてしまうんですよ。


今回改造元にした「はてなブログ」のテンプレートはこちらです。

実は私のお友達もこちらのテンプレートを使っているのですが・・・今回は
こちらのタイトルの周り（白地に星が下がっている部分）の画像と、左右の青い水玉の枠をササッと変えてみようと思います。

そこで用意したのがこちらのイラスト。


イラストＡＣという無料の画像サイトさんからお借りしてきました。
大きさも100kbぐらいの小さいサイズのものです。

こちらの下の木々の部分を、タイトルの周りの画像にし、
（gooブログ↑のタイトル周りの写真を取り替えるのと同じやり方で簡単にできます。）
左右の枠の部分もこちらの画像の周りの部分を使うことにしました。

はてなブログの編集画面「デザイン」＞「カスタマイズ」（工具のマーク）に行き
「背景画像」
「ヘッダ」
この２つにこの画像をそのままアップロードして、
最後に「変更を保存する」をクリックするだけです。
（タイトル周りの画像はgooブログ同様に上下の位置が選べます。）

そして出来上がったのが・・・・
こちらです！！
https://sakehamachi.hatenablog.jp/



なるほど(^^;自分でテンプレートをカスタマイズってそういうコトだったのね・・・
と納得しました。

ここまででも良いのですが、実は私はもう1箇所この後にいじっています。
それは、タイトル（と副タイトル）の文字の色です。最初は文字が白文字だったのです。
ちょうど文字が当たる部分のイラストが白っぽくて、このタイトルの色を
もっと濃い色に変えたいと思ったのです。

そこで検索を掛けてみると、こちらのサイトがヒットしました。
https://rikei-danshi.work/entry/2018-05-25-blogtitle

読んでみると、タイトルの文字の色を変えたい時は、
デザインCSSという欄に（「デザイン」＞工具のマークの一番下）
#title a{color: #○○○○○○ !important;}

こちらの文字を記入せよとあります。
〇〇〇の箇所は色を指定せよというので、何の記号になるのか
こちらのサイト(カラーサイトＣＯＭさん）で調べてみました。
そして、#84331F　辺りかな？と思って、そのように〇〇〇・・の箇所に入れると
本当にタイトルの文字の色がそのように変わったという訳です。

ちなみにタイトルの下の副タイトルも
#blog-description {color: #○○○○○○ !important;}

この文字を記入せよとのことなので、同じようにして文字の色を変えています。
（理系男子さん、ありがとうございました。）

これを「面倒くさい」と思うのか「面白い」と思うのか・・・でも、出来上がると楽しいですよ。＾＾
夏や秋、クリスマスと言ったシーズンも、そのような雰囲気の壁紙を見つけて、
オリジナルのテンプレートが作れますね。

タイトルの文字の位置ももうちょっと上がいいかな・・と思ったり、
サイドの文字ももうちょっと濃い方が見やすいかなと思うので
また引き続き、どうすればいいのか調べてみようと思います。

本日は以上です。(''◇'')ゞ