おぼえがき

画像（複数）のＵＰ方法４

こんな感じで画像を並べる方法は以下の通り＜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;"これがノーマル状態

文字でも同じことができるこんな感じだ

お勧めの助っ人サイト

ＣＳＳファイルやＨＴＭＬファイルの参考になるサイトを見つけた本なんか買わんでいいやんプロには不要だろうが素人にはうれしいサイトだ HTMLクイックリファレンスサイトのメニューは以下の通り ★HTMLタグリファレンス(ABC順) ★HTMLタグリファレンス(目的別) ★スタイルシートリファレンス(ABC順) ★スタイルシートリファレンス(目的別) ★WEBカラーリファレンス ★特殊文字リファレンス ★優良デザインサイト ★WEB画像について ★フリーイラスト素材 ★WEBの現場から ★パンダで覚えるインターネット用語 ★JavaScriptリファレンス（制作中）カラーリファレンスは最高！！今まで見た中で一番綺麗にまとめてある。また、サイトを製作・運営・管理する上でとても参考になる記事がある私のような素人には★WEBの現場からがとても参考になる

サイド表示

ＣＳＳファイルを触ってますサイド表示関係のＣＳＳサイド表示の一番奥（まぁ台紙）の幅と色 #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:を使うと画像と記事などのコンテンツを平行に配置できる。

素人です

ブログのデザイン変更をしたくて（再び）昔々、必要に迫られたのと記録を兼ねて作成したマニュアルを見直していますが、素人が作っただけに？？？？だらけですここはメニューの？マークをクリックすると基本的な操作ヘルプが開くから楽です これが当たり前か ブログのデザインは前のＢＭでも少しいじった経験のおかげでポータルサイトにあるPwBlogデザイン方法の内容が少しですが理解できるようになりました基本システムが同じだから理解できる部分が多いですが・・・・しかし判りにくいＣＳＳファイルを触っただけでは基本レイアウトは変わらないのねレイアウト変更を伴う改造したかったらhtmlファイルも触らないといけない！？そこで変数が出て来るのかう・・・う〜ん取り敢えずしばらくはhtmlタグとＣＳＳファイル程度で抑えよう素人には・・・・だよね

背景設定

記事の背景、一番手前(壁紙）の変更は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等の階層構造あり再録 画を載せずに色のみ変更する場合は 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=1が横変化 gradienttype=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=1が横変化 gradienttype=0が縦変化ＣＳＳファイル内のbodyに同様の細工すればＩＮＤＸの表示を変更できる。単体の記事変更は Pwblogbodyをいじる

画像（複数）のＵＰ方法３
文字や画像の回り込みの解除もちょっとややこしい画があって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＞が　　自動的に付加されて（編集かけた回数だけ重ねて）修正が必要だった　　ソフトを修正したのかなぁ次は画像に対するリンクの枠消しと枠の修飾かなぁ。画像に隣接する文字の位置の調整方法もあげて、忘れても困らんようにしとこ。この辺のタグはＣＳＳファイルでも良く使うんだよね。

画像（複数）のＵＰ方法２
さてと、タグの貼り方を書いておかないと表示したい画像の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＞赤色の部分がリンクボタンで自動作成される部分リンク対象は文字でもＯＫ

画像（複数）のＵＰ方法1
複数の画像をひとつの記事にＵＰする方法。但し、手間がかかる方法だ。まず、画像をファイルアップロードメニューでサーバーに転送。これは、ＢＭより楽だ。転送後に表示されるファイル一覧のプレビュー画像を右クリック表示されたメニューの一番下にあるプロパティをクリックするサンプル画像が出ないファイルはタイトルをクリックするこのＵＲＬをコピー＆ペーストでメモ帳にでも貼り付けて置く後はimgタグと上のコマンド欄にある、リンクボタンを使って記事の中の画像を出したいところに貼り付けるんだけどそのままのファイル名だと~~スモールサイズ~~プレビューの画になるからｈttp://www.pwblog.・・・・・・/files/****_s.jpgのリンク先のファイル名から　_s　を抜くつづく追記：貼り付ける画が小さすぎると、プレビューで拡大されることがある

文字サイズ変更
文字サイズ変更方法をもうひとつ見つけました＜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にすると文字入れＡＢＣこうなります。不要な修飾はタグ抜いて使用します。カラーコードは投稿メニューのフォントの色修飾コマンドで見るのが一番早い一応参考までに黒：#000000　　白：#FFFFFF　　灰色：#808080 赤：#FF0000　　青：#0000FF　　黄緑：#00FF00 緑：#008000　　紫：#800080　　水色：#00FFFF ウェブでカラーコードを検索すると沢山でてきます。