Weebly で「タイトル」(見出し)を拡張する方法

記事「Weebly のサイト制作実例から – アイスホッケーの写真撮影」の「見出しの階層」にて別記事にてご紹介します、としたことについて。

前提

見出しを3階層にします。

  • 大見出し
  • 中見出し
  • 小見出し

とし、大見出しは1ページに一つを先頭に記述し、そのページ内容を最も端的に表す見出しとします。

あとは、中見出しと小見出しを内容に応じて順序良く使っていきます。すると以下のようなページ構成になります。

大見出し

中見出し 1
小見出し 1-1
小見出し 1-2
小見出し 1-3

中見出し 2
小見出し 2-1

HTMLとCSSを活用

HTMLやCSSを使って見出しを作成していきますが、それらの専門知識については深入りしません。下記の手順をそのまま忠実になぞれば、効率的に見出し階層を管理できます。

Webサイトを見ていると、様々なデザインの見出しを目にすると思います。興味がありましたら、ちょっとCSSを勉強してみてください。見出しのデザインを色々と変えることができるようになります。「見出し css サンプル」で検索するとそのまま Copy & Paste できるコード例がたくさん見つかります。

設定手順

中見出しには、Weebly の「タイトル」を使用します。

画面上部のメニーから「テーマ – フォントの変更 – 段落のタイトル」と進み、フォントの種類、サイズや文字色を設定します。

大見出しと小見出しは、下記の手順で設定します。

「埋め込みコード」を使って大見出しや小見出しを作成

大見出しや小見出しを挿入したい場所に、「埋め込みコード」をドラッグ&ドロップします。

「カスタムHTMLを編集する」ボタンをクリックするとテキストを入力できるフィールドが表示されます。大見出しの場合は、

<h1>大見出しとして表示したいテキスト</h1>

小見出しの場合は

<h3>小見出しとして表示したいテキスト</h3>

と入力します。

大見出しと小見出しの設定

中見出しに設定したフォントの種類、サイズや色を、大見出しと小見出しにも設定します。

あらかじめテキストエディタで下記の内容のテキストを作成します。

 

<style type=”text/css”>
/*<![CDATA[*/

h1 {

font-size: 48px !important;

color: black !important;

font-family:”Smart Font UI” !important;

}

h3 {

font-size: 22px !important;

color: red !important;

font-family:”Flop Design” !important;

}

/*]]>*/
</style>

上記はあくまでも例なので、作成する Webサイトのデザインに合わせて変更します。

  • 「font-size:」に続く数字で、フォントの大きさを設定できます。
  • 「color:」に続く英語色名で、フォントの色を設定できます。

WEB色見本 原色大辞典 – HTMLカラーコード」を参考に、英語の色名を指定します。「原色大辞典」タブ以外から色を設定したい時には、「#」で始まる7桁のコードを指定します。

  • 「font-family:」に続く ” ” で括られたテキストでフォントの種類を設定できます。

この記事を執筆した時点(2017/6)で指定できる日本語フォントは下表の通りです。「Font Family」列の内容を Copy & Paste します。

Category Font Name Font Family
サンセリフ フロップデザインフォント Flop Design
サンセリフ ロゴたいぷゴシック Logotype Gothic
サンセリフ スマートフォントUI Smart Font UI
セリフ MPlus 1p MPlus 1p
手書き あんずもじ Apricot Flip

Weebly に適用

画面上部のメニューから「設定 – SEO(検索エンジン最適化)」と進み、「 ヘッダーコード」フィールドに、作成したコードを Copy & Paste して保存します。

「公開」ボタンをクリックして適用を確認します。

広告