このブログでも取り上げてきましたが、Wordpressテーマを導入しブログを作る際などに色を迷う人は多いのではないでしょうか。

実際、私も色合わせに悩んだことは多いです。

これまでご紹介してきた色合わせのサイトでも充分対応はできますが、illustratorなどのアプリのあるAdobe（アドビ）でも無料で使えるものがあります。

Adobeカラーの一般的な使い方や便利な使い方をお伝えしてきます。

　2023年、話題のワードプレステーマ「THE THOR」
⇒　THE・THORの公式ページを確認する。

※　今なら、8大購入特典をプレゼント！

関連記事【THE THORの評判】実際使ってみた口コミとレビュー。

Adobeカラーとは？

デザインなどのプロの方が使う「illustrator（イラストレーター）」や「Photoshop（aフォトショップ）」などの会社、Adobe（アドビ）が提供しているカラーツールのことを言います。

プロの方もつかうツールなので、初心者にはハードルが高い気もしますが、使い方を知れば簡単に色合わせができます。

主な機能としては、「カラーホイール」「色検索」「トレンド」などです。

Adobeカラーを検索してみる

Adobeカラーは検索で簡単に出すことができます。検索窓に「Adobeカラー」と入れて送信してみましょう。

検索がわからない場合には下のURLから入ってください。

⇒　Adobeカラー

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」！
⇒THE THORの公式ページを確認する
※今なら、8大購入特典をお付けしています！

関連記事【THE THORの8大特典！】ザ・トールの購入時の割引も調査。（WordPressテーマ）

Adobe「カラーホイール」の使い方

Adobeのカラーホイールとは、ある1色を決めその色と合う5色の色合いを抽出してくれる機能です。機能の中には、カラーハーモニーといって、調整システムがあります。

類似色を出したり、補色など選べるようになっています。

カラーホイールで中心になる色を指定する。

まずは基本になる色を指定しましょう。カラーホイール（中央の丸）の中に△マークのついたものがありますのでこれをドラッグ＆ドロップしながら好きな色へ移動させましょう。

すると下の5色の表示が変わります。今指定したのが中央の△マークがついている枠に入ります。今回はカラーハーモニーツール（左側）の中の類似色（よく似た色の組み合わせ）にしていますので、中心の色と近い色が出てきます。

このホイール内で1色を指定し、左側のカラーハーモニーツールで色の印象を変更していきます。

類似色の色合わせ

よく似た色での色合わせです。暖色系の色を指定するとそれに近い色が出てきます。

モノクロマティックの色合わせ

基本の色は暖色系ですが、モノクロマティックを選ぶとちょっと渋い色合いになります。

補色での色合わせ

補色というと、色相環の反対側の色ということになります。ちょっと難しいのですが、逆の色と考えるとわかりやすいです。

赤なら緑、黄色なら青という感じ。

テーマを抽出（色の呼び出し）

例えば、なにが画像があって「これ何色なんだろう・・・」って思ったことがありませんか。特に写真など色を確定することが難しそうな時この機能が役立ちます。

PC内に色を調べたい画像を保存しておきます。

上部にある「テーマを抽出」のタブをクリックします。

真ん中にあるファイルの選択をクリックし、PC内にある画像を指定します。

呼び込みたい画像を指定すると以下のようになります。左側で色の雰囲気も選べますし、色番号も記載されるのですごく使いやすいです。

尚、画像の中にある丸印をドラッグすると画像の中のピックアップする部分が変化しますので、知りたい色が手軽にわかります。

アクセシビリティツール

この機能は、おそらくプロの方も多く利用されていると思います。例えば背景とテキストや図形の色合いが良いか悪いか簡単に教えてくれるツールです。

例えばなにか色が決まっていてそれにテキストを配置する場合に、その色同士のコントラストが正しいかそうでないかと判断してくれます。

プロでなくてもユーザーにとってその色はどういう風に見えるのかなど基準にすると便利ですね。

ブログで使う場合には、トップページのボタンの背景とテキスト文字などに使えそうです。

トレンドでの色探し

Adobeでは、トレンドと言って色のイメージから選んでいく例がたくさんあります。元々ぼんやりとしたイメージしか浮かばない時などにとても便利です。

大きくは、「ファッション」「グラフィックデザイン」「イラスト」「UI/UX」「ゲームデザイン」など分かれていて、画像と共にイメージしやすくなっています。

↑「フード」より検索

もし気に入った色合いがあればこのアイコンをクリックすると色の番号も出てきます。

記載されている色をクリックするとコピーされますので、そのまま使うこともできます。

この機能は結構便利で、例の画像を見てよさそうなものを選ぶだけでなんとなくセンスの良い色合いになりますよ。

「検索」での色探し

Adobeカラーの検索という項目で色合いを探すことも可能です。あなたの頭にある色のイメージを検索窓に入れて探してみると意外な色が見つかります。

漠然としたイメージで検索してみる

なんとなくイメージだけで検索したい場合にも、それなりに近いイメージカラーが出てきます。頭のイメージだけあるけども言葉が出てこない場合なども便利です。

「都会」「田舎」「高級感」「結婚式」「夏の日」など調査すると以下のように色が出てきます。

「都会」と検索

検索に都会と入れると以下のようになります。ビルの画像が多いですね。画像の中から色を調査してくれます。

「田舎」と検索

田舎の風景画像がたくさん出てきます。緑が多めですね。

「高級感」と検索

例えば、ちょっとゴージャスな感じにしたいけど色ってどんなだろうと思った時、なんとなくのイメージを入れてみると以下のように出てきます。

金色っぽい色とそれに合わせる色があると使いやすいですね。

「遊ぶ」と検索

「遊ぶ」という言葉と色ってイメージしづらいのですがAdobeカラーでは遊んでいる子供を中心に色合いが出てきます。

色に迷ったり、イメージだけ先行してどうしていいかわからない初心者などにとても良い機能ですので一度試してみてくださいね。

Adobeカラーホイールで色合わせしてみる

では、実際にカラーホイールで、基礎となる1色からイメージ違いの色の組合わせを作ってみましょう。

今回は、オレンジっぽい色（#EFBC58）を中心にして作ってみます。

色については、ご自身で全部試しながら調整するのも良いと思います。カラーホイールの左側にいろんな色合い調整項目がありますのでチェックしながら決めてくださいね。

ここではちょっとしたコツなどをお伝えします。

見やすくするなら「類似色」

類似色は、基本の色に似ている色を集めてあります。補色（反対の色）を少し入れるのも良いのですが、補色を間違うとチグハグな印象となります。

初心者の場合なら、この類似色にしておけばだいたい綺麗に収まるのでお勧めです。

クールに見える「モノクロマティック」

モノクロマティックとは、基本色をモノクロっぽくイメージできる色合いになります。つまり「渋い」感じの色合いになるので、ちょっと大人な雰囲気を持たせたい時などに便利です。

カラフルにするなら「正方形」

色をたくさん使いたい時などには「正方形」で選ぶと、基本色の補色などが出てくるので便利です。5色全部を入れるのも良いですが、色の分量とかに気をつかわないとちょっと見てて不自然になるので、色をのせながら決めてください。

色が多い＝カラフルではないので、目につく色については少量にするとか考えて配置していきましょう。

初心者だからこそWordpress有料テーマ を使うべき理由

無料テーマを使うことで時間の無駄遣いをしていませんか？

• 思い通りのデザインにできない・・・
• なかなか稼げない・・・
• アクセス数が増えない・・・

こんな悩みを抱えていませんか？
 

稼ぐブログにしろ趣味ブログにしろ検索の上位にこなければなかなか読んでもらえません。もしあなたが稼ぐブログを作りたいなら、初心者の時に初期投資することはとても大事なことです。

 

Wordpressの有料テーマができる５つのこと

1. 検索上位を目指せる
2. 見た目が綺麗でおしゃれになる
3. 機能が豊富で出来ることが多い
4. 会員フォームなどのサポート
5. 有名ブロガーも有料テーマを使っている

 

これまでにあげた5つの有料テーマの特徴を説明していきます。

1.　検索上位を目指せる

ブログを運営していく上で対策をしていかなければいけないのがSEO対策です。検索エンジンのことを考えてブログを最適に合わせていくということがSEO（SearchEngine Optimizationの略）です。

• 情報の信頼性
• ユーザーへの役立つ情報であるか？
• スマホ・PCなどでストレスなく使える

 

などたくさんの要因がありますが、ブログを訪問した人があなたのブログの多くの記事を読んでくれるようなテンプレートの仕組みも有料テーマでは細やかに考えられています。

 

2.　見た目が無料テーマ以上に綺麗になる

シンプルが良いか、綺麗なテーマが良いのかそれぞれの好みによります。無料テーマは必要最低限のものを備えていますがやはりシンプルすぎていずれつまらなくなってしまいます。

有料テーマはデザイン性が高く自分の好きなデザインにもカスタマイズしやすいです。

出典：THE THOR 着せ替え「01」

↓　クリックで拡大します
出典：特製THE THORオリジナルアレンジ

 

3.　機能が豊富でできることが多い

今現在新しい機能として出てきたのが「着せ替え機能」です。過去にも賢威などにはベース色とパターンがありましたが最近ではアフィリなどはっきりと違った用途で使えるように作りこんでいます。

4.　会員フォーラムなどのサポート

なにかわからないことがあった場合、相談できる場所があるだけで安心できます。ここが無料テーマと一番違う部分、有料テーマでは売りっぱなしにしない工夫がされています。

5.　有名ブロガーも多数使用

稼いている有名ブロガーと言われる人のほとんどは有料テーマを使っています。ブログ造りでは内容も非常に大事ですが、文章や扱っている分野が同じ程度ならやはり最後の勝負はテーマの構造などになります。

もしあなたが稼ぐブログを作りたいと考えているならば「有料」テーマも検討してみてください。

カスタマイズで悩んでいる時間、ブログの完成度、上位に表示するメリットなど考えると有料テーマはあなたのお役にたちます。

当ブログおすすめWordpressテーマ！

WordPressテーマ「THE・THOR」

• 高機能の最新テーマで有名ブロガーも使用
• 着せ替え機能でいろんな用途に使える
• 複数のブログに使える（本人のブログ）
• 会員フォーラムやマニュアル完備

THE THORの8大特典を見てみる！

WordPressでブログを作る際に、テーマと呼ばれるテンプレートを使います。STORK19もそのテンプレの一種ですが、シンプルで使いやすいことで人気のテーマです。

STORK19はその名の通り2019年に元のSTORKからグレードアップしたのですが、それ以降徐々に機能もプラスしていっています。

このページでは、STORK19の新しい機能を踏まえた上で作ったサイトをお見せしようと思います。

　2023年、話題のワードプレステーマ「THE THOR」
⇒　THE・THORの公式ページを確認する。

※　今なら、8大購入特典をプレゼント！

関連記事【THE THORの評判】実際使ってみた口コミとレビュー。

STORK19でキャッチフレーズを表示する

ブログタイトルは基本上部に設定をしますが、ブログの目的などを設定するキャッチフレーズもあります。

STORK19では初期設定時には、このキャッチフレーズは表示されない設定となっていますので、もしブログ上に表示させたい場合にはここで設定をしましょう。

▼　外観　⇒　カスタマイズ　⇒　サイト全体の設定ロゴヘッダー

キャッチフレーズを考えて入力し、さらにその下の「キャッチフレーズを表示する」の表示するにチェックを入れます。

この下にテキストの大きさなど調整できる部分がありますので、バランスを見ながら調整していってください。

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」！
⇒THE THORの公式ページを確認する
※今なら、8大購入特典をお付けしています！

関連記事【THE THORの8大特典！】ザ・トールの購入時の割引も調査。（WordPressテーマ）

ヘッダー上部の配置の設定

従来のSTORK19なら、配置も2種類だったのですが、最近ではバラエティーに富んだ形式を選べます。

キャッチフレーズのおなじ画面を下にスクロールするとヘッダーのデザイン（PC用）とヘッダーのデザイン（スマホ用）があります。

好きなデザインを選びましょう。

微妙な変化がつけれるので、右にあるプレビュー画面で確認しながら設定してみてください。

⇒　国産WordPressテーマ「STORK19」

シンプルなヘッダー画像の設定方法

ヘッダーの画像については、元々画像を持っている人やダウンロードすれば設置できますが、フリーの場合には思ったような画像が手に入らない場合があります。

そんな時に、STORK19に元々ある超シンプルな背景を使うとサイズ感もセンスも良いヘッダーになりトップページがカッコよくなります。

このヘッダーは、見えづらいですが小さなドットの背景となっています。初心者の場合にはヘッダー加工しないでシンプルにセンス良く見えるのでおすすめです。

ヘッダー画像のテキスト設定

ヘッダー画像をテキストとボタンのみにし、背景を設置しただけのシンプルなトップページを作ってみましょう。

▼　外観　⇒　カスタマイズ　⇒　トップページ設定　⇒　ヘッダーアイキャッチの設定

上部には、PCとスマホ用の画像設定部分がありますが、下にスクロールしていき、テキストの設定で調整していきます。

★★

オーバーレイカラー（背景の色）を設定しましょう。全体の色の濃淡を調整すると強い色でも綺麗に収まります。

濃い緑で設定していますが、背景とテキストがおさまります

背景の形

背景のデザインは「ベタ塗り」「ドット」「ストライプ」の3種類があります。好きなものを選んでチェックをいれてください。

オーバーレイの透明度

背景の色の濃淡をここで決めます。レバーがありますので左右にドラックしながら調整してみてください。

寄せ

テキストを左、右、中央と調整できるようになっています。それぞれチェックを入れてプレビューを見て調整します。

テキスト設定の小技

テキストをこの画面で設定するときに、長い文書の場合には変な所で繰り越しをしてしまう場合があります。

画像で見るとバランスが悪いですよね。できればWordpressの頭で変更したいところです。

そこで、下記のように記号を入れると好きな部分で繰り越ししてバランス調整ができます.

折り返したい部分に　<br>　を入れるとそこで折り返します。

リンクボタン設定

テキストの下に誘導のボタンがありますがこれをリンクボタンといいます。色調整の下の部分にありますので、必要に応じて設定します。

• 誘導先のURL
• ボタンの色
• ボタンの上のテキスト

ボタンを光らせる

AFFINGER6などに見られる光るボタンにできます。ボタンを光らせるの「光るボタン」にチェックを入れるとボタンがキラリと光ります。

ヘッダー背景の透過

ヘッダーの上部の帯部分を透過させることも可能です。薄い色の背景にしておくとメニューもきれいに見えるので面白いかもしれません。

「ヘッダー背景を透過する」にチェックを入れると透過します。

ヘッダー背景の透過はかなり好みが分かれそうですが、統一感が出るので文字色とかを工夫しながら使ってみるのも良いと思います

STORK19のスライダー設定

記事が多くなってくるとどうしても埋もれてしまう記事がでてきます。そこで、アイキャッチを設定しスライダー設定で表示させるとブログが華やかになります。

▼　外観　⇒　カスタマイズ　⇒　トップページ設定　⇒　スライダー設定

スライダーの表示設定の「表示する」にチェックを入れるとスライダーが出てきます。

何件表示させるのかや、テキストの色、どんなサイズのスライダーにするのかなどこのページで設定できます。

ピックアップコンテンツ設定

AFFINGER6やJIN、Cocoonにもあるピックアップコンテンツ。（名称はそれぞれ違います）ページ上部にカードを配置できる機能です。

結構人気で、設定しているブログも多いので、おすすめです。

▼　外観　⇒　カスタマイズ　⇒　トップページ設定　⇒　ピックアップコンテンツ設定

この画面で、画像や誘導するURL、タイトルなどを設定しておきます。あとは上部にある「表示させる」にチェックを入れるとピックアップコンテンツが出てきます。

ヘッダーの色を調整する

ブログの上部に位置する部分の色調整も簡単にできます。配置などが決まったら、全体を見ながら色調整していきましょう。

▼　外観　⇒　カスタマイズ　⇒　サイトカラー設定

ヘッダー領域の部分の[ヘッダー]背景色（メインカラー）の色を変えると上部の色が変わります。

ヘッダー下お知らせの設定

ヘッダーのすぐ下に配置するお知らせの設定も必要に応じてやっていきます。ご自身のプロフィールでも良いですし、特定のページに誘導する部分です。

▼　外観　⇒　カスタマイズ　⇒　サイト全体の設定　⇒　ヘッダー下お知らせ設定

ここに、テキストやリンク先のURL、背景の色などを設定します。

グラデーションカラーの設定もできますので、プレビューで見ながら調整しましょう。

• お知らせ背景色1（グラデーションの左側の色）
• お知らせ背景色2（グラデーションの右側の色）

色に迷ったら、Adobeカラーなどで色を探してみてください。

ヘッダーに画像を入れる場合

もし、すでにヘッダーに入れたい画像がある場合も簡単に設定が可能です。PC画面とスマホ画面の双方設定ができます。

▼　外観　⇒　カスタマイズ　⇒　トップページ設定　⇒　ヘッダーアイキャッチ設定

PC画面の部分に画像を引き込むと以下のようになります。テキスト設定がそのまま出てきますので、出したくなければベタ塗りで白などの背景を設定します。

このヘッダー画像はイラストACでダウンロードしたものですが、イラストがハマればカッコよくなります。

イラストACのダウンロード方法は以下の記事が役にたちます。

STORK19では、カスタマイズがシンプルなので初心者でもとっつきやすいという利点があります。今はどのWordpressテーマでもだいたいは使いやすいですが、PC操作に不安がある方などはSTORK19のシンプル設定でも良いと思います。

初心者だからこそWordpress有料テーマ を使うべき理由

無料テーマを使うことで時間の無駄遣いをしていませんか？

• 思い通りのデザインにできない・・・
• なかなか稼げない・・・
• アクセス数が増えない・・・

こんな悩みを抱えていませんか？
 

稼ぐブログにしろ趣味ブログにしろ検索の上位にこなければなかなか読んでもらえません。もしあなたが稼ぐブログを作りたいなら、初心者の時に初期投資することはとても大事なことです。

 

Wordpressの有料テーマができる５つのこと

1. 検索上位を目指せる
2. 見た目が綺麗でおしゃれになる
3. 機能が豊富で出来ることが多い
4. 会員フォームなどのサポート
5. 有名ブロガーも有料テーマを使っている

 

これまでにあげた5つの有料テーマの特徴を説明していきます。

1.　検索上位を目指せる

ブログを運営していく上で対策をしていかなければいけないのがSEO対策です。検索エンジンのことを考えてブログを最適に合わせていくということがSEO（SearchEngine Optimizationの略）です。

• 情報の信頼性
• ユーザーへの役立つ情報であるか？
• スマホ・PCなどでストレスなく使える

 

などたくさんの要因がありますが、ブログを訪問した人があなたのブログの多くの記事を読んでくれるようなテンプレートの仕組みも有料テーマでは細やかに考えられています。

 

2.　見た目が無料テーマ以上に綺麗になる

シンプルが良いか、綺麗なテーマが良いのかそれぞれの好みによります。無料テーマは必要最低限のものを備えていますがやはりシンプルすぎていずれつまらなくなってしまいます。

有料テーマはデザイン性が高く自分の好きなデザインにもカスタマイズしやすいです。

出典：THE THOR 着せ替え「01」

↓　クリックで拡大します
出典：特製THE THORオリジナルアレンジ

 

3.　機能が豊富でできることが多い

今現在新しい機能として出てきたのが「着せ替え機能」です。過去にも賢威などにはベース色とパターンがありましたが最近ではアフィリなどはっきりと違った用途で使えるように作りこんでいます。

4.　会員フォーラムなどのサポート

なにかわからないことがあった場合、相談できる場所があるだけで安心できます。ここが無料テーマと一番違う部分、有料テーマでは売りっぱなしにしない工夫がされています。

5.　有名ブロガーも多数使用

稼いている有名ブロガーと言われる人のほとんどは有料テーマを使っています。ブログ造りでは内容も非常に大事ですが、文章や扱っている分野が同じ程度ならやはり最後の勝負はテーマの構造などになります。

もしあなたが稼ぐブログを作りたいと考えているならば「有料」テーマも検討してみてください。

カスタマイズで悩んでいる時間、ブログの完成度、上位に表示するメリットなど考えると有料テーマはあなたのお役にたちます。

当ブログおすすめWordpressテーマ！

WordPressテーマ「THE・THOR」

• 高機能の最新テーマで有名ブロガーも使用
• 着せ替え機能でいろんな用途に使える
• 複数のブログに使える（本人のブログ）
• 会員フォーラムやマニュアル完備

THE THORの8大特典を見てみる！

ブログを作っていく上で、記事も大事なんですが、その記事を装飾したり、訪問者に視覚でもっとわかりやすくしたりするには画像は必須です。

ただ、その記事やアイキャッチに合う画像を見つけ出すのも少しコツがありますし、例えばそれをアイキャッチにするにもほんの少しだけ技術が必要になります。

そこで、画像サイトとして有名な「イラストＡＣ」さんの使い方や、さらにカッコいいアイキャッチが作れる最新ツールもお伝えしていきます。

　2023年、話題のワードプレステーマ「THE THOR」
⇒　THE・THORの公式ページを確認する。

※　今なら、8大購入特典をプレゼント！

関連記事【THE THORの評判】実際使ってみた口コミとレビュー。

イラストＡＣとは

出典：イラストAC

いろんなイラストレーターさんが作品をアップロードしているイラストの素材サイトです。同じ系統で「画像」「シルエット」「動画」なども素材サイトとしてあります。

名前の通り、画像ACは写真が中心。シルエットACはシルエットイラストが中心、そして「動画」サイトも最近では新しく出てきています。

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」！
⇒THE THORの公式ページを確認する
※今なら、8大購入特典をお付けしています！

関連記事【THE THORの8大特典！】ザ・トールの購入時の割引も調査。（WordPressテーマ）

イラストACを無料で使うには

イラストACの画像を使うにはまず「会員登録」が必要となります。会員登録すると、画像がダウンロードできるようになりますが、無料会員の場合には1日にダウンロードできる枚数が決まっています。

イラストACの画像を定期的にダウンロードする場合には、有料のプレミアム会員に変更もできますので検討してみても良いでしょう。

• 無料会員・・・画像ダウンロードおよび検索には1日の制限あり
• プレミアム会員・・・ダウンロード＆検索に制限なし

イラストACの特徴

イラストACは、複数のイラストレーターが登録していて、それぞれ作品をアップロードしていますので、「いらすとや」さんのように同じテイストの画像だけではありません。

ひとつのテーマでもいろんな表現方法で描かれていますので、好みのものが見つかります。

イラストACのルール

イラストACでは、クレジットは特に記載せずに使うことができます。商用利用に関しては可能ではあるものの、少し細かなルールとなりますので、利用されるときに利用規約はご確認ください。

⇒　イラストAC　利用規約

イラストACの登録方法

イラストACや画像ACに登録すればグループサイトも使えますので、いったん登録しておきましょう。

イラストACの登録のやり方【初回無料登録】

初めての方のために登録方法をお伝えします。この登録をしておけば次からはログインしてダウンロードできるようになります。（無料の場合には枚数制限あり）

まずは、イラストACのサイトを開きます。

出典：イラストAC

右上にある、ダウンロード会員登録（無料）の部分をクリックします。

すると、上記のような画面に切り替わりますので、メールアドレスを入力し「次へ」をクリックします。

設定をしたメルアドにイラストACからメッセージが届きますので、承認し必要事項を入力していきます。

イラストACでの素材のダウンロード方法

登録が終わったら素材のダウンロードができるようになります。サイトに戻り検索をかけていきますが、少しだけ注意してほしいのは、無料の会員の場合には1日の検索回数とダウンロード数の制限があるということ。

検索も数回なので（時期により変化あり）上手に検索するコツをお伝えします。

イラストACでの検索方法

まずはサイトを開くと真ん中に検索窓があります。もちろん検索窓にキーワードを入力しても良いのですが、この検索が何度もできないのでドンピシャのワードならここに入れても良いでしょう。

出典：イラストAC

ただ、どんなものがあるか確認したい時や、分野等がわからない場合には、このサイトを下にスクロールしていくと、「イラストレーター」のダウンロード数別や、カテゴリー別に分けられていますのでそちらで確認してみてください。

出典：イラストAC

出典：イラストAC

イラスト素材のダウンロード

好きなイラスト素材が見つかったら次はダウンロードをしていきます。無料会員の場合には、大きなサイズは1日に1度だけのようです。（小さなサイズは複数枚OK）

ダウンロードボタンをクリックすると展開します。

ここで大きさを指定する場合もありますが、適宜選んでください。

ここで「JPEG」と「PNG」と「AI」とありますが、アイキャッチや記事に挿入用としてダウンロードする場合には、「JPEG」か「PNG」を選んでください。

違いを簡単に説明すると・・・

• JPEG・・・背景含む画像
• PNG・・・背景が透明な画像

例えば、Diverのヘッダーのようにワンポイントだけ含める場合にJPEGにすると四角の枠がそのまま出てしまいます。

ヘッダーの全体の背景と馴染ませたい場合にはPNGでダウンロードします。

ヘッダーの左側のイラストはPNG画像です。JPEGにすると背景が付いてくるので綺麗に収まりません。

イラストACの画像でヘッダーやアイキャッチを作る

イラストをダウンロードできたらそのまま使うか、ヘッダーもしくはアイキャッチ用に加工します。特にアイキャッチには、その記事に何が書かれているかわかるようにタイトルなどを挿入します。

もちろんデザイン的にきれいで目をひくものが良いのですが、自分だけで作ってしまうとワンパターンになったりします。

CANVAのようなツールや、イラストACのグループサイトのデザインACでも作れます。

CANVAの使い方は以下の記事が役にたちます。

関連記事ブログのヘッダー画像は「CANVA」でおしゃれに作成！目立つトップページのツールでの作り方。

2023.02.12

ここではグループサイトのデザインACでアイキャッチを作ってみます。

おしゃれなアイキャッチの作り方

グループサイトのデザインACでは、テンプレートなども豊富です。CANVAも使いやすくきれいなのですが外国のサイトなので、使った感じはデザイン的に外国っぽいアニメなどもあります。

デザインACはCANVAよりもデザインが細やかな感じがするので一度試してみてください。

デザインACを開く

イラストACの画面からデザインACに入っていきます。ホームページの右上の点の部分をクリックするとグループサイトの明細が出てきます。

出典：イラストAC

デザインの作成、デザインACをクリックして次の画面に移りましょう。

出典：イラストAC

デザインを作るのボタンをクリックするとパレットが開きます。

パレットの形式はCANVAとほぼ同じですので、どちらか使えるようになればどちらも使えます。

デザインACのテンプレート設定

パレットの左側に「テンプレート」のボタンがありますのでそちらをクリックしてください。

すると、ブログのアイキャッチ用にデザインされたテンプレートが出てきますので好きなものを選びます。

出典：イラストAC

いろんなデザイナーさんがアイキャッチ用にデザインしてくれているのでそのまま使うことも可能です。テキスト部分だけ変更をして使っていきます。

出典：イラストAC

他の画像と組み合わせたい時

イラストACでダウンロードしたイラストを重ね合わせたり背景に使うことも可能です。同じ画面の左側に「アップロード」というボタンがありますのでそちらをクリックします。

出典：イラストAC

挿入したい画像を選びアップロードします。

すると画面に出てきますので、画像をドラッグ＆ドロップして右のパレット部分に持っていき大きさを整えます。

出来上がったら、右上にあるダウンロードボタンを押してダウンロードします。（画像のきれいさや大きさなどもここで設定をします）

初心者だからこそWordpress有料テーマ を使うべき理由

無料テーマを使うことで時間の無駄遣いをしていませんか？

• 思い通りのデザインにできない・・・
• なかなか稼げない・・・
• アクセス数が増えない・・・

こんな悩みを抱えていませんか？
 

稼ぐブログにしろ趣味ブログにしろ検索の上位にこなければなかなか読んでもらえません。もしあなたが稼ぐブログを作りたいなら、初心者の時に初期投資することはとても大事なことです。

 

Wordpressの有料テーマができる５つのこと

1. 検索上位を目指せる
2. 見た目が綺麗でおしゃれになる
3. 機能が豊富で出来ることが多い
4. 会員フォームなどのサポート
5. 有名ブロガーも有料テーマを使っている

 

これまでにあげた5つの有料テーマの特徴を説明していきます。

1.　検索上位を目指せる

ブログを運営していく上で対策をしていかなければいけないのがSEO対策です。検索エンジンのことを考えてブログを最適に合わせていくということがSEO（SearchEngine Optimizationの略）です。

• 情報の信頼性
• ユーザーへの役立つ情報であるか？
• スマホ・PCなどでストレスなく使える

 

などたくさんの要因がありますが、ブログを訪問した人があなたのブログの多くの記事を読んでくれるようなテンプレートの仕組みも有料テーマでは細やかに考えられています。

 

2.　見た目が無料テーマ以上に綺麗になる

シンプルが良いか、綺麗なテーマが良いのかそれぞれの好みによります。無料テーマは必要最低限のものを備えていますがやはりシンプルすぎていずれつまらなくなってしまいます。

有料テーマはデザイン性が高く自分の好きなデザインにもカスタマイズしやすいです。

出典：THE THOR 着せ替え「01」

↓　クリックで拡大します
出典：特製THE THORオリジナルアレンジ

 

3.　機能が豊富でできることが多い

今現在新しい機能として出てきたのが「着せ替え機能」です。過去にも賢威などにはベース色とパターンがありましたが最近ではアフィリなどはっきりと違った用途で使えるように作りこんでいます。

4.　会員フォーラムなどのサポート

なにかわからないことがあった場合、相談できる場所があるだけで安心できます。ここが無料テーマと一番違う部分、有料テーマでは売りっぱなしにしない工夫がされています。

5.　有名ブロガーも多数使用

稼いている有名ブロガーと言われる人のほとんどは有料テーマを使っています。ブログ造りでは内容も非常に大事ですが、文章や扱っている分野が同じ程度ならやはり最後の勝負はテーマの構造などになります。

もしあなたが稼ぐブログを作りたいと考えているならば「有料」テーマも検討してみてください。

カスタマイズで悩んでいる時間、ブログの完成度、上位に表示するメリットなど考えると有料テーマはあなたのお役にたちます。

当ブログおすすめWordpressテーマ！

WordPressテーマ「THE・THOR」

• 高機能の最新テーマで有名ブロガーも使用
• 着せ替え機能でいろんな用途に使える
• 複数のブログに使える（本人のブログ）
• 会員フォーラムやマニュアル完備

THE THORの8大特典を見てみる！

Diverのトップページ（ファーストビュー）には、静止画以外にスライダーや動画も設定が可能となっています。

さらに動画の上に簡単な画像を重ねてオシャレな感じにもできます。

Diverのブログのトップページに動画設定する方法をおつたえしていきます。

　初心者でも簡単にカスタマイズできるワードプレステーマ「Diver」
⇒　Diverの公式ページを確認する。

※今なら、6大購入特典をお付けしています！

関連記事【Diverの評判】実際使ってみた口コミとレビュー。SNSでの噂も調べてみた。

トップページに設定する動画

ブログに設定する動画は下記のものになります。一応、青汁アフィリエイト用に簡単に作っています。

Diverのブログに動画を設定した完成図

動画をブログに設定してみると以下のようになります。高さを調整していますので、動画によっては、大きなものも設定できます。

この動画の上に、ドットを重ねたり、ちょっと暗くすることも可能なので一緒に説明をしていきます。

初心者でも簡単にカスタマイズできるワードプレステーマ「Diver」

⇒　Diverの公式ページを確認する。

※今なら、6大購入特典をお付けしています！

関連記事【Diverの６大特典】初心者でも楽々デザイン作成！評判の良いおすすめWordPressテーマ

Youtube動画のコードとは。

Youtube動画を貼りつけるには、コードをブログに設定をすることになります。Youtube動画にはそれぞれ共有できるコードがあります。

そのコードをコピペしてきて、Diverに設定します。

もちろん、動画のファイルをお持ちの方はそのまま（拡張子mp4）でも設定が可能です。ただ、ここを見てくださってる方は動画をお持ちの方は少ないと思いますので、まずは試しにYoutube動画で設定してみましょう。

　※著作権の問題がありますので、それぞれ動画を使われるときには権利の確認をしておいてくださいね。

なので、この方法を覚えておくと後々便利なのでぜひ覚えておいてください。

1. 動画を開き共有ボタンをクリック。
2. コードをコピペする。

動画を共有する前に確認すること

動画を共有して使用する前に、著作権等のことは確認しておきましょう。トップページに使用することはブログの顔になりますので、動画が使えるかどうか確認しておきましょう。

動画はがない時には購入も視野に【参考】

Youtubeで思ったような動画がない場合にはどうすればよいのでしょう。クラウドワークスやランサーズといったところで依頼することもできますが、若干面倒な部分もあります。

実際使ってみるとわかりますが、単発の動画を作ってもらうのに、クラウドワークスなどでは、依頼のページを作ったり、審査をしたりなど面倒なことも多いですし、テストで作ってもらうと意外にも上手でないこともあります。

動画単発で作ってもらうなら例を見てから

このブログで作っている動画の冒頭、オープニングに動画を作成してもらったので少し体験談をお伝えします。

まずは以下の動画のオープニングをご覧ください。

この最初の7秒間に流れるオープニング動画ですが、音楽付きで作ってもらいました。

ココナラという名前を聞かれたことがあると思いますが、ココナラで作ってもらったのです。ココナラの個別ページでは、作例などを配置してあるのでその方がどんなものを作ってくれるのかひとめでわかります。

クラウドワークスなどでは、作品を送ってもらって審査するのですが、ココナラならいくつか見てデザインが気に入った人に連絡を取っていくという方法です。

まずは相談してみて決めることも可能なので、使うのにハードルが低いですよ。

ココナラで好みの動画を探して作成

動画制作してもらったのは、1回だけなのですが、慣れない人でも楽にに依頼ができますので、もし自分だけの動画が欲しいな～と思ったらココナラサイトでいろんなデザインを探してみてください。

動画の最初の7秒間に流れている部分（音楽も含む）を作ってもらいました。

初めてでしたが、出品されている方は慣れている方も多いです。（ランク付けや、本人確認などで判断します）

動画とは別に、Youtube動画のフロントページにあるロゴも併せて送ってくれました。

⇒　ココナラ

Youtube動画ではなくmp4で設定する利点

Diverの場合には、Youtube動画だけではなくmp4形式の動画の設定も可能です。Youtube動画を設定した場合には、うまくループさせないと「次の動画」案内が出てしまうことがあります。

なので、動画を持っている場合にはそのまま配置をするとYoutube動画特有の宣伝が出ないので便利です。

もちろん、ループすることで回避できるので問題ありません。

Diverのトップページに動画を設定

Youtube動画のIDコードが取れたらトップページのヘッダー部分に設置をしていきます。大きさなども調整できますので、ご自身のブログとのバランスを見ながらやっていきましょう。

▼　Diverオプション　　⇒　ファーストビュー設定

ファーストビューの部分の「動画」にチェックを入れておきます。

表示オプションのトップページのみにチェック。（すべてのページに表示させたい場合にはこの部分の「すべてのページ」にチェックを入れます）

Youtube動画の場合には、動画タイプのYoutube動画にチェックを入れ、Youtube動画URLにコピペした動画IDをそのまま貼り付けます。

「変更を保存」をクリックすると反映します。

ヘッダーの大きさ調整

ヘッダーの高さは、表示領域の部分で調整します。この中での設定は、カスタマイズで400pxにしています。

Diverのブログの動画、デザインの小技

Diverの動画では、少しアレンジができるようになっています。「暗く」「ドット」「チェック」という加工方法があります。

それぞれ動画の雰囲気で合わせていきましょう。

「暗く」にした場合

同じ画面の「動画フィルター」で暗くを選んだ場合、以下のようになります。画像が白っぽい場合や、ボタン設置をする場合など見えづらくなる時にこれを選ぶと少しトーンが下がり見やすくなります。

「ドット」にした場合

ドットにした場合は以下のようになります。ちょっとブログの画像ではわかりづらいのですが、大写しにすると小さなドットが一面に広がります。

動画に別画像を最初に表示させる

例えば、ブログのタイトル画像を最初に表示し、流れで動画に変わるという演出も可能です。同じ画面の、「代替画像」の部分に、表示させたい画像を選定しておくと動画の前に画像が表示され、動画の最初部分と入れ替わります。

ブログのタイトルの画像を設定しておき、その後動画に流れるようにしたい場合などこの操作をすると良いでしょう。

動画の上にボタンや説明設置

動画の上に誘導ボタンや、ブログの説明文なども上に表示させることが可能です。ここまで説明してきたファーストビューの下にコンテンツ設定という部分がありますので、そこにタイトルや説明文、ボタンの色やURLなど必要項目を入れていきます。

Diverのトップページに動画設置　まとめ

Diverのトップページに動画を設定するのもかなりシンプル操作でできるようになっています。THORやAFFINGER6のように、YoutubeのIDを分解することなくそのまま貼り付けてOK。

さらに、動画をそのままアップロードして使えるので元々動画を持っている人も楽々設置ができます。

ちょっとしたデザインを重ねる加工も可能なのでヘッダー画像に変化を持たせることも可能なのでアレンジにもチャレンジしてみてください。

まだブログに動画を設定しているものは見かけないので、他との差別化にも一役買いそうですね。

初心者だからこそWordpress有料テーマ を使うべき理由

最近は、記事以外にもWordpressテーマのデザイン部分に動画設定ができるものが多くなっています。

AFFINGER6も記事以外に背景やトップページにも動画を設定できるようになっています。今回は、ブログに顔ともいえるトップページに動画を設定してみようと思います。

AFFINGER6のトップページにYoutube動画を設定してみるとどんな感じになるのか見ていきます。

　ブロガーが欲しい機能が満載のワードプレステーマ「AFFINGER6/ACTION」
⇒AFFINGER6（アフィンガー6）の公式ページを確認する。
※今なら、5大購入特典をお付けしています！

関連記事【AFFINGER6のレビュー】実際使ってみた感想と評判。

※　AFFINGER6（ACTION）は　AFFINGER5（WING）の後継版です。
⇒　違いについてはコチラの記事でどうぞ。

AFFINGER6に設定する動画

まずは、AFFINGER6に設定する動画をご覧ください。

この動画をAFFINGER6のトップページに設定してみます。

アフィリエイトで使えそうな簡単な動画を作ってみました。一応青汁アフィリエイトのイメージで作っています。

もしご自身の動画がある場合には、Youtubeにアップロードしてからコードを取るようにします。

Youtube動画のコードの取り方

Youtube動画には共有のコードがあります。ブログの記事などに貼り付ける時にもこの方法でIDコードをコピペして使います。

なので、この方法を覚えておくと後々便利なのでぜひ覚えておいてください。

1. 動画を開き共有ボタンをクリック。
2. コードをコピペする。

動画を共有する前に確認すること

動画を共有して使用する前に、著作権等のことは確認しておきましょう。トップページに使用することはブログの顔になりますので、動画が使えるかどうか確認しておきましょう。

動画はどうしたら手に入るのか【参考】

結構、著作権も問題ないピッタリの動画ってなかなか見つからないかもしれません。クラウドワークスなどで依頼するという手もありますが、良い人が見つからなかったり面倒だったりします。

このブログで作っている動画の冒頭、オープニングに動画を作成してもらったので少し体験談をお伝えします。

まずは以下の動画のオープニングをご覧ください。

ココナラで好みの動画を探して作成

動画は「ココナラ」で作ってもらいました。

後にも先にもこの1回だけなのですが、慣れない人でも結構簡単に依頼ができますので、もし自分だけの動画が欲しいな～と思ったらココナラのホームページで確認してみてください。

私の動画の最初の7秒間に流れている部分（音楽も含む）を作ってもらっています。初めてのことなので、難しく考えていましたが、ここに出品されている方は慣れている方も多いので、リードしてくださり、すごくスムーズに購入ができました。

動画とは別に、Youtube動画のフロントページにあるロゴも併せて作ってくださりかなり重宝しています。

⇒　ココナラ

もちろんご自身のYoutube動画がある方はそちらを使ってください。

動画を開き共有ボタンをクリック

Youtube動画を開き、動画の右下にある「共有」というボタンをクリックします。

すると以下のようにコードが書かれた部分が開きますのでコピペをしてください。

取り出したコードのスラッシュ（/）より後ろをAFFINGER6に設定しますので、分解してどこかに保存しておきましょう。

AFFINGRER6の設定

YoutubeのIDコードが取れたら次にブログに設定をしていきます。今回は、ブログのトップページに見えるように配置していきます。

AFFINGER6の場合には、背景の全体が変わりますので、このやり方を覚えておけば、背景になにか動画を設定したい時にも応用できます。

AFFINGER6の管理画面での変更

まずは、AFFINGER6の管理画面にて動画のコードを設定します。

▼　AFFINGER管理　⇒　トップページ　⇒　Youtube背景

背景に流すYouTube動画IDの部分に、先ほどコピペして保存したIDコードを入力します。その下にある、トップページ（PC）の背景で動画を流すにチェック。

下のオプションも見ていただき、必要な部分にチェックを入れていきましょう。例えば、動画をループさせたいなら、「動画をループ再生」にチェックを入れます。

最後に下にスクロールし「SAVE」をクリックします。

これで、背景に動画設定が完了しました。

カスタマイザーで高さの調整

管理画面の設定だけでは、トップページが現れず、背景のみの設定となります。カスタマイザーでのヘッダーの高さ調整をして初めてトップページ部分が現れます。

▼　外観　⇒　カスタマイズ　⇒　ヘッダー画像

ヘッダー画像エリアという部分がありますので、ここで高さを調節します。

上記は、PCのヘッダーを450pxに調整したものです。短いと感じれば500にしたりバランスを見ながら設定していってください。

この設定をしない場合

カスタマイザーで設定をしないと以下のようになります。動画は反映されるものの、記事の枠がかぶさってしいキチンと見えません。

例えば、一面に小さな柄などを設定してあるような背景ならこのままでも良いです。つまり、パターン化された小柄の背景動画をお持ちの場合にはこの設定をするとブログの後ろで動画が動くのでとても面白い演出になります。

AFFINGER6のYoutube動画設定まとめ

AFFINGER6の動画設定には、背景の設定とトップページの設定があります。（動くという観点からだとスライダーなんかもあります）

1. AFFINGER6管理画面でYoutube動画のIDコードを設定
2. カスタマイザーでヘッダーの高さ調整

上記2点の設定で、ヘッダーを動画にすることができます。背景に動画設定をしたい場合には、上記の工程①だけで設定可能。

さらに、動画をループさせたり音が含まれている動画の音を出したりするのもオプションで設定が可能です。

動画の設定をすることで他のサイトとの差別化を図ることができますが、ただ動画を前面に設置することで重くなってしまう場合があるので調整をしながら設定をしてみましょう。

ご自身のオリジナルの動画を作ってもらいたい場合には、ココナラが簡単にちょっとだけ注文ができるので、試しに登録しておくと便利です。

 ⇒　簡単！無料会員登録はこちら

初心者だからこそWordpress有料テーマ を使うべき理由