こんにちは、Reiraです！
今回頂いたご相談は
ストークのトップ画像が上手く設定できない！！
このお悩みはご相談を受けることが多かったので、実際の簡単な修正方法も一緒に詳しく紹介していきたいと思います。
ストークはとっても簡単に綺麗なサイトが作成出来るので、TOP画像でつまずいて設定していない方やお悩みの方は是非参考に設定してみてくださいヾ(๑╹◡╹)ﾉ”
上手く設定出来ない原因
ストークは簡単にTOP画像を設定出来ますが、上手く設定できない原因として
①テキストの設定が必要
英語表示テキスト（大）、日本語表示テキスト（小）の設定をしないと画像が表示されない！
また、リンクボタンの設定により画像の表示される高さが変わってしまう！
表示される範囲に合わせた画像と、テキストとリンクの表示に合わせた画像を用意していかないといけなくなるので
「画像の表示が合わない」
「変な場所にテキストがくる」
などの悩みが出てきてしまいます。
テキストを設定しなくても、TOP画像だけ表示させる方法はこちらで紹介しています^ ^
②設定の表示サイズ
ストークは指定した画像が実際の表示サイズに合わせた状態で表示されるので、使いたい画像が思ったように表示されないといった事がおきます。
③便利な表示設定
TOP画像の設定が細かく出来るので、逆に設定方法に悩んでしまう方が多いです。
大まかには、この３つのポイントで悩んでいる方が多いですね。
設定したい画像を用意して、画像にもよりますが
ストークの表示に合わせて画像を調整していくのが簡単だと思います^ ^
ストークのTOP画像の設定方法
ストークの画像の設定方法はこちらの記事をご覧ください。
はじめに画像を設定してみてから、調整が必要な場合はこれから紹介する方法を参考にしてみてください^ ^
ストークのTOP画像の位置の調整方法
①表示させたい箇所に合わせて切り抜く
例えばこのような写真を設定しようと思います。
実際にストークに設定するとこんな感じになります。
丁度画像の真ん中部分が、表示されているので顔が切れた状態で表示されてしまいます。
下の画像の赤枠部分が表示されている箇所ですね！
なかなか思うようにストークのTOP画像が設定出来ないといった時に、よく頂くご相談の原因が『表示したい位置に調整出来ない』といった事なので切り抜く事で簡単に設定していく方法をご紹介していきます。
それでは、顔全体を表示させたい（下の赤枠部分）と思った時は、この表示位置が真ん中に来るように画像を切り抜いていきます。
ぴったりサイズで切り抜くよりも多少上下に同じぐらい余裕をみて切り抜いていきます！
こんな感じで切り抜きました、
これを実際にストークに設定してみると
ピッタリ、顔全体が表示されるように設定できました！
テキスト部分が真ん中だと、顔が見えなくなるので左にずらしてあげて
ストークのトップ画像の表示サイズに合わせて切り抜くことで、表示したい画像の位置に簡単に設定することが出来ます^ ^
画像によっては切り抜いても上手く設定出来なかったり、全体を表示させたいなど、出て来ると思います。
画像を作成できる場合は、表示サイズに合わせた画像を作ればいいのですが
なかなか画像を作成するのは難しい方も多いと思うので、次にストークのTOP画像の設定方法による違いを紹介していきます。
ストークのデフォルトの設定方法の違い
ストークはヘッダー背景サイズとヘッダー背景繰り返しで、TOP画像の表示の仕方を変える事が出来ます。
分かりやすく、先ほどのストークのTOP画像に切り抜いて設定した画像を使って紹介していきます。
基本的には、横長（画面いっぱい）に画像を設定するのが一般的ですが、
●縦横AUTO
●横100％
こちらのどちらかの設定ですね！
その他の設定をすると、どうなるかやってみたいと思いますヾ(๑╹◡╹)ﾉ”
縦100％+繰り返し表示
設定した画像の縦幅が！00％表示された状態で、画面いっぱいに表示されるように画像が繰り返される感じになります。
『なぜか画像が何枚も表示される！』といった時は、繰り返し表示にチェックが付いている状態です。
縦100％+繰り返ししない
設定した画像の縦幅が100％の状態で、一枚だけ表示された状態になります。
左右のサイズが足りない部分は空白の状態になる感じですね！
サイズ調整しない
設定する画像の実際のサイズによって表示のされ方は変わってきますが、設定した画像サイズのまま表示されます。
ストークのヘッダー背景サイズとヘッダー背景繰り返しを使う事で、表示の仕方を変える事もできるので、
設定したい画像に合わせて一度色々試してみるのもいいと思います^ ^
それでも上手く設定出来ない！！という時は
基本的にTOP画像は表示に合わせて、調整・作成していく事が好ましいですが
『切り抜いたり、作成するのは難しい！』
といった場合は、ストークのTOP画面表示のされ方を踏まえた上で
上手く設定出来てしまいそうな写真を探してしまうのもオススメですヾ(๑╹◡╹)ﾉ”
フリーで使える画像検索にかなり重宝するサイトを紹介します！
私が実際にかなり使っているお気に入りのサイトです。
絶対オススメのフリー画像サイト３選！！
まずはじめに紹介するのは『こんな便利なサイトあったんだっ！！』と感動したサイトです！
たくさんのフリー素材サイトの画像を１つのサイトで検索できるので、絶対オススメの便利サイトです^ ^
キーワードを入力するだけで、たくさんのサイトのフリー画像が検索出来ます！
O-DAN
次に紹介するのが、とにかく可愛いフリー画像サイトです！
とにかく可愛い^ ^
女性向けにはなってしまいますが、可愛い写真が欲しいなら迷わず検索してみてください！
GIRLY DROP
そして、最後に紹介するのが少し変わり種を見つけたい時などに使える色々な画像系のサイトを紹介しているサイトです！
デザイン系の仕事をしている方も重宝するサイトなので、見ているだけでも楽しい記事が満載です^ ^
PHOTOSHOPVIP
最後にまとめ
今回は、ストークのTOP画像を簡単にピッタリ表示させる方法を紹介して見ました！
●切り抜く
●設定を変える
●入れるだけで大丈夫そうな写真を選ぶ
と、誰でも簡単に設定できそうな感じの方法を選んで見ました^ ^
TOP画像一つでも、毎日の記事の更新が楽しくなったりするので、ぜひ自分の好きなサイト作成に役立てれば嬉しいです！
それではヾ(๑╹◡╹)ﾉ”
