Jimdo / ジンドゥークリエイターで「見出し(大)」「見出し(中)」「見出し(小)」の文字装飾(スタイル)を変更する場合、左上の管理メニュー[≡]からスタイル編集画面を開いて編集できます。しかし、この方法ではサイト内にある同じ「見出し」の文字装飾(スタイル)が全て一括で変更されてしまいます。
「この見出し(中)だけ赤文字に変更したい」「この見出し(小)だけ、フォントサイズを大きくしたい」、ということもあると思います。
ぼくはブログページを活用して縦長のランディングページ風に作成することがあります。ランディングページではメリハリのある色や文字サイズにしたいことも多く、同じサイト内にある他の通常ページの「見出し(大)」「見出し(中)」「見出し(小)」とは異なるフォントスタイルを使用することがあります。
上記の管理メニューのスタイル編集画面では、全てのページの「見出し(大)」「見出し(中)」「見出し(小)」のスタイルが一括で変更されてしますので、そのページの中だけで別の装飾にする方法をお伝えします。
※Jimdo / ジンドゥークリエイターの「見出し(大)」「見出し(中)」「見出し(小)」は、htmlでいうとそれぞれ「H1要素(H1タグ)」、「H2要素(H2タグ)」、「H3要素(H3タグ)」に相当します。HTML・CSSについて基本から勉強したい方には、こちらの本が分かりやすくてオススメです。
Jimdo / ジンドゥークリエイターのスタイル編集画面で一括編集する方法
まず、管理メニューの「スタイル編集」でからサイト内の全ての「見出し(中)」(H2要素)を編集する標準の方法を説明します。左上の管理メニュー[≡]から デザイン>スタイル でスタイル編集画面を開いて、見出し文字の色・サイズ・フォント・行間を編集できます。但し、この方法ではサイト内にある同じ「見出し(中)」(H2要素)の文字装飾(スタイル)が全て一括で変更されてしまいます。
![H1タグ/H2タグ/H3タグの要素を一括で変更する場合はJimdo(ジンドゥー)管理メニューで「デザイン」を選択](https://image.jimcdn.com/app/cms/image/transf/dimension=537x10000:format=png/path/sdc3a46da388beeb6/image/i73607f69dae45940/version/1616841112/h1%E3%82%BF%E3%82%B0-h2%E3%82%BF%E3%82%B0-h3%E3%82%BF%E3%82%B0%E3%81%AE%E8%A6%81%E7%B4%A0%E3%82%92%E4%B8%80%E6%8B%AC%E3%81%A7%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88%E3%81%AFjimdo-%E3%82%B8%E3%83%B3%E3%83%89%E3%82%A5%E3%83%BC-%E7%AE%A1%E7%90%86%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%A7-%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-%E3%82%92%E9%81%B8%E6%8A%9E.png)
▼
![H1タグ/H2タグ/H3タグの要素を一括で変更する場合はJimdo(ジンドゥー)管理メニューで「スタイル」を選択](https://image.jimcdn.com/app/cms/image/transf/dimension=537x10000:format=png/path/sdc3a46da388beeb6/image/i2c24704eb322ac7a/version/1616841121/h1%E3%82%BF%E3%82%B0-h2%E3%82%BF%E3%82%B0-h3%E3%82%BF%E3%82%B0%E3%81%AE%E8%A6%81%E7%B4%A0%E3%82%92%E4%B8%80%E6%8B%AC%E3%81%A7%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88%E3%81%AFjimdo-%E3%82%B8%E3%83%B3%E3%83%89%E3%82%A5%E3%83%BC-%E7%AE%A1%E7%90%86%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%A7-%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB-%E3%82%92%E9%81%B8%E6%8A%9E.png)
▼
![H1タグ/H2タグ/H3タグの見出し要素を一括で変更する場合はJimdo(ジンドゥー)管理メニューで編集したいコンテンツを選択](https://image.jimcdn.com/app/cms/image/transf/dimension=537x10000:format=png/path/sdc3a46da388beeb6/image/i6ce0f05719f7f0e1/version/1616841132/h1%E3%82%BF%E3%82%B0-h2%E3%82%BF%E3%82%B0-h3%E3%82%BF%E3%82%B0%E3%81%AE%E8%A6%8B%E5%87%BA%E3%81%97%E8%A6%81%E7%B4%A0%E3%82%92%E4%B8%80%E6%8B%AC%E3%81%A7%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88%E3%81%AFjimdo-%E3%82%B8%E3%83%B3%E3%83%89%E3%82%A5%E3%83%BC-%E7%AE%A1%E7%90%86%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%A7%E7%B7%A8%E9%9B%86%E3%81%97%E3%81%9F%E3%81%84%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%82%92%E9%81%B8%E6%8A%9E.png)
▼
![見出し文字のフォント・フォントサイズ・太字・斜体・フォントカラー・行間隔・配置・文字設定を選びます](https://image.jimcdn.com/app/cms/image/transf/dimension=537x10000:format=png/path/sdc3a46da388beeb6/image/i25af5dade33336c1/version/1616841141/%E8%A6%8B%E5%87%BA%E3%81%97%E6%96%87%E5%AD%97%E3%81%AE%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88-%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%B5%E3%82%A4%E3%82%BA-%E5%A4%AA%E5%AD%97-%E6%96%9C%E4%BD%93-%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%AB%E3%83%A9%E3%83%BC-%E8%A1%8C%E9%96%93%E9%9A%94-%E9%85%8D%E7%BD%AE-%E6%96%87%E5%AD%97%E8%A8%AD%E5%AE%9A%E3%82%92%E9%81%B8%E3%81%B3%E3%81%BE%E3%81%99.png)
ジンドゥークリエイターのスタイル編集画面で一括編集する方法
ここからは、上記の管理メニューのスタイル編集画面とは別に、その「見出し」だけ別の装飾にする方法の説明です。文字コンテンツのメニューにある「htmlを編集」を使用します。「文字」に相当する<p>要素を「見出し(中)」に相当する<h2>要素を変更する方法です。
通常の「見出し」コンテンツで作成した見出し(上)と、「文章」コンテンツから作成した見出し(下)を比較します。どちらもhtml的には<h2>要素なので、表示される見た目はまったく同じです。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=657x10000:format=png/path/sdc3a46da388beeb6/image/i89beb8d511892690/version/1616900145/image.png)
「文章」コンテンツから作成する見出しの作成方法
①「文章」コンテンツを追加して、テキストで見出しにしたい文字を記入します。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=657x10000:format=png/path/sdc3a46da388beeb6/image/i50bc1f60c68a48b0/version/1616900170/image.png)
▼
②文章コンテンツのメニューの中にある「html編集」を開きます。htmlでは、文章コンテンツの中の文字が<p>タグで囲まれています。
<p> ~ </p>
![](https://image.jimcdn.com/app/cms/image/transf/dimension=657x10000:format=png/path/sdc3a46da388beeb6/image/i2407bfaee78afa18/version/1616900181/image.png)
▼
②この<p>タグを<h2>タグに書き換えます。
<h2> ~ </h2>
![](https://image.jimcdn.com/app/cms/image/transf/dimension=657x10000:format=png/path/sdc3a46da388beeb6/image/i278382471e935eac/version/1616900195/image.png)
▼
④保存ボタンを押すと、「文章」コンテンツが「見出し(中)」(h2要素)に変更されました。Jimdo標準の「見出し」コンテンツでは[大]・[中]・[小]の選択肢しかないコンテンツメニューですが、もともと「文章」コンテンツなので色・フォントサイズ・配置・太字/細字などのメニューが選択できます。やったね!
![](https://image.jimcdn.com/app/cms/image/transf/dimension=657x10000:format=png/path/sdc3a46da388beeb6/image/i10044dd1f7c3573d/version/1616900211/image.png)
Jimdoの「見出し」文字を個別に編集する方法(こちらをクリック)
「文章」コンテンツから「html編集」を使う方法で作成した見出しは、このように(↑)、見出し文字の中でフォントサイズを変える、色を変える、リンクを貼る、というようなことができます。Jimdo標準の「見出し」コンテンツでは表現できない場合は、html編集でJimdoをカスタマイズしてみてください。
例:「html編集」を使って見出し文字の中でフォントサイズや色を変える
![](https://image.jimcdn.com/app/cms/image/transf/dimension=657x10000:format=png/path/sdc3a46da388beeb6/image/i5018affa94f37c77/version/1616900235/image.png)
例:「html編集」を使って見出し文字の中でリンクを貼る
![](https://image.jimcdn.com/app/cms/image/transf/dimension=657x10000:format=png/path/sdc3a46da388beeb6/image/i0eaf9ba3c5ab39fb/version/1616900653/image.png)
Jimdoの「見出し」文字を個別に編集する方法
見出しに背景色をつける場合(↑こんな感じ)は、background-color: で指定します。
<h2 style="background-color: Azure; ">
こんな感じです。前後を<h2>タグ内に追記してください。
border-radius: を追加して角丸を指定することもできます。
<hs style="background-color: #E6E6FA; border-radius: 10px;">
Jimdoの「見出し」文字を個別に編集する方法
縦に長いランディングページ風のページを作成する場合は、見出しにジャンプする「ページ内リンク」をつける方法も多用します。このページの上の方の見出し「ジンドゥークリエイターのスタイル編集画面で一括編集する方法」にジャンプするための id を埋め込んでいます。
<h2 id="hop-step-jamp">ジンドゥークリエイターのスタイル編集画面で一括編集する方法</h2>
このリンクで上記の見出しまでページ内リンクしています。ジャンプしてみてください。(ブラウザの「戻るボタン」で戻ってきてね)
Jimdo / ジンドゥークリエイターのカスタマイズの基本を体系的に理解したい方にオススメの書籍「ジンドゥークリエイター 仕事の現場で使える!カスタマイズとデザイン教科書(Webデザイナー養成講座)」。僕はこの本に出合ってからJimdoの世界が格段に広がりました。