Jimdo無料でホームページ作成

「見出し」デザインを変える方法

Jimdo 見出しのデザインを変える方法

★Jimdoの基本的な「見出し(タイトル)」の文字デザインの変更方法は「文字や見出しのサイズや色を変更する」をご覧ください★

 

このページでは、「文字の大きさや色、配置などを変えただけではつまらない!もっとカッコ良くカスタマイズしたい!」という方向けに、当サイトのように見出しの背景デザインを変える方法をご紹介します。

 

コード(CSS)だけ見たい方はこちら

 

「見出し」の基礎知識

hタグは1~6まで

 

Jimdoのシステムでは、見出し1~見出し3の文字サイズや色などを好きなように変更できるようになっていますね。

 

ホームページ用語(?)のHTMLでは、「hタグ」ではさまれた部分の事を「見出し(heading)」といいます。

 

hタグは、1番大きな「h1」を筆頭に、以下のように6つの階層に分かれています。

  意味
 h1  chapter 章
h2 section 節
h3 subsection 小節(項)
h4 subsubsection 小々節(目)
h5 paragraph title 段落小見出し
h6 subparagraph title 小段落小見出し

 

各名前はともかく、要は「h1」が1番大きな見出しで、数字が大きくなるほど小さな見出しとなり、「h6」まで設定できるという事です。

※この場合の「大きい・小さい」は文字のサイズではなく、認識される重要度(←おそらく)です。

 

 

Jimdoで見出し4~6(h4~6)をつくる方法

 

Jimdoのシステムでは「h1」~「h3」までの設定しかできませんが、実はとても簡単に「h4」、「h5」、「h6」の設定もできます!

 

「+」マークの「コンテンツの追加」から「ウィジェット/HTML」を選択します。

 

そこに、以下のように記述すれば設定完了です!

 

<h4>見出し4の文言</h4>

 

見出し5、見出し6も<h5>、<h6>にして同様にできます。

あとは、「CSS」で各見出しのデザインを指定します。

 

「CSS」にルールを記述する

 

今回は「HTML」ではなく、「CSS(スタイルシート)」を記述して「見出し」のデザインを変えます。

 

「CSS」を記述する場所

 

Jimdoでは、以下の場所に「CSS」を記述します。

※ここに書いたルールは、サイト全体に適用されます!

 

  1. 編集画面右側の色々なマークが並んでいる中で、歯車のマークの「設定」をクリックして開く
  2. ウェブサイトという項目の中の「ヘッダー部分を編集」をクリックして開く
  3. 出てきた画面の白い部分に、様々な「CSS」を記述することができます!
Jimdo CSSを記述する場所

 

← このマークを開いたページに記述する

「見出し」デザインを変える「CSS」コード

 

やっと本題です!

 

まずは、上記の場所(ヘッダー部分を編集)に次のコードをコピーして貼り付けておきましょう!

(「これからCSSを書きますよ」という宣言です)

 

「CSS」は必ず次のコードの間に記述する!

 

<style type="text/css">

/*<![CDATA[*/

 

★この間の部分に、「CSS」を記述します

(何個も続けて書くことができます)

 

/*]]>*/

</style>

 

各見出しの「CSS」コード

Jimdo 見出しデザインを変える 見出しに背景を付ける方法

 

ここまでできれば、あとは好きな見出しデザインのコードを★部分にコピーして貼り付けをすればOK!

 

 

【カスタマイズの補足】

 

※見出し1=<h1>、見出し2=<h2>というように、そのデザインにしたい見出しの数字に変えてください。

 

※どのコードにもある「#・・・」という部分は色を指定しています。お好きな色のコードに変えることで、色を変更できます。

 

>>オススメ*「色見本」のサイト

(原色以外にも、和色、洋色etcのページがあり、とても豊富な色の種類の中から好きな色のコードを調べられます)

 

「padding」という部分の数字は、文字と見出しの外枠の空間の広さを示しています。数字を小さくすると細い見出しに、大きくすると幅の広い見出しになります。

 

※見出しの文字自体の色や大きさは、Jimdoの「スタイル」で変更できます。見出し4~見出し6は基本的には文章と同じスタイルになります(あまり検証していないのでおそらく)

 

 

見出し1 Sample

 

h1 {

  background: #6f5436;

  padding: 4px

}

 

※文字が真ん中になっているのは、当サイトの「スタイル」ページで「見出し1」を中央揃えに設定しているからです

 

見出し2  Sample

 

h2 {

    border-bottom: 3px dashed #d4dcda;

    margin: 5 -22px;

    padding: 5px 15px;

 }

 

※文字が真ん中になっているのは、当サイトの「スタイル」ページで「見出し2」を中央揃えに設定しているからです

 

見出し3 Sample

h3 {

    border-bottom: 2px dashed #c7dc68;

    margin: 5 -22px;

    padding: 5px 15px;

}

 

※文字が真ん中になっているのは、当サイトの「スタイル」ページで「見出し3」を中央揃えに設定しているからです

 

見出し4 Sample

 

h4{

border-top:2px dashed #ff8c00;

border-bottom:2px dashed #ff8c00;

padding:5px 0 5px 0;

}

 

※border-topの後ろの「#・・・」は上の線の色を、border-bottomの後ろの「#・・・」は下の線の色を指示しています。

 

見出し5 Sample

 

h5{

border-bottom:1px solid #dcdcdc;

border-left:6px solid #2ca9e1;

line-height:200%;

padding-left:8px;

}

 

※border-bottomの後ろの「#・・・」は下の線の色を、border-leftの後ろの「#・・・」は左の縦線の色を指示しています。

 

見出し6 Sample

 

h6{

background-color:#dcdcdc;

color:#000066;

border-bottom:2px solid #000099;

padding:5px 15px;

line-height:200%;

}

 
見出しを中央揃えにする方法

見出し1~3はJimdoの「スタイル」で文字の位置を設定できますが、

見出し4~6は上の「CSS」の最後、「}」の前に

 

text-align: center;

 

という一文を入れてみてください。そうすると見出しの文字が「中央揃え」になります。

また、centerの部分をrightにすると「右揃え」になります。

 

 

HTMLをいじると出来る小技

 

このサイトは完全無料で作成されています。

難しい知識も一切不要

 

あなたのサイトも今すぐ出来ます!

Jimdo無料でホームページ作成

Jimdoの登録

このサイトは完全無料

で作成されています。

難しい知識も一切不要

 

あなたのサイトも

今すぐ出来ます!

ジンドゥー

ジンドゥーに登録しよう!

書籍紹介

Jimdo 本 無料で作るホームページ

見た目にこだわる Jimdo入門

中古価格
¥4,200から
(2019/3/25 22:40時点)

jimdo スタイル