SWELLでページタイトルの背景に画像を埋め込む方法の紹介をします。
SWELLユーザーのページでたまに見かけるこんなページありますよね?
![背景画像を入れたページタイトル](https://www.ozpapa-dojo.com/wp-content/uploads/2022/03/スクリーンショット-2022-03-26-16.46-1-800x283.jpg)
特に固定ページのタイトルの背景に画像を入れると、ページ自体がスタイリッシュな印象になります。
同じテーマの記事同士に設定すれば統一感も出るので良いかもしれません。
Contents
タイトルの背景画像を選択する
タイトル下に画像を付けられるページは、全てのページで行うことができます。
やり方は、投稿編集の画面右上の【歯車マークを選択して】→【投稿のタブを選択】→【タイトルの背景画像】で設定してください。
![投稿設定の歯車マーク](https://www.ozpapa-dojo.com/wp-content/uploads/2022/03/スクリーンショット-2022-03-26-17.09.53.jpg)
![タイトルの背景画像設定](https://www.ozpapa-dojo.com/wp-content/uploads/2022/03/スクリーンショット-2022-03-26-17.22.16-1-500x486.png)
好きな画像をアップロード、またはライブラリから選択し、タイトル位置をコンテンツ上にします。
![](https://www.ozpapa-dojo.com/wp-content/uploads/2022/02/無題42-300x300.jpg)
タイトル背景画像のおすすめサイズは1600x900pxです
これでタイトルの背景画像の配置ができました。
タイトル背景画像のフィルタ
SWELLのタイトル背景画像には、4つの画像フィルターレイヤーをかけることができます。
【カスタマイズ】→【サイト全体設定】→【コンテンツヘッダー】へと進んでください。
- ブラー
- グレースケール
- ドット
- ブラシ
![画像のフィルター設定](https://www.ozpapa-dojo.com/wp-content/uploads/2022/03/スクリーンショット-2022-03-26-21.04.12-1-500x547.png)
![画像のフィルター設定](https://www.ozpapa-dojo.com/wp-content/uploads/2022/03/スクリーンショット-2022-03-26-21.04.12-1-500x547.png)
ブラーフィルターは、画像にぼかしを入れます。
グレースケールは、色をかけて明暗のある画像にします。
ドットは、網目状の質感を与えるレイヤーです。
ブラシは、ペイントブラシのハケの後のような質感がかけれます。
それぞれレイヤーの色も、変えることができるし、使う画像によってフィルターの見え具合も違うので、いろいろと試してみるのもいいと思います。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://www.ozpapa-dojo.com/wp-content/uploads/2022/03/ワードプレステーマ-私がCocoonからSWELLにした理由-移行手順5ステップ-750-×-422-px-6-1-500x263.png)
![](https://www.ozpapa-dojo.com/wp-content/uploads/2022/03/ワードプレステーマ-私がCocoonからSWELLにした理由-移行手順5ステップ-750-×-422-px-6-1-500x263.png)
![](https://www.ozpapa-dojo.com/wp-content/uploads/2022/03/ワードプレステーマ-私がCocoonからSWELLにした理由-移行手順5ステップ-750-×-422-px-6-1-500x263.png)
【画像35枚で解説】SWELLカスタマイズ|サイト型トップページの作り方
WordPressテーマSWELLを使って簡単にサイト型トップページにカスタマイズする方法を35枚の画像で解説。HTMLやCSSの知識のない僕が簡単にサイト型のトップページを作る事ができました。SWELLを使えば初心者でもサイト型トップページへカスタマイズが可能です。
コメント