WEBページ作成テクニック

基本

全体に関わること

html ファイル全体に関わることです．

• HTML 関連のディレクトリーのパーミッションは「755」，ファイルは「644」にする．
• <span>はインライン要素，<div>はブロック要素．
• .htaccess ファイルについて．
  • 影響の及ぶ範囲は，./htaccessを置いたディレクトリーを含め，そのサブディレクトリー以下全て．
  • コメントは，「#」．
  • ファイルのパーミッションは「644」にする．
  • 「AddType text/plain .hoge」を記述すると，拡張子 hoge もテキスト文書と解釈される．拡張子とファイルの対応を変える場合に便利．

リンク

メモ

• <a href="hoge.html" target = _brank>とすると，リンク先が別ページで開く．
• リンク元の文字をクリックして，アラートダイアログを表示させるには，「<a href="javascript:alert('ここに文章を書く')">リンク文字</a>」とする．
• ページ指定を行いリンク先のPDFファイルを開くためには，「<a href="http://manuals.elenco.com/manuals/mm8000k.pdf#page=33">リンク先のPDF</a>」のようにする．
• 同じページ内のリンクについて．
  • リンク先には，id を使う．例えば，「<span id="hoge">リンクされる方</span>」とする．
  • リンク元は，「<a href="#hoge">ここをクリックするとリンク先へ</a>」
  • ID名に使える文字種は，小文字と大文字のアルファベット (a-z|A-Z)，英数字 (0-9)，ハイフン (-)，アンダースコア (_)，コロン (:)，ピリオド (.) です．もちろん全角は使えません．ID名の最初の文字はアルファベットでなくてはなりません．

図の表示

編集

画像のサイズの変更には，ImageMagick の convert や mogrify が便利です．前者はサイズの変更後に新規にファイルができますが，後者は上書きされます．例えば，画像 (input.jpg) の幅を 1680 [px] にする場合は，次のようにします．

$ convert -resize 1680x input.jpg output.jpg
$ mogrify -resize 1680x input.jpg

画像 (input.jpg) の高さを 945 [px] にする場合は，次のようにします．

$ convert -resize x945 input.jpg output.jpg
$ mogrify -resize x945 input.jpg

図の回転は，次のようにします．

$ convert -rotate 90 input.jpg output.jpg
$ mogrify -rotate 90 input.jpg

表示効果

• 写真や図は，GIMPを使い以下のようにして影をつけている．GIMPのフィルタ(R) → 照明と投影(L)→ドロップシャドウ(D)…を使う．私の設定は，以下の通り．

  オフセットX:8
  オフセットY:8
  ぼかし半径:15
  色:黒
  不透明度:80
  画像サイズの変更可:チェックする

  • 透明(アルファーチャンネル)が使える ping 等は，このままで OKです．
  • 写真などで主流となっている JPEG のように透明が扱えない場合は，少し工夫が必要です．GIMP ツールボックスのバックグラウンドをWEBページの背景と同じ色にする必要があります．私の場合は「ffffbf」です．背景が白の人は「ffffff」です．
• 画像にリンクを貼っていると，枠が表示される．それを防ぐには，imgタグにstyle="border:none"と記述する．

図の配置

• 回り込みは，sytleのfloatで指定し，clearで解除する．

  <table border="0" style="float:right;margin:0px 0px 0px 10px">
   <col width="320px">
   <tr>
      <td align="center" valign="top">
      <img src="figure/change_transistor.jpg" width="300px">
      </td>
   </tr>
   <tr>
    <td align="center">交換したトランジスター</td>
   </tr>
  </table>
  
  <p>とくに難しい半田付けはなく，マニュアルの通りにする．この課程で，A70と
  いうトランジスターが1個不足している&mdash;最初から入っていない&mdash;こ
  とが分かった．その代わりに，A20というトランジスターが入っている．データ
  シートによると，どちらも NPN型のシリコントランジスターで，特性も大きくは
  違わない．スイッチとして使っているだけなので，問題ないだろうと判断す
  る．</p>
  
  <p>TEST PROCEDUREで動作不良が発生した．どうしても，DSP2の7セグが点灯しな
  い．テスターで調べてみたところ，トランジスターQ1とQ2が怪しそうである．これ
  らのトランジスターを交換することにする．2SA1015(NPN型シリコントランジスター)
  を大量に持っているので，それと交換．すると，TEST PROCEDUREの通り，問題なく動
  作した．</p>
  
  <br style="clear: both">

  交換したトランジスター

  とくに難しい半田付けはなく，マニュアルの通りにする．この課程で，A70というトランジスターが1個不足している—最初から入っていない—ことが分かった．その代わりに，A20というトランジスターが入っている．データシートによると，どちらも NPN型のシリコントランジスターで，特性も大きくは違わない．スイッチとして使っているだけなので，問題ないだろうと判断する．

  TEST PROCEDUREで動作不良が発生した．どうしても，DSP2の7セグが点灯しない．テスターで調べてみたところ，トランジスターQ1とQ2が怪しそうである．これらのトランジスターを交換することにする．2SA1015(NPN型シリコントランジスター)を大量に持っているので，それと交換．すると，TEST PROCEDUREの通り，問題なく動作した．

  
  

アマゾン

Amazon アソシエイト

通常

いわゆるアフリエイトです．自分の WEB サイト (or ブログ) に商品広告を載せて，それが売れたら，広告費を頂くというものです．

1. Amazon アソシエイトのページヘ移動し，サインインします．
2. キーワードで検索をします．
3. 商品が現れますので，[リンク作成] をクリックします．
4. リンクするページが現れます．通常は，「テキストと画像」でしょう．次にリンクをカスタマイズします．私のページでは，以下のとおりにしています．
   • 新しいウインドウで開くは，チェックしない．ボーダーを表示するもチェックしない．大きい画像を利用するはチェックする．
   • リンク先ページを「商品の詳細ページ」にします．
   • 背景のカラーを「#ffffbf」(このページの背景色と同じ)にします．
   • タイトルのカラー「#0066c0」にします．
   • タイトルのカラー「#333333」にします．
5. 「この商品のリンクの HTML を取得する」に表示されている HTML ソースをコピーします．そして，表示したいページに，そのソースを貼り付けます．
6. すると，以下のように表示されます．

Amazon JS プラグイン

上の例を見て分かるように，デフォルトで出来上がる HTML はかなりダサいです．写真と文字は小さいし，配置も悪いです．Amazon JS プラグインを使うと，改善が見込めるようです．インストール方法は，以下のとおりです．

1. JavaScript のダウンロード
   1. AmazonJsのサイトを行き，[ダウンロード]を押します．すると，amazonjs.zipがダウンロードできます．
2. インストール
   1. ブログのページのメタ情報の「サイト管理」をクリックします．
   2. ダッシュボードのプラグインをクリックします．
   3. プラグインのページが現れますので，[新規追加] をクリックします．
   4. プラグインのアップロードをクリックします．そして，[ファイルの選択] をクリックし，先ほどダウンロードしたamazonjs.zipを選択します．
   5. 「今すぐインストール」をクリックすると，インストールが行われます．
3. 有効化
   1. ダッシュボードのプラグインをクリックし，AmazonJS を有効化します．
4. 設定
   1. ダッシュボードのプラグインをクリックし，AmazonJS の [設定] をクリックします．
   2. 「アクセスキー」と「シークレットアクセスキー」を取得します．Produce Advertising API の設定 の下にある「…APIアカウントの作成はここから作成することが…」のここの部分をクリックします．
   3. アクセスキーID と シークレットアクセスキーを入手します．そして，それらを入力します．
      

      図1: AmazonJS のアクセスキーIDとシークレットアクセスキーの作成と入力

   4. アソシエイトタグの設定で，Amazon.co.jp の トラッキングIDを入力します．
      

      図2: トラッキングIDの入力

WEBサービス

通信販売のAmazonのWebサービスを使うと，簡単かつきれいに，WEB上で書籍の紹介ができます．たとえば，つぎのようにです．

はじめてのAndroidプログラミング (I・O BOOKS) 第二I・O編集部 工学社 2009-04 売り上げランキング : 45674 Amazonで詳しく見る by G-Tools

こうすることにより，迅速にその書籍の購入も可能となり，読者にもメリットがあります．その html 文の作成方法を示します．あらかじめアソシエイトIDを取得しておく方が良いかもしれません．

このようなページの作り方は，以下のとおりです．

1. amazon.co.jp の Web サービスのページに移動します(参考図)．
2. そのページのタブ「ブログで感想を書く」を選択します(参考図)．
3. 紹介する書籍を指定するために，商品検索を行います．書籍名(一部でもOK)とそのカテゴリーを指定し，商品を検索ボタンを押します(参考図)．
4. 候補が現れるので，ターゲットの書籍の「ブログで感想を書く」ボタンを押します(参考図)．
5. いろいろな紹介ページが現れますので，気に入ったデザインの「このデザインに決定」ボタンを押します(参考図)．
6. 適当にオプションを選択し，「オプションの変更を反映する」ボタンを押します(参考図)．
7. 「商品の紹介のHTMLを，ブログにコピー&ペースト」の下の四角い枠の中の html 文をコピーし(参考図)，表示させたいページのhtml文に貼り付けます．

貼り付ける場所によっては，写真(図)と説明文が重なることがあります．本文の部分の「< td valign="top">」の部分に padding を入れます．具体的に「< td valign="top" style="padding-left:50px">」のようにです．

LaTeX 説明のページ

LaTeX 説明用の図(推奨)

LaTeXの使い方の説明のための図(LaTeX出力)は，次のようにして作成する．

1. 通常通り，LaTeXのソースを作成します．ただし，ページスタイルは emptyとします．具体的には，プリアンブルに「\pagestyle{empty}」と記述します．これは，説明に不要なページ番号他を出力させないためです．
2. コンパイルして，dvi ファイルを作成します．それから，pdf ファイルを作成します．
3. pdf ファイルの不要な余白を切り取ります．

   $ pdfcrop  --margin  15  hoge.pdf  hoge.pdf

4. pdf を svg に変換します．

   $ pdftocairo  -svg  -nocrop  hoge.pdf

   変換された svg の解像度は 150 [PPI] (デフォルト)です．オプション「-r 300 」を加えれば，300 [PPI]にできます．

これで，SVG フォーマットの図が作成されるので，html 文書に貼り付け可能になります．

LaTeX 説明用の図(旧式)

LaTeXの出力の図(たとえばここの図)は，次のようにして作成した．ただし，この方法はあまり推奨できない．先に示した方法で，pdf を svg に変換して，html に埋め込んだ方が良いだろう．当時は，SVG があまり普及していないため，その表示ができないブラウザがあった．

1. LaTeXのファイルからdviファイルを作成する.

   $ platex  hoge.tex

2. pdfファイルに変換する．

   $ dvipdfmx  hoge.dvi

3. Acrobat Reader で 132% にして表示し，スナップショットツールを使い，必要部分をクリップボードにコピーする．元の図が大きい場合には，100% でコピー．
4. gimpのメニューの「新規」で白紙を作成して，コピーした図を貼り付ける．
   1. メニューのファイル→新規を選ぶ．そしてそのダイアログの高度なオプションを開き，塗りつぶす色を「透明部分」にする．画像のサイズは大きめにしておき，後でキャンバスサイズの調整をする．
   2. メインメニューの編集→貼り付けを選択して，Acrobat Readerで切り取った部分を貼り付ける．
   3. メニューの画像→キャンバスサイズで画像のサイズを調整する．
5. フィルターで影をつける．
   1. 影の作るの部分(貼り付けた図)を四角形の選択ツールで囲む．
   2. メニューのフィルタ→光と影→Drop Shadowを選択する．
   3. 設定は，上に記述してあるとおり.
6. pngで保存．

WEB の作成のための部品・コード

WEB ページを作成するために便利な部品やコードがあります．

ページ作成情報

参考資料

更新履歴

last update:2021/12/11 18:18:46