Jimdoで見出しの大きさ変更カスタマイズ【PC・スマホ切り替え】

Jimdo見出しカスタマイズ

Jimdoの見出しブロックは「大・中・小」の3種類がありますが、もうちょっとフォントのサイズを変えたい、スマホ表示での大きさを変えたい場合はちょっと設定を変える必要があります。

作業は難しくないので、興味がある人はぜひ挑戦してみましょう。

見出しの大きさ変更方法

まずは見出しブロックで文字を入力しておいて、保存ボタンを押します。

見出し入力

管理画面の「基本設定」→「ヘッダー編集」を選択します。

ヘッダー編集

style〜/styleまでの下記のコードをまるごとコピーします。

  1. <style type="text/css">
  2. /*<![CDATA[*/
  3. h1 {
  4.     font-size: 3rem !important;
  5. }
  6. h2 {
  7.     font-size: 2.5rem !important;
  8. }
  9. h3 {
  10.     font-size: 1.8rem !important;
  11. }
  12. /*]]>*/
  13. </style>

次にヘッダー編集へ貼り付けます。

ここへコードを貼り付ける

「font-size: ◯rem」の数宇を変えると、それぞれの文字サイズが変わります。
「!important」を付けているのは、もともとclassの指定がかかっているので優先順位を強くするためです。よく分からなければ、このまま置いておきましょう。

文字サイズの書き換え

編集が終わったら、右下の「保存」ボタンを押せばOKです。
実際の画面を見て確認してみましょう。

見出しシリーズ

なぜかうまくいかない、という場合は他のコードを消してしまったor入力が違っている場合もあるので、そんな時はまるごと全部消して、1から貼り付ければ大丈夫です。

スマホ表示での文字サイズの変え方

下記のコードをコピペして、上記コードの12行目の下あたりに追加してください。

  1. @media screen and (max-width: 768px){
  2. h1 {
  3.     font-size: 3rem !important;
  4. }
  5. h2 {
  6.     font-size: 2.5rem !important;
  7. }
  8. h3 {
  9.     font-size: 1.8rem !important;
  10. }
  11. }

「max-width: 768px」というのが、画面の横幅が768px以下の場合はこの表示になりますよ、という意味です。

まとめ

とっつきにくそうに見えるCSSですが、少しずつ手を動かしていれば何となく分かってくるようになりますので、出来そうなところから始めれば大丈夫です。

標準機能だけでは物足りなくなってきた時に、お試しください。

[公開日] 2019年6月7日 / [最終更新日] 2019年6月7日 カテゴリー:Jimdo


トップ

この記事を書いた人
ポポデザイン

ポポデザイン
西宮市在住のWEBデザイナー・クリエイター。 ホームページの制作からディレクション、イラスト、SEOなど制作からユーザーのサポートまで幅広く、初心者のかたも分かりやすい対応を心がけております。(プロフィール)
FacebookTwitterInstagram

同じカテゴリーの記事