タイトルバーとスタイルシートの作り方

タイトルバーの作り方とスタイルシート、画像処理 について、ご説明します。

 

（上記の動画が見れない方は、こちらの大きな動画 をご覧ください）

■ 【目次】タイトルバーの作り方とスタイルシート、画像処理について

動画で話している内容について（テキスト）

第４回目の講座は、「タイトルバーの作り方」というテーマで、スタイルシートや画像作成方法を含めた、タイトルバーの作り方をご説明します。


まず、サンプルページを右クリックして、「ソースの表示」をクリックします。

前回の講座で、ホームページの枠をテーブルで作成する、ということをご説明させていただきましたが、今回はタイトルバーについてご説明します。




それでは、実際にホームページに表示してみたいと思います。

index.htmlというファイル名で、ファイルを保存します。




そして、index.htmlファイルをダブルクリックすると、先ほどのソースの情報がInternet Explorer に表示されます。

タイトルバーの画像を作成しよう！

次に、タイトルバーの画像を作成します。

タイトルバーの画像は、「JTrim」という画像編集ソフトを使います。

この「JTrim」というソフトはとても便利なソフトで、これがないとホームページが作れない、というぐらい便利なソフトです。


使い方としては、まず、JTrimを起動します。




新しく画像を作成するには、「ファイル」→「新規作成」で行うことができます。




文字の入力は下図の「A」というボタンをクリックします。




他にも、文字を入力や文字の大きさ、色の変更なども行うことができます。


画像を作成しましたら、「ファイル」→「名前を付けて保存」で保存をします。
こうすることで、先ほどのホームページ上に、画像が表示されます。

タイトルバーに表示されている文字について

次に、タイトルバーに表示されている文字について、ご説明します。

ソースを見ると、<h1>というタグが使われています。

この<h1>というタグは、ホームページのタイトルの次に重要なタグで、検索エンジンがとても重要視するものです。




現在、サンプルサイトは、スタイルシートという技術を使っています。

スタイルシートとは、ホームページの見栄えを良くする技術で、この<h1>というタグに囲まれた文字の大きさもスタイルシートによって、調整しています。


それでは、スタイルシートのファイルを開いて、<h1>の文字の大きさを見てみたいと思います。

スタイルシート用のファイルを開いて、<h1>の設定はこの部分になります。




上記の<h1>の記述を削除すると、文字がとても大きくなってしまいます。




このように、<h1>というタグはそのまま使ってしまうと、字がとても大きく表示されてしまい、とてもホームページが見づらくなってしまいます。

そこで、スタイルシートを使って、<h1>のタグによって表示される文字の大きさを調整しているという形です。


なお、このスタイルシートの書き方は、スタイルシート講座！ホームページの見栄えを良くする必須の技術で詳しくお伝えしています。

また、画像編集用ソフトの使い方は、JTrim を使った画像作成と文字の入力方法などでお伝えしているので、確認してみてください。


今回の講座は、以上になります。

次回の講座は、コンテンツバーの作り方について、ご説明します。

タイトルバーの作り方とスタイルシート、画像処理のポイント

・ 画像編集ソフトは、JTrim を使うこと

・ スタイルシートとは、ホームページの見栄えを良くするための技術であること
　（動画では、「文字の見栄えを良くするための技術」っと言っていますが、
　　正確には、 「ホームページの見栄えを良くするための技術」です...）

・ <h1> のタグは、ホームページのタイトルの次に重要視されるタグであること
・ <h1> のタグは、１ページに１つしか使ってはいけないこと
　（構文違反となり順位が下がってしまうため）

・ 通常、 <h1> のタグを使うと文字が大きすぎてしまうため、
　 スタイルシートを使って、文字の大きさを調整すること

スタイルシートの書き方について

スタイルシートの書き方は、初心者向け スタイルシート（CSS）の書き方 のページでも、詳しくお伝えしています。

キレイで分かりやすい「タイトルバーの画像」を作る方法について

ホームページでは、タイトルバーがとても大切です。

人を惹きつける、見栄えの良いタイトルバーの画像の作り方は、キレイで分かりやすい「タイトルバーの画像」を作る方法でお伝えしているので、ぜひ参考にしてください。

副業で月２０万円の収入を得るためのサイドビジネス講座 [外部ページ]

私がお金を稼ぐ理由｜お金を持ったときのメリットとは？ [外部ページ]

初心者が副業で月５万円の収入を継続して稼ぐ方法 [外部ページ]

初心者が自分で簡単に作れるホームページテンプレート [外部ページ]

インターネットビジネスはとてつもないビジネスモデル！ [外部ページ]

実際に無料ホームページ制作講座を受講された方の声 [外部ページ]

リスクを抑えて、有効な資産運用を動画で学べるFX講座 [外部ページ]

費用対効果が抜群！ホームページが作れる能力は最高 [外部ページ]

■ 当サイトで使用しているサンプルサイトを無料でダウンロード！

■ 副業で月２０万円の収入を、自宅の空いている時間で稼ぐための講座