Power word -パワーワード-

かおすな雑記Blog ゲーム記事中心の予定

Power word-パワーワード-

簡単なはてなブログのヘッダー変更

こんばんは~
最近ブログを本格的に改装していまして、ブログのヘッターの変え方を調べたので、自分用メモ&HTMLなどの難しい事が分からない方用に書いていこうと思います。

    1.ブログのヘッターとは?

f:id:mmmmiii:20171229221239p:plain

ここです。はい。
ブログの顔なので自分らしく変えたい方は沢山いらっしゃると思います。
しかしはてなブログのカスタマイズは結構色々情報が書かれていて難しい!
なので他のブログですでにやり方は紹介されていますが、さらにわかりやすく紹介できればと思います。

f:id:mmmmiii:20171229225027p:plain

    模様替えスタートだ!

 

    2.まず『幅1000px × 高さ200px』の画像を用意する

いきなり難しい!笑
しかし、他と区別するためにも頑張りましょう;;!
ちなみに幅も高さも後で設定で変える事が出来ますが、個人的には1000×200が綺麗だと思いますし、後で設定弄るのは結構面倒なので上記の設定で作るのがベターだと思います。私自身、高さを200pxで作ればよかったと後悔中です;;

また、絵を描ける方は自分で描いて用意するのがいいと思いますが、
「イラスト書けない・・・」という方は、フリー素材などで頑張って作って見てください。
おすすめのフリー素材サイト貼っておきます。

写真系フリー素材
・写真AC

www.photo-ac.com

・ぱくたそ

www.pakutaso.com

イラスト系フリー素材
・イラストAC

www.ac-illust.com

ヘッダーフリー素材
Twitterのヘッダー画像に使える画像集

sns-gazo.co

・TwitrCovers.com

www.twitrcovers.com

Picky-Pics(ピッキーピックス)は誰でもプロ並みのデザインでポスターやチラシ、
プレゼン資料などが作れるオンラインデザインツールです。
・picky-pics

picky-pics.com

f:id:mmmmiii:20171227191101p:plain
    う~ん・・・ヘッダー画像作るのが一番面倒説。
    イラスト得意な方イラスト代行業でお小遣い稼げるのでは!?

 

    3.作ったヘッダー画像をはてなブログに表示させよう

はてなブログ右上部にある「自分のはてなid」クリック→「デザイン」。

f:id:mmmmiii:20171229230618p:plain

パナマークの「カスタマイズ」クリック

f:id:mmmmiii:20171229231227p:plain

「ヘッダー」→「画像をアップロード」→「ファイルを選択」

f:id:mmmmiii:20171229232954p:plain

「位置を調整する」→「適用」

1000×200で作っていれば、ジャストサイズだと思います。(下の画像は1500×500なのではみ出してます。)
特に理由がなければ、サイズは公式の推奨サイズで作ってください~

f:id:mmmmiii:20171229233138p:plain

「変更を保存する」→画像セット完了!

f:id:mmmmiii:20171229233652p:plain

変更を保存するのを忘れずに~
これで画像の変更は終了です。お疲れ様でした。

f:id:mmmmiii:20171227192041p:plain

    簡単にできたかな?

 

    4.まとめ

HTMLとCSSをいじれば、ヘッダーの高さを調節・余白の追加・削除したり出来るのですが、とりあえず1000ピクセル×200ビクセルで作っておけば綺麗なので、ぜひ推奨サイズで作ってください。(何回言うの。)

 

f:id:mmmmiii:20171229234601p:plain


    難しい設定は少しづつ勉強しましょ~