教室に通うのが楽しくなるテキストです。

Jimdo講座-タグのお話(その1)


皆さん、こんばんは。(^.^)

最近、少々、ネタ切れになっていますので、ネタ切れの場合は、Jimdoで作るホームページ講座絡みでタグのお話などをさせていただこうと思います。

 

毎月第2火曜日の19:00~21:00と第4水曜日の13:00~15:00のスマホ&タブレットクラス(スマホ&タブレットが4年目のクラス)では、現在、Jimdoによるホームページ作成講座を受講していただいています。

皆さん、主に趣味のサイトを作られています。

 

十数年前にワードやホームページビルダーで、上級クラスの生徒さん達が趣味のサイトを作られていたのを懐かしく思い出しながら担当させていただいています。

時代は流れて、いまや、ワードやホームページビルダーなどでサイトを作られる方は殆どおられないかと思います。

 

Jimdoのように、ワード感覚で簡単に素敵なデザインのサイトが無料で作れてしまうのですから、こんな素敵なサービスを使わせていただかない手はないですよね。(^_-)-☆

事業者の方は、無料で作ったサイトをPro版に変更されるようにお奨めしていますが、それでも、1ヶ月分の費用にするとコーヒー3杯分くらいのお値段なので、ちっとも高くありません。

 

1からデザインすると、デザインセンスがない方(=私か?(^_^;))には、苦痛になってくるので、トップ画像のように、デザイナーさんが無料で提供くださっているテンプレートを使わせていただいています。

トップ画像は、Jimdoのテキストでお世話になっています志鎌先生のデザインの1つです。 

こちらを無料で使わせていただけるのですから、本当にありがたいことです。

 

そこで、例えば、上のようなデザインを使わせていただかれる方が、真っ先に困られるのが、「ここに会社名やタイトル」と書かれている部分です。

一見、文字のように見えますが、ワードのようにドラッグして編集しようと思ってもできません。

 

そんな時に、ちょっとだけ知っていると便利なのがHTML(タグ)です。

実は、火曜夜間のクラスは、以前、Webクリエイター上級の資格を取得していただきましたので、タグが勉強されたことがあるのですが、10年以上前?のことなので、使っていないと、すっかり忘却の彼方へ・・・(^_^;)

てことで、直し方を確認してみましょう。

 

1.管理ツールの一番上にある「レイアウト」をクリックします。

2.「独自レイアウト」をクリックします。

3.「HTML」タブが選択されているのを確認します。

4.「ここに会社名やタイトル」と書かれた文字列を探します。

※上から3行目程度の位置にあります。

5.「ここに会社名やタイトル」の文字列をドラッグで選択します。

6.そのままの状態で置き換えたい文字列を入力します。

7.修正後は、「保存」をクリックします。

8.このレイアウトを使いますか?と表示されたら、「はい」をクリックします。

 

これで、トップの文字が置き換わります。\(^o^)/

 

これは、タグというほどのこともなかったのですが、<h1></h1>の部分がタグになります。

h1は、h1で囲んだ部分を見出し1レベルのスタイルに設定にしますよ。という意味ですが、

じゃあ、見出し1レベルのスタイルはどうなっているの?という部分を確認するには、「CSS」のタブをクリックしてみます。

 

ちなみに、私が今お借りしているテンプレートは、次のようになっていました。

h1 { font:bold 18px/140% "Trebuchet MS", Verdana, sans-serif; }

これで、何が分かるかというと、h1のフォントは太字(bold)で、18pxで140%、フォントの種類は "Trebuchet MS", Verdanaでサンセリフ(ひげのない書体)ですよ。ってことが分かります。

 

また、<a href="/">〇〇〇〇〇</a>の部分もタグになります。

こちらは、<a href="〇〇〇">と</a>で囲まれる部分にリンクを張りますよ。という意味になり、通常、ダブルクオーテーションの間にはリンク先のURLを入れるのですが、その部分がスラッシュ(/)になっている場合は、サイトのホーム画面へリンクが張られていることになります。

どのページを見ている時でも、ここをクリックすれば、ホーム画面に戻れますよ。ということですね。(^_-)-☆

 

ファイルのある場所などを探すときに途中でスラッシュで区切られていることがあるかと思います。

階層構造と言いますが、あの先頭の場所を示すのが「/」になります。

 

本日はここまでにして、次回は、表のセルの色をサイトの色と揃えたいというご要望をお持ちの場合のテクニックについて有料ソフトを使わない方法で書いてみたいと思います。 


例として、このサイトのお教室一覧の地区名の部分に使ってある色(見出し2の色)と表のタイトル行の色を揃えたい、などという場合の設定の仕方ですね。

 

 

ポチッと応援クリックしていただけると励みになります。
人気ブログランキングへ

今日もハッピー♪
ブログ記事一覧