2018年9月7日3スポンサーリンクJINの紹介記事を書きたいあなた。アイキャッチ画像にJINの公式サイトの物を使いたいけれど、できれば自分の好きな背景の色に変えたい、ってことありませんか?こんにちは、すこみみ(@theratama01)です。今回は、無料で、しかもオンラインツールで簡単にできちゃう、画像の背景色の変え方を、初心者ブロガーの方にもわかるようにわかりやすくご説明します。「JIN」のアイキャッチ画像以外にも使える技なので、いろいろ試してみてくださいね!すぐにでも作業開始!という方はここをクリック!スポンサーリンク読みたい場所にジャンプ!アイキャッチ画像の背景色って変えられるの?無料のオンラインエディター”Pixlr”を使ってみましょう”Pixlr”を使った背景色の変え方(1)Pixlrに行く(2)元の画像を開く(3)背景をコピーする(4)透明なレイヤーを作る(5)4で作った透明な背景用レイヤーにつける色を決める(6)5で決めた色で塗りつぶす(7)レイヤーの順番を入れ替える(8)背景コピーのレイヤーから背景を消す(9)もっと細かい画像でやるときは...保存して完成!まとめアイキャッチ画像の背景色って変えられるの?はい。結論から言えば、変えられます!すこみみ今回はそのやり方を説明しますね。前回私は最近人気のワードプレス有料テーマ「JIN」についてご紹介しました。ワードプレステーマ「JIN」レビュー!初心者におすすめな理由と注意点は?【WordPress】ワードプレスの有料テーマ「JIN」のレビュー!賢威7も使った私が使いやすさや気をつけたい点をご紹介!...その時に、テーマの作者のおひとり、ひつじ♂(@hituji_1234)さんにお許しをいただき、「JIN」公式サイトのアイキャッチ画像を拝借したのですが、その時にこだわってしまったのが、背景の色!私はアイキャッチの背景色をひとつの色に統一しています。トップページ(あんまり見る人いるかもしれませんが)がごちゃごちゃした感じにならないように、というのがその理由。ところが、「JIN」公式サイトにあるアイキャッチの背景色は、上にあるように紺なんです。これは公式サイトのテーマカラーに一致していてとっても素敵なんですが...すこみみ私も「せらたま。」にぴったりの背景色に変えたい!ということで、はじめてトライしてみました!背景色を透明にしちゃう技に!すこみみやってみたら簡単!ただし、画像の引用には気をつけてね。無料のオンラインエディター”Pixlr”を使ってみましょう画像加工といえば、PhotoshopやIllustratorを使わないといけなさそうですよね。ここでは、無料、しかもダウンロードもしないで使えるオンラインエディター「Pixlr」を使います。effects.ブログカードを見ると英語だけなので心配になるかもしれませんが、ちゃんと日本語対応しているのでご安心を!これを使えばいろいろな加工ができるので、画像に文字を重ねてアイキャッチ画像も作れますが、そちらはみんな大好きCanvaの方が私は好き。おしゃれで簡単だから。すこみみ今回は純粋に背景色の変え方だけお教えしますね。背景の色を変えるというのは、この場合「画像の合成」をする、ということ。これはPixlrエディターの「レイヤー」という項目を使ってやるんです。すこみみこの前、レイヤーって何?って同僚に聞いたら「まぁアニメのセル画みたいなもんですよ」といわれて納得!つまり、レイヤーとは透明なシート=セルみたいなもので、そこに写真とを貼ったり、レイヤーをさらに重ねて文字をのせてみたりして、画像を1枚作りあげる、ということ。私は昭和世代でバリバリのセルアニメファンだったので、簡単にイメージできました。すこみみ詳しいことはこの記事を読んでみて!専門用語ははっきりいって知る必要ないです。やり方どおりにやりましょう。Pocketsレイヤーの種類と便利な使い方を覚えようhttps://allabout.co.jp/gm/gc/184953/合成作品を作る上で「選択範囲」と並んで不可欠な「レイヤー」とはどんなもので、使うとどのように便利なのでしょうか。今回はレイヤーの基本と主な種類について解説をします。何にも考えず、この通りにやればできるって感じでいきますね(なぜなら私も詳しくは説明できないから...)。本文読まなくても、画像だけでもだいたいいけちゃうとおもうので、サクッとやりたい方は画像だけ見てみてください!(1)Pixlrに行く引用元:https://pixlr.com/editor/Pixlrに行くと、トップページが上の画像のようになっています。すこみみここからスタートしますよ!(2)元の画像を開く(1)の画面から、使う画像を呼び出します。あ、もちろんその前に使う画像を保存しておいてください。画像を見ればお分かりのように、直接画像を取得するURLから画像を取ることもできます。引用元:https://pixlr.com/editor/ちなみに、右上にログインアイコンが出ていますが、登録しなくてもできます。私は登録していません。引用元:https://pixlr.com/editor/こんな感じに画像が呼び出せればOK。(3)背景をコピーする\クリックすると拡大します/引用元:https://pixlr.com/editor/今出ている画像のコピーを作ります。画面の右の方に小さい画像が出ていて、その下に「レイヤー」という場所があります。そこには今表示されている画像が「レイヤー0」という表示で出ているはずです。その「レイヤー0」をドラッグして、上の表示の場所にペーストしてください。すると、\クリックすると拡大します/引用元:https://pixlr.com/editor/こんな風に「レイヤー0コピー」が出来上がります。(4)透明なレイヤーを作る次は、何にも貼ってない、いわば透明なレイヤーを作ります。\クリックすると拡大します/引用元:https://pixlr.com/editor/上の画像の1のところをクリックすると、2のとおり、チェッカー柄のアイコンのついた「レイヤー2」ができます。(5)4で作った透明な背景用レイヤーにつける色を決める今作ったレイヤー2は色も画像も何もついてないまっさらな状態です。今度はここに、あなたが最終的に背景にしたい色をつけます。画面左下にある、おそらく今は真っ黒で表示されているボックス(1の部分)をクリックします。すると、2のように、カラーセレクターが出てきます。引用元:https://pixlr.com/editor/このカラーセレクターで、あなたが使いたい色を設定します。左側のチャートを使って色を指定してもいいですし、右側のコード入力欄でカラーコードを指定してもOKです。私はいつもアイキャッチ画像の背景にしている色のコードを#のところに入力しました。コードの隣の所に、指定した色が出てきています。これでよければ下の画像の2のとおり、OKをクリックします。\クリックすると拡大します/引用元:https://pixlr.com/editor/すこみみここまでできていますか?(6)5で決めた色で塗りつぶす先ほど作ったなにも乗せていないレイヤー2を、今決めた色で塗りつぶします。画面左のアイコンの列から、傾いているバケツのアイコンを選びます(2)。\クリックすると拡大します/引用元:https://pixlr.com/editor/バケツのアイコンを、色を変えたい背景に合わせたら、そこでクリック!すると...引用元:https://pixlr.com/editor/画面全体が選んだ色でベタ塗されたみたいな状態になります。ひつじさんが消えてしまったけれど、これは、実は下から「原本」のレイヤー0、その上にそのコピーのレイヤー0コピー、一番上に今までは透明だったレイヤー2、という順番でレイヤーが重なっているから(いわばセルを上に重ねていった状態ですね)。透明だったレイヤー2に色を付けたために、その下にあるレイヤーが隠れた状態になっているんです。下にほか2枚のレイヤーは残っていますから心配いりません。(7)レイヤーの順番を入れ替える次に、色をつけたレイヤー2を後ろに下げます。画面右の、さっきレイヤーを作ったりコピーしたりしたところへ。引用元:https://pixlr.com/editor/今、ここには上から「レイヤー2」「レイヤー0コピー」「レイヤー0」の順に長方形のカードのようなものが縦に並んでいますね?それを確認したら、上の画像のように、「レイヤー2」を「レイヤー0コピー」と「レイヤー0」の間にドラッグさせてペーストします。すると...引用元:https://pixlr.com/editor/あれ??元に戻った?という風に見えてOKです。さっきの、レイヤーの順番を確認してください。\クリックすると拡大します/引用元:https://pixlr.com/editor/すこみみこの順番になっていればOK。うまくいってますよ!(8)背景コピーのレイヤーから背景を消すさあ、いよいよ大詰めです。今一番上に来ているレイヤー0コピーの、背景色だけを消してしまいましょう。\クリックすると拡大します/引用元:https://pixlr.com/editor/上の図の1のアイコンを選び、画面上に現れている「公差」というところの数値を「100」にしたら、紺色の背景をクリックします。\クリックすると拡大します/引用元:https://pixlr.com/editor/さあ、どうですか?上の画像を拡大してみてください。この画像のように、ひつじさんやロゴ周囲などが破線で囲まれてチラチラしていたら、そのまま「Delete」キーを押してください。\クリックすると拡大します/引用元:https://pixlr.com/editor/さあ!背景色が変わりました!ちなみに、右のレイヤーの所を見ると下の図のようになっているはず。引用元:https://pixlr.com/editor/このアイキャッチ画像の場合、あまり細かいところがないので、背景はすべて色が変わっているはずですから、これで保存したら終わりなのですが...(9)もっと細かい画像でやるときは...もっと細かいところのある画像でこれをやってみたいなら、(8)の段階ではまだ前の背景色が残っているかもしれません。その場合は、下の図のとおりに画像を拡大して、色の残っているところをひとつずつ今の作業で消していきましょう。引用元:https://pixlr.com/editor/保存して完成!できあがったら、最後に保存します。これは普通に「ファイル」→「保存」で、任意のフォルダに入れてください。引用元:https://pixlr.com/editor/すこみみうまくいきましたか?まとめ画像の背景を、無料のオンライン画像加工ツール「Pixlr」を使って自分の好きな色に変える方法をまとめました。JINのユーザーのあなた。この方法で自分の思う通りのアイキャッチ画像を作ってみてくださいね。画像の背景色の変えかた有料ツールは不要!無料のオンライン画像加工ツール「Pixlr」でできます。レイヤーとは、アニメのセル画のようなもの。これを使って色を変えます。元の画像の著作権には注意して、フリーでない場合は作者さんの了解を得ましょう。コメントをキャンセルメールアドレスが公開されることはありません。付いている欄は必須項目ですΔワードプレステーマ「JIN」レビュー!初心者におすすめな理由と注意点は?...臨床実習の一人暮らし、レオパレスは騒音が大変?評判を聞いてみた!せらたま。管理人すこみみ22年目の言語聴覚士(ST)。病院の職員教育担当です。PTOTSTのたまごたちが学校やバイザーからは教えてもらえない、臨床実習や就活でたいせつなことを、こっそり書いていきます。卵の臨床実習を応援するブログ、せらたま。卵の臨床実習を応援するブログ。