STORAGE

これまでの事やこれからの新しい事を保管・保存する場所です。現在は雑記メインで運営中(*'▽')

はてなブログのヘッダー画像挿入とタイトル文字色変更

 

前の記事で画像圧縮サイトを利用しました。せっかくなのでダウンロードした写真を圧縮してヘッダーに投入してみました。ヘッダー初投入ですがうまくいくのでしょうか。

画像圧縮サイトの記事はこちらです。 

fusigin.hatenablog.com

 

いちよ自分のためにも記録として残しています。

 

写真AC

まずはじめに。

今回利用したのは、フリー素材で有名な写真ACさん。『写真AC』で検索すればすぐでてきます。

きれいな素材がたくさんあります。もともとイラストが好きで『いらすとや』を使っていましたが、イラストとはまた違う良さがありますね。

 

登録も簡単でした。

無料会員登録方法は、検索してどこでもいいのですが無料会員登録をクリック。そしてメルアドを打ち込む場所があるのでそこにメルアドをぶち込みます。

私はPCのメルアドにしました。メルアドを入力したら次へをクリックします。

 

次はパスワードの入力。

忘れないようにメモすると安心です。ここまでは仮登録になります。

先ほど入力したメルアドにメールがきますので、URLをクリックして本登録しましょう。

 

画像を選んでダウンロードするのですが、簡単なアンケートをとられました。。

そしてダウンロード完了です。

 

ヘッダー画像挿入

ヘッダー画像はCompressor.ioで画像圧縮したものを挿入していきます。

 

f:id:fusigin:20170514034614j:plain

 

上の画面を見ればわかりますが、デザイン>カスタマイズ>ヘッダー>タイトル画像>画像をアップロード>ファイルを選択。

そしてヘッダーに入れる画像を選びます。

変更を保存するを押す前にヘッダーを確認してみます。

 

ここで大事件!!

ブログタイトル(私の場合はSTORAGE)はcolorを黒(#000000)で指定しています。

しかし表示された文字はなぜか白で文字周りがモヤモヤしていました。

これはこれでオシャレなのだが、どうしても黒にしたい!

 

ググりますが、求めているものが出てきません。きっと検索の仕方が悪いのかも。。

 

検証で解決してみることにします。

下の画面はデザインする時の画面ですが、ここでマウスを右クリックします。

下の方に出てくる検証をクリックすると画面右側にHTMLとCSSが出てきます。

 

f:id:fusigin:20170514041003p:plain

 

画面右下のStylesの表示を見るとブログタイトル部分が何と書かれているのかわかりました。ググる前にこの方法にすればよかった。。

 

見てみると。。

.header-image-enable #blog-title #title a』これでした。

この部分が私のブログタイトル部分となります。

 

カスタマイズ>デザインCSSに貼り付けていきます。

.header-image-enable #blog-title #title a {
color: #000000;
}

上の部分をデザインCSS に貼れば問題は解決しました。

 

まとめ

ヘッダーに画像挿入ができ、ブログタイトルの色も変更できました。

画像提供してくれた方に感謝して使わせていただきます。

 

これからいろんな画像やイラストを使って、ブログの雰囲気が変えられるので楽しみです。あまり変え過ぎないように注意しますw

 

今回記録として残していますが、今までしたことも記録しとけばよかったと後悔しています。忘れてしまいがちです。

 

下書きでいいじゃん??まぁそうなんですけどね。

せっかくなので記事として記録させてください。

 

ここまで読んでくれた方、ありがとうございました。