▲HOME IBM ホームページ・ビルダー
ホームページ作成小技集
更新
パソコンライフを楽しむTAN パソコンライフを楽しむTAN

●Chrome で文字と行間が大きく表示されるようになった(2017.02.08追加)

●エクセルで作ったページをそのままウェブページに載せる
●エクセルファイルをホームページに挿入する
●マウスをリンクの上に置くと色が変わる
●リンクの下線を消す
●更新日時を自動取得して表示する
●フレーム窓を設置する
●流れる文字
●点滅する文字
●アクセスアップの工夫−たくさんの人に見てもらうには−


Chrome で文字と行間が大きく表示されるようになった  2017.02.08追加 ▲TOP
IBM ホームページ・ビルダーで作ったページを Chrome で見たとき、文字や行間が意に反して大きく表示されるようになった。
この場合も Internet Explorer では意図したとおりに表示されている。

これは、ホームページを作成するとき、フォントの指定をしなかったことが原因かと思われる。
IBM ホームページ・ビルダーでフォントの書体を”MS Pゴシック”に指定することで改善された。
書体は”MS Pゴシック”に限らず、他のものでも良いかも分からない。

作業は、
@フォントの書体を”MS Pゴシック”にする範囲(ページ全体など)を指定し、

A[書式]タブ ⇒ フォント ⇒ 書体から[MS Pゴシック]を選択 ⇒ [OK]

B[上書き保存] ⇒ [ページ転送]


エクセルで作ったページをそのままウェブページに載せる ▲TOP
エクセルで作成したページは次の方法で簡単にウェブページに載せることができます。

・エクセルで作成したページのうち、ウェブに載せる部分をドラッグして選択する(選択した部分は色が変わります)
・「ファイル」メニューの「Webページとして保存」をクリック
・「名前を付けて保存」画面で「選択範囲」にチェックを入れる
・保存場所を選択して
 ファイル名は英数半角小文字で入力し「保存」をクリック

これでエクセルページがHTML形式で保存されました。
このページにリンクを張ってプロバイダに転送することになります。


エクセルファイルをホームページに挿入する ▲TOP
・ホームページビルダーの編集画面でExcelの表やグラフを挿入したい位置にカーソルを移動する
・「挿入」メニュー ⇒ファイル ⇒Excelファイル
・Excelファイル挿入ウィザード(ファイルの指定)が表示され ⇒「参照」をクリック

・ファイルを開くダイアログボックスでExcelファイルを指定 ⇒次へ
・シートの指定画面で、挿入するシートを指定し、中央の「追加」ボタンをクリック
(参考)選択したシートを削除するには、右の領域のシートを選択してから「削除」ボタン
     選択したシートは右の領域に表示されている順番に挿入される
     順番の変更は、右の領域のシートを選択し、「最初」「上」「下」「最後」のボタンを押す
シート選択が終わったら「次へ」
・挿入する対象の指定画面で、ワークシートの挿入方法やグラフシートを画像として挿入するかなどを決める
(参考)
グラフシートで
「画像として挿入」をオンにしなかった場合は、グラフシートは挿入されない
「値の入力されたセルを表として挿入」をオンにしなかった場合は、Excelファイル挿入ウィザード(完了)ダイアログボックスが表示される

これで「完了」ボタンをクリックすると、指示したシートがページに挿入される

・表の挿入の設定画面で、Excelファイルに設定されている属性をどう扱うかを設定し「次へ」をクリック
(参考)
「すべての属性を挿入する」:Excelファイルに設定されているすべての属性のうちHTML化できるものを挿入。
「よく使われる属性のみを挿入する」:Excelファイルに設定されている属性のうち一般的な属性のみを挿入。
「属性を挿入しない」:Excelファイルに設定されている属性を挿入しない。


マウスをリンクの上に置くと色が変わる ▲TOP
普通はこうです      ▲TOP
こんな風にします     ▲TOP

・普通にリンクを作成します
・メニューバーの「表示」 ⇒スタイルシート マネジャー ⇒追加 
 ⇒HTMLタグの候補の
をクリック ⇒「マウスが上にあるリンク」を選択 
 ⇒すぐ下の「カラーと背景」をクリック ⇒前景色の
をクリック ⇒赤色を選択 ⇒OK
 ⇒スタイルシートマネジャーを×印で閉じる

プレビュー画面でリンクの文字にマウスを置くと文字が赤色に変わることを確認してください。

この方法ではマウスをリンクの上に置くと同一ページ内の色はすべて赤色に変わります。
他の部分は他の色になどということはできません。


リンクの下線も消したければ、リンクの下線を消す方法を参考にしてください。

リンクの下線を消す ▲TOP
普通はこうです      ▲TOP
こんな風にします     ▲TOP  ←リンクを解除してあります

・普通にリンクを作成します
・メニューバーの「表示」 ⇒スタイルシート マネジャー ⇒追加
 ⇒HTMLタグの候補の
をクリック ⇒「未表示のリンク」を選択
 ⇒下の「文字飾り」の「なし」をチャック ⇒OK
    これで、未表示のリンクの場合の下線が消えます。

 ⇒もう一度スタイルシートマネジャーの追加をクリック
 ⇒HTMLタグの候補の
をクリック ⇒「表示したリンク」を選択
 ⇒下の「文字飾り」の「なし」をチャック ⇒OK
    これで、表示したリンクの場合の下線が消えます。

 ⇒スタイルシートマネジャーを×印で閉じる


HTMLソースへの貼り付けで
次の赤色行で囲まれた行をコピーして </TITLE> の次に貼り付ければ
マウスをリンクの上に置くと色が変わり、リンクの下線が消えます。

<TITLE>ページのタイトル</TITLE>

<STYLE type="text/css">
<!--
A:HOVER{
color : red;
}
A:LINK{
text-decoration : none;
}
A:VISITED{
text-decoration : none;
}
-->
</STYLE>

</HEAD>

更新日時を自動取得して表示する ▲TOP
日時などを自動取得して次の表示をします。
 「
最新更新はです

・ホームページ編集画面で、日時を表示させたいところに「最新更新はです」を入れる
・「最新更新は」と「です」の間にカーソルを置いてHTMLソースタブをクリックしてソースを表示
・「最新更新は」と「です」の間でカーソルが点滅しています
 カーソルの位置に次のソースをコピーして貼り付けます

<script language="JavaScript">
<!--
update = new Date(document.lastModified)
youbi = new Array("日","月","火","水","木","金","土","日")
theMonth = update.getMonth() + 1
theDate = update.getDate()
theDay = youbi[update.getDay()]
theHours = update.getHours()
theMinutes = update.getMinutes()
theYear = update.getFullYear()
document.writeln(theYear+"年"+theMonth+"月"+theDate+"日"+"("+theDay+")"+theHours+"時"+theMinutes+"分")
//-->
</script>

・取得されるのはページを上書き保存した日時、パソコンが保持している日時です。
 パソコンの日時を標準時に修正する方法はこちらをご覧ください。

フレーム窓を設置する ▲TOP
ページに別のページを表示させる小窓(フレーム)を作る方法です。
TANのホームページの更新履歴を表示しているものです。

・このフレームを挿入する前にここに表示させたいページを作成し同一のフォルダに保存しておく必要があります。

・フレームの窓を設置する場所に表を作り、セルにフレームを挿入します。
  メニューバーの「表」 ⇒表の挿入 ⇒行数「2」、列数「1」とします
  フレームの窓は2行目に入れます。
  1行目はフレームのタイトル「更新記録」などを入れるスペースです。
  タイトルや説明文がなければ1行・1列の表でOKです。

・ホームページ・ビルダーV.6.5の場合は
  フレームの窓を作るセルを選択(カーソルを置く)
  ⇒メニューバーの「ツール」 ⇒タグの挿入
  ⇒タグの中の「IFRAME」 ⇒挿入 ⇒属性ダイアログボックスが表示されます
  ⇒URL欄の右の参照をクリック ⇒先に作成してある表示させたいファイルを選択
  ⇒フレーム名に「更新記録」など入れる ⇒枠表示をどうするかチェック ⇒OK ⇒閉じる

・ホームページ・ビルダーV.8の場合は
  フレームの窓を作るセルを選択(カーソルを置く)
  ⇒メニューバーの「挿入」 ⇒その他 ⇒ HTMLタグ ⇒ タグの挿入
  ⇒タグの中の「IFRAME」 ⇒挿入 ⇒属性ダイアログボックスが表示されます
  ⇒URL欄の右の参照をクリック ⇒先に作成してある表示させたいファイルを選択
  ⇒フレーム名に「更新記録」など入れる ⇒枠表示をどうするかチェック ⇒OK ⇒閉じる

・セルの大きさとフレームの大きさはそれぞれの枠をドラッグして変更します。

・URL欄にURLを入れるとそのページが表示されます。
更新記録を表示
 

TANのホームページを表示  この中にも更新記録があります

流れる文字 ▲TOP
これが流れる文字”マーキー”の見本です
挿入方法は次のとおりです。
・流れる文字”マーキー”を挿入したい位置をクリックしてカーソルを表示させる。
・メニューバーの「挿入」⇒「その他」⇒「マーキー」⇒「属性」画面の「表示文字列」に表示させる文字列を入れる。
・表示速度の「遅延時間」と「移動量」の指定で流れ方が変わります。上の見本の設定は「2」と「2」です。
・文字の色や大きさは「スタイル」⇒「スタイルの編集」画面⇒「現在のタグのみにスタイルを設定」の「編集」⇒「スタイルの設定」画面の「フォント」で文字のサイズを指定し、「カラーと背景」の「前景色」で文字の色を指定します。

文字が流れる幅は文字列の枠の大きさできまります。
・変更するには文字列が表示されている枠内でクリックして枠を選択し、ポインターをドラッグします。
・この枠を「中央揃え」すれば中央に移動します。

その他、設定できる項目がいくつかあります。いろいろやってみましょう。
文字列を右クリックすると「属性」画面が表示されます。


点滅する文字 ▲TOP
表示例
 ←ここをクリックしてください

挿入方法は次のとおりです。
・「ページ編集」画面で、点滅させる文字を挿入したい位置をクリックしてカーソルを表示させる
・「HTMLソース」画面にしてカーソルが点滅している位置に次のソースを貼り付ける

<MARQUEE scrolldelay="900" scrollamount="220" width="216"><FONT color="#FF0000"> 
ここに点滅させる文字を入れる </FONT></MARQUEE>


アクセスアップの工夫−たくさんの人に見てもらうには−    2004.12.26.追加 ▲TOP

テーマの選定
自分が興味、関心を持つテーマとする。長く続けられ、頻繁に更新できる
何でもありでなく、限られた特殊なテーマに絞って内容を掘り下げる
よそでは得られない情報、そのサイトでしか得られない情報を発信する。
  小説、絵、音楽などの創作物
  本音で語る、自分の意見を発表する
  手作り品

  よくある質問と回答
  講座を開く
  部外者が知りえない業界裏話
  観光地や自分が住む土地に関するローカルな情報
  料理のレシピなどのノウハウ

ネットサーフィンをして魅力を感じるページを探し、参考にする

有利なページタイトルを付ける
ページタイトルはブラウザのタイトルバーに表示される。
ページタイトルは検索エンジンで重視される
ページタイトルは検索エンジンの検索結果やリンク集などにそのまま表示される。

ページタイトルを見て訪問するかどうか判断される
トップページのタイトル(サイト名)は外からリンクを張るときのリンクテキストとして使われる

分かりやすい、覚えやすい、興味を引く名前にする
ページタイトルにはなるべくキーワードを入れる
サブタイトルを付けるのもよい
20〜30字以内がよい

画像の多いページにもキーワードを埋め込む。
代替テキストは検索エンジンの検索対象となる。

サイト構成はまた来たいと思うわれるものにする
トップページ   :サイトの玄関である。入りやすい雰囲気にする
案内部分    :分かりやすい説明、目次にする

導入部分    :テーマに関連するニュースや期間限定企画など。頻繁に更新すす
メインの情報  :常設展示、一番重要なページ。容が古くならないよう時々見直しをする。
軽い読み物、見もの:日記やコラム、写真集など。興味深いものにする。
コミュニティ   :掲示板など参加型コンテンツを設置する。

分かりやすいサイト構成にする
サイトの構成をあまり深くしすぎない、早く目的のページにたどり着ける構成にする

訪問者優先の構成にする
軽く、見やすく、使いやすい、シンプルなデザインにする。

トップページは特に軽くする ―100KB以下に―
表示に時間がかかるとパスされる。
画像はJPEG形式で圧縮、GIF形式で色数を減らす

大事な情報はページの上部に、目次はスクロールしなくても見える範囲、位置に置く。
アニメやBGMは控えめにする。目障り、耳障りと感じる訪問者も多い。

  入れるなら訪問者がマウスを合わせたときだけ反応するようにする
利用者が見つけやすいリンクを作る

テキストリンクはメリットが多い
  サイズが小さい
  未読、既読の区別が色で表示される
  リンクの文字列は検索ロボットに認識され、検索エンジンの検索対象になる

クリックしたくなるリンクを作る
  「ギャラリー」より「私のスケッチ」、「写真集」より「香川の祭り」
  英語より日本語で


統一感のあるデザインにする
  統一することで訪問者の印象に残りやすくなる。
  配色の統一 :背景の色、文字の色、区切り線の色など。
  ヘッダー、フッターの統一
  サイトのロゴの統一
  「TOPへ」「前へ」「次へ」などのリンクレイアウトの統一
  画像、素材の統一 :画像ファイルを少なくできる、管理が楽、ページの表示が速くなる
  ページの作成日、更新日
  管理者名やメールアドレス

サブページを行き止まりにしない
  上の階層のページやトップページへのリンクをつける

  リンクミスに注意、リンクの確認をする
  長いページではページの途中や下に「トップへ戻る」などのリンクを付ける。

▲TOP ▲HOME ▲パソコン操作小技集 2004.10.10.から