超簡単!5分でアイキャッチ画像に透過色背景をつけてテキストを映えさせる方法

      2017/11/11

こんにちは!アイキャッチ画像がかっこいいブログに憧れているりょうへいです。

今回は、最近やりだした アイキャッチ画像に記事タイトルを入れるのに凝りだしてきました!

超簡単に文字の下に透過色を配置して、よりアイキャッチ画像映えるやり方をご紹介します。

 

アイキャッチ画像(記事タイトル無し)がパッとしない!

ひとまず、こんな感じでアイキャッチ画像を設定していましたが、イマイチでした!

なにがイマイチなのか気付くのに数日かかりましたが(^^;

採用したフリー画像は素敵なのですが、何か物足りない….

ご覧になっている方には、何が足りないか何か感じますか?

 

そうなんです。

  • アイキャッチ画像に記事タイトルが入っていないから、なんだか借りた猫状態のままなのが物足りなさの原因なのでした。

それでは、今回は、その物足りなさを解決してみます!

 

用意するもの  GIMP と LibreOffice

なぜGIMP? Libre??

なんて思う方もいらっしゃるかと思いますが…

そうなんです! Photoshop + Officeでも全然構いません。

がしかし、今回は、 GIMP+LibreOffice(CALC)を提唱しちゃます。

何故かというと、最近のりょうへいの環境は、メインがUbuntuだからだったりして(^^;

Windows環境では Photoshop + MS-Office 環境もあるのですが、Ubuntu環境でも同じように作業をこなすために、あえて、GIMP+LibreOffice(CALC) 環境での作業に慣れてみました♪

とりあえず、たまたま最初の作業環境であった Windwos10環境にLibreOffice をインストールしておきます♪  あ、あとGIMPもね♪

これで、OSやアプリ環境に左右されず、同じ感じでアイキャッチ画像(記事タイトル入り)制作環境の完成!

 

アイキャッチ画像として使用する画像をLibreOfficeのCALCにコピペ!

  いきなしの、手荒な作業になっちまいますが、GIMPで対象とする画像を開いて「コピー」します。

次に、LibreOffice CALC (要するにLibreOfficeのエクセル代替アプリ)に画像をコピペ!

そして、おもむろに 「テキストボックス」 を 挿入して、記事タイトルの文字を貼り付けて、フォントもお好みで選び、テキストボックスの塗りつぶしの色を設定!(今回の例では オレンジを選択しました。)

ここがミソなのですが、色の設定後に透過を選択して 透過率50%を設定して、フォントの色や、配置を中央揃えにして整えてみると….

 

とても簡単にアイキャッチ画像に透過色背景入りテキスト挿入成功!

  1. LibreOffice CALCにテキストボックスの配置が成功したら、元の画像とテキストボックスを一緒に選択してコピーします!
  2. GIMPにもどって、「編集」→「クリップボードから生成」→「画像」でLibreOfficeで作った画像を貼り付け!

これで、記事タイトル入りの画像生成が完了♪

この画像をWordPressの記事アイキャッチ画像に設定するだけで、いい感じのアイキャッチ画像に進化することができました♪

りょうへいの環境では、Ubuntuにはいろいろなフォントをインストールしているので、こちらの環境で同じくアイキャッチ画像を編集しても、良い感じの記事タイトル入り画像をさくっと作成できるようになりました。

このやり方、Windows環境でも、Ubuntu環境でも、同じやり方で通して作業ができるので、このやり方に慣れてしまうと、どちらでも、さくさく作業できてしまうのでおすすめです!

しばらく、りょうへいはこんな感じでのアイキャッチ作りを楽しくやっています♪

 

 - Tips, WordPress, 設定, 雑記 , , , , ,

%d人のブロガーが「いいね」をつけました。