テンプレート・素材カテゴリ


ホームページテンプレートのタイトル・メニューを編集する

TOPページ > テンプレート編集方法 > テンプレートのタイトル・メニューを編集する

いよいよ編集に入ります!まずはホームページの大事な部分「タイトル」と「メニュー」を変更していきます。

インストールした「TeraPad」を使って編集することにします。
(参照:テキストエディタ「TeraPad」をインストールする


①TeraPadを開いて、メニューの「ファイル」→「開く」から、ダウンロードしたテンプレートの中の「index.html」を選択する。

index.html のページ

IE のボタンを押すと、現在のテンプレートが表示されます。

インターネット(IE)のボタンを押す

変更前は、こんなテンプレートです。

変更前のテンプレート

②<title>・・・</title>の間に、ホームページの名前を入力する。
(この部分はブラウザのタブや、検索結果に表示される部分です。)


③<div id="templatemo_site_title">・・・</div>の間にも、ホームページの名前を入力する。(実際の画面に表示される部分です。)

ホームページの名前を入力する。

上書き保存のボタンを押して保存しておきます。

インターネット(IE)のボタンを押す

テンプレートの編集結果がこのようになります。
今回は「北欧の世界」と入力しました。赤線の部分も変えてみてください。

「北欧の世界」と入力しました。

④同じようにメニューのテキストも変更する。(必要に応じて。)

メニューのテキストも変更する。

実際にはこうなります。適当に入力しました。

適当に入力しました。

⑤index.html ファイルを4個コピーして、それぞれにわかりやすい名前をつける。

メニューのテキストも変更する。

⑥メニューコードの「#」に、それぞれのファイル名を割り当てる。「HOME」には「index.html」を割り当てておきます。

ファイル名を割り当てる。

全部で5ページ作ることができました。


Recommended


スマートフォンなど多様なデバイスに対応し、使い勝手や見栄えを向上させる各種のアレンジ・テクニック。

応用テクニックやその仕組み、さらに踏み込んだ各種の情報もTIPSとして網羅。

現場のワークフローに沿ったサイト制作までを詳しく解説。プロが教える「実習」+「講義」の全30レッスン。

これからのWeb制作に必要な知識を総合的に解説。HTML5 2014年勧告候補に対応!

はじめて学ぶ人は、サイトの作り方をゼロから習得。すでに覚えた人は、「正しい」方法を復習できる。



ページトップへ