『ヒーロージェネレーターであなただけのヒーローが誕生します』というブログの説明画像です。

ヒーロージェネレーターであなただけのヒーローが誕生します

Last Updated on 2021年12月27日 by webassistant

ホームページのファーストビューの部分に画像を入れて、キャッチコピーなど伝えたいことを書いた部分をヒーローとも言います。
このヒーロー部分を直感的に制作できるサービスがあります。
デザイン泣かせ、コーダー泣かせのサービスです。
海外のサービスですので、詳しく解説いたします。

The Hero Generator

ヒーロージェネレーター(https://hero-generator.netlify.app/

指のマークから画像をアップロードいたします。
おすすめのサイズはパソコンで横幅1200px以上、スマホで376px以上です。
アップロードしましたら、あとは直感的な操作だけで大丈夫です。
なお、画像はあとから差し換えできますが、設定した効果が変わってくるので、変えなくても大丈夫なような画像を用意すると良いでしょう。

詳しく解説

直感的といっても分からない人もいると思うので、左列の上から順に解説します。
Gradient Overlay:オーバーレイは画像に影をつけることで文字を引き立たせます。
 Cerclarはコーナーから丸く影ができます
 Upは上、Downは下に影ができます。
 矢印はそれぞれ矢印の方向に影ができます。
 Noneはオーバーレイなしです。

Gradient Reduction:影の量というか長さを変更できます。
数字が大きくなればなるほど影は増えます。

Button Radius:ボタンの角の丸みです。0にすると直角になり、数字を大きくすると完全に丸い角になります。

Title Spacing:タイトルとボタンの間の距離です。
画像の縦幅がサンプルと変わる場合や文字に改行がある場合などにはバランスを考えて設定する必要があります。

Button:オフにするとボタンが消えます。
今はオンの状態です。

Button Color:ボタンの色です。
カラーピッカーから選ぶか、カラー番号を打ち込みます。

Button Hover Color:カーソル(指マーク)をあわせたときに色を変えることができますが、その色です。
上のボタンの色と同じ色にすると変わらないボタンもできます。

Gradient Color:最初に設定したオーバーレイの色です。
初期は黒になっているはずです。

最後に「Please may I have some code」をクリックすると右側にビローンとコードが表示されます。
コードはCSSとHTMLです。
CSSはワードプレスでしたらStyleCSSのファイルか、もしくは適当なプラグインなどを利用して貼り付けます。
HTMLはボタンの名前やキャッチコピーを変えて、表示させたいところに貼り付ければOKです。

まとめ

個人的にはオーバーレイの設定が最初と最後の方に分かれていたり、最初にすべき画像のアップロードが下にあったりとわかりにくいインターフェイスは改善の余地があると思います。
しかしながら、コピペでできる非常に便利なツールだと思います。
参考になりましたでしょうか?
ぜひ、使って感想をお聞かせください。

この記事についてのお問い合わせはこちらからご遠慮なくご連絡ください。

当社では、WordPressを用いたWebサイト制作を行っております。
お問い合わせはこちらまでお気軽にご連絡ください。

制作実績はこちらからご確認ください。
⇒【View Now!】WordPress制作事例をチェック!

ノーコードで簡単ウェブ制作なら断然ELEMENTORが便利です。

この記事についてのご質問がある方はワードプレスの学校でお願いいたします。

当社では、WordPressを用いたWebサイト制作を行っております。
ホームページの制作については、こちらからお気軽にお問い合わせください。

制作実績はこちらからご確認ください。
⇒【View Now!】当社の制作事例をチェック!

ノーコードで簡単ウェブ制作なら断然ELEMENTORが便利です。

ワードプレスの学校

ワードプレスについて何時でも何度でも質問ができる「ワードプレスの学校」を開設しました。
本サイトで解決できなかった問題は直接ワードプレスの学校で質問ができます。
ぜひ、ワードプレスの学校をチェックしてみてください!

Join our newsletter

毎週金曜日に最新のワードプレスの情報を配信しています
いつでも解読できますので、お気軽に登録してください

Join Our School

ワードプレスについて何時でも何度でも質問ができる「ワードプレスの学校」を開設しました。
本サイトで解決できなかった問題は直接ワードプレスの学校で質問ができます。
ぜひ、ワードプレスの学校をチェックしてみてください!

— ワードプレスの学校でワードプレスについて一緒に学びませんか —

ブログを読むより、ユーチューブ動画を見るより、ワードプレスに精通した講師に直接聞いて問題を解決しましょう!ワードプレスの学校は、質問し放題のオンラインスクールです。