PR
ＮＫ−Ｊ
仕事にも、９歳と５歳の子育て（プラス一匹！？）にも、忙殺される日々ですが、そんな中で、心身ともに鍛錬、人間改造講座（山口修源 氏監修）の実践というライフワークについて、書いていこうとおもいます。
Calendar
Category
2005.10.01
テーマ： ホームページ作成の悩み(550)
カテゴリ： 日常徒然記
ブログを書き始めて４ヶ月目、日記を色々書いていくに、文字のデザインや画像の貼り方、など色んな方々のＨＰの書式が気になりだした今日この頃。
私は、職業的にも専門だったりするのですが、でも分からないものは分からない。普段は、コードの中身なんて、プログラマーの人に任せっぱなしだもんなぁ。
で、色々ＨＰ検索したりして、以下のいくつかの方法を覚えました。ご存知の方はご存知でしょうし、あまり目新しくもないのですが、折角なのでまとめておこうかな、と思いました。
その「色々ＨＰ検索」するときに、特に素晴らしかったのは、ももパパさんのページ、 「３０日で覚えちゃう！楽天広場ＨＴＭＬ講座」 でした。興味ある方は是非どうぞ。とっても分かりやすい。
私も、楽天で書いているので、以下は、楽天でのことを前提に書きます。基本は文字のフォントかな、と思ったりしてます。
これをうまく使っている人のページは、やっぱり綺麗。センスですね。（私は子供の頃から美術系はちょっと。。。。）
でも文字は、基本スタイルにあるので、ちょっと置いておきます。自分が便利だな、と思ったのは、画像関連とスタイルシート関連ですね。
◆画像を張り込む方法
◇楽天ブログ内の画像オプションで張っただけの形
楽天ブログのエディタで、「画像オプション」ボタンから絵を張り込むと、以下のソースで絵が貼れますよね。
<img src="http://xxxx.xxxx.xxx.jpg" width="xx" height="xx" alt="xxxx" border="0">
（"xxx"の部分は、それぞれの画像ごとに勝手に決まってきますね。）
◇その左に文字を書きたければ
画像の横に文字を書きたい場合もあるでしょう。その場合は、青色の部分に、以下の赤色を挿入すればＯＫです。
<img src="http://xxxx.xxxx.xxx.jpg" align="left" width="xx" height="xx" alt="xxxx" border="0">
この後に、文字をそのまま入力すれば、画像の横に書かれますね。左右変えたい人は、leftをrightにしてください。（実はこれ、友人に聞かれて調べたんです。聞かれると自分も勉強になりますね。）
◇写真と文字の間に間を開けたければ
写真と文字がくっつき過ぎだなと思ったら、以下の赤の追加で入れた数字の分、離れます。
<img src="http://xxxx.xxxx.xxx.jpg" align="left" hspace="20" width="xx" height="xx" alt="xxxx" border="0">
◇写真をクリックすると他のＨＰにリンクさせたければ
写真をクリックすれば、他のページに飛ぶようにリンクさせたければ、文字の時と同じく以下の赤色ではさみます。
<a href="http://xxx.xxx.xxx">< img src="http://xxxx.xxxx.xxx.jpg" width="xx" height="xx" alt="xxxx" border="0"> </a>
とりあえず私が気になっていた画像関連の表記はこんなところでした。
◆枠（スタイルシート）を使いたい。
続きまして枠表記です。これも他の人のブログの枠使いが綺麗なんで、調べました。最初、私は引用表記を、斜字体にしていたのですが、かなり見にくいので、自分でも、変えたかったのです。
◇枠を書く
<table width="400" height="50" style="border:1px solid #FF6600;">
<tr><td>文章ここに あいうえおかきくけこ</td></tr></table>
上のソースを使うと、こんな感じで表されます。
◇色や枠線や背景色を変える
<table width="400" height="50" style="border:1px dashed #0000CC;background-color:#FFFFBB;" ><tr><td>文章ここに あいうえおかきくけこ</td></tr></table>
色や背景色や枠線を変えたければ、上記の赤部分を変えればいいんです。枠線については、solidが実線。dashedが点線。色の指定については下部に書きます。こんな感じになります。
◇枠の中に文章を書いていく
実際ブログを書くときに、私は以下のようなソースを、別のファイルに保存しておいて、コピー＆ペースト、して使っています。赤の部分を指定して、全体の幅の調整をしています。
<table width= "95%" align="center" style="border:1px solid #ff6600;">
<tr><td><div style="padding: 8px 18px">ここに文章を書いていきます。１行目
ここに文章を書いていきます。２行目
ここに文章をかいていきます。３行目</dev></td></tr></table>
こんな形で表示されます。中の文章のフォントの変更は普通どおりできますよ。
◆色の指定
色のコードは、以下のＵＲＬで調べています。（これは楽天の管理ページ内のものです。楽天以外の方は行けないかも。すいません。）
http://my.plaza.rakuten.co.jp/layout/color_sample.html
とりあえず、こんな感じです。職業柄どうしても興味があるので追いかけましたが、それにしては中途半端で突貫調査なので、何かおかしなところがあるかもしれません。分かった方、ご指摘ください。
このような、決まったフォーマット（枠書いたり写真貼ったり）、や、ブログランキングの毎回各部分の表現は、私は別ファイルで保存しています。
で、毎日使うときに、まずはそこからコピーしてきて、中身だけ書き換えたりしています。結構便利です。（でも飽きたらすぐに使わなくなるかも。。）
自分の知識整理用にもと思って、まとめてみましたが、結構表現するのに苦戦しました。慣れないことは疲れるもんですね。
→ ブログランキングに参加しました。もしよろしければ、 クリック
私は、職業的にも専門だったりするのですが、でも分からないものは分からない。普段は、コードの中身なんて、プログラマーの人に任せっぱなしだもんなぁ。
で、色々ＨＰ検索したりして、以下のいくつかの方法を覚えました。ご存知の方はご存知でしょうし、あまり目新しくもないのですが、折角なのでまとめておこうかな、と思いました。
その「色々ＨＰ検索」するときに、特に素晴らしかったのは、ももパパさんのページ、 「３０日で覚えちゃう！楽天広場ＨＴＭＬ講座」 でした。興味ある方は是非どうぞ。とっても分かりやすい。
私も、楽天で書いているので、以下は、楽天でのことを前提に書きます。基本は文字のフォントかな、と思ったりしてます。
これをうまく使っている人のページは、やっぱり綺麗。センスですね。（私は子供の頃から美術系はちょっと。。。。）
でも文字は、基本スタイルにあるので、ちょっと置いておきます。自分が便利だな、と思ったのは、画像関連とスタイルシート関連ですね。
◆画像を張り込む方法
◇楽天ブログ内の画像オプションで張っただけの形
楽天ブログのエディタで、「画像オプション」ボタンから絵を張り込むと、以下のソースで絵が貼れますよね。
<img src="http://xxxx.xxxx.xxx.jpg" width="xx" height="xx" alt="xxxx" border="0">
（"xxx"の部分は、それぞれの画像ごとに勝手に決まってきますね。）
◇その左に文字を書きたければ
画像の横に文字を書きたい場合もあるでしょう。その場合は、青色の部分に、以下の赤色を挿入すればＯＫです。
<img src="http://xxxx.xxxx.xxx.jpg" align="left" width="xx" height="xx" alt="xxxx" border="0">
この後に、文字をそのまま入力すれば、画像の横に書かれますね。左右変えたい人は、leftをrightにしてください。（実はこれ、友人に聞かれて調べたんです。聞かれると自分も勉強になりますね。）
◇写真と文字の間に間を開けたければ
写真と文字がくっつき過ぎだなと思ったら、以下の赤の追加で入れた数字の分、離れます。
<img src="http://xxxx.xxxx.xxx.jpg" align="left" hspace="20" width="xx" height="xx" alt="xxxx" border="0">
◇写真をクリックすると他のＨＰにリンクさせたければ
写真をクリックすれば、他のページに飛ぶようにリンクさせたければ、文字の時と同じく以下の赤色ではさみます。
<a href="http://xxx.xxx.xxx">< img src="http://xxxx.xxxx.xxx.jpg" width="xx" height="xx" alt="xxxx" border="0"> </a>
とりあえず私が気になっていた画像関連の表記はこんなところでした。
◆枠（スタイルシート）を使いたい。
続きまして枠表記です。これも他の人のブログの枠使いが綺麗なんで、調べました。最初、私は引用表記を、斜字体にしていたのですが、かなり見にくいので、自分でも、変えたかったのです。
◇枠を書く
<table width="400" height="50" style="border:1px solid #FF6600;">
<tr><td>文章ここに あいうえおかきくけこ</td></tr></table>
上のソースを使うと、こんな感じで表されます。
文章ここに あいうえおかきくけこ
◇色や枠線や背景色を変える
<table width="400" height="50" style="border:1px dashed #0000CC;background-color:#FFFFBB;" ><tr><td>文章ここに あいうえおかきくけこ</td></tr></table>
色や背景色や枠線を変えたければ、上記の赤部分を変えればいいんです。枠線については、solidが実線。dashedが点線。色の指定については下部に書きます。こんな感じになります。
文章ここに あいうえおかきくけこ
◇枠の中に文章を書いていく
実際ブログを書くときに、私は以下のようなソースを、別のファイルに保存しておいて、コピー＆ペースト、して使っています。赤の部分を指定して、全体の幅の調整をしています。
<table width= "95%" align="center" style="border:1px solid #ff6600;">
<tr><td><div style="padding: 8px 18px">ここに文章を書いていきます。１行目
ここに文章を書いていきます。２行目
ここに文章をかいていきます。３行目</dev></td></tr></table>
こんな形で表示されます。中の文章のフォントの変更は普通どおりできますよ。
ここに文章を書いていきます。１行目
ここに文章を書いていきます。２行目
ここに文章をかいていきます。３行目
ここに文章を書いていきます。２行目
ここに文章をかいていきます。３行目
◆色の指定
色のコードは、以下のＵＲＬで調べています。（これは楽天の管理ページ内のものです。楽天以外の方は行けないかも。すいません。）
http://my.plaza.rakuten.co.jp/layout/color_sample.html
とりあえず、こんな感じです。職業柄どうしても興味があるので追いかけましたが、それにしては中途半端で突貫調査なので、何かおかしなところがあるかもしれません。分かった方、ご指摘ください。
このような、決まったフォーマット（枠書いたり写真貼ったり）、や、ブログランキングの毎回各部分の表現は、私は別ファイルで保存しています。
で、毎日使うときに、まずはそこからコピーしてきて、中身だけ書き換えたりしています。結構便利です。（でも飽きたらすぐに使わなくなるかも。。）
自分の知識整理用にもと思って、まとめてみましたが、結構表現するのに苦戦しました。慣れないことは疲れるもんですね。
→ ブログランキングに参加しました。もしよろしければ、 クリック
お気に入りの記事を「いいね！」で応援しよう
Last updated
2005.10.01 11:41:14
【毎日開催】
15記事にいいね！で1ポイント
© Rakuten Group, Inc.
