グループ

スタイリッシュ・ブロガーズ

トーク

※ 投稿はグループメンバーに限られています。

トーク一覧

リロード

全部 1- 最新15

HTMLタグ/ブログの記事に枠を作りたい

榮チャン 2007/07/27 11:05:22

とにかく、この部分をくくりたいんだよ！！
なアナタ。

こちらへ　思いのたけをぶつけて下さい。
2

榮チャン 2007/08/01 00:06:51

【　枠　其の一　】

ソースはこちら。（中央寄せ/幅450ﾋﾟｸｾﾙ　縦800ﾋﾟｸｾﾙ/文字位置　上詰め左寄せに設定）
---------------------------------------------
<CENTER>
<TABLE bgcolor="#9966cc" cellpadding="3" cellspacing="1">
<TBODY>
<TR>
<TD bgcolor="#ccccff">
<TABLE style="border-color:#9966cc;border-style:dashed;border-width:1px" cellpadding="3" bgcolor="#F0F8FF">
<TBODY>
<TR>
<TD width="450" height="800" valign="top" align="left"><FONT color="#6633ff" size="2">皆様こんばんは。ここに文章を入力します。</FONT></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
---------------------------------------------
※カラーコードや<TD width="***" height="***">の値は好みの値に変更して下され。

※カラーコードのサンプルはこちらをどうぞ。
http://www.ne.jp/asahi/wind/eicarrow/minkara/color_code.html

※上記のタグを使用したブログエントリはこちらダす。
http://minkara.carview.co.jp/userid/288848/blog/5704141/

--解説--

<TABLE bgcolor="#9966cc" cellpadding="3" cellspacing="1">　の部分
*bgcolor=縁取りの色
*cellpadding=縁取りと点線の間の幅 *cellspacing=縁取りの太さ

<TD bgcolor="#ccccff">
*bgcolor=縁取りと点線の間の色

<TABLE style="border-color:#9966cc;border-style:dashed;border-width:1px" cellpadding="3" bgcolor="#F0F8FF">
*border-color=点線の色
*border-width=点線の太さ
*cellpadding=枠内の余白
*bgcolor=枠内部の色

<TD width="450" height="800" valign="top" align="left">
*width=枠全体の幅
*height=枠全体の高さ

<FONT color="#6633ff" size="2">
*color=文字色
*size=文字のサイズ

ソースをコピー＆ペーストして、色々カスタマイズして使用してみて下さい。

★注意事項★
ブログの記事を作成する画面に、「HTMLタグ」と「改行」というチェックボックスが有るダすよね！？　

HTMLタグのチェックはON
改行のチェックはOFFにして下さい。

この場合、文章の改行も認識されなくなりますので、文章の改行したい部分に

<BR>

と記述を加えると、文章が改行されるようになります。<BR>ってHTMLタグで「改行」を意味するタグなんですよ。

例をあげると、

本日は晴天なり。
コロ助はコロッケが大好きなり。

･･･と2行に渡って表示させる場合は、

本日は晴天なり。<BR>
コロ助はコロッケが大好きなり。

と、改行位置に<BR>を書き加えます。

0人
3

榮チャン 2007/08/09 23:02:18

【　枠　其の弐　】

※サンプルのブログエントリはこちらです。
http://minkara.carview.co.jp/userid/288848/blog/5789958/

ソースはこちら。（中央寄せで設定）

尚、コピペ用のサンプルは、色を全て #ffffff[白]に設定していますので、
好みのカラーコードに変えて下され。尚、文章を入力する内部の幅と
高さは400ピクセルに設定していますので、好みのサイズに変更して
使用して下され。
---------------------------------------------------------------

<CENTER>
<TABLE cellspacing="3" bgcolor="#ffffff">
<TBODY>
<TR>
<TD>
<TABLE background="http://www.*****">
<TBODY>
<TR>
<TD>
</TD>
<TD height="30">
</TD>
<TD></TD>
</TR>
<TR>
<TD width="30">
</TD>
<TD align="center">
<TABLE bgcolor="#ffffff" width="100%" cellspacing="2">
<TBODY>
<TR>
<TD bgcolor="#ffffff" width="400" height="400" valign="top" align="left">

＊ここに文字を入力＊

</TD>
</TR>
</TBODY>
</TABLE>
</TD>
<TD width="30">
</TD>
</TR>
<TR>
<TD></TD>
<TD height="30">
</TD>
<TD></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
---------------------------------------------------------------

★注意事項★

HTMLタグのチェックはON
改行のチェックはOFFにして下さい。

0人
4

榮チャン 2007/08/09 23:03:06

因みに、オラのブログエントリは、こういう仕掛けになっているダす。

<CENTER>
<TABLE cellspacing="3" bgcolor="#008000">
<TBODY>
<TR>
<TD>
<TABLE background="http://www.******************_bk.jpg" bgcolor="#009900">
<TBODY>
<TR>
<TD></TD>
<TD height="30"></TD>
<TD></TD>
</TR>
<TR>
<TD width="30"></TD>
<TD align="center">
<TABLE bgcolor="#008000" width="100%" cellspacing="2">
<TBODY>
<TR>
<TD bgcolor="#ffffff" width="400" height="400" valign="top" align="left">
<IMG src="http://www.******ピッツァの画像*****.jpg" width="400" height="300" border="0">
<BR>
<BR>
小腹を空かして　みんカラを見ている　シニョーレ、シニョーラ、ブオンジョルノで　お疲れ～ナ。
腹の虫に効きそうなエントリで許してッレ。
<BR>
この猛烈な（と云っても気温30度なんダすがー；）暑さの中、ねっとりこってりなピッツァを食べまスたので、
皆さんにもお裾分けを。見るだけじゃねーかよというツッコミはメールにて受付させて頂きます。（ぉぃ
<BR>
以前作って冷凍しておいた生地と、冷蔵庫にあるものをかき集めて　何とか作ったダすｗ
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
<TD width="30"></TD>
</TR>
<TR>
<TD></TD>
<TD height="30"></TD>
<TD></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>

0人
5

2007/08/10 10:05:13

なるほどぉ、、、

文字が多いけど一度合わせておけばコピペだけなので良いですよねぇ。

カラーコード表はもしかして栄ちゃんさんの自作？、
ちょっと違う所で変なもの載せちゃいますた、、、(__)。

0人
6

榮チャン 2007/08/10 20:40:01

>> エブリイさん

一度　メモ帳にペーストして、書き込んでから一気にブログ作成覧に貼り付けてしまうと
やりやすいダすよね。

CSSと同じダすｗ

カラーコード表は　大分前に何かの資料として付いて来たファイルを弄っただけダすよ～ｗ

背景や枠の柄や色、枠の幅なんかを変えるだけで
色んなバリエーションが作り出せると思いますダよ。
エブリイさんはCGを得意としているので、綺麗なフレームを作りそうな予感がするダす♪

0人
7

996P-Edition 2007/08/11 12:16:32

カレンダーが終わったら、挑戦してみます(^_^;)

0人
8

榮チャン 2007/08/12 21:03:23

>>7 996P-Edition さん

コツを覚えてくると、楽しいですよ～～。
是非　挑戦してみて下さい！

イタリアンカラーを、ドイツな赤・黒・黄のストライプに変えても素敵ですよね♪

0人
9

996P-Edition 2007/08/12 22:20:43

ドイツなストライプ・・・やってみますか？

ところで、質問です・・・先生

PLATINUMのスタイルシートで、上記の「枠のソース」をコピペすると、バーと枠の間が、ベローンと空いてしまうのですが・・・ご対処方法を、ご伝授くださいませ　m(__)m

0人
10

榮チャン 2007/08/12 23:58:48

ありゃっ　怪談噺などを打ってる場合じゃなかったですね（笑

この場合は、以下のように設定します。
ブログ作成画面の下の方にあるチェックボックス項目に「HTMLタグ」と「改行」という部分が有りますよね。　

こちらのチェックボックスの　HTMLタグのチェックは⇒ON　　改行のチェック⇒OFF

の状態にします。改行がONになると、長いタグを適当に改行した部分まで読み込んでしまうからなんです。

文章を入力して　改行を行いたい場合は、改行の呪文である

<BR>

を　改行したい位置に仕込んで下さい。改行チェックボックスをOFFにすると、この呪文が　改行の意味になります。

これで解決ハリマオー　でござぃやす。

ドイツ柄が凄く楽しみです～～～～(´∀｀)

0人
11

榮チャン 2007/08/13 00:04:43

>>9 996P-Editionさん

←　
←
←　この画像だと解り易いかも知れません♪
←
←

0人
12

996P-Edition 2007/08/13 00:10:03

OH～！
Wonderful (*^^)v

また、呪文をgetできました！

ありがとうございますm(__)m

0人
13

榮チャン 2007/08/13 00:23:11

壁紙素材①　よしず？すだれ？

0人
14

996P-Edition 2007/08/13 01:26:36

OH～！
夏の風物詩、「枠」モノ作っちゃいますヨ

ワクワク・・・なんちゃって(^_^;)

0人
15

榮チャン 2007/08/13 09:47:55

壁紙素材②　江戸小紋/貝模様ライトブルー

涼やかさを感じる素材で、日本の夏を演出するのもよいかもしれないダすね(´∀｀)

皆さんの「粋な枠」を楽しみにしておりゃす。

0人
16

榮チャン 2007/08/13 09:49:59

壁紙素材③ 市松模様　緑色

0人
17

榮チャン 2007/08/13 10:14:05

壁紙素材④ 996P-Edition/GermanSTYLE

0人
18

996P-Edition 2007/08/13 14:44:38

榮チャン・・・ありがとう m(__)m

今晩にでも早速、使ってみます。

0人
19

榮チャン 2007/08/14 02:55:12

>>18 996P-Edition さん

素晴らしいアレンジ力ですね～～！
HTMLタグ/画像関係のスレッドでeikoさんがご紹介下さっている画像アレンジのツールも
きっと996P-Editionさんの遊び心を　くすぐる事と思います。

0人
20

996P-Edition 2007/08/14 09:37:34

お褒め頂き、照れます・・・(^_^;)
HTMLタグ/画像関係のスレッドですね。

拝見してきます(^^)

0人
21

榮チャン 2007/08/27 22:01:42

【みっふさんからのリクエスト】

※サンプルのブログエントリはこちらです。
http://minkara.carview.co.jp/userid/288848/blog/5982485/

ファイルノートみたいな枠に仕上げていますダ。

ソースはこちら。（中央寄せで設定）色の設定は好みのカラーコードに変更して下され。
--------------------------------------------------
<CENTER>
<table width="480" bgcolor="#5f5f5f" cellspacing="5" cellpadding="5" style="border:1px solid #cccccc;">
<tr height="100">
<td width="20" align=center style="border-right:1px dashed #cccccc;color:#cccccc;font-size:11px;line-height:25px;">
○<br>
○<br>
○<br>
○<br>
○<br>
○<br>
○<br>
○<br>
○<br>
○<br>
○<br>
○<br>
○<br>
○<br>
○<br>
○<br>
○<br>
○<br>
</td>
<TD colspan="2" bgcolor="#f5f5f5" valign="top" align="left">ここに入力ここに入力ここに入力ここに入力ここに入力ここに入力ここに入力ここに入力ここに入力ここに入力ここに入力ここに入力ここに入力ここに入力ここに入力ここに入力ここに入力ここに入力ここに入力ここに入力ここに入力ここに入力ここに入力ここに入力ここに入力ここに入力ここに入力ここに入力
</TD>
</tr>
</table>
</CENTER>

0人
22

996P-Edition 2007/08/28 03:30:50

ファイルノートのカラーが、グレーテイストですね！(@_@;)
頂いちゃいますヨ・・・(*^^)v

0人
23

996P-Edition 2007/08/28 09:42:03

ご馳走様です (^^)
少し、手を加えてみましたが、如何でしょうか？

0人
24

2007/08/28 20:56:37

こんばんは☆
榮ﾁｬﾝさんｻﾝﾌﾟﾙありがとうございﾏｽ。
次回ﾌﾞﾛｸﾞUpの時に使わせていただきﾏ～ｽ。
今回の煎餅ﾌﾞﾛｸﾞのﾃｰﾌﾞﾙはｺﾁﾗにあったｿｰｽ使わせていただきまｼﾀ。
ちょっぴり加工してみましたﾖ。
これからもﾘｸｴｽﾄさせていただきﾏｽ!!

＞996P-Edition ｻﾝ
さっそく加工されたんですﾈ！
画像とのﾊﾞﾗﾝｽがｽﾃｷです～。
ｵﾗも見習わないとﾈ。

0人
25

榮チャン 2007/08/29 12:56:46

>> 22 23 996P-Edition さん
早速拝見させて頂きまスた～！素敵ダすね♪
それに　わんこのAAもコメントに加えちゃってるところが凄いダす！

パンチの穴の大きさもアレンジなさっていて、素晴らしいダす。

>> 24 みっふさん
情熱の赤い煎餅ブログね！？あれ、いい感じでスたよ～♪　そうか、ここに有ったのを使ってみたダすか。

ファイルノートの枠も、色や穴のデザインを変えるだけで色んなバリエーションが楽しめるので、みっふさんのセンスを活かして　加工してみて下され！

0人
26

996P-Edition 2007/08/29 22:09:07

24　みっふ様・・・こんにちは！
お互い、いただけるモノは、いただいちゃいましょう。

25　榮チャン・・・こんにちは！
パンチの穴・・・超簡単アレンジですが、不詳の弟子としては、一捻りですよ(笑)

0人
27

2007/09/04 19:50:57

先日いただきましたﾌｧｲﾙﾉｰﾄの枠でﾌﾞﾛｸﾞUpしてみまｼﾀ。
加工するのにかなり時間がかかってしまいましたが仕上がりは自分的にはまぁまぁではないかと。ｱﾊ
また色々教えてくださ～い（＾＾）

画像は特に関係無しﾃﾞｽ。ﾍｯﾀﾞｰの試作ﾃﾞｽ～

0人
28

榮チャン 2007/09/05 12:47:35

>>27 みっふさん

うおっっ！なんか、凄くファンシーになってるぞ！
可愛いダす～♪　これ、いいダすねぇ(゜∀゜)

これ、テキストの範囲にノートの罫線みたいな背景画像を仕込んだら面白そうダすなあ。
オラも適当にばっかりやってないで、まともなデザインをしてみようかな･･･。

0人
29

かおる！ 2007/12/06 23:44:45

こんばんは♪
楽しく拝見させて頂きました。

テンプレートう使わせて頂いてもよろしいでしょうか。
ファイルノート調がお気に入りです(*^_^*)

0人