twitterで知り合った方に無料でブログのヘッダー画像描いてもらっちゃった

f:id:qweasdzxc-green:20171226235934j:plain

 

ども~銀ちょす(@gintyous)ッス!

 

ちょくちょくブログに遊びに来てくれてるかたは気づいたかもしれません

 

ブログのヘッダー変えました!

 

 

僕自身はそんなにデザインの製作は得意ではありませんので、自作したわけではないです

tiwitterで知り合った「おぎ」さんに描いてもらいました

twitter.com

 

ある日おぎさんがこんなツイートしてました

ブログのヘッダー欲しいなぁ思ってた僕のストライクゾーンにドストレートなツイート

 連絡したらすぐ書いてもらえることになりました

 

 

描いてくれた「おぎ」さんとは

 東京の高専に通っているブロガーさんですね

 

彼のブログはこちら

ogilog.com

 

なぜ知り合ったのか正確には覚えてないんだけど、僕自身実は高専出身でして、そのつながりでフォローさせてもらった(してもらった)気がする

 

結構年下だと思うんだけど、かなりちゃんとしてる感があります

将来有望ですなぁ

 

ブログを見た感じ、僕よりちゃんとしてるのがヒシヒシと伝わってきて先輩恥ずかしいよ

 

 

 

また、学生ブログ部という団体の創設者であり、代表者的な何かをしてらっしゃいます

具体的な何かはわかんないや、笑

 

学生ブログ部はこちら

www.gakusei-blog.evolvery.net 

「学生ブログ部」とは、

全国の学生ブロガーが集まり、学生向けの役に立つ情報やコンテンツを発信していく共同サイトです!

個人的にはたくさんのブロガーの文章が見れるという点が結構楽しみだったりします!

 とのことです

 

お互いの情報の共有と、仲間という意味での横のつながりの強化を目的とした団体のようです

 

入りたい方は、おぎさんに気軽に連絡してみたらいいかも?

 

 

 

描いてもらったヘッダー

何も注文はせず、自由に描いてもらいました

さて、描いてもらったヘッダーがこちら

 

f:id:qweasdzxc-green:20171226233012j:plain

このブログのテーマカラーを考えた配色にしてくれてますね

実際、ブログのヘッダーに使ってみたところすごく馴染んでます

 

 

 

ところで、何となくですけどブログのテーマを次に変えるときはモノクロな感じにしようかと思ってます

ってことで、

モノクロバージョンも作ってくれないか・・・!?

 って後だし無理やり注文したら、快くすぐ作ってくれました(優しい)

 

それがこちら

f:id:qweasdzxc-green:20171226233339j:plain

 

ええやん!

 

 

 

はてなブログ側で行ったヘッダーの設定

そのまま張り付けるだけで設定はええ感じになるやろ

 って思ってました

ブログ素人でした

f:id:qweasdzxc-green:20171226234117p:plain

 おいおいおい~画像の1/3しか写らへんやんけ

 

ってことで、いろいろググりました

 

 

高さ調整

こちらのサイトのCSSコードを参考にさせてもらって調整しました

mshitech.hatenablog.com

 

基本的にはデザインCSSの部分にコピペするだけ

 

簡単な説明のためにコードを引用させてもらいます

/* タイトルイメージ調整 */

#blog-title {

    padding-top: 5px; /* 画像上部の余白*/

    padding-bottom: 5px; /* 画像下部の余白*/

    height: initial;

}

.header-image-only #blog-title #blog-title-inner {

    height: 250px; /* 画像の高さ */

    background-size: contain;

}

@media (max-width: 480px) {

.header-image-only #blog-title #blog-title-inner {

    height: 150px; /* 画像の高さ */

}

}

僕のブログに最適化するために変更した部分を書くと、

  • 画像上部、下部の余白は不要だったので0pxに変更
  • 画像の高さを300pxに変更(@mediaの方は150pxに変更)

@mediaの方はスマホのための設定のようです

 

 

これで画像の高さをブログに対して最適化することができました

 

 

背景色を変更

画像の大きさは最適化し終わりました

が、ブログの上部のスペースと画像の大きさがあっていないので、めちゃくちゃ余白が空きました

 

ブログのヘッダー部分のみ背景を変える、みたいなカスタムはできるようですが

夜中だし、ググるのがめんどくさくなってきたしやーめた

 

 

ということでどうしたかというと、はてなブログのデフォルトの設定で背景色を変更しました

はてなブロガーはおなじみのこの画面ね

f:id:qweasdzxc-green:20171226235300p:plain

この画面から背景色を変更することでヘッダー部分のみならず、ブログの左右のスペースまで色が変わっちゃった

 

めちゃくそテーマカラーが「MIDORI」って感じのブログになりましたね

まぁそこまで違和感ないし、当分このままで行くとしましょう

 

 

目がチカチカするようだったら、このテーマにも飽きてきたし、ごっそりテーマを変えようかなって考えてます

 

 

 

感想

無料でブログのヘッダー描いてもらってあざっす!

って感じ

デザイン(アート)は苦手なので、描いてもらえて助かりました

 

ブログとしても唯一無二のヘッダーを作ってもらえて、ちょっとブログのモチベーションが上がりました!

 

 

デザイン気にする前に記事書けよ、って感じですが・・・

 

まぁ今まで通り気ままに更新していきますよ~

 

 

今回はこんな感じで終わりです

最後まで見ていただきありがとうございました!