それでもつづく!

学生雑記。楽しい文章を書きたい。

“それでもつづく!”

シンプルな画像を簡単に作れる「Picky-Pics」でヘッダーをおしゃれに!【はてなブログ】

f:id:kmartinis:20170806205601p:plain

はてなブログのヘッダー画像、こだわってる?

どうも、けいいちです。

 

今日はツールの紹介。

ヘッダー画像を作成するときにかなり役に立ちます。

 

僕のヘッダーなんかは5分くらいで完成しましたw

ド素人の僕でも、まぁまぁの仕上がりになってます(なお、なんの工夫もない模様)

 

Picky-Pics

picky-pics.com

 

知ってる人にとっては今更かよ!って感じだろうけど、一応紹介。

 

WEB上で、無料で使える神ツールです。

操作方法も単純で、パワポ触れる人なら説明はいらないと思う。

 

パワポ使ったことないよ!って人でも、めちゃくちゃ直感的に操作できるので、すぐに慣れちゃう気がする。

 

一応、まとめておく!

 

ここがすごいよ!Picky-Pics!

  1. 無料!(一部素材有料)
  2. 操作かんたん!
  3. 素材いっぱい!
  4. テンプレートいっぱい!
  5. 年賀状とか名刺みたいなのも作れる!

 

我ながらめっちゃ頭悪そうな紹介だな…

簡単なヘッダー作成方法 

この記事は、Picky-Picsの魅力を掘り下げるんじゃなくて、オリジナルのヘッダー作ろうよ!ってことが言いたいだけなんで、ここからはブログのヘッダーのはなし。

簡単な作成方法も書いとくね。

 

Picky-Pics(ピッキーピックス)

上記サイトにアクセスしたら、まずアカウント作ろう。ちなみに僕はFacebookのアカウントで作った(はず)。

そしたら、画面上部にテンプレートが表示されるから

f:id:kmartinis:20170806145520p:plain

 

右の矢印をクリックして、Facebook カバーってのを選択する。

f:id:kmartinis:20170806145638p:plain

 

そしたら下にこんなのが表示されるから、白紙を選択して制作開始!

f:id:kmartinis:20170806145718p:plain

 

ここからは、説明いらないくらい簡単に使えるので、ひたすらいじりまくろう。

ごちゃごちゃするよりかは、シンプルなデザインの方がかっこいいので、そこらへんの加減は注意してね!

 

ちなみに僕のヘッダーは、こんな感じで作りました。

(記事用に新しく作り直してるから、サイズとかバランスは少し変わってるけど気にしないでね!)

 

1 背景 > 「+」を選択 > 好きな色を選択

f:id:kmartinis:20170806150939j:plain

▼カラーコードはこちらを参考にしてください

CSS/HTML色見本

(自分はカラーコードを入力しましたが、面倒だとかわからない人は好きな色をクリックしてもらえば勝手に変わります)

 

2 文字 > 「テキスト」を左にスワイプ > 文字を変更  

f:id:kmartinis:20170806152202p:plain

 

こんな感じで、フォント文字サイズを変更できます。

テキストの変更は、ダブルクリックね!

 

基本的に、ブログ名にしてやればいいと思います。

 

僕のちょっとしたこだわりは、「テキスト」を二つスワイプして、

「それでも」と、「つづく!」を分け、後者の文字サイズを大きくして強調したこと。

(どうでもいい)

 

バランス崩れちゃうじゃん!って心配する人もいるかと思うんですけど、こんな感じに線を表示してくれて、正確な加減ができるようになってます。

f:id:kmartinis:20170806153637g:plain

 

3 素材 > よくわからんひし形みたいなの > 背景色の正方形を被せてやって細くする  

f:id:kmartinis:20170806154504j:plain

 

赤い四角で囲ってある、二つの素材を使用しました。

 

ひし形を、タイトル下に置いてやった後に、巨大化&背景色に合わせた正方形を被せて、細さを調節した、って感じです。めっちゃテキトー。

f:id:kmartinis:20170806154926p:plain

 

3ステップで完成した僕のヘッダー┌(┌^o^)┐

そんな感じでできたのがお馴染みのこのヘッダー。

f:id:kmartinis:20170806121006p:plain

 

実は、これ以外にも

f:id:kmartinis:20170806155136p:plain

こんなのも作ってたんだけど、黒の方がかっけえだろ!ってことで、上のにしました。

 

どっちもよく見るとダサいけど、シンプルは正義!

スッキリしてて気に入ってます。

 

作った画像をブログに導入しよう

▼参考にした記事

【ブログカスタマイズ】はてなブログのヘッダー画像の余白を非表示にする方法 - 月無ことのは日記

 

この記事読めば、余白ができず、きちっとヘッダーが収まると思います。

ことのはサン(id:tukinasikotonoha)、ありがとうございます〜!

 

よりおしゃれなブログを目指すなら

ブログ全体のカラーを、数色で統一するのがマスト。

もちろんヘッダーの配色も気にしなければいけないので、一度ブログで使っている色を洗い出して、それを踏まえた上でヘッダーを作りましょ。

 

▼配色に関してはこちらのサイトを参考にすると、かなり完成度が高くなると思います。

配色パターン見本40選:ベストな色の組み合わせ確認ツール

 

そもそも上のサイト(サルワカ)自体、かなり読みやすいデザインなので、一度のぞいておくだけでも価値あると思うよ!

 

Picky-Picsは、写真も追加できるので、(.jpg / .png)

▼以下のようなサイトから、可愛いフラットアイコンをダウンロードして、追加してみるのもいいかと。

FLAT ICON DESIGN -フラットアイコンデザイン

 

まとめ

ヘッダーは、ブログを訪れた人が一番初めに目にする重要な場所。

ブログの印象を大きく左右するポイントになります。

 

たまに、フリー素材をそのまま使っている人を見ますが、独自性のないブログは、読者がつかないし、魅力に欠けちゃう。

 

Picky-Picsを使って短時間でオリジナリティー溢れるヘッダー画像を作ろうね!

 

Picky-Pics(ピッキーピックス)

 

ツイッター、やってます。