ワードプレスの有料テーマ「SWELL」では、カスタマイザーでトップページのメインビジュアルをスライドショーにしたり、動画にしたり、さらにズームなどの効果、フィルター、オーバーレイなど、事細かに設定ができます。
また、メインビジュアル上には、メインテキストとサブテキストを載せることができますが、場合によっては、会社のロゴ画像などを表示させたいこともあると思います。
今回は、ワードプレステーマ「SWELL」で、メインビジュアル上のテキストをロゴ画像にする方法をご紹介させていただきます。
Contents
「SWELL」メインビジュアル上のテキストの表示方法
トップページのメインビジュアルの設定は、「外観」＞「カスタマイズ」から、「トップページ」＞「メインビジュアル」と進み、各スライドの設定で、「メインテキスト」と「サブテキスト」の設定ができます。
カスタマイザーで設定したテキストは、以下のようにメインテキストは大きく、サブテキストはその下に小さく表示されます。
上記のようなメインテキストをロゴ画像に変えると以下のようになります。
ロゴ画像に変更する方法
まずは、あらかじめロゴ画像をメディアに新規追加しておきます。
次にメディアライブラリの登録したロゴ画像をクリックして、ロゴ画像ファイルのURLをコピーしておいてください。
今度は、前述の「外観」＞「カスタマイズ」から、「トップページ」＞「メインビジュアル」から、スライド［1］のメインテキスト［1］に以下の通り記述します。
<img src=”ロゴ画像ファイルのURL”>
””の中は先ほどのコピーしたものをペーストしていただければ大丈夫です。
そうすると、以下のようになりました。
追加CSSを使って、ロゴ画像のサイズを調整することもできます。
「外観」＞「カスタマイズ」から、「追加CSS」をクリックし、以下のコードを入力してください。
.p-mainVisual__slideTitle img{
max-width:250px;
}max-width:250px;
の250pxはロゴ画像の横幅のピクセル数になりますので、お好みで変更してください。
サイズ調整後は以下のようになりました。
また、このロゴ画像設定は、背景の画像がスライドショーにしても動画にしても同様にできます。背景画像を２枚以上設定すると「テキストの固定表示設定」という項目が出てきますので、こちらにチェックを入れると常にロゴ画像が表示されます。
まとめ
今回は、ワードプレスの有料テーマ「SWELL」で、メインビジュアルのメインタイトルをロゴ画像にする方法をご紹介いたしました。このように簡単に設定できますので参考にしていただければと思います。
