画像の透過方法|Simplicity2のサイトロゴを画像にしてみました | 【暮らしの音】kurashi-*note

当ブログは広告を掲載しています

画像の透過方法|Simplicity2のサイトロゴを画像にしてみました

シェアボタンを押して情報を共有しましょう。

Sponsored Link

ブログ開設1年!

とりあえず1年間は毎日更新しようと記事を書き続けるのに夢中で、メンテナンスを丁寧にできていませんでした。

ブログのヘッダーと言えば、本で言えば表紙のようなもの。

ここはきちんと作りたい…と、今回サイトの顔でもあるヘッダーの画像を作ってみました。

いままでのサイトは…

ブログヘッダー

PCからみた画面はコレ!

このピンクの囲みの中をリニューアルしようと思います。

Sponsored Link
Sponsored Link

画像を透過する方法

これから画像を透過する方法は、なにもブログのトップ画像を作るためだけの目的ではなく、例えば年賀状作成など、幅広く他の用途にも使えるので覚えておくと便利です。

たまたま今回ブログのサイトロゴを作ってみたので、それを基にご紹介しています。

PNG画像を使用する

画像の種類にはJPEGPNGなどがあり、透過させたいならPNG画像を使います。

JPEGロゴ

↑こちらがJPEG画像

PNGロゴ

↑こちらがPNG画像

これでは違いがわかりませんね…。

フォトビューアーで画像を開いてみると、

JPEG

↑JPEG画像

PNG

↑PNG画像

JPEGだと文字の背面は白です。このまま背景画像にかぶせると透過せず

JPEG

このようになってしまいます。

これをPNG画像にすると…

PNG

このように文字の背面が透過した形で貼りつきます。後者のほうが見栄えがいいですよね!

ペイントで画像編集

ではまず画像の編集から。

画像編集するときはもっぱら無料ソフトを使用しています。いちばん便利なのがほとんどのパソコンに入っている「ペイント

そのペイントを使って画像を作っていきましょう。

ペイント画面

ペイントを立ち上げて画像を貼りつけます。

サイズが大きいようならここでサイズ変更します。サイズの大きさは何度か試しながらちょうどいい大きさを探します。

ペイント画面サイズ変更と傾斜

50パーセント、画像を小さくしてみました。

ペイント画面

好みの大きさになったら、画像の四隅とその真ん中にある白い□のところをドラッグ&ドロップして枠を広げます。

ペイント画面

適当な場所まで来たら手を離します。

ペイント画面

テキストツールをクリックして好きな字体を選び、文字を入力します。

ペイント画面

文字入力が済んだら保存します。

ペイント画面

ここで保存するときに、PNG画像を選び、任意の場所(ピクチャなど)に名前を付けて保存します。

でも、このPNG画像をそのままブログに貼りつけても透過しません。ここで画像を透過させる便利な無料ソフトを使います。

PEKO STEP

PEKO STEP

出典: peko step

https://www.peko-step.com/tool/alphachannel.html

このサイトを開いて、透過したい画像をドロップします。

PEKO STEP

先ほどの画像をドロップします。文字の下あたりの白いところをクリックします。

[図]

文字の背面が透過されました。任意の場所に保存します。

フォトビューアー

保存した画像をフォトビューアーで開いてみると、ちゃんと透過されているのがわかります。

ここからは失敗編。

もし、この作業をJPEG画像で行ったらどうなるか…???

PEKO STEP

この段階でうまく透過できてません。

上の[図]と見比べてみると違いがわかります。

ちなみにブログに貼り付けてみると、

ブログヘッダー

透過がきれいにならず、汚い感じの画像になってしまってます…。

透過画像を作るときはPNG画像で保存しよう!

これは年賀状作成のときにも使えます。

背景の上に画像をかぶせたいときなど覚えておくと便利です!

Simplicityテーマのサイトロゴの入れ方

さてさて、ここからはブログ編。

WordPressでブログを書いてますが、使っているテーマは「Simplicity2」

できあがったこの画像をサイトロゴとして使用します。大きさは420ピクセル×80ピクセルです。

サイトの基本情報を確認

ワードプレス画面

まず管理画面左側にある「外観」>「カスタマイズ」>「サイトの基本情報」を確認します。

私はここに

  • サイトのタイトル:【暮らしの音】kurashi-*note
  • キャッチフレーズ:「日々の暮らしの中で便利なもの。ハンドメイドして癒されることを徒然なるままに…」

と入力していたのでこれがこのままヘッダーに表示されていました。

ブログヘッダー旧バージョン

サイトアイコンもつい最近画像を入れました。

サイトアイコンの画像を入れたことによってブログタイトルの左にアイコンが出てきて、なんかプロっぽいサイトに(うふっ)

ワードプレス

サイト基本情報>ヘッター

ワードプレス

画像を選択

ワードプレス

アップロード画面になるので、対象の画像をドロップして、画像の選択。

PEKO STEP

ロゴを画像にする タイトルロゴを画像にするか。に☑を入れます。

ブログヘッダー新バージョン

リニューアルしたブログのサイトロゴです♪

スマホ(iPhone)での見え方

スマホ画面

これが最初のトップ画像。ロゴもなく、文字だけ…。

スマホ画面

サイトロゴを入れたらこんな風に見えます。

PCと違ってサイズが狭まるので背面画像のノートに文字が少しかぶっています。私はiPhone8plusなのでこれでもワイドだと思います。

スマホ画面

ちなみにiPhone8だとこんな見え方。

タイトルとキャッチフレーズの字数は違えど、サイトロゴのレイアウトは同じ感じですね。

画像をもう少し小さくすれば背景画像のノート部分にかからないと思いますが、そうするとブログ名よりタイトルの字のほうが大きくなりそうなので、これで良しとしよう。

スマホ(iPhone)の場合は特に設定しなくても先ほどの手順を踏めば同時にスマホでも表示されます。

Note

今回はサイトロゴを画像にしようとやったものの最初うまくいかず、画像の透過のしかたについていろいろ試してみていいサイトを見つけたのでご紹介しました。

サイトロゴのやり方だけではなく、画像の透過のやり方の参考にしてもらえたら嬉しいです。

もちろん、ブログ初心者で「Simplicity」を使っている人も併せて参考になれば幸いです。

ワードプレスって何?から始まった1年前。いろいろと扱いながらなんとかここまでたどり着きました。

私もまだまだ初心者ですが、やってみて成功したことを記載しておくことで備忘録になるし、なにより同じように思っている方に役に立ってもらえたら幸せです!

人気ブログランキング

お役に立てたなら、ぽちっと応援クリックお願いします☆

人気ブログランキング
いつもありがとうございます!

Sponsored Link
Sponsored Link

シェアボタンを押して情報を共有しましょう。

RECOMMEND こちらの記事も人気です。



Sponsored Link
Sponsored Link
Sponsored Link

『画像の透過方法|Simplicity2のサイトロゴを画像にしてみました』へのコメント

  1. 名前:pootomo 投稿日:2018/01/18(木) 08:57:28 ID:ea72e5ce8 返信

    こんにちは。
    毎日楽しく拝見しています
    特別なソフトを使わずに加工できるなど、本当に役立つ情報が嬉しいです。

    • 名前:ahmiosho 投稿日:2018/01/18(木) 10:27:12 ID:cc1979634 返信

      pootomoさま
      コメントありがとうございました!嬉しいです!
      これからも便利と思ったことをどんどん配信していきたいと思っています♪よろしくお願いします。

トップへ戻る