【はてなブログ】ブログのヘッダー画像を変更しました！

f:id:you_key69:20220115005459j:plain

ランニングの休止期間中にやりたかったことの一つに「ブログのロゴ作成」と「ヘッダー画像の変更」がありました。

ロゴはだいぶ前に完成していたのですが、せっかくならヘッダー画像もいっしょに変更したくて、ようやくお披露目できたので報告させていただきます。

ポイントは2つ。

ロゴや画像はExcelで創りましたｗ
はてなブログのヘッダー画像は調整がめちゃしんどい orz

どうぞ！

新しいヘッダー画像
ロゴマークの作り方
- イメージ
- 清書
ヘッダー画像の作り方
ヘッダー画像が合わない問題
- 設定したデザインCSS
- 簡単！PCでスマホ版サイトを見る方法【Chromeなら3ステップ】
コンセプト
- ロゴの由来
- RE/CREATE RUNNINGとは？
終わりに

新しいヘッダー画像

f:id:you_key69:20220113133638j:plain — これが新ロゴです！

なぜか画像が劣化しまくってるけど、とりあえずリリースしました。

ちなみに、変更前と後の違いがこれ ────

f:id:you_key69:20220114235942j:plain

前のほうが良かったんじゃ？

ｸﾞｻ━━("∀";)━━>

でも、ロゴのおかげで少し締まった感じしませんか…？？

ロゴマークの作り方

…どうでも良いことなので、少しためになる話を。

ロゴの作り方です。

シンプルなロゴはExcelで創れるのです。

イメージ

紙と鉛筆と消しゴムで下書きというほどでもない、イメージを描きます。

文字を意匠化する
具体物と組み合わせる
ミッションを込める

を取り入れるのが、ポイントです。

清書

f:id:you_key69:20220114235800j:plain — 円と直線と四角形の組み合わせで創れます

あとはExcelの図形を使って、具現化していきます。

Excelはマジで万能なのです。

以前はカッコつけてInkscapeとかGIMPとか描画ソフトを使ってみたこともありました。

でも、やっぱり背伸びは良くありません。

背伸びするとケガをします。

これはマラソンで失敗した経験から学んだことです。

ヘッダー画像の作り方

f:id:you_key69:20220115002327j:plain

「ヘッダー画像　作り方」と調べるとたいてい「CANVA」みたいなオシャレサービスを使えと助言されます。

でもオシャレじゃないオッサンが使うと見透かされます。

だからExcelに頼るんです。

ロゴだけじゃなく、画像もまるまるExcelで作るんです。

背伸びはしないこと。

最悪の場合、復活できなくなっちゃうかもしれないから。

等身大の自分で戦うこと、その姿勢をこのロゴマークは体現しているのです（なんちゃって）

ヘッダー画像が合わない問題

f:id:you_key69:20220115002746j:plain

今回ロゴを作るよりも苦心したのが、この「ヘッダー画像問題」でした。

はてなブログってヘッダー画像の位置調整がめちゃムズいんですよね。

それがイヤで敬遠していたのですが、案の定、画像を貼ってもズレたり画像劣化したりするわ、PC版は良くても、スマホ版で画像が切れたりとめちゃくちゃ大変でした。

3日かかってようやくここまで来たけど、画質が劣化しているので、まだ満足いっていません。

しかし、CSS（スタイルシート）を駆使してようやく光が見えてきたので一旦ここでリリースとさせていただきました。

設定したデザインCSS

誰トクではありますが、備忘と共有のために最終的に落ち着いたデザインCSSを転記しておきます。

/* ヘッダー画像 */
#blog-title {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	text-align: left;/* 左寄せ */
	height: 200px;/* 表示したい画像の高さ */
	margin: 0;
	padding: 0px 0px 0px 20px;
	top: 0;
	width: 100%;/* 幅100%に */
	overflow-x: hidden;
}
/* ヘッダー画像スマホ対応 */
@media screen and (max-width:480px) {
	.header-image-enable #blog-title #blog-title-inner, .header-image-only #blog-title #blog-title-inner {
		padding: 0px 0px 0px 660px;
		width: 75%;/* 幅75%に */
	}
}