あっぷりノート

走る、を創る │ あっぷり工房

旅、ギア、サプリ、マインド、トレーニング ── “走る”は創れる

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

f:id:you_key69:20220115005459j:plain

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

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


ポイントは2つ。

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

どうぞ!


新しいヘッダー画像

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%に */
	}
}

  • 画像サイズは結局はてなブログ推奨の1000px * 200px
  • スマホのレスポンシブ設定は有効のまま
  • スマホ用の左マージンは驚異の660px!

というところがポイントでしょうか。


はてなブログのカスタマイズについては、先人たちの手法をパクりまくればやりたいことはたいてい実現できたんですが、ことヘッダー画像にかけてはぜんぜんうまく行かず。

結局自分で色んなサイズの画像をつくって、CSSいじって、PC版とスマホ版の両方を確認して、微調整して…を延々と繰り返してたどり着きました。


マラソンで鍛えられた精神力がものを云います苦笑

簡単!PCでスマホ版サイトを見る方法【Chromeなら3ステップ】

あと、何度もPCサイトとスマホサイトの表示を確認する上で役に立ったテクニックをひとつ共有させてください。

PCでスマホ版サイトを見る方法(いわゆる「エミュレータ」)がものすごく簡単になっていたので、載せておきます。

※ブラウザはChrome限定です

f:id:you_key69:20220115001200p:plain

  1. Chromeで対象ページを閲覧する
  2. F12で開発ツールを起動する
  3. スマホ⇔PCアイコンをクリックする

これだけ。

前はもっと面倒な方法だった気がしますが、ものすごくシンプルになっていて感動したので共有しておきます。

コンセプト

最後にどうでもいいことですが、ヘッダー画像に込めた想いを少し語らせてください。

ロゴの由来

f:id:you_key69:20220114130545j:plain

  • 平仮名の「あ」を意匠化しました。「あっぷり工房」の「あ」です。
  • 人が走る様をモチーフにしました。左向きにダッシュしている感じ、伝わりますかね?
  • 円から右上にはみ出した直線で。予定調和を突き抜けろ!という信念を表しています。こっ…こじつけじゃないッスよ!

イメージは「市区町村章」です。

好きすぎて、以前自分で勝手に作ったりランニングで集めたりしていました。


その経験をようやく活かすことができました。

RE/CREATE RUNNINGとは?

f:id:you_key69:20220115000411j:plain

どうでもいい繋がりでもう一つ説明させてください。

さり気なく追加した「RE/CREATE RUNNING」は何かというと、サブタイトル「走る、を創る」の英訳です。


故障でぜんぜん走れていませんが、いちおう元RECREATIONAL RUNNERを名乗っており、英語圏でいう「市民ランナー」のことです。

下記の記事で詳しく語っていますが、RECREATIONには「余暇」を表すレクリエーションの他に、再創造を表す「リ・クリエーション」という意味もあります。
※そういう意図で「RE/CREATE」とスラッシュで区切っています


「RECREATIONAL RUNNER」について詳しくは以下のページへどうぞ


単に走ることだけじゃなく、お花見やピクニック、市町村章巡りなど、ランニングでいろんな楽しみ方を再創造するのが、RECREATIONAL RUNNER(=市民ランナー)の務めだと思うのです。

そんな再創造を提案するブログが「RE/CREATE RUNNING」というワケです。


さあ、みんなで走る、を創ろう

終わりに

ランニングを休んでるスキにブログの気になっていたところをどんどん修正していきたいと思っています。

ピンチはチャンスなのです。


あと、年始に「プロフィール」を公開させていただきましたが、せっかくロゴを刷新したので追記しておきます。

アオヤマユウキのプロフィール

「あっぷり工房」の由来なんかも書いているので、よければのぞいてみてください ^^