同じページの見出しにリンクを張る

 ページの先頭に目次を書き、該当する項目にジャンプさせたい。ページが長くなった時に必要だ。見出しにラベルを張るのは前回やった。
<h2 id="tvlac">テレビラック</h2>
このようになる。
同じページなのでこのラベルを指定するだけ、他のページならそのページのURLをつける。Jimdo文章入力画面で一度そのページにリンクを付け、HTML画面に移動すればそのページのURLが分かる。
<a href="#ラベル">  </a>

<a href="URL#ラベル">  </a>

違うページの見出しにリンクを張る

 見出しだけのページから該当するページにジャンプする機能はJimdoで用意されている。しかし、ジャンプしたページの該当見出しにジャンプできない。ページが長くなれば当該ページをずるずると下にスクロールすることになる。一発見出しへのジャンプのHTMLは次のようになる。
 前回<h2></h2>で見出しを挟めば、文章入力画面のHTMLで見出しを書くことが出来た。今回はさらにその見出しにジャンプさせる。本ホームページの工作や道具のページには索引のページを設けている。目次のひとつずつにリンクを設定、それぞれの記事にジャンプする。
 目次の方は次のようになる。
<a href="/app/sd6c113290db481fa/p8191ce6806ab693f/#tvlac">テレビラック</a>
リンクの指定なので、記事の文中でも使用できる。の部分はページの指定。あらかじめJimdoのリンクを使ってページのURLを書かせておく。後にラベル部分()を書き加える。
 ターゲットの記事の見出しはつぎのように指定する。
<h2 id="tvlac">テレビラック</h2>
 見出しをつける時にラベルもつけておくと後々便利だ。

見出しを付ける

 本文に見出しを付ける機能がJimdoにある。用意されているのは2個、見出し1と2だ。数サイズの見出しを使い分けたい時は本文の入力画面で指定する。見出し入力画面ではHTMLの指定が出来ないので、文章(本文)入力画面で行う。文章入力画面にはHTMLの入力画面が用意されている。<h1>から<h6>まで書けるようだ。文章入力画面で見出しを書いたらHTML入力画面に移動し、見出しの文字列を<h1>見出し</h1>で囲めばいい。h1は見出し1のこと。数字が大きくなると見出しは小さくなる。本文と見出しを同じところで編集できるのは便利。他のページへの移動にも都合がいい。さらに、目次から見出しにリンクを張ることも出来る。

外部リンク

Jimdoのメニューから外部にリンクさせる方法が出ていた。「ナビゲーションの編集」でボタンの名前の所にリンクを入れる。名前とリンクの間に次のおまじない(::_::)を入れれば外部に飛べる。LUSTYHOUSEでは、外部のブログにリンクさせている。
Blog::_::http://lusty.blog.ocn.ne.jp/

 しかし、いったん外部リンクに飛んでしまったら、戻ってこられない。従って外部ブログのヘッダー部分にこのページと同じような「HOME」ボタンを張った。これでますますホームページとブログの一体感が増す。助っ人の力を借りて、OCNブログ人では次のようにした。
 ブログの設定画面に入る。サブタイトル設定の窓にリンクを張り付けて「保存」。反映の窓が出るので全てのページに反映する。

文字だけ表示の時は
<a href="http://lustyhouse.jimdo.com/">ホーム</a>
でOKだった。「ホーム」という文字が表示されリンクがついていた。
これではどこのホームか分からない。そこで、次に文字列ホームの所をJimdoで使ってる画像のリンクに変えてみた。

張り付けたテキストは次のようになった。
<a href="http://lustyhouse.jimdo.com/"><img border="0" src="http://lusty.blog.ocn.ne.jp/house/images/2010/03/16/home.jpg" title="Home" alt="Home" style="float: left; margin: 0px 5px 5px 0px; width: 56px; height: 20px;" /></a>
</a>
例によって一度ブログに張り付けてHTML化したので、どうかわからないが一応ブログのヘッダー部分にHOMEボタンがついた。

Favicon(ファビコン)

Jimdoにファビコン(Favicon)を設定するツールがあるのだが、意味不明。さっそく調べてみる。ファビコンがあればかっこいい、とあった。どうやらアドレスの前にあるアイコンのことらしい。さらに調べると Photoshopで作れるらしいことがわかり早速作成開始。

  1. Photoshopで16×16(32×32)のファイルを作る
  2. アイコンを鉛筆ツールで作る
  3. 拡張子pngで保存する。ファイル名はアルファベットにする
  4. Jimdoではこのファイルをファビコンツールでアップロードするだけ

文章の文字が不揃いになる

Jimdoの文章入力画面で文字をペーストするとコピーした時の属性が残ってしまい文字のポイントなどが不揃いになる。

 

Jimdoの文章入力画面で文字をペーストするとコピーした時の属性が残ってしまい文字のポイントなどが不揃いになる(上の文章)。問い合わせしたところ、HTML画面で次のおまじない(文の前後にある)を削除すればスタイルで設定したフォントになるようだ。

<span style="font-size: 1.2em;">  </span>

 

逆に言えば文の途中でフォントサイズを変えたい時使えるかもしれない。

ボタン

 記事が長くなるとスクロールが大変。そこで記事を複数ページに分けることになる。記事の最後に達したら、次のページに移動できるようにしたい。しかし、Jimdoにはボタンが用意されてない。スクロールしてホームから選択し直すことになる。これでは面倒。そこで作ることにした。といってもHTMLが書けるわけではない。そこでブログ(私の場合はOCN Blogzine)に書かせることにする。

  1. ボタンを描画ソフトで作りjpgファイルにしておく
  2. ブログの写真入力画面でjpgファイルを読み込む
  3. 大きさを適当に調整してブログのHTML画面に移動する
  4. ちゃんとHTMLファイルになっている
  5. そのHTMLファイルをコピー
  6. Jimdoの文章入力画面からHTMLに移動しペースト
  7. これで1個のボタンが完成しているはず
  8. 文章編集画面でこのボタンをクリックし内部リンクを割り当てる


 もっともボタンが1個なら写真の入力からリンクを張る方法もある。だがこの方法では1行に1個しかボタンを張れないうえ、スペースが空く。フォトギャラリーでは写真にリンクが張れない。下の写真のように横一列3個いっぺんに張り、リンクを付けたい場合は文章入力-HTML画面から行う。写真ひとつずつにリンクを張ることが出来る。

 同じもので良かったらmi(フリーソフトのエディタ)のテキストファイルにしておいた。ひとつずつ使う場合は<p><p>で囲まれている部分が一つのパーツのようだ。イメージが私のブログにリンクされている。Jimdoに一度ボタンを張り付け、そのボタンから画像のURLを取得して書き換えればオリジナルボタンが作れる。

Back

Home

Next

 

 

button.txt
テキスト文書 1.5 KB

ページトップに戻る

  サイトの長いページの最後にある「ページトップに戻る」ボタンというかリンク。
  Jimdoで設置する方法をHow to Jimdo?さんが紹介されている。戻るところがヘッダーを含むのか除くのかでHTMLを2個用意されている。コピペで自分のページに簡単に設置できる。
  私のページでは「ページトップに戻る」ではなく「▲」に変更した。リンクなので青い色になっている。文章入力画面でスペースを入れて罫線の代わりも兼ねている。感謝。他にもいろいろ役立つ情報満載なので、Jimdo愛好者は要チェック。