気まぐれで軟体動物やってます!!

介護士たこにゃんが伝える、ためになる?ブログ

ブログ用ヘッダーの作り方

ヘッダーを作ろう!!

どーも、たこにゃんです。

 

はてなブログを再開してから、色々とデザインを変えてみたいなと思い、ヘッダーをいじってみました!!

 

せっかくなので、Macの初期ソフトだけで、ヘッダーの作成方法についてお教えしたいと思います!!
Windowsでも、ペイントソフトなどで代用ができると思いますのでよければ参考にしてみてください。

 

※注意:はてなブログではスマホ用にヘッダーが対応していないテーマが多いので、スマホでの確認をオススメします。

基本的な流れ

  • フォント作成(PNG推奨)
  • 背景を用意する
    ⬇︎
  • 必要なパーツを用意する
    ⬇︎
  • サイズを調整する
    ⬇︎
  • 色を調整する
    ⬇︎
  • スクリーンショットで撮影する

フォント作成(PNG推奨)

まずはロゴを作成します。

 

  • ロゴの作成方法についてはこちらのページを参考にしてみてください。

    ロゴ作成の解説

 

こんな感じでできました。

 

f:id:taconyan:20190820095140p:plain

 

PNGで作成しておくと、後での作業が楽です。

 

背景を用意する

背景もできれば、フリー素材を使用した方が良いでしょう。

 

 

他にも背景のサイトはたくさんありますので、ご自分で探してみてください。

必要なパーツを用意する

JPEGを加工する場合はMacの編集機能でインスタントアルファを使います

 

右上の鉛筆マークをクリックします。

 

f:id:taconyan:20190820095516p:plain

左上のペンライトのマークをクリックします。

f:id:taconyan:20190820095542p:plain


 

 

切り取りたい部分をクリックして、ドラッグすると赤くなります。

 

f:id:taconyan:20190816174731p:plain

切り取り」ボタンで赤い部分がに点線が残ります。
切り取りで白い部分を消すことができます。

 

逆に赤い部分を残したい場合は「command+X」で赤い部分が残ります。

 

サイズを調整する

ここからはkeynoteを使います。

f:id:taconyan:20190820100209p:plain

KeynoteWindowsのPower Pointのようなソフトですが、簡単な画像の加工や、アニメーションが作れますので結構便利です。

 

Macの場合はファインダーから好きなパーツをドラッグ&ドロップkeynoteに入れます。

f:id:taconyan:20190820095820p:plain

他のパーツも同様に放り込みます。

図形を使って、ヘッダーの大きさの目隠しを作っておくと編集がしやすいです。

f:id:taconyan:20190820100527p:plain

 

大体の調整ができたらOKです

色を調整する

色を調整したいパーツをクリックして、「デザイン」をクリックします。

f:id:taconyan:20190820100629p:plain

すると、右側に「露出」、「彩度」が出てきますのでこれを調整すると、色が変わります。

「露出」は光の量

「彩度」は色の鮮やかさになりますね。

f:id:taconyan:20190820100714p:plain

スクリーンショットをする

最後は、左上にある再生ボタン(▶︎)を押して、スクリーンショットで撮影します。

Macスクリーンショットは「command+shift+5」です

ブログで写真を入れる時などに便利なので覚えておきましょう。

まとめ

出来上がったものがこちらです。

f:id:taconyan:20190818100011p:plain

はてなブログは、ヘッダー部分が弱いのですが、オリジナルのヘッダーをつけることで、個性が出ますね。

 

 

読者登録お願いします!!