どうも！最近は破竹の勢い！？でブログやnote、youtubeの活動をしているエルティアナです🍹
今回、私的にはついに！自分のブログのトップページにメインビジュアルを差し込みたい！という念願を叶えるために、記事を書きながら実際の反映を進めてみたいと思います！
やってみること
JIN(当ブログで使用しているWordPressのテンプレート)のマニュアルを復習しながら、自分のブログにメインビジュアルを設定する。
そのために以下のブログがとても参考になりそうなので、こちら読ませていただきながら作業してみたいと思います！
JINはブログ特化型のテンプレートで、日々の更新は非常にしやすいのですが、全体のデザインテンプレートの編集に関してはやや癖がある印象ですので、今回も過去にまとめてくださった方々のお知恵もおかりして、自分のサイトにも備忘録を残しておこう！という考えだったりします…！
ちなみにベースとなるメインビジュアルは、以下のnoteでご紹介していますが、今回ChatGPT(DALL-E3)×Stablr Difuusion×Photoshopの合わせ技で作成しました！
こんな感じのメインビジュアルが作れて大満足なのです！
作り方の詳細はnoteに書いています(一部有料で恐縮です…)ので、ご興味あるかたはぜひみてみてください！！
必要画像の準備
メインビジュアルの横幅は2,400pxが推奨で、高さについては特に制限がない、とのことだったので、Stable Diffusionで生成した画像の横幅が1,792pxしかなかったものを拡大する必要があるかな💦という感じだったので、AIで拡大できないかやってみます。
Photoshopの『スーパーズーム』を試してみる
最近のPhotoshopには元画像のサイズをAIの機能で品質を良くしながら拡大できる機能がついているらしいので試してみます。
まずは画像を読み込んで
フィルタ→ニューラルフィルター
スーパーズーム
いい感じのサイズになるまで拡大したらOKを押すと拡大されるので、試しに画像解像度をみてみたら…すごい、横幅7,000px超になってて、画像の劣化も全く見られません！これは感動！
これだけでかい画像が作れたら、縮小やトリミングをすればいい感じなので次の工程に移ります！
ヘッダー画像の反映
高さについて制限がないのが気になる(実際はめてみてどのくらい画面を圧迫するか不明)のですが、これはとりあえずはめてみてから調整してみようかな！と思っています。
PC表示用メインビジュアル
PCは2,400pxのサイズ指定があるので、↑で作った画像の解像度を2,400pxにして別で保存します。
…たぶん縦に長すぎる気がしたので大体以下くらいにトリミングしてみました。
SP(スマホ)表示用メインビジュアル
こちらは横幅1,500pxということですが、スマホだとあきらかに縦長のほうがよさげなので、1,500*750って感じでいったんトリミングして以下のような画像を作ってみました！
ヘッダー画像反映とサイトデザイン変更
JINにはトップページの『サイトデザイン』という概念があり、この設定によってはそもそもトップページにメインビジュアルを出さないようになっているものがあって、それを選んでしまっていると、そもそもメインビジュアルが出せない(私は現状あえてそうしていた)ので、ここをまず変更したいと思います。
ヘッダー画像反映
まず用意したヘッダー画像(PC/スマホ用)をヘッダー画像として登録します。
WordPressの上部メニュー『カスタマイズ』を押して始めます。
ヘッダー画像のところにPC用画像、一番下で設定できるスマホ用ヘッダー画像のほうにスマホ用画像を登録します。
サイトデザイン変更
次に同じくカスタマイズ画面から『サイトデザイン』の変更をしてみます！
今回の変更では、もともと『スタイル３』にしていたものを『スタイル４（ヘッダー画像あり）』に変更します。
これで【公開】ボタンを押すと無事にメインビジュアルが反映されて公開されました！
※スマホ用画像ちょっと高さ調整しました。
キャッチコピーなど微調整
無事メインビジュアルが反映できたのはよかったのですが、JINのデフォルトで入っている『読む人も、書く人も、すべてを考え抜いたデザイン。』とか『真の使いやすさを追求したWPテーマ『JIN』』とか『ダウンロード』ボタンなどが表示されてしまっているので、これを最後に編集してみます！
キャッチコピー
キャッチコピーは、ChatGPTと議論した結果、個人的にとても気に入ったコピーができたな！と思うのがあって、
魔法のような技術で、未来の知が導く新たな価値を紡ぐ。
こちらで行きたいとおもうので反映してみます！
メインのキャッチコピー
サブのキャッチコピー
メインビジュアル内の画像はいったん消します。
キャッチコピーを実際いれてみると、ちょっと変えた見たくなったり文面を調整して、『公開する』を押すと、無事反映されました！
まとめ
ほんとに約3～4年くらい、メインビジュアルはいつか入れて、自分のブログを華やかにしたい！と思ってできていなかった中全然できてなくて、こちらのビジュアルを3～4時間で生成できてしまったというのは本当に衝撃で、こんなすごいイラスト自分では一生かかっても書けないし、人に頼むとしてもこんな描きこみいくらでやってくれるのかな…とか何か月かかるのかな…とかつてAIの登場前は絶対なっていたと思います…！！！
それが一人で、ChatGPTと画像生成AI、AI機能は追加されていはいるけど旧来のツールであるPhotoshopの合わせ技で3～4時間でできる時代になりました…
こんなことになるとは夢にも思ってなかった…というのが本当に感じる実感です。
これからどんどん簡単に、なんとなくAIにお願いするだけでここまでのことができたりするようになるかも…という未来も容易に見えたりもするんですが、今のところはこの手順なんかが結構早いうえに自分の意図を反映してくれやすいかな！という感覚で、今回のメインビジュアルは作ってみました！
逆にこうしてJINにビジュアルをはめ込むほうが苦労してたりしますが…今回の記事を書いたおかげで、またしばらくたった時に、頭に何も残っていない…という事態は避けられそうなので、引き続き自分用感の強いブログですが、だれかの参考になってもらえたらうれしいです🎵
引き続き、何卒よろしくお願いいたします！
