KompoZerで画像を設置する方法
画像がまったく無いホームページは味気ないものです。たとえ文章主体のページであっても挿絵といった画像は設置しておいたほうが、文章の意味をより伝えやすくなります。 […]
- 2015/7/26
- 2012/1/28
画像がまったく無いホームページは味気ないものです。たとえ文章主体のページであっても挿絵といった画像は設置しておいたほうが、文章の意味をより伝えやすくなります。
文章の挿絵に画像を設置する場合は、文章に対して回り込みの設定などをしたい場合もあると思いますが、KompoZerなら、そういった画像の回り込み設定もお手のものです。誰でも簡単に設定が出来ます。
それではKompoZerで画像をページに設置する方法を詳しく見ていきましょう。
画像の設置方法
まずは画像の設置方法の基本的な手順をご説明します。
画像そのものはPhotShopといった画像編集ソフトで適度な大きさにリサイズする等の処理を行っておいてください。
-
画像を設置したい場所にカーソルを合わせて、ツールバーの画像アイコンをクリックします。
-
画像のURIのテキストボックスの横にあるフォルダアイコンをクリックして、ページに設置する画像を選択します。
- 代替テキストのテキストエリアに画像の説明文を入力します。
代替テキストは、万が一画像の表示できない環境（音声ブラウザとか）で、その画像が無くてもページの意味が通じるように設定するテキストです。
SEO目的で特定のキーワードを詰め込むような事はせず、素直に画像に書かれた文字や画像の説明文を入力しておきましょう。
- 「ツールチップ」は画像にマウスカーソルを合わせた時に、ポップアップで表示される文字のことです。HTMLソースではtitle属性です。
ここはあくまでも「画像の補足説明」を入力する部分ですので、先ほどの代替テキストと同じ内容を設定するような事はしないようにしましょう。（特定の文字が過剰になってしまうため）
基本的に何も設定しなくても問題はありませんので、もしよく分からないという場合は、空欄のままにしておきましょう。
画像を設置する時のオプション
画像を設置するためのウィンドウには、先ほど説明したURIのタブと「大きさ」「表示」「リンク対象」というタブがあります。それぞれのタブで設定できるオプション項目を見ていきましょう。
大きさ
画像の大きさを任意の大きさに変更する事ができます。
画像サイズを変更するには、「ユーザ指定」を選択することで入力できるようになるテキストボックスに、数字で大きさを指定します。
大きさの基準はピクセル単位、ウィンドウに対しての％での指定も可能です。
このオプションで画像の大きさを変更した場合は、HTMLで無理に変更するので画像がぼやけたりしてしまいます。
通常はデフォルトの設定のままで問題ありません。
表示
表示する画像の「上下左右の余白」や、画像周辺の文章の回り込みを行うかどうかといった設定を行う事ができます。
-
余白
上下左右の余白をピクセル単位で設定します。
-
輪郭線
画像の輪郭線を表示したい時に線の太さをピクセルで指定します。輪郭線の色は黒になりますが、HTMLにちょっとした修正を入れれば、他の色にする事も可能です。（CSSで指定する方が理想です）
-
画像に対する文章の配置（回り込み）
設定した画像に対して周辺の文章をどのように配置するのかを選択する事ができます。
左右に回り込むような設定もできますので、先ほどご説明した余白と組み合わせて画像を配置する事で、文章も読みやすいように挿絵を挿入する事もできます。
リンク対象
画像に対してリンクを設定するタブです。リンクの設定についてはKompoZerでリンクを作成する方法をご覧ください。
また「電子メールアドレスとして扱う」にチェックを入れると、画像をクリックした時に指定したメールアドレス宛のメールを送信できるようになります。（標準のメーラーのメッセージ作成画面が表示されます）
輪郭線の色を変更する方法
先ほど画像に輪郭線を設定するオプションをご説明しましたが、この輪郭線の色はHTMLを編集する事で変える事ができます。
まず輪郭線を設定した画像を分割モードで見ると、以下のようなコードが確認できると思います。
<img style="border: 1px solid ; src="・・・
色は16進数で設定する必要がありますが、以下のようにコードに色の指定を加える事で輪郭線の色を変える事ができます。（この例は赤に変えています）
<img style="border: 1px solid #FF0000; src="・・・
16進数の色についてはHTMLレファレンス カラーコード表などを参考にしてください。
Webデザイン・プログラムスキルを身につけたい方におすすめしたいスクール
私もWebスキルを身につけるためにスクールに通いましたが、正直言って「趣味の講座レベルのスクール」が多く、実践的なスキルを身につける事ができるスクールは多くありません。
ただ全くの未経験ではWebを仕事にする事が難しいのも事実。そこでWebの実践的なスキルを身につけられるスクールをご紹介します。
スクールの価格は安くありませんので、まずは無料体験レッスンや無料カウンセリングで体験してみて、良さそうだなと思ったら本格的に取り組む方法をおすすめします。
WebCampPro
（3ヶ月の超ガッチリ型）
3ヶ月の実践カリキュラムと3ヶ月のキャリアサポートで「転職・就職を保証してくれる」スクール。来校型のスクールですが、平日は毎日13:00以降、講師が常駐しているので質問や疑問もすぐに解消できるのが良いです。それぞれの学習スピードに合わせてカリキュラムが組まれますが、3ヶ月間という短期で一人前のエンジニアになるのが目標なので、かなりきつい部分もあるかと思います。
しかし裏を返せば「本気でキャリア形成をしたい」、「プログラムを仕事にしたい」という方にはピッタリなスクールです。
WebCamp
（1か月の集中型）
こちらは1ヶ月の短期集中型。と言っても、最初のカウンセリングを通してカリキュラムは個人ごとのオーダーメイドなので、自分の都合で学べるのが良いです。
このご時世、直接Web制作に携わらない部署の人もWebに関する知識は必要なので、社会人の方の受講も多いです。
CodeCamp
（2〜6か月のカスタマイズ型）
現役エンジニア・デザイナーからマンツーマン指導が受けられるスクールです。内容的には他のスクールにひけはとらないにもかかわらず、オンラインのみなので価格が安いのが良いです。
新卒などの社内研修でも利用されているので、社員のスキルギャップに悩んでいる方にも良いかもしれません。
