| 2006年 04月 |
画像（複数）のＵＰ方法４
2006-04-21
こんな感じで画像を並べる方法は以下の通り
＜p＞
＜img src="http://www.pwblog.com/user/blueprint/files/1911_s.jpg" alt="CM" style="float:right;"＞＜img src="http://www.pwblog.com/user/blueprint/files/1911_s.jpg" alt="CM"＞
＜/p＞
style="float:right;"をこの場合、
右に寄せたい内容のタグにつけるだけでいい、
後に続く内容が左にくる
style="float:left;"左に寄せたい時はこれ
後に続く内容が右にくる
style="float:none;"これがノーマル状態
文字でも同じことができる
こんな感じだ
Posted by blueprint 21:56:54
お勧めの助っ人サイト
2006-04-20
ＣＳＳファイルやＨＴＭＬファイルの参考になるサイトを見つけた
本なんか買わんでいいやん
プロには不要だろうが素人にはうれしいサイトだ
HTMLクイックリファレンス
サイトのメニューは以下の通り
★HTMLタグリファレンス(ABC順)
★HTMLタグリファレンス(目的別)
★スタイルシートリファレンス(ABC順)
★スタイルシートリファレンス(目的別)
★WEBカラーリファレンス
★特殊文字リファレンス
★優良デザインサイト
★WEB画像について
★フリーイラスト素材
★WEBの現場から
★パンダで覚えるインターネット用語
★JavaScriptリファレンス（制作中）
カラーリファレンスは最高！！
今まで見た中で一番綺麗にまとめてある。
また、サイトを製作・運営・管理する上でとても参考になる記事がある
私のような素人には★WEBの現場からがとても参考になる
本なんか買わんでいいやん
プロには不要だろうが素人にはうれしいサイトだ
HTMLクイックリファレンス
サイトのメニューは以下の通り
★HTMLタグリファレンス(ABC順)
★HTMLタグリファレンス(目的別)
★スタイルシートリファレンス(ABC順)
★スタイルシートリファレンス(目的別)
★WEBカラーリファレンス
★特殊文字リファレンス
★優良デザインサイト
★WEB画像について
★フリーイラスト素材
★WEBの現場から
★パンダで覚えるインターネット用語
★JavaScriptリファレンス（制作中）
カラーリファレンスは最高！！
今まで見た中で一番綺麗にまとめてある。
また、サイトを製作・運営・管理する上でとても参考になる記事がある
私のような素人には★WEBの現場からがとても参考になる
Posted by blueprint 23:49:51
サイド表示
2006-04-20
ＣＳＳファイルを触ってます
サイド表示関係のＣＳＳ
サイド表示の一番奥（まぁ台紙）の幅と色
#pwside {
width: 25%;
background-color: #FFFFFF;
}
左サイド表示の幅設定と周り込み設定
#pwsideleft {
width: 25%;
float: left;
}
右サイド表示の幅設定と周り込み設定
#pwsideright {
width: 25%;
float: right;
奥から２番目サイド表示（ウィンド）の枠設定と色
.pwsidewindow {
margin-bottom: 10px;
border: 1px solid #00759B;
padding: 1px;
background-color: #000000;
サイド表示のタイトルの台紙と枠設定
.pwsidehead {
padding: 5px;
background-color: #C1FFFB;
border: 1px solid #00759B;
margin-bottom: 1px;
サイド表示タイトル文字の設定
.pwsidetitle {
font-size: 10pt;
font-weight: bold;
color: #00759B;
サイド表示の一番上、本文の台紙の色と枠
.pwsidebody {
padding: 5px;
background-color: #FFFFFF;
border: 1px solid #00759B;
background-color:設定を削除すると透明化する
float:を使うと画像と記事などのコンテンツを
平行に配置できる。
サイド表示関係のＣＳＳ
サイド表示の一番奥（まぁ台紙）の幅と色
#pwside {
width: 25%;
background-color: #FFFFFF;
}
左サイド表示の幅設定と周り込み設定
#pwsideleft {
width: 25%;
float: left;
}
右サイド表示の幅設定と周り込み設定
#pwsideright {
width: 25%;
float: right;
奥から２番目サイド表示（ウィンド）の枠設定と色
.pwsidewindow {
margin-bottom: 10px;
border: 1px solid #00759B;
padding: 1px;
background-color: #000000;
サイド表示のタイトルの台紙と枠設定
.pwsidehead {
padding: 5px;
background-color: #C1FFFB;
border: 1px solid #00759B;
margin-bottom: 1px;
サイド表示タイトル文字の設定
.pwsidetitle {
font-size: 10pt;
font-weight: bold;
color: #00759B;
サイド表示の一番上、本文の台紙の色と枠
.pwsidebody {
padding: 5px;
background-color: #FFFFFF;
border: 1px solid #00759B;
background-color:設定を削除すると透明化する
float:を使うと画像と記事などのコンテンツを
平行に配置できる。
Posted by blueprint 23:30:02
素人です
2006-04-13
ブログのデザイン変更をしたくて（再び）
昔々、必要に迫られたのと記録を兼ねて作成したマニュアルを見直していますが、
素人が作っただけに？？？？だらけです
ここはメニューの？マークをクリックすると基本的な操作ヘルプが開くから楽です
これが当たり前か
ブログのデザインは前のＢＭでも少しいじった経験のおかげで
ポータルサイトにあるPwBlogデザイン方法 の内容が少しですが理解できるようになりました
基本システムが同じだから理解できる部分が多いですが・・・・しかし
判りにくい
ＣＳＳファイルを触っただけでは基本レイアウトは変わらないのね
レイアウト変更を伴う改造したかったらhtmlファイルも触らないといけない！？
そこで変数が出て来るのか
う・・・う〜ん
取り敢えずしばらくはhtmlタグとＣＳＳファイル程度で抑えよう
素人には・・・・だよね
昔々、必要に迫られたのと記録を兼ねて作成したマニュアルを見直していますが、
素人が作っただけに？？？？だらけです
ここはメニューの？マークをクリックすると基本的な操作ヘルプが開くから楽です
これが当たり前か
ブログのデザインは前のＢＭでも少しいじった経験のおかげで
ポータルサイトにあるPwBlogデザイン方法 の内容が少しですが理解できるようになりました
基本システムが同じだから理解できる部分が多いですが・・・・しかし
判りにくい
ＣＳＳファイルを触っただけでは基本レイアウトは変わらないのね
レイアウト変更を伴う改造したかったらhtmlファイルも触らないといけない！？
そこで変数が出て来るのか
う・・・う〜ん
取り敢えずしばらくはhtmlタグとＣＳＳファイル程度で抑えよう
素人には・・・・だよね
Posted by blueprint 11:39:22
背景設定
2006-04-13
記事の背景、一番手前(壁紙）の変更はpwblogbody
使いたい画像はファイルアップロードで保存してＵＲＬを記録
背景画（壁紙）は自動で結合表示するので画像サイズは
１００×１００程度で充分。
但し、連続して結合表示されるので継ぎ目が気にならない図形を選択
ＣＳＳファイルの修正箇所は
.pwblog {
margin: 0 10px;
（ココに入れると手前から２番目の背景が変わる）
}
.pwblogbody {
background-color: #FFFFFF;
margin-left: 10px;
margin-bottom: 5px;
background:url('http://www.pwblog.com/user/blueprint/files/4167.jpg');
}
のように
background:url('http://blog.zmapple.com/user/******/*****/image/4167.jpg');
ＵＲＬとタグを貼り付けるとブログ記事に背景画(壁紙）が貼れる
その他は再録を参照
記事の背景、一番奥(壁紙）の変更はbody
使用しているブログのデザインによってbodyとpwblogbodyの間に
container←→pwmain←→pwsbpgmain
等の階層構造がある。ＩＮＤＸと単体の記事表示の場合も違うから注意
コメント記入画面を開いて確認作業必要
commentmain等もある。
サイド表示についてもpwsidebody等の階層構造あり
使いたい画像はファイルアップロードで保存してＵＲＬを記録
背景画（壁紙）は自動で結合表示するので画像サイズは
１００×１００程度で充分。
但し、連続して結合表示されるので継ぎ目が気にならない図形を選択
ＣＳＳファイルの修正箇所は
.pwblog {
margin: 0 10px;
（ココに入れると手前から２番目の背景が変わる）
}
.pwblogbody {
background-color: #FFFFFF;
margin-left: 10px;
margin-bottom: 5px;
background:url('http://www.pwblog.com/user/blueprint/files/4167.jpg');
}
のように
background:url('http://blog.zmapple.com/user/******/*****/image/4167.jpg');
ＵＲＬとタグを貼り付けるとブログ記事に背景画(壁紙）が貼れる
その他は再録を参照
記事の背景、一番奥(壁紙）の変更はbody
使用しているブログのデザインによってbodyとpwblogbodyの間に
container←→pwmain←→pwsbpgmain
等の階層構造がある。ＩＮＤＸと単体の記事表示の場合も違うから注意
コメント記入画面を開いて確認作業必要
commentmain等もある。
サイド表示についてもpwsidebody等の階層構造あり
Posted by blueprint 11:02:42
ヘッダーの壁紙編集
2006-04-13
使いたい背景画像をファイルアップロードでサーバーに保存して
ＵＲＬを控えるところまでは画像ＵＰ方法と同じ
1024×200または800×200がヘッダー画像のデフォルトサイズ
使用しているデザインで画像サイズが違うから注意のこと
ＣＳＳでいじるのは#pwheaderのbackgroud:urlのカッコ内で
ここに保存済みの画像のＵＲＬを入れる
#pwheader {
clear: both;
background-color: #999999;
margin: 0px;
padding: 0px;
background:url('http://www.pwblog・・・・/files/1534.jpg') no-repeat scroll 50% 0;
height:200px;
}
これで、ヘッダーに任意の画をのせることが可能。
画を載せずに色のみ変更する場合は
background-color:#******；を使用する
background-color: ##262b3c;
何も指定しないと透明化する
赤色の数字がカラーコード
FFFFFF
↓
00FFFF←→FF00FF←→FFFF00
88FFFF←→FF88FF←→FFFF88
FF0000←→00FF00←→0000FF
880000←→008800←→000088
↑
000000
それとグラディエーションを設定する時は
FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#FFFFFF, endColorstr=#0033CC, gradienttype=1)
を入れる。startとendで色を指定する。
最後のタグの数字で横変化と縦変化を変更できる
gradienttype=<b>1が横変化
gradienttype=<b>0が縦変化
ＵＲＬを控えるところまでは画像ＵＰ方法と同じ
1024×200または800×200がヘッダー画像のデフォルトサイズ
使用しているデザインで画像サイズが違うから注意のこと
ＣＳＳでいじるのは#pwheaderのbackgroud:urlのカッコ内で
ここに保存済みの画像のＵＲＬを入れる
#pwheader {
clear: both;
background-color: #999999;
margin: 0px;
padding: 0px;
background:url('http://www.pwblog・・・・/files/1534.jpg') no-repeat scroll 50% 0;
height:200px;
}
これで、ヘッダーに任意の画をのせることが可能。
画を載せずに色のみ変更する場合は
background-color:#******；を使用する
background-color: ##262b3c;
何も指定しないと透明化する
赤色の数字がカラーコード
FFFFFF
↓
00FFFF←→FF00FF←→FFFF00
88FFFF←→FF88FF←→FFFF88
FF0000←→00FF00←→0000FF
880000←→008800←→000088
↑
000000
それとグラディエーションを設定する時は
FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#FFFFFF, endColorstr=#0033CC, gradienttype=1)
を入れる。startとendで色を指定する。
最後のタグの数字で横変化と縦変化を変更できる
gradienttype=<b>1が横変化
gradienttype=<b>0が縦変化
Posted by blueprint 09:49:37
画像（複数）のＵＰ方法３
2006-04-12
文字や画像の回り込みの解除もちょっとややこしい
画があってalign="left"で左に寄せているので
文字は画の右に回り込んでしまう
複数の画像を並べた時にジグザクに並んでしまう状態も解除できる
↓
↓
↓
こんな感じでスーペースを入れて画の横から文字をずらすのが
手取り早いが、ちょっと格好つけたいときに使う
（自己満足の世界へようこそ！）
＜br clear="left"＞(実際は＜＞は半角で入力）
を貼り付けた画像用のタグの最後につける
＜img src="http://www.pwblog.com/user/blueprint/files/1534_s.jpg" alt="CM" align="left"＞＜br clear="left"＞
こんな感じ。そのとき、left位置属性は合わせる。面倒臭かったから
＜br clear="all"＞でもいい
＜p style="clear:left;"＞
（回り込みを解除したいコンテンツを入れる）
＜/p＞
この方法でもいける
ちゃんと文字が画の横から下に移動する
画も被らずに縦にならんでくれる
注：以前はｂｒを使用して自動改行にチェックを入れておくと＜br＞が
自動的に付加されて（編集かけた回数だけ重ねて）修正が必要だった
ソフトを修正したのかなぁ
次は画像に対するリンクの枠消しと枠の修飾かなぁ。画像に隣接する文字の位置の調整方法もあげて、忘れても困らんようにしとこ。
この辺のタグはＣＳＳファイルでも良く使うんだよね。
画があってalign="left"で左に寄せているので
文字は画の右に回り込んでしまう
複数の画像を並べた時にジグザクに並んでしまう状態も解除できる
↓
↓
↓
こんな感じでスーペースを入れて画の横から文字をずらすのが
手取り早いが、ちょっと格好つけたいときに使う
（自己満足の世界へようこそ！）
＜br clear="left"＞(実際は＜＞は半角で入力）
を貼り付けた画像用のタグの最後につける
＜img src="http://www.pwblog.com/user/blueprint/files/1534_s.jpg" alt="CM" align="left"＞＜br clear="left"＞
こんな感じ。そのとき、left位置属性は合わせる。面倒臭かったから
＜br clear="all"＞でもいい
＜p style="clear:left;"＞
（回り込みを解除したいコンテンツを入れる）
＜/p＞
この方法でもいける
ちゃんと文字が画の横から下に移動する
画も被らずに縦にならんでくれる
注：以前はｂｒを使用して自動改行にチェックを入れておくと＜br＞が
自動的に付加されて（編集かけた回数だけ重ねて）修正が必要だった
ソフトを修正したのかなぁ
次は画像に対するリンクの枠消しと枠の修飾かなぁ。画像に隣接する文字の位置の調整方法もあげて、忘れても困らんようにしとこ。
この辺のタグはＣＳＳファイルでも良く使うんだよね。
Posted by blueprint 14:53:34
画像（複数）のＵＰ方法２
2006-04-12
さてと、タグの貼り方を書いておかないと
表示したい画像のURLが解れば後は貼り付けるだけなんだけど
＜img src="http://www.pwblog・・・・/files/1534.jpg" alt="Blueprit" width="80" height="23"＞
(実際は＜＞は半角で入力）
と記入すると
と表示されます。画が大きいと記事が回り込む
ブログの記事の中で画の表示位置を調整するには
左に寄せたい時は align="left"
記事の途中にしたい時は align="all"
右に寄せたい時は align="right"
＜img src="http://www.・・・・width="80" height="23" align="all＞
と記入します。どうでしょうか？
表示できる画像のサイズは使用しているデザインに影響される。
片側プラグインでＷidthは３６０（ヘッダーは８００あるけど）ぐらいまでかなぁ
Ｈeightは試しいないが、blogbodyのサイズに影響するので１６０×１６０以内
で止めといた方が記事の表示速度は速い
記事作成メニューの画像ＵＰと同様に別ウィンドで画像を大きく表示にしたい場合は
記事本文に貼り付ける画のＵＲＬに＿Ｓを添付してプレビュー表示にしておいて
1534 s.jpgの Ｓです。 はアンダーバーね
その表示タグに
ボタンを使って画像のＵＲＬのリンクを貼り付ける
こんな感じになる
＜a href="http://www.pwblog・・・・/files/1534.jpg" target="_blank"＞＜img src="http://www.pwblog・・・/files/1534_s.jpg" alt="CM" align="left"＞＜/a＞
赤色の部分がリンクボタンで自動作成される部分
リンク対象は文字でもＯＫ
表示したい画像のURLが解れば後は貼り付けるだけなんだけど
＜img src="http://www.pwblog・・・・/files/1534.jpg" alt="Blueprit" width="80" height="23"＞
(実際は＜＞は半角で入力）
と記入すると
と表示されます。画が大きいと記事が回り込む
ブログの記事の中で画の表示位置を調整するには
左に寄せたい時は align="left"
記事の途中にしたい時は align="all"
右に寄せたい時は align="right"
＜img src="http://www.・・・・width="80" height="23" align="all＞
と記入します。
どうでしょうか？表示できる画像のサイズは使用しているデザインに影響される。
片側プラグインでＷidthは３６０（ヘッダーは８００あるけど）ぐらいまでかなぁ
Ｈeightは試しいないが、blogbodyのサイズに影響するので１６０×１６０以内
で止めといた方が記事の表示速度は速い
記事作成メニューの画像ＵＰと同様に別ウィンドで画像を大きく表示にしたい場合は
記事本文に貼り付ける画のＵＲＬに＿Ｓを添付してプレビュー表示にしておいて
1534 s.jpgの Ｓです。 はアンダーバーね
その表示タグに
ボタンを使って画像のＵＲＬのリンクを貼り付けるこんな感じになる
＜a href="http://www.pwblog・・・・/files/1534.jpg" target="_blank"＞＜img src="http://www.pwblog・・・/files/1534_s.jpg" alt="CM" align="left"＞＜/a＞
赤色の部分がリンクボタンで自動作成される部分
リンク対象は文字でもＯＫ
Posted by blueprint 14:20:12
画像（複数）のＵＰ方法1
2006-04-12
複数の画像をひとつの記事にＵＰする方法。
但し、手間がかかる方法だ。
まず、画像をファイルアップロードメニューでサーバーに転送。
これは、ＢＭより楽だ。
転送後に表示されるファイル一覧のプレビュー画像を右クリック
表示されたメニューの一番下にあるプロパティをクリックする
サンプル画像が出ないファイルはタイトルをクリックする
このＵＲＬをコピー＆ペーストでメモ帳にでも貼り付けて置く
後はimgタグと上のコマンド欄にある、リンクボタンを使って
記事の中の画像を出したいところに貼り付けるんだけど
そのままのファイル名だとスモールサイズプレビューの画になるから
ｈttp://www.pwblog.・・・・・・/files/****_s.jpgの
リンク先のファイル名から _s を抜く
つづく
追記：貼り付ける画が小さすぎると、プレビューで拡大されることがある
但し、手間がかかる方法だ。
まず、画像をファイルアップロードメニューでサーバーに転送。
これは、ＢＭより楽だ。
転送後に表示されるファイル一覧のプレビュー画像を右クリック
表示されたメニューの一番下にあるプロパティをクリックする
サンプル画像が出ないファイルはタイトルをクリックする
このＵＲＬをコピー＆ペーストでメモ帳にでも貼り付けて置く
後はimgタグと上のコマンド欄にある、リンクボタンを使って
記事の中の画像を出したいところに貼り付けるんだけど
そのままのファイル名だと
ｈttp://www.pwblog.・・・・・・/files/****_s.jpgの
リンク先のファイル名から _s を抜く
つづく
追記：貼り付ける画が小さすぎると、プレビューで拡大されることがある
Posted by blueprint 09:51:20
文字サイズ変更
2006-04-12
文字サイズ変更方法をもうひとつ見つけました
＜span STYLE="font-family:Arial Black; font-size:15pt;
color:#FFFF00; background:#A0D0FF"＞文字入れＡＢＣ＜/span＞
これを使うと
文字入れＡＢＣ
こうなります。
font-family:Arial Black;
の朱色の部分を変えることでHTMLならフォントが変わる
はずだけど・・・う〜ん、微妙。変わってないや
文字入れＡＢＣ
font-size:15pt;
の青色の部分を変えることで文字サイズが変わる
ｐｔは単位（ポイント）、ｐｘや％も使える。
１５→２０にすると
文字入れＡＢＣ
こうなります。
color:#FFFF00;
の朱色の部分を変えることで文字の色が変わる
#FFFF00→#FF00FFにすると
文字入れＡＢＣ
こうなります。
background:#A0D0FF
の青色の部分を変えることで台紙の色が変わります。
#A0D0FF→#FF00FFにすると
文字入れＡＢＣ
こうなります。
不要な修飾はタグ抜いて使用します。
＜span STYLE="font-family:Arial Black; font-size:15pt;
color:#FFFF00; background:#A0D0FF"＞文字入れＡＢＣ＜/span＞
これを使うと
文字入れＡＢＣ
こうなります。
font-family:Arial Black;
の朱色の部分を変えることでHTMLならフォントが変わる
はずだけど・・・う〜ん、微妙。変わってないや
文字入れＡＢＣ
font-size:15pt;
の青色の部分を変えることで文字サイズが変わる
ｐｔは単位（ポイント）、ｐｘや％も使える。
１５→２０にすると
文字入れＡＢＣ
こうなります。
color:#FFFF00;
の朱色の部分を変えることで文字の色が変わる
#FFFF00→#FF00FFにすると
文字入れＡＢＣ
こうなります。
background:#A0D0FF
の青色の部分を変えることで台紙の色が変わります。
#A0D0FF→#FF00FFにすると
文字入れＡＢＣ
こうなります。
不要な修飾はタグ抜いて使用します。
Posted by blueprint 09:03:13
| 2006年 04月 |
