カテゴリー: WEB 関係

WEBサイト作成に関する雑多なメモです．まとまった内容については，WEBサイトのWEB，あるいはWordPressに記載します．

ベクター図を使え

トホホな画像

しばしば，トホホな画像を見ます．例えば，東急電鉄の「各駅情報の路線図から探す」です．ここには路線図が表示されており，それをクリックすると拡大します．このままでは文字が小さくて見えにくいので，ブラウザでさらに拡大します．するとボケボケの画像が現れます．漢字はなんとか読めますが，アルファベットや数字は判別不可能です．路線図の役割を果たしていません．「この路線図って，WEBサイトの飾り(イメージ図)かよ」と言いたいです．大企業が大金をかけて作成した WEB サイトでも，この体たらくです．

公開されているドキュメントにも，ボケボケの画像が多々あります．ひどいものになると，まったく文字が読めないものもあります．論文とか公的な文書で，それがあると，がっかりします．国の機関が提出する入札仕様書は，図がボケて大事な数字や文字が読めないものの割合が高いです．「おいおい，仕様書は契約の文書だぞ．それが読めないってどういうこと」と思います．私は，このような文書を作った人は「バカじゃないの」と思ってしまいます．

ボケた画像ができる原因

ボケた画像が出来上がる原因は，適切な画像のフォーマットを使ていないからです．説明の類の図のフォーマットには，ベクターとすべきです．WEB サイトに掲載する図ならば SVG，MS Office で作成するドキュメントならば EMF です．トホホな図の例で示した東急電鉄の路線図は，JPEG です．これでは，読者に必要な情報が伝わりません．

ボケないようにするためには

ベクター図を使えば，拡大してもボケない画像になります．さっきも言ったように， WEB サイトに掲載する図のフォーマットは SVG，MS Office で作成するドキュメントならば EMF です．

注意 (ラスター図との関係)

ベクター図に対して，画像情報を色の付いたドット (小さい点) で表すラスター図があります．代表的なフォーマットは，JPEG や PNG です．これらの画像は，拡大するとボケます．写真はラスター図 (通常はJPEG) で表す他ないので，拡大してボケるのは仕方ないです．ラスター図とベクター図の関係は，「ラスター図とベクター図」に詳しい説明があります．

ややこしいことは，ベクター図のフォーマットはラスター図を取り込めます．ベクター図のフォーマットの場合でも，中身が画像を点で表すラスター図が含まれ図がボケることがあります．これには注意が必要です．

WordPress で Amazon の商品リンクを並べる方法

Amazon アソシエイトに参加していると，しばしば WordPress で商品の紹介をすることになります．ただ，Amazon の商品リンクは，左端に設置されます．そして，右側が空いてしまいます．同時に複数の商品を紹介するときには，その空いた空間を使い商品リンクを並べたくなります．その方法を示します．

以下に示すように，flexBox を使い要素の配置をすると品よく商品リンクを並べることができます．

<ul style="list-style:none; display:flex; justify-content:space-evenly">
    <li>  ここに1番目の商品リンクを記述する </li>
    <li>  ここに2番目の商品リンクを記述する </li>
             •••
</ul>

商品リンクがひとつの場合は，センタリングされます．もちろん，商品リンク以外を並べることも可能です．上手に使うと，結構便利な機能です．

以下に具体例として， WordPress 関係の複数の書籍を紹介します．

WordPress の便利なツール： Shortcodes Ultimate

Shortcodes Ultimate は，WordPress で使うことのできる便利なツールです．インストール方法は，以下のとおりです．

  1. ダッシュボードのプラグインを選択します．
  2. そして，[新規追加]をクリックし，現れた画面の[プラグインの追加] の入力フォームに「Shortcodes Ultimate」と入力します．
  3. 現れた「Shortcodes Ultimate」の画面のボタン [今すぐインストール] をクリックします．
  4. インストール完了後，[有効化]をクリックします．

使い方は，Documentation – Shortcodes Ultimat を参照下さい．

WordPress で SVG ファイルを表示 (アップロード) する方法

驚いたことに，素のままの WordPress では SVG ファイルをアップロードすすことができません．アップロードしようとすると「セキュリティ上の理由によりこのファイル形式は許可されていません」と表示されます． WEB サイトのベクター図では，SVG が最も適しています． SVG を使うと図を拡大してもボケないので，とてもきれいです．細部を見たい読者の要求に応えることができます． WordPress で SVG が使えないのは言語道断です．

ネットで調べたところ，プラグインの WP Add Mime Types で問題が解決できることが分かりました． これは，WordPress へ MIME タイプと拡張子の追加を可能にします．

インストールと設定は，次のとおりです．

  1. インストール
    1. ダッシュボードのプラグインを選択します．
    2. そして，[新規追加]をクリックし，現れた画面の[プラグインの追加] の入力フォームに「WP Add Mine Type」と入力します．
    3. 現れた「WP Add Mine Type」の画面のボタン [今すぐインストール] をクリックします．
    4. インストール完了後，[有効化]をクリックします．
  2. 設定
    1. ダッシュボードの設定 > Mime Type設定を選択します．
    2. 現れた画面「WP Add Mime Types 管理設定」の下の方の「追加の項目」に，「svg = image/svg+xml」を記述します．
    3. [設定を保存] をクリックして完了です．

以上で， SVG がアップロード可能になり，表示もされます．

内容の無い小洒落たブログは嫌いだ

近頃，薄っぺらい内容のくせに小洒落たブログが氾濫している．ほとんど情報の無い文章と，どこからか取ってきた(購入した)写真で構成されたページが多い．内容が無いので，きれいな写真で誤魔化している．デザインはそれなりに見えるが，とても印象が悪い．加えて，広告が多いと，読む気が起きない．

このようなブログが少ない時は我慢ができたが，雨後の筍のようになると，「トホホ」というような感じである．それよりかは，

  1. 下手でも，自分で写真を撮れ!　下手なイラストでもよい．
  2. 内容の有る文章を，自分の言葉で書け! 下手な文章でもよい．

一見，このようなブログはセンスがなく，ダサいかもしれない．しかし，言いたいことが素直に伝わる．私はこんなブログが好きだ．

そもそも，写真やイラストが必要かどうかを考えなくてはならない．読者からすると，デザイだけの写真などは，目障りで仕方ない．

Emacs でブログを書く

blog を書く時に面倒に思うことがあります．ブラウザで書かなくてはならず，いつも使っている Emacs とキーバインドが異なるので，入力ミスがしょっちゅうです．Edit with Emacs を使えば，Emacs で blog を書くことができます．設定と使い方は，ブログの設定と記事の作成方法: Google chromeに記載しています．

banggood は信用できる

まだ，1回しか使っていませんが，中国のオンラインショッピングサイト banggood は信用できます．ネットでの評判もまずまずです．

10日前のブログ「中国通販サイト banggood でドローンを購入」に書いたドローンが到着しました．注文から9日で手元に届いたことになります．写真のような梱包で，DHL で配送されました．合わせて，購入したものも示します．

とくに，問題もなく満足しています．某有名オンラインショッピングで 22,745 [円] のドローンが，このサイトでは 8,983 [円]です．この価格差は圧倒的ですので，ひいきにしたいと思います．

複数画像の挿入 (Easy FancyBox)

WordPress で Easy FancyBox を使った複数の画像を表示させる方法を示します．この場合は，ギャラリーが良いです．Easy FancyBox の効果があるギャラリーは，次のようにします．

  1. 上部にある [メディアを追加] をクリックします．
  2. メディアを挿入のタブ「ファイルをアップロード」を選択します．画像をドロップ，あるいはファイルを指定します．表示するすべてのファイルをアップロードします．すでにファイルをアップロードしている場合は，この操作は不要です．
  3. 上部の操作を「メディアを挿入」から「ギャラリーを作成」に変更します．そして，タブ「メディアライブラリ」を選択します．
  4. 必要に応じて，画像の編集を行います．[画像を編集] をクリックします．すると，トリミングと回転，上下・左右変換，サイズの変更が可能になります．変更後は「保存」をクリックします．
  5. 画像の設定をを行います．
    • タイトルやキャプション，代替テキスト，説明を記述します．書かなくても問題はありません．
    • シフトを押しながらクリックし，ギャラリーにする画像を選択します．
  6. [ギャラリーを作成] をクリックします．
    • リンク先を「メディアファイル」にします．
    • カラム(列数)を選択します．
    • サイズはサムネイルが良いでしょう．
    • 画像をドラッグすることにより順序の変更が可能です．
  7. [ギャラリーを挿入] をクリックします．

以上で画像のギャラリーが挿入されます．以下にその例を示します．画像をクリックすると拡大されます．ちょっといかした WEB サイトになります．

画像の挿入 (Easy FancyBox)

WordPress で Easy FancyBox を使った単独の画像を表示させる方法を示します．Easy FancyBox の効果がある画像は，次のようにして挿入します．

  1. 上部にある [メディアを追加] をクリックします．
  2. メディアを挿入のタブ「ファイルをアップロード」を選択します．画像をドロップ，あるいはファイルを指定します．すでにファイルをアップロードしている場合は，この操作は不要です．
  3. タブ「メディアライブラリ」を選択します．そして，挿入する画像をクリックします．
  4. 必要に応じて，画像の編集を行います．[画像を編集] をクリックします．すると，トリミングと回転，上下・左右変換，サイズの変更が可能になります．変更後は「保存」をクリックします．
  5. 画像の設定をを行います．
    • タイトルやキャプション，代替テキスト，説明を記述します．書かなくても問題はありません．
    • 配置を選択します．リンク先は「メディアファイル」にします．適当な画像サイズを選択します．
  6. [投稿に挿入] をクリックします．

以上で画像が挿入されます．以下にその例を示します．画像をクリックすると拡大されます．ちょっといかした WEB サイトになります．

図が表示されない時．
キャプションの記述も可能です．