SWELLのトップページの文字サイズをド迫力にカスタマイズする方法

SWELLカスタマイズ・トップページ文字サイズ

上のアイキャッチ画像のようにTOPページの「文字サイズ」をカスタマイズする方法です。私はキャッチコピーの「文章力のお粗末さ」を文字サイズでカバーしようとしています。(どうぞ笑ってください)

秋田です。(元銀行員で支店長・個人ローン関連の部長経験しました。定年退職後にネット通販で起業しています)

そんな私が構築したお手軽・簡単・継続報酬ありの副業が「口コミアフィリエイト」ですが、そのサイトのTOPページヘッダー画像が上のアイキャッチ画像です。

【本記事がおススメの人】
SWELLのトップページを迫力ある文字サイズにカスタマイズしたい
■ SWELLのデフォルトのデザインが少しばかり迫力不足で「もの足りない」と感じている人
※ 注意点・・・画像を用意する時に、その画像そのものに「大き目の文字」を入れ込んで使うという手もあります。

【準備】
管理画面(ダッシュボード)から、「外観」⇒「カスタマイズ」⇒「追加CSS」にコピペできる状態にしておいてください。

簡単、1ステップです。

スポンサードリンク

目次

トップページ文字サイズをド迫力にする方法とは・・・コピペしてください

SWELLカスタマイズTOPページの文字を大きくする方法イメージ
WPの管理画面(ダッシュボード)を開くだけです

下記コードを「追加CSS」にコピペするだけです。簡単です。

.p-mainVisual__slideTitle{
font-size:5.5vw;
font-weight:bold;
line-height:1;
}

.p-mainVisual__slideTitle{
text-shadow:1px 1px 8px #333;
}

もちろん忘れずに「公開済み」をクリックしてください。

フォントサイズやテキストシャドウの数値は好きなようにカスタマイズします

■ font-size ⇒ 5.5 の数字を自由に変えて大きさを確かめましょう。
■ text-shadow 1px 1px 8px #333 ⇒ pxの数値と色を好きなように変更してください。

まとめ

SWELLカスタマイズTOPページ文字サイズ変更まとめ
簡単1ステップであとは微調整

今回の記事は、SWELLのWPテーマを使っていて、かつトップページのヘッダー画像に・・・動画やスライドではなくて「静止画像」を使う際のデザインをカスタマイズするやり方です。

カスタマイズする文字サイズ等を微調整しながら好みのデザインに仕上げてください。(少しばかり試行錯誤が必要です)

冒頭部分で、使用する画像そのものに「大き目の文字」をデザインとして入れ込むやり方もありますよ、という話をしました。そのヘッダー画像の1つの例として下図のような画像を作ったこともあります。

※ この場合は「追加CSS」のカスタマイズをしていません。

奨学金を3~5年で返済する方法のイメージ画像
別サイト(WPテーマにSWELL使用)のLPの事例です

ちなみに上記画像ページ(サイト)はこちらです。⇒ super-success.net/lp/dream/

【まとめ】
画像そのものに「大き目の文字=キャッチコピー」を入れて画像を作ってそれを表示させる時には、「追加CSS」はカスタマイズしません。(追加CSSは空欄のままです)
■ 画像そのものをデザイン化してしまえば固定ページのヘッダー画像としても使えます。
(固定ページをLPにする場合など)
■ 追伸にて取り上げましたが、私のSWELLの仕様について公開・解説した記事も良かったら見てください。

下の動画は本記事に連動させたYoutube動画です。(音が出ますので再生にはご注意ください

実は・・・余談ですが、、
自分のパソコンのWEBカメラと画面録画を使って自分で作成した第1号の動画です。声が不明瞭とか、編集が下手とか、これでもテイク4くらいやりました。(苦笑)これから少しずつ上手くなるとは思います。どうぞご理解くださいませ。

※ 中高年の方へ・・・動画で副業にチャレンジするのは「アリ」だと思います。

ここまで本当にありがとうございました。

【追伸】

スポンサードリンク

よかったらシェアしてね!

あなたの1万円(一回きり)と私の1万円~10万円(毎月毎月)をかえっこしませんか?

口コミアフィリエイト割引券
重さ約1g(1枚3、4円~5、6円で印刷可)の「あなた専用の割引券」が
5,000円に化けたり、毎月入る継続報酬につながったりする可能性があります!

この記事を書いた人

60歳過ぎの中高年。地方銀行を定年退職後にネット通販で起業、コンサルタントとの二足の草鞋を履いています。オリジナル副業モデル=割引券を使った副業【 口コミアフィリエイト 】を提案しています。

目次
閉じる