毎回毎回同じHTMLを手書きするのは面倒くさい!

 そういう場合は、メモ帳に保存しておいて、コピー&ペーストを使うと簡単!


 1. 「メモ帳」というのは別名「notepad」とも言いますが、まぁたいていは「メモ帳」という名前です。


 2. 「スタート」⇒「すべてのプログラム」⇒「アクセサリ」の中に入っています。


 3. HTMLをいじることがあるなら、デスクトップにショートカットを作っておくと便利!
    私はクイックランチにもショートカットを置いています。




さて、本題ですが、

 では、どうしたら毎回毎回HTMLを手書きせずに、もっとお手軽に使えるか?


 1. 前回の記事を例にあげてやってみましょう。


 2. こんな▼HTMLでしたね。

<center>
<a href="画像URL" target="_blank">
<img src="画像URL" width="400px" height="300px">
</a>
</center>

    このHTMLは、ちゃんと見えるように表示させるために<>←このカッコの部分だけ全角の日本語で表記してあります。これ以外は全て半角で書いてあります。


 3. つまり、まずは上記全文をカーソルでなぞってコピーして、メモ帳に貼り付け(ペースト)します。


 4. そして、<>←このカッコの部分だけを全て半角のカッコに書き直します。


 5. そしてそれを、「画像用(ヨコ)」とでも名前を付けて、保存します。


 これでひと通りの準備は完了です。




 では実際に使うにはどうするか?


 1. 実際に使いたい画像データを先にアップロードしてしまいます。


 2. そしてその後、その画像のアドレスを手に入れます。
     この画像のアドレスは後で使うので、メモ帳を立ち上げて、新規ページにコピー&ペーストしておいて下さい。
     私は画像だけ、右クリック「新しいウィンドウで開く」で、別窓で開けておきます。その方がイチイチ「コピーして保存」しておかなくてもいいですからね。


 3. ブログ編集画面の「新規投稿」をクリックします。


 4. 新規投稿画面を開けたまま、先ほど作った「画像用(ヨコ)」を開いて、その中身を「全て選択」して、「コピー」します。


 5. そして、そのまま「新規投稿」の記事ページへ「ペースト(貼り付け)」します。


 6. そのままだと、使いたい画像は表示されませんので、先ほど手に入れた画像データのアドレスをコピーします。


 7. で、新規投稿画面の「画像URL」と書かれている部分を消して、そこへペースト(貼り付け)します。
     ちゃんと画像のアドレスが入りましたか?


 8. 2ヶ所の「画像URL」へ、同じアドレスをペースト(貼り付け)して下さい。


 9. あとはいつも通り、記事本文の文章を書き込むだけです。
     編集画面の下にある「プレビュー」を見れば、うまくいっているかどうかわかりますよね?




 今回の例のHTMLの画像サイズの設定は、ヨコナガのノーマルサイズの写真に使えるようにしてありますが、タテナガ写真の場合は width を 300px にして、 height を400px にするといいでしょう。
 要するに、一般的な写真サイズのタテとヨコの長さの関係は、4対3、又は3対4になっているというわけですね。
コメント ( 0 ) | Trackback ( 0 )

下記テスト記事のHTMLの詳細説明

<center>
<a href="画像URL" target="_blank">
<img src="画像URL" width="400px" height="300px">
</a>
</center>



▲上記のHTMLを分解してみる。

1. <center> ~ </center> ってなに?


 これはワープロソフトなどでもおなじみの、センター揃え、という意味。
 この<center>と</center>にはさまれた部分は全てセンターで揃えて表示される。
 じゃあ、これを書かないとどうなるか?
 基本的に全て、左揃えになる。
 じゃあ、右に揃えたい時はどうするの?
 その場合は<div align="right"> ~ </div>で同じようにはさむ形で書き込むと、

こうなる。
※色と大きさはわかりやすいように変えています。
  指定しない限り、大きさや色は変わりません。



2. <a href="画像URL"> ~ </a> ってなに?


 これは俗に言う「リンク」を作るためのもの。
 <a href="画像URL"> これと、</a> これに挟まれたら、そこはすべてクリックできるようになる。
 それをクリックすると画像URLのページへ飛ぶ。
 つまりこの「画像URL」という部分は、なにも画像のURLでなくとも、他のURLでもいいということだ。
 友達のブログ記事にコメントを書く時に、コメント欄の「URL」とか「アドレス」に自分のブログのアドレスを貼り付けたりする。
 と、自分が書き込んだコメントの下などに、自分のブログへ飛んで来れるリンクが作られる。
 あの「リンク」だ。
 リンクというリンクは、ほとんど全てが実は <a href="画像URL"> ~ </a> こういう形になっている。
 つまり<a href="画像URL">←ここは、画像URLに限らず、すべてのURLを当てはめられる、ってことだ。
 「リンク」を作るために。



3. <a href="画像URL" target="_blank"> ってなに?


 target="_blank"
 これは、「別窓で表示する」って意味。<a href="URL">とワンセットで使う。
 リンク先のページを、別窓で表示してくれる。
 じゃ、target="_blank"これが書き込まれていないとどうなるか?
 今見ていたページの上へ、リンク先ページが表示される。
 つまりは今見ていたページは消えてしまうわけだ。
 それが意図していたことならいい。
 しかし自分のブログやHPから他の人のブログなどに飛ぶ時に、自分のページが完全に閉じられてしまうのはいかがなものか?
 そう思ったらtarget="_blank"これを書き加えておくのもひとつの方法だ。
 他にも、小さな写真をサムネイルで表示させておいて、それをクリックすることで別窓で大きな写真を見せたい場合などにも有効だ。



4. <img src="画像URL"> ってなに?


 これはまー、わかりやすいかな。
 「img」ってのは「イメージ」だ。
 「src」ってのは「サーチ」、つまり「探してきなさい」ってこと。
 意味するところは「このURLのイメージ(画像)を探してきて、ここに表示させなさい」ってことですね。
 イメージ(画像)に対してサイズの指定をしていないので、この場合はイメージ(画像)のサイズそのままの大きさが表示される。



5. <img src="画像URL" width="400px" height="300px"> ってなに?


 これでイメージ(画像)の大きさを決められる。
 width="400px"は、イメージ(画像)の横幅を400px(ピクセル)にする、という意味。
 height="300px"は、イメージ(画像)の高さを300px(ピクセル)にする、という意味。
 この大きさは、ちゃんと元の画像の何分の一になるかをきっちり計算してから数字を当てはめてある。
 もし、適当な数字を書き込むと、画像はタテヨコの長さが元のイメージとは変わってしまい、変な形が表示されてしまう。

 例えばこんな感じに⇒ 

 画像その物は何も別のモノを新たに用意したりはしていない。
 両方とも同じ画像を使っている。
 そう、同じ画像URLを書き込んである。
 
コメント ( 0 ) | Trackback ( 0 )

今回、3つテストしてみた感想

 ふぅ~ん

 結局、わざわざ HTMLエディター をクリックしてHTMLを書き込むよりも、普通に 「新規投稿」 で開いた状態で HTML まで書き込んでしまった方が、文面や画像のコントロールはしやすいみたいですねー。

 しかしgooさん、画像のコントロール、通常の「新しい記事を投稿します」では、非常にコントロールしにくいと思いました。
 「画像を挿入する」ボタンみたいなのがあって、それを押して画像を選ぶことで、そのまま画像のHTMLか、画像その物が挿入されて表示されれば、もうちょっとコントロールもしやすいような気がしましたー。
コメント ( 0 ) | Trackback ( 0 )

テスト-03

ついでにもう一個テストしてみる。


 ふぅーむ、ちゃんと使えてるじゃん?
 テキストがちゃんと画像の左側に書き込まれていれば、おっけー。
 ってことは、

 1. サイズ指定して、

 2. 元画像を小さくしただけのサムネイルを表示して、

 3. その横にテキストが書き込める。

 ってわけか。


 ちなみに今回のHTMLはこれ▼

<a href="画像URL" target="_blank">
<img src="画像URL" width="200px" height="150px" border="0px" align="right" vspace="10px" hspace="10px">
</a>



 あー、vspace と hspace は使えねぇーのかぁ~
 んじゃ、border と bordercolor で指定してみるかな。




 だめか・・・・。
 んじゃ、CSSいじるか・・・・。

 ありゃまー
 こんなことになるとは。
 画像がはみ出してんじゃん!
コメント ( 0 ) | Trackback ( 0 )

テスト-02



今回のテストでわかったこと


 1. サムネイル画像を別個にアップロードしなくても、サイズ指定で画像サイズを変更できる。

 2. 書き込んだHTMLはそのまま使われるわけではなく、goo用に最適化される。つまりは書き直される。

 以上の2点ですな。


 ちなみに、上記画像のHTMLはこれ▼

<center>
<a href="画像URL" target="_blank">
<img src="サムネイル画像URL">
</a>
</center>



 別個にサムネイル画像を用意して、アップロードして使ってます。が、その必要がないんですね。
 本来なら、こう書き込めば良かったんですよ。
 ▼これならわざわざサムネイル画像を別個に用意しなくてもいいからねー。



<center>
<a href="画像URL" target="_blank">
<img src="画像URL" width="400px" height="300px">
</a>
</center>



 ※1 半角英数字は、キーボードの左上あたりにある「半角/全角」を押すことで書けるようになります。
    全角(日本語)に戻すにはもう一度押すだけ。
    押すことで切り替わります。
    日本語のままでSHIFTキーを押しながらの英数字入力ではうまくいきません。
    必ず「半角/全角」を切り替えてから入力するようにして下さい。

 ※2  ”画像URL”には、あなたが使いたい画像のURLを入れて下さい(コピー&ペーストで)。

コメント ( 2 ) | Trackback ( 0 )

テスト-01

 へぇー

 勝手にHTMLが書き直されちゃうとはねー、知らんかった。

 最初、私がこのページに書き込んだHTMLはこれ▼なんですけどね。

<A href="画像URL" target="_blank">

<IMG src="画像URL" width="400px" height="300px" border="0px">

</A>


 一回投稿してから、もう一度過去記事の確認をしてみるとこう▼なってた。

<A href="画像URL" target=_blank>

<IMG height=300 src="画像URL" width=400 border=0>

</A>


 そうかー、書き直されちゃうんかー

 まー、これは問題なく当初思っていたとおりに表示されてるんでいんですけどねー・・・・・。

 

コメント ( 0 ) | Trackback ( 0 )

がんばりやさんに!

 はじめてのことに、果敢に挑戦された、実行されたその勇気に拍手!!

 私からのささやかなプレゼントです。

 よろしかったらお使い下さい。


画像をクリックすると幅760px高さ120pxの画像が別窓で表示されます
コメント ( 2 ) | Trackback ( 0 )

ヘッダー画像の大きさは?

■例えば自分が撮影した写真をそのままヘッダー画像に使おうと、写真データをアップロードしたとしましょうか。

 その画像サイズは?

 ・もしその画像サイズが、幅640px、縦480pxなら▼

   その写真の上部の25%ほどしか表示されていないことでしょう。
   右端は、幅が足りないので同じ写真が繰り返し表示されているはず。


 ・もしその画像サイズが、幅1280px、縦960pxなら▼

   もうほんとに写真左上の一部しか表示されていないことでしょう。
   ヘッダー指定サイズに比べて、画像が大きすぎるのです。


 ・もしそれがヘッダー用に加工されたもので、幅800px、縦150pxなら▼

   画像の下、20%ほどが表示されていないでしょう。
   横は右端が、5%ほど表示されていないはずです。
   ※クリアオレンジのCSSの場合


■クリアオレンジのCSSの場合、ヘッダーの高さ設定は120px(ピクセル)幅の設定は760px(ピクセル)のようです。

 ・そのため、高さが120px以下の画像を指定した場合は、高さが足りない分またその下に同じ画像が繰り返し表示されてしまいます。

 ・幅は760pxが指定されています。横も同じ。幅が足りなければ繰り返し同じ画像が表示されるようになっています。


■解決方法は?

 ・幅760px高さ120pxでヘッダー用画像を自分で作成する。

 ・この指定サイズに近い画像を使う。(画像が少し切れてしまう分はあきらめる)

 ・誰かにこのサイズで画像を作ってもらう。

 ・指定サイズをテンプレート側で変更する。



※テンプレート「クリアオレンジ」を使用した場合です。テンプレートの”シンプル”シリーズは全てサイズが同じようです。
  テンプレート「カスタマイズ」はデザインが違うので、サイズも指定方法も違います。
コメント ( 0 ) | Trackback ( 0 )

写真や画像だけを見て欲しい!

 そんな時は、ちょっとした工夫で別窓表示!

 画像をブログやHPへ貼り付ける時、HTMLを見てみるとこんな記述をされてると思います。

<a href=”********.jpg”>

<img src=”********_s.jpg” alt=””>

</a>

 画像をクリックすると拡大表示されるってやつね。
 (実は拡大ではなく、”小さい画像”と”本来の大きさの画像”が用意されていて、リンクされてるんだけどね。)

 このままだと自分のブログやHPのページそのものが消えて、画像のみに置き換わってしまう。
 画像を見終わって窓を閉じてしまうと、ブログやHPまでが閉じられてしまって「あ!偶然見つけたページだったのに!お気に入りにも入れてないし、どこから探したらいいかわかんなくなっちゃったよ!!」ってことも充分起こりうる。私にも経験がある。
 それを防ぐ、ちょっとした工夫。
 じっくり画像を見てもらいたいと思ったら、やってみよう。

<a href=”********.jpg” target=”_blank”

<img src=”********_s.jpg” alt=””>

</a>

  target=”_blank” ← これを書き込むだけ。

 「別窓で表示」ってこと。
 簡単でしょ?

※上記HTMLをコピーしてもそのまま使うことは出来ません。
  全て半角英数字で、ご自分で手書きしましょう。
コメント ( 0 ) | Trackback ( 0 )

ヘッダー画像だけ?

 gooBlogの場合、ヘッダー画像だけを変更しようと思っても、カスタマイズできるテンプレートは今のところ(2005年10月31日現在)3つしか用意されていません。
 「シンプル」というテンプレートもCSSをイジれるようなので、3つではなく、
合計(シンプル6色×各3種)18+3=21個あるようです。

 それもCSS(カスケードスタイルシート/一般的には「スタイルシート」と呼ばれている)のみしかイジれないので、「このテンプレートのここの形だけ変えたいなぁ」と思っても、有料版に乗り換えない限りHTMLの方はイジれません。

 まー、CSSだけと言っても、初めて手を出す人には最初のとっかかりとしてはいいのかもしれません。

 で、まぁ、今回の本題は、

ヘッダー画像は変えたけど、他の部分の色も変えなきゃバランス悪いから、変えたいんだけどぉー!?
どうやったらいいのよぉー!?

 です(笑)

 CSSってのは「HP(ホームページ)やブログ全体の、各指定した箇所の文字や色や背景まで、全体的にコントロールしてしまえる」モノです。
 たとえば、
 記事の文字の色は何色!
 大きさはこのくらい!
 とか、
 タイトルの背景画像はこれ!
 タイトルの文字の色はこの色で、大きさはこのくらい!
 とか指定できるんですよ。

 ただし、メニューの位置だとか順番とか、配置とか、そういったことまではコントロールできません。

 文字の色、背景の色、文字の大きさ・種類、背景の画像・大きさなど、おおざっぱに言ってしまうと、そういうことしかできません。
 でも、たったそれだけで、全然印象は変わってきますよ。



 さて、まずはブログ全体の背景の色を変えるには?

 1. まず、前提として「カスタマイズ」テンプレートを使っていないとgooではCSSを変更できません。
   まぁ、ヘッダー画像をすでに変更している方はテンプレートもすでにカスタマイズから選ばれてるはずですが、カスタマイズから選んでいないテンプレートはCSSも変更できません。大事なポイントです。 「シンプル」というテンプレートもCSSをイジれます。

 2. 背景の色をコントロールしている箇所はここです。
/* ページ全体の背景と文字と余白 */
BODY {
 background-image: url();
     background-repeat: ;
     background-position: ;
     background-color: #ffff99;
     margin: 0px;
}

   バックグラウンドカラー(background-color)の後に続く、シャープ(#)と英数字が色を表しています。
   この英数字を変更するだけで、ブログ全体の背景の色が変更できます。

 3. こんなんじゃ、どんな色かわかんないよぉー!
   ええ、えぇ、私もいまだにこの英数字を見ただけではどんな色かなんて、はっきりとはわかりません(笑)
   でも大丈夫。
   便利なモノを作ってくれてる人がいますよ。
   私はいつもこのページを参考に使わせてもらってます。

■ Web Safe Color (カラーチャート) in webサイト:鍾馗

   これで、この「#英数字」がどんな色なのかわかりますよね。
   この色の意味と、簡単なHTML(tableを使う)を知っていれば、自分でこんなカラーチャートを作ることも難しいことではありません。

 4. では、そのカラーチャートから自分が背景の色に使いたい色を選んで下さい。
   その上に書かれてある、数字をメモ書きでもいいので写しておきます。

 5. で、上記のbackground-color#の英数字を、今書き写した英数字に書き換えましょう。
   #以外の英数字は全てで6つです。
   間違えないように入力して下さい。

 6. あとは、「プレビュー」してみて下さい。
   背景はちゃんとその色に変わっていましたか?
   その色で良ければ「保存」です。
   気に入らなければ違う色(英数字)にしてみましょう。

 7. 保存したら、必ずもう一度本文(自分のブログ)を開いて確認しましょう。
   ちゃんと背景の色は指定した色になっていますか?
コメント ( 3 ) | Trackback ( 0 )
« 前ページ