【ジンドゥー】Jimdoで見出しの大きさ変更カスタマイズ【PC・スマホ切り替え】
ジンドゥー（Jimdo）の見出しブロックは「大・中・小」の３種類がありますが、もうちょっとフォントのサイズを変えたい、スマホ表示での大きさを変えたい場合はちょっと設定を変える必要があります。
作業は難しくないので、興味がある人はぜひ挑戦してみましょう。
見出しの大きさ変更方法
まずは見出しブロックで文字を入力しておいて、保存ボタンを押します。
管理画面の「基本設定」→「ヘッダー編集」を選択します。
style〜/styleまでの下記のコードをまるごとコピーします。
- <style type="text/css">
- /*<![CDATA[*/
- h1 {
- font-size: 3rem !important;
- }
- h2 {
- font-size: 2.5rem !important;
- }
- h3 {
- font-size: 1.8rem !important;
- }
- /*]]>*/
- </style>
次にヘッダー編集へ貼り付けます。
「font-size: ◯rem」の数宇を変えると、それぞれの文字サイズが変わります。
「!important」を付けているのは、もともとclassの指定がかかっているので優先順位を強くするためです。よく分からなければ、このまま置いておきましょう。
編集が終わったら、右下の「保存」ボタンを押せばOKです。
実際の画面を見て確認してみましょう。
なぜかうまくいかない、という場合は他のコードを消してしまったor入力が違っている場合もあるので、そんな時はまるごと全部消して、１から貼り付ければ大丈夫です。
スマホ表示での文字サイズの変え方
下記のコードをコピペして、上記コードの１２行目の下あたりに追加してください。
- @media screen and (max-width: 768px){
- h1 {
- font-size: 3rem !important;
- }
- h2 {
- font-size: 2.5rem !important;
- }
- h3 {
- font-size: 1.8rem !important;
- }
- }
「max-width: 768px」というのが、画面の横幅が768px以下の場合はこの表示になりますよ、という意味です。
まとめ
とっつきにくそうに見えるCSSですが、少しずつ手を動かしていれば何となく分かってくるようになりますので、出来そうなところから始めれば大丈夫です。
標準機能だけでは物足りなくなってきた時に、お試しください。
ジンドゥーおすすめ参考書
ジンドゥーのカスタマイズについて詳しく載っている参考書です。
 | ジンドゥークリエイター 仕事の現場で使える! カスタマイズとデザイン教科書 (Webデザイナー養成講座) 新品価格 |
[公開日] 2019年6月7日 / [最終更新日] 2024年1月24日 / カテゴリー：Jimdo
同じカテゴリーの記事
-
Jimdoの特定ページをWordPressへリダイレクトする方法-JavascriptJimdo（ジンドゥー）で作っていたサイトの「特定ページのみ」を、WordPressサイトのページへリダイレクトする方法 [続きを読む]
-
Jimdoの文字フォントにGoogleフォントを追加する方法Jimdoの日本語フォントをもっと自由に変えたい場合は、商用利用も無料なGoogleフォントを読み込むのが早道です。 コ [続きを読む]
-
JimdoとWordPressの違いを比較！SEOに強いのはどっち？ホームページ制作サービスのジンドゥー（Jimdo）とWordPress（ワードプレス）どちらがSEOに強いのかを検証して [続きを読む]
-
Jimdoでトップへ戻るボタンのカスタマイズ方法Jimdoでページの下へスクロールすると、表示される「トップへ戻る」ボタンですが、WEBサイトによってはデザインが合わな [続きを読む]
最新の投稿
2024年11月12日
2024年10月31日
2024年10月31日
2024年10月17日
2024年10月02日
カテゴリー
アーカイブ
