「ペライチ」のヘッダー文字が読みにくいのをなんとかする
まいど。 nakano10です。
「ペライチ」 便利ですね。
わたくしもお客様から「ペライチで」制作するよう指定をいただくことがあります。
ご自分でホームページを作ってみたいかたもいらっしゃるでしょう。
ここではおもに、ご自分で作りたい方、しかも「できるだけお金をかけたくない」かたのために、可能な限り無料で出来る技をお知らせします。
まずは、「ヘッダー文字を読みやすくする」
ペライチでは、用意されたテンプレートを使うとある程度きれいに整いますが、背景に文字が被ってしまい読みづらくなることがあります。
![](https://www.yourbridges.com/wp-content/uploads/2020/06/d064a4a0421f7b08d73492e96b6ec37f-963x1024.png)
読みづらい例
背景画像を変えてみるといいのですが、背景が文字にかぶらない背景画像を見つけるのはめんどくさい。
![](https://www.yourbridges.com/wp-content/uploads/2020/06/f6c21df933239eb05f93be170d3d92d7-963x1024.png)
背景画像を変えてみた例
こういうときは背景画像を加工してみましょう。
加工するときに便利なのが「canva」 無料で使えます。
canvaを使って
![](https://www.yourbridges.com/wp-content/uploads/2020/06/81b9b2d6b14c3916b99d9978c2315ee9-963x1024.png)
背景画像をcanvaで加工した例
このように加工してみましょう。
方法は簡単です。
画像をどこかから入手します。
「ペライチ」できれいに表示されるために
横幅1600ピクセル以上の画像を入手してください。
この横幅が少ないと、眠くて残念な画像になってしまいます。
![](https://www.yourbridges.com/wp-content/uploads/2020/06/6f2211766702952f0bc3732a27adbba0-1024x847.png)
画像の横ピクセル数が少ないために拡大された例
パッと見、違いがわからないかもしれないですが、ちょっとしたボケ感は見た目のクオリティーに影響します。
横幅がわからないとき、調べる方法があります。
Macだとアイコン上で右クリック⇒「情報を見る」で、このような画面が。Windowsの場合はごめんなさいわかりません。
次に「canva」で「デザインを作成」するときに「カスタムサイズ」で作成し、
![](https://www.yourbridges.com/wp-content/uploads/2020/06/929b364e7b4d158b8803f1256205d9ed.png)
「カスタムサイズ」を指定
![](https://www.yourbridges.com/wp-content/uploads/2020/06/b95e5a929192cfc7f0f2623a50ca023e.png)
縦横のピクセル数を指定
横幅1600 縦900px にしておきます。 「16:9」になってるのがポイントで、この比は「ここ10年ほどのノートパソコンの画面縦横比」です。
使いたい画像をcanva上にドラッグしてきます
![](https://www.yourbridges.com/wp-content/uploads/2020/06/02938ddaf74abcd0e4c0f6baaed1f201-1024x660.png)
画像をcanvaの画面上にドラッグ
この画像の「透明度」を操作します。50%くらいがよいかと。
![](https://www.yourbridges.com/wp-content/uploads/2020/06/77c3afe92d7967df4c25e3dcea2f08a4.png)
「透明度」を操作
すると、文字を乗せやすい感じになります。
![](https://www.yourbridges.com/wp-content/uploads/2020/06/40688c63f1056979e4a14068368251b0-1024x661.png)
透明度を50%に設定した例
この画像をjpg方式でダウンロードします (png方式推奨ってメッセージが出ますが無視。pngだと「重い」画像になり、ホームページ上では読み込まれるのに時間がかかります)
![](https://www.yourbridges.com/wp-content/uploads/2020/06/91becf8b69aa9588f72de88c978a853d.png)
jpg形式でダウンロードする
ペライチの背景に、この画像を設定して、出来上がり。
![](https://www.yourbridges.com/wp-content/uploads/2020/06/81b9b2d6b14c3916b99d9978c2315ee9-963x1024.png)
背景画像をcanvaで加工した例
こういった、ちょっとした加工技を、今後何回かお伝えします。
コメントを投稿するにはログインしてください。