[手順3-1]SWELLの必要画像素材と特定サイズへの切り出し手順

 WordPressで見た目を自分好みに仕上げたい人は多いでしょう。今回は見た目を大きく変えられる画像素材の記事を書きます。これで*他の人とは違う自分らしいブログを実現することができます。

目次

事前準備すべき画像素材

 さて、さっそくSWELLテーマの設定に入っていきます。しかし、その前に設定に使う画像素材を準備しておく必要があります。大きくは下記の7つを用意しましょう。

  1. メインビジュアル(1600×400 / 27.08cm×6.77cm)
  2. No Image(1200×630 / 20.31cm×10.67cm) ※SWELLの推奨は横幅1600px
  3. タイトル背景用デフォルト画像(1200×630 / 20.31cm×10.67cm)
  4. サイトアイコン(512×512 / 8.67cm×8.67cm)
  5. タイトルロゴ(1600×360 / 27.08cm×6.09cm)
  6. プロフィール画像(512×512 / 8.67cm×8.67cm)
    ※各ピクセルサイズの右側の数値については、後のステップで何かをご紹介します。
あおい(管理人)

下記に説明を書いていますが、上記のサイズで画像を作って実際に自分のブログに反映して見る方が早いです。

あおい(管理人)

・No Imageとタイトル背景用デフォルト画像を同じ。
・メインビジュアルとサイトアイコンはサイズ違い。
にすると画像準備の手間が減るので早く作るのに良いです。
タイトルロゴとプロフィール画像の共通化は無理ですが。

メインビジュアル

 メインビジュアルと言うのはホームページを開いたときに大きく表示される画像で、SWELL公式サイトの場合には1600×900の画像が使用されています。画面いっぱいに画像を表示したい場合はこのサイズ感で良いのですが、ピックアップ記事や新着記事を見せたい場合には大きすぎます。

 そのため、幅は同じ1600ピクセルを維持するとして、縦幅を400ピクセルに抑えるとコンテンツを一緒に表示することができるので、個人的なおススメです。

(アイキャッチ)

 各記事の記事のイメージを表現する画像です。各記事を書く際に用意する画像になります。ブログサイトなどで記事の最初に大きく表示されている画像がこのアイキャッチ画像です。今の段階で作成する必要はありません

No Image

 No Imageは各記事のアイキャッチの設定がなかった場合に表示される画像です。最初にこの設定を行っておけば、アイキャッチを設定していない記事のリンクがグレーの四角にならずに済みます。

タイトル背景用デフォルト画像

 この画像は無くても問題ないのですが、設定すると見た目がカッコ良くなるのでおススメしています。記事を作った際に、①記事のタイトルを白背景に黒文字で表示するだけなのか、②黒っぽいフィルター加工をした画像を背景にしてその上に白文字で表示するのか、を選ぶことができます。

 この②のパターンの背景に使われる画像がこのタイトル背景用デフォルト画像です。アイキャッチをタイトル文字の背景にすることもできるのですが、その場合にはアイキャッチに文字を入れることができなくなるので、このタイトル背景用デフォルト画像の方を使用する方がおススメです。

サイトアイコン

 これは分かりやすいです。ホームページをお気に入りにした時等に各ページ名の左側に表示されるアイコンがこの設定を行う事で変えられます。

タイトルロゴ

 これ名前のそのままです。設定をしていない状態ではホームページ名がそのまま文字列で表示されています。それだと味気がないので飾りつけのある文字を作って画像として保存して設定すると良いと思います。

プロフィール画像

 自分のプロフィールで使用する画像です。ココナラなどのサイトで写真を参考にお金を出して書いてもらうのも良いですし、とりあえず似ていなくても自分のアイコンが欲しいだけであれば下記のサイトなどで組み合わせで作ってみると良いと思います。

あおい(管理人)

作った素材の売買やイラストを使った実物商品の販売、アダルトや出会い系サイトなどでの利用など、制限はあるので規約を読みましょう。

CHARAT
似顔絵メーカーCHARAT(キャラット) 『CHARAT(キャラット)』は、簡単な操作でオリジナルの「キャラメーカー」や「着せ替えメーカー」が遊べる似顔絵メーカーです。可愛いアバターを自由に作り、SNSのプロフィ...

 先にプロフィール画像の作成手順の説明です。

STEP
トップページ

 上記のCHARATへのリンクをクリックしてトップページが表示されましたら、画面を下にスクロールさせます。

トップページ
STEP
デザインの方向性

 デザインの方向性を選べるので、好きなものを選びます。

デザインの方向性
STEP
選択したテーマ

 選んだテーマの画面に飛びます。画面を下にスクロールさせます。

選択したテーマ
STEP
「START」ボタン

 操作説明のYoutubeの動画の下に「START」ボタンをあるので押します。

「START」ボタン
STEP
ベースデザイン

 デザインのベースを設定するために左下の赤い四角で囲んだボタンを押します。

あおい(管理人)

全て自分で選んで作っても良いのですが、時間がかかりすぎるのでベースを利用がおススメです。

ベースデザイン
STEP
ベースにしたいキャラクター

 保存されたキャラクターからベースにしたいキャラクターを選びます。

ベースにしたいキャラクター
STEP
ロードの確認

 ロードの確認ウィンドウが出るので「OK」を選びます。

ロードの確認
STEP
変更パーツの選択

 それをベースに下の項目から変更したい部分を選びます。下のメニューは横にスクロールするようになっていて、非常に多くの箇所の調整が可能です。

変更パーツの選択
STEP
好きなデザインのパーツ

 選択肢の中から、好きなデザインのパーツを選びます。

好きなデザインのパーツ
STEP
キャラクターに反映

 キャラクターに変更が反映されます。

キャラクターに反映
STEP
カラー変更

 左上のスポイトボタンを押します。

カラー変更
STEP
カラーパレット

カラーパレットが表示されるので、変えたい色を選んで「OK」ボタンを押します。

カラーパレット
STEP
FINISH

他の部分に関しても変更したい部分を順番に変えていきます。データの編集が終わったら、右上にある「FINISH」ボタンを押します。

あおい(管理人)

こだわりすぎると無限に時間がかかるのでほどほどにしましょう。

FINISH
STEP
顔アイコン

 保存方法が選択肢として表示されるので、「顔アイコン」を選びます。

顔アイコン
STEP
ダウンロード完了

 ダウンロードが完了。

ダウンロード完了
STEP
作成完了

 ファイルを開くと下記のように開ければ作成完了です。

作成完了

画像素材を手に入れる

 自分で画像を用意するのは中々難しいです、そこで画像を無料で提供をしているサービスを利用します。広告等やアフィリエイト目的のホームページなどで利用する分には問題ないものが多いのですが、画像を売ったりはNGですし、著作権を放棄している訳でもないです。利用規約を確認ください。

ぱくたそ(PAKUTASO)
ぱくたそ - 会員登録不要、無料の写真素材・AI画像素材 「ぱくたそ」は、会員登録せずに今すぐダウンロードできる無料の写真素材・AI画像素材のフリー素材サイトです。一部を有料販売したり、枚数制限による課金など一切ありませ...
あおい(管理人)

事前の準備画像は基本的に横長の画像を選ぶのがお勧めです。

STEP
探したい画像の種類

 PAKUTASOのトップページが開いたら、テキストボックスに「空」などの探したい画像の種類を入力します。

探したい画像の種類
STEP
検索開始

 テキストボックスの入力が終わったら、キーボードのEnterキーを押します。

検索開始
STEP
向き:横

  空の画像が表示されますので、向きの「横」の左のチェックボックスにチェックを入れます。

向き:横
STEP
絞り込む

 チェックを入れましたら、「絞り込む」ボタンを押します。

絞り込む
STEP
気に入った画像をクリック

 横向きの空の画像だけが表示されますので、気に入った画像を1枚選んでクリックします。

気に入った画像をクリック
STEP
画像の確認

 画像が大きいサイズで表示されます。問題なければ画面を下にスクロールさせます。

画像の確認
STEP
Lサイズのダウンロード

 無料ダウンロードの項目が表示されますので、「Lの四角」をクリックします。

Lサイズのダウンロード
STEP
ダウンロードフォルダ

 ボタン押したらダウンロードは実行され、多くの場合にはダウンロードフォルダに保存されます。

ダウンロードフォルダ
STEP
ダウンロードされた画像

 ダウンロードフォルダに移動しましたら、ダウンロードした画像が保存されています。

ダウンロードされた画像
STEP
デスクトップに画像を移動

 ファイルをダウンロードフォルダからドラック&ドロップ(左クリックを押して掴み、離さずにマウスを移動させて左クリックを移動先で話す)をして、デスクトップに画像を移動させます。

デスクトップに画像を移動

画像を特定のサイズで保存する手順

 さて画像を手に入れたものの指定のサイズに切り出すのが意外と難しいのです。そこで私は仕事でパワーポイントを良く使うので、その互換ソフトであるWPS Presentationを使用しています。手順的にはPowerPointでも同じ手順で同じことができると思うのですが、こちらの場合は3,390円で買いきりでお買い得なので使っています。(これらはパソコンから最初に入っていることが多いので、追加費用が掛からないことが多いのでお勧めです)

WPS Office 2

 具体的な画像の切り出し(トリミング)手順を説明します。この手順通りに操作を行えば、希望サイズの画像を作ることができます。元素材を準備したSWELL用の画像素材をすべてこの手順でサイズを変えてください。(多少の誤差は気にしなくてよいです)

STEP
初期表示物の削除

 WPS Presentationを起動すると下記のように表示ページが表示されます。作業の邪魔になるのでタイトルと著者名を記入するエリアを選択します。

初期表示物の削除
STEP
初期表示物の削除

 選択すると下記の絵のように選択状態の表示になりますので、キーボードのDeleteキーで表示物を削除します。

初期表示物の削除
STEP
挿入タブの選択

 次に上部のメニューから「挿入」を選びます。

挿入タブの選択
STEP
図形を選択

 挿入メニューが表示されますので、その中から「図形」を押します。

図形を選択
STEP
四角形の選択

 図形の一覧が表示されますので四角形の「一番左の形」を選びます。

四角形の選択
STEP
四角形の作成

 メインウィンドウのいずれかの場所を左クリックして、マウスを右下に移動させてマウスの左クリックを離します。

四角形の作成
STEP
オブジェクトの書式設定

 作成した四角形の上で右クリックをして、「オブジェクトの書式設定」の項目を選びます。

オブジェクトの書式設定
STEP
サイズとプロパティ

 画面の右側にオブジェクトの書式設定のエリアが表示されますので、その中の「サイズとプロパティ」を選びます。

サイズとプロパティ
STEP
サイズメニューの表示

 サイズとプロパティのメニューが表示されるので、その中の「サイズ」の文字をクリックします。

サイズメニューの表示
STEP
高さと幅の数値記入

 サイズの中の「高さ」と「幅」の欄を書き換えを行います。この時に記載する数値が㎝単位機で記載しなければならないので、ターゲットのピクセルサイズにするための数値が右側の数値です。

  1. メインビジュアル(1600×400 / 幅27.08cm×高さ6.77cm)
  2. No Image(1200×630 / 幅20.31cm×高さ10.67cm) ※SWELLの推奨は横幅1600px
  3. タイトル背景用デフォルト画像(1200×630 / 幅20.31cm×高さ10.67cm)
  4. サイトアイコン(512×512 / 幅8.67cm×高さ8.67cm)
  5. タイトルロゴ(1600×360 / 幅27.08cm×高さ6.09cm)
  6. プロフィール画像(512×512 / 幅8.67cm×高さ8.67cm)
高さと幅の数値記入
STEP
塗りつぶしと線

 メインビジュアルの場合の高さと幅を設定しました。設定側おりましたら、「塗りつぶしと線」を選びます。

塗りつぶしと線
STEP
塗りつぶしメニュー

 塗りつぶしと線のメニューの中に塗りつぶしという項目がありますので、「プルダウンメニュー」のボタンを押します。

塗りつぶしメニュー
STEP
塗りつぶしなし

 一番上に表示されている「塗りつぶしなし」を選びます。これで、内側が透明の四角形になります。

塗りつぶしなし
STEP
内側が透明の四角形

 下記の画像の通りに塗りつぶしの右側が「なし」になっていれば成功です。

内側が透明の四角形
STEP
サイズを編集したい画像の取り込み

 そのあとは事前に用意していた画像ファイルをマウスの左クリックで掴んで、WPS Presentationのメインエリアに移動させて左クリックを離します。

サイズを編集したい画像の取り込み
STEP
圧縮の確認

 画像サイズが大きい場合に、下記のような圧縮の確認メニューが出ますので「いいえ」を選びます。

圧縮の確認
STEP
透明の四角の選択

 次に透明にした四角の縁をクリックします。

透明の四角の選択
STEP
透明の四角を最前面に移動

 右クリックでメニューを表示させ、「最前面へ移動」を選びます。

透明の四角を最前面に移動
STEP
画像の左上をクリック

 次にサイズを調整したい画像をクリックし、表示される〇の左上を左クリックで掴み(マウスのクリックを離さない)ます。

画像の左上をクリック
STEP
ターゲット画像の幅の調整

 画像の左上を移動させて、透明の四角の左側の付近にマウスを移動させると、オレンジ色の縦線が表示されますので、その位置で左クリックを離します。

あおい(管理人)

右上に関しても同様に左クリックで掴んで、透明の四角の右上側付近で左クリックを離すことで透明の四角に幅を合わせます。

あおい(管理人)

事前に画像の右側だけは透明の四角とターゲットの画像の位置を合わせておくと、画像の左側の調整だけで済むので楽です。

ターゲット画像の幅の調整
STEP
切り出し位置の調整

 そのあとは再び透明の四角を上下させて、その内側が切り出されるエリアになるので、上下で切り出したい位置に移動させます。

あおい(管理人)

左右には少し動かした程度ではずれないのですが、大きく動かすとずれてしまいますので上下のみの移動になるように注意しましょう。

切り出し位置の調整
STEP
切り抜き位置の確定

 今回は下記のような位置に設定をしました。

切り抜き位置の確定
STEP
ターゲット画像の選択

 次のステップはターゲット画像の上下の調整です。ターゲットの画像のいずれかの場所を左クリックします。

ターゲット画像の選択
STEP
トリミングの選択

 画像を選ぶと図形ツールのタブに変わりますので、その中の「トリミング」を選びます。

 トリミングの選択
STEP
トリミング上部の調整

 トリミングを選ぶとターゲット画像にトリミング用のマークが表示されます。そして、その中の上部中央のマークを左クリックをしてそのまま押し続けます。

 その位置から、透明の四角の上部までマウスを移動させて左クリックを離します。

あおい(管理人)

この位置合わせが少し難しいので、事前にキーボードのCtrlキーを押しながらマウスホイールを上に回転させ画面を拡大させておくと微調整がしやすいです。

トリミング上部の調整
STEP
画像の下の部分も位置を調整

 画像の下の部分もSTEP25と同様の操作でトリミング位置を調整します。

画像の下の部分も位置を調整
STEP
囲外の位置で左クリック

 トリミング位置が確定したら、画像の範囲外の位置で左クリックをします。

囲外の位置で左クリック
STEP
トリミング完了

 下記の画像のように透明の四角と同じサイズにターゲットの画像がトリミングされます。

トリミング完了
STEP
図として保存

 画像を右クリックして表示されるメニューから、「図として保存」を選びます。

図として保存
STEP
ファイル名を決めて保存

 グラフィックとして名前を付けて保存ウィンドウが表示されるので、保存場所を決めて、ファイル名を編集した後で「保存」ボタンを押してください。

ファイル名を決めて保存
あおい(管理人)

操作が人の手によるものなので多少のズレが出たりします。
微調整しても良いですが、細かいことは気にしないのも手です。

まとめ

 今回は、見た目を大きく変えられる画像素材についての記事を書きました。ポイントをまとめると下記の通りとなります。

  1. ブログの見た目を大きく変える画像の事前準備は6種類
  2. サイズを調整するのが手間ですが頑張りどころ
  3. これらを準備しておくことで、見た目を自分好みの変更できる

 つまり、自分らしい副業ブログを作るにはPowerPointまたは互換ソフトの利用がおすすめです。そのため、持っているものは使い、追加で必要ならば費用を安く抑えましょう!

 タイトルロゴとサイトアイコンの作成手順に興味がある人は、下記の記事もチェックしてください。

あわせて読みたい
[手順3-2]PowerPointでタイトルロゴとサイトアイコン作成 ホームページのロゴを手持ちのソフトで作りたい人は多いでしょう。今回はPowerPointでタイトルロゴとサイトアイコンを作る方法の記事を書きます。これで追加ソフトの購入なくブログ素材を作成することができます。
よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次