ひげしげノート

おすすめレビュー・格安SIM・ブログ関連の雑記ブログです。

【はてなブログをカスタマイズ】タイトル画像を無料フォントで作ってみる

f:id:higeshige:20190125181124j:plain

 

みなさんヘッダーのタイトル画像はどのように設定していますか?

 

僕の場合、風景画像やテキストデータではなくテキストの画像をタイトル画像にしています。

 

今回変更したタイトルの仕上がりはこんな感じ。

f:id:higeshige:20190217161122p:plain

 

ちょこちょこブログの内容に合った画像がないか探しているのですがいつも見つからず、今回もそのやり方で作り直しました。

 

文字だけのタイトルで個性的なものになるようにフォントを選んで作っています。

 

はてなブログでタイトルを設定すると「ブログ名」と「ブログの説明」がテキストで表示される設定になっていますよね。

 

これではあまりにもつまらない!

 

ということで「ブログ名」と「ブログの説明」のテキスト表示はやめて、個性的な文字を画像で表示させるということをしています。

 

これでも結構満足なのです。^^

 

今回は僕がいつもやっている、文字でタイトル画像を作る方法を紹介していきたいと思います。

 

 

フォントを決めよう

パソコンに元々入っているフォントではなく、ちょっと変わったフォントで作ります。

 

いつも僕が利用しているのは、無料フォントをまとめてくれているサイト「ためしがき」です。

 

このサイトが特徴的なのは、試したい言葉や文章を入力すると登録されている無料フォントの全てのパターンを画面上に表示してくれることです。

 

これが面白い!

 

しばらくここで遊びつつ、自分のブログにふさわしいフォントを選んでみてください。

 

tameshigaki.jp

 

フォントをPCにインストール

ここでお気に入りのフォントを見つけたら、そこをクリックします。

f:id:higeshige:20190218230241p:plain

 

別のウィンドウが出てきますので「配布元:~」と書かれた枠をタップします。

f:id:higeshige:20190218230254p:plain

すると配布元のサイトに飛びますので、そこでフォントをダウンロードしましょう。

(ダウンロード方法は割愛します。)

 

ダウンロードしたフォントファイル を右クリックするとメニューが現れるので、その中の「インストール」をクリックしてパソコンにそのフォントをインストールします。

f:id:higeshige:20190219004448j:plain
 

ファイルが圧縮されていることがあるので解凍してから行ないます。(圧縮したフォルダの中からデスクトップなど別の場所にドラッグ&ドロップするだけでOKです。)解凍しないまま右クリックしても「インストール」の項目がありません。

 

ペイントアプリでタイトル画像を作成

フォントが決まったら次はタイトルを作ります。

 

WindowsOSなら、お絵かきソフト「ペイント」が入っているのでこれで作ってしまいます!

 

「ペイント」を起動。

 

タイトル画像のサイズを決めるために「ファイル」→「プロパティ」と入っていきます。

f:id:higeshige:20190219005107j:plain

 

画像のサイズを入力して「OK」。

f:id:higeshige:20190219005750j:plain

 

「A」ボタンを押してキャンパス上をクリックすると文字が入力できるようになります。ここでタイトルの入力です。

f:id:higeshige:20190219011137j:plain

 

入力の前にまずフォントを選択しておきましょう。すでにインストール済みなので選べるようになっているはずです。

f:id:higeshige:20190219011721j:plain

 

文字のサイズや色もここで修正します。

 

「ペイント」を使う上で注意したいのは、一旦確定してしまうとフォントや文字サイズ、色の修正ができないことです。テキスト入力の枠が表示されている間に修正します。もし間違えて確定してしまった場合は「戻る」ボタンで最初からやり直すことになります。

 

ここまででほぼ出来上がりです!

 

文字以外の背景を透過にして保存

タイトル画像を置くヘッダー部分の背景が白色であればもう完成にして問題ありません。

 

しかしヘッダー部分の背景が白ではない場合、タイトル画像の背景を透過にしないと白で囲まれた絵になって少し不格好です。(下の画像が透過にしてない場合。)

f:id:higeshige:20190219012155j:plain


 

そこで背景が何色でも、透けて見えるようにしてしまいます

 

ブラウザ上で出来る画像変換ツールを使います。使い方がとても簡単で便利なツールです。 

www.peko-step.com

 

ここに作った画像ファイルをドラッグ&ドロップして、透過させたい色をクリックすれば変換完了。

f:id:higeshige:20190219002143j:plain

 

「ファイル」→「保存」でパソコンに保存します。

f:id:higeshige:20190219001521j:plain

 

保存ファイルをタイトルに設定

いよいよ最後の設定です。

 

はてなブログの「デザイン」→「カスタマイズ」→「ヘッダ」と進みます。

「タイトル画像」の項目「ファイルを選択」で作った画像を選択。

「表示設定」で「画像だけ表示」にチェック。

f:id:higeshige:20190219002443p:plain

 

最後、設定を保存して完了です。
 

最後に

文字のもつ雰囲気でページのイメージもだいぶ変わります。ひらがなやカタカナ、ローマ字や漢字などいろいろなタイトルを書いて試すと良いと思います。

 

僕は結構このフォント選びが楽しくて、1つに絞るのにいつも悩みます。

 

無料フォントは種類があるのでブログのイメージとうまく合ったものを見つけられるのではないかと思います。

 

ちょっとした工夫でブログの玄関口を個性的なものにしてみましょう!