Web
Analytics

SATOREPO BLOG

当ブログはアフィリエイトリンクで収益を得ています。アフィリエイトリンクを含む記事はタイトルに【PR】をつけています

VRoid Sitemap/VRoid記事のサイトマップ
「英語学習」の記事一覧
【2021年】NHK語学の音声教材のメリット、デメリットとDL費用を節約する方法
【2022年】これからブログで稼ぎたい方にブログ歴2年の私の実情を教えます

【後編】真似OK!CanvaとMedibang Paint使用。はてなブログ(テーマ:Minimalism)のアイキャッチの具体的な作り方

f:id:satorepo:20210420185629p:plain

この記事は「【前編】真似OK!CanvaとMedibang Paint使用。はてなブログ(テーマ:Minimalism)のアイキャッチの具体的な作り方」の続きです。

前編ではCanvaを使ってアイキャッチの画像を作る方法を解説しましたが

後編(これ)ではメディバンペイントを使って文字を入力する方法を解説します。

 

前編でも書いた通りCanvaでも文字を入力できますが、なぜか私には使いづらいため

いつもMedibang Paintで文字を入れています。

 

 

(9)Medibang Paintで(8)でダウンロードした画像を開く

 

(9ー1)Medibang Paintを起動させる

 

(9-2)Ctrl+Oで画像を開く

マウスで「ファイル」→「開く」の順番でクリックしても開けます。

Canvaからダウンロードした画像は大抵の場合「ダウンロード」というフォルダに入っています。

「ファイル」「開く」の順番にクリックする。

 

「ダウンロード」フォルダから画像をクリックして「開く」ボタンをクリック


画像を開けました。

 

(10)「T」ボタンをクリックする

 画面左のバーにある「T」のボタンをクリックします。

画面左のバーにある「T」ボタンをクリックする。

もし左のバーに「T」のボタン(正式な名前は分かりません)がなければ、一番下の矢印のボタン(これも名前が分かりません)をクリックしてみて下さい。

出てくる可能性があります(出てこなかったらすみません。勉強不足で申し訳ありませんが、これ以上は分かりません)

一番下の矢印ボタンをクリックする

(11)画像のどこかをクリックする

 

開いた画像のどこかをクリックする

(12)文字を入力する

 あくまでも一例ですが

  • フォント:「クラウドテキストを使用する」をクリックした後で「FOT-つばめ Std」を選択
  • 文字サイズ:120
  • 「アンチエイリアス」をクリックする
  • 文字色:黒
  • ふち幅:0(なし)

と設定しました。

黄色い枠内に文字を入力して、「OK」ボタンをクリックする

 

(13)文字列をドラッグ&ドロップする

文字列をドラッグ&ドロップして、灰色の正方形の中に配置します。 

文字列をドラッグ&ドロップする その1

【重要】正方形の中に文字を配置する理由

「前編」でも書いたことですが

正方形の中に文字を配置すると、Minimalismのアイキャッチの枠内にきれいに収まるからです。

ブログカードの時もこのように、文字がきれいに収まっています。

satorepo.com

私はCanvaでこのテンプレートと出会う前は、どうすれば文字が枠内にきれいに収まるアイキャッチを作れるのか分かりませんでした。

Medibang Paintでフリー画像をテキトーに編集して、試しにアイキャッチにしてみて「あ、文字が見切れてる。やり直さなきゃ。めんどくさー」ってなってましたw

 

しかしCanvaを使い始めて、偶然このテンプレートに出会い

灰色の正方形の中文字を収めたら、文字が枠内からはみ出さなくなったんです。

以来、このブログで使うアイキャッチは全部このテンプレートを基にして作っています。

(14)(10)~(13)を繰り返して、アイキャッチを完成させる

 アイキャッチが完成しました。

アイキャッチが完成した。

(15)PNGファイルに書き出す

(15-1)「ファイル」→「書き出し」の順番にクリック

「ファイル」「書き出し」の順番にクリックする

(15-2)ピクセルとファイル種類を指定して「OK」ボタンをクリック

設定内容は以下の通りです。

  • ファイル形式:幅448px 高さ252px
  • ファイル形式:PNG(24-bit PNG)

 

f:id:satorepo:20210420190238p:plain

 (15-3)名前を入力して任意の場所に保存する

ファイル名を入力して保存ボタンをクリックします。

(16)PNGファイルを圧縮する

圧縮とはPNGファイルの容量を減らすことです。

画像の容量が大きいままだと、ブログが表示されるのに時間がかかってしまいます。

そのため、

https://compresspng.com/ja/

というサイトでPNGファイルを圧縮します。会員登録不要、無料で使えます。

f:id:satorepo:20210420190313p:plain



圧縮が終わったら「ダウンロード」という黄色いボタンをクリックしてダウンロードして下さい。

 

ダウンロードという黄色いボタンをクリックする

【2021年9月12日追記】最近はWebsiteplanet.comの画像圧縮ツールをよく使っています。私が使ってみたら上のcompresspng.comよりも圧縮率が高かったです。

www.websiteplanet.com

(17)完成

 

f:id:satorepo:20210420185629p:plain
 

おわりに

 同じものを真似して作って使ってもOKですし

デザインを多少(あるいは大きく)変えて使ってもOKです。

それでは、よいブロガーライフを!