![見出し画像](https://assets.st-note.com/production/uploads/images/95366091/rectangle_large_type_2_01f9e9f083fe348ee9e574bd9302090a.png?width=1200)
【無料配布&DL】noteヘッダー画像配置テンプレート作ったよ|月間30万PV現役保育士web屋さん
こんばんは!
現役保育士ウェブ屋さん&30万PVブロガーのあつみです♪
保育園・幼稚園・デイサービスやフリースクールなど福祉施設を中心に…
ホームページ制作やWordPress構築代行してます!
|このnoteでは…
「noteクリエイターページのヘッダー配置テンプレート作ったよ」
って事をお伝えしていきます!
どいう事やねんって言うと、コレ↓
![](https://assets.st-note.com/img/1673367454613-2EOTM7o3CY.png?width=1200)
必要なら保存・ダウンロードしてご利用くださいーPNG形式です!
「…で、この画像がなんやねん」
「え?コレ何?」
「意味わからんぞしばくぞ」
と思ったら使い方解説してるので、続きをお読みくださいませー!
ーあつみさんはこんな人(2022/11時点)ー
現役保育士として勤めながらブログはじめた人
趣味だったのが月間30万PV/収益10万円まで育っちゃった人
同人誌とかもたまに作る(コミケで会えるよ!)
Kindle出版で25000円↑/月の印税もらってる人
ブログ運営の経験を活かしてココナラでHP制作やブログ製作始めました!←イマココ
■noteクリエイターページのヘッダー画像、設定でイラついた人へ!
さて、まずnoteクリエイターページのヘッダー画像ってのはここの事です!
![](https://assets.st-note.com/img/1673367603719-WCrZtlBcEP.jpg?width=1200)
上記は現在の私のnoteクリエイターページなのですが…
自分のページのTOPに、画像を設定する事ができるんです!
メインビジュアルを設定するのって、自分のアカウントを表現するために大事な要素なのですー!
●ヘッダー画像が、思い通りの表示にならない…
せっかくあるヘッダー画像機能、使ってみたいな~って思いますよね!
「おー面白い!自分の好きな画像をつけてみよう!」
と意気揚々、設定を始めるのですが…
![](https://assets.st-note.com/img/1673367890467-kchIRFO2qE.jpg?width=1200)
上記のような設定画面で、画像を調整していくのですが…
表示される白枠部分が…動かせない!!なんで!!
好きな画像を用意しても、調整が不可能なんです…
■そこでnoteヘッダーテンプレートを作りました
noteの仕様は私たちでは変えられません。
つまり、こちらでピッタリ当てはまるように、画像を作成・用意するしかないんです!
つーわけで作りました!
![](https://assets.st-note.com/img/1673368117264-jwrLFPy7I7.png?width=1200)
透過PNGです
画像を作成する時、上記画像をダウンロード&保存して…
赤枠の範囲内に表示させたい要素をいれてみてください!
仕組みとしては、下記になってます。
![](https://assets.st-note.com/img/1673368242165-TvgH1Y2q4x.png?width=1200)
さてnote公式によるとクリエイターページヘッダー画像の推奨サイズは…
1920×1006とかいう謎に中途半端な数字です。
(この画像サイズの規格って何かありましたっけ…あったらゴメン知らないです)
さらに、その中央の324pxがクリエイターページヘッダーに表示されます。(全画面はSNSシェア時なんかに表示されるらしいよ!)
なので、赤枠の中に、表示させたいものを置けばいい、という事です!
■こんな感じで使うよ(フォトショの場合)
てなわけであつみさんが実際にやってたのはこんなかんじ!
画像でばっかですがごめんね!
![](https://assets.st-note.com/img/1673368452681-eP0YD5yEiq.jpg?width=1200)
フォトショじゃなくてもできるで
まず、あなたの使ってる画像ソフトとかで、このnoteから保存したPNG開いてください!
![](https://assets.st-note.com/img/1673368508640-3kf4WsX1oZ.jpg?width=1200)
んで、赤枠の中に、表示させたいものを配置しながら画像を作ってね!
こうやって作った画像をnoteで表示すると…
![](https://assets.st-note.com/img/1673368611755-0PLQ3TvMyr.jpg?width=1200)
こんな感じで収まりましたー!
これでクリエイターページTOP画面で、好きな画面を表示しつつ、
SNSシェア時にも、好きな画像を表示させる…両立が可能ですー!
(実際に設定したあつみさんのクリエイター画面TOPはこちらですー)
参考になったよーって方はイイネするよりも…
↓のポートフォリオサイトみてくれるほうが嬉しい~笑
ホームページ制作、やってますー♪
~ポートフォリオ&特設サイトはこちら~
あつみさん、ホームページ制作サービスを販売してますー!
上記サイトで、ポートフォリオとかサービスの詳しい情報載せてます!
みてみてね!
~ココナラ依頼のリンクはこちら~
依頼、お待ちしております♪
★初めてココナラで依頼される方へ!ココナラクーポンコードをご利用ください(1000円分)
初めてココナラで依頼される方へ!
1000円分のクーポン付与コードをご活用くださいませ♪
「コードをお持ちの方は…」から【REKP2B】を入力してみてください!
この記事が気に入ったらサポートをしてみませんか?