続＆改＆真・[[attached()]]＆[[img（）]]で飾ってみる＿レイアウト例その2

前回記事は記事の４辺を囲む枠用の画像を上辺から配置するレイアウトでしたが、今回は左右の画像から配置するタイプです

このレイアウトは記事の属性によって向き不向きがあります

[[attached()]]で画像を配置した記事を転載してくると画像は総て上にまとめて表示され、その下に画像が抜けた文章が続きます。なので転載可の記事にこのレイアウトはおすすめ出来ません
尚、IE系ブラウザで文字のサイズを【中】にした状態でレイアウトしている為、ブラウザの文字サイズがそれ以上の場合は表示が崩れてしまいます。予めご了承下さい

枠用の画像を左右から配置するレイアウト例

　ようこそ！ここは◆◆で△△な管理人○○の★★なブログです
　書庫説明
　　書庫名(リンク)　　書庫名(リンク)　　書庫名(リンク)
　限定書庫
　　書庫名(リンク)　　書庫名(リンク)
　初めてお越しの方
　　こちらをご覧下さい(リンク)
　その他
　　足跡はこちらへどうぞ(リンク)
　　質問などはこちらへどうぞ(リンク)
　　おすすめやLink集など(リンク)　予備アイコン：　　
Y!BlogsTOPY!Blogsヘルプ知恵袋Y!ブログ
配置の指定は出来ませんが枠内に収まるサイズであれば[[item()]]も普通に使用できます(スペースの都合上表示例なし)

↑のwiki↓

[[attached(１,left)]][[attached(２,right)]]
[[attached(３)]][[attached(４)]]
[[attached(５)]]
[[attached(６)]]　ようこそ！ここは◆◆で△△な管理人○○の★★なブログです
[[attached(６)]]　書庫説明
　[[attached(７)]]　書庫名(リンク)　[[attached(７)]]　書庫名(リンク)　[[attached(７)]]　書庫名(リンク)
[[attached(６)]]　限定書庫
　[[attached(８)]]　書庫名(リンク)　[[attached(８)]]　書庫名(リンク)
[[attached(６)]]　初めてお越しの方
　[[attached(９)]]　こちらをご覧下さい(リンク)
[[attached(６)]]　その他
　[[attached(１０)]]　足跡はこちらへどうぞ(リンク)
　[[attached(１１)]]　質問などはこちらへどうぞ(リンク)
　[[attached(１２)]]　おすすめやLink集など(リンク)　予備アイコン：[[attached(１３)]]　[[attached(１４)]]　
[[attached(１５)]][url リンク名][[attached(１５)]][url リンク名][[attached(１５)]][url リンク名]
配置の指定は出来ませんが枠内に収まるサイズであれば[[item()]]も普通に使用できます(スペースの都合上表示例なし)
[[attached(１６)]][[attached(１７)]]

↑はちょっとクドい気もしますので…


　ようこそ！ここは◆◆で△△な管理人○○の★★なブログです
　書庫説明
　　書庫名(リンク)　　書庫名(リンク)　　書庫名(リンク)
　限定書庫
　　書庫名(リンク)　　書庫名(リンク)
　その他
　　初めてお越しの方はこちらをご覧下さい(リンク)
　　足跡はこちらへどうぞ(リンク)
　　質問などはこちらへどうぞ(リンク)
　　おすすめやLink集など(リンク)　予備アイコン：　　
Y!BlogsTOPY!Blogsヘルプ知恵袋Y!ブログ

↑のwiki↓

[[attached(１,left)]][[attached(２,right)]]
[[attached(３)]]
[[attached(４)]]　ようこそ！ここは◆◆で△△な管理人○○の★★なブログです
[[attached(４)]]　書庫説明
　[[attached(５)]]　書庫名(リンク)　[[attached(５)]]　書庫名(リンク)　[[attached(５)]]　書庫名(リンク)
[[attached(４)]]　限定書庫
　[[attached(６)]]　書庫名(リンク)　[[attached(６)]]　書庫名(リンク)
[[attached(４)]]　その他
　[[attached(７)]]　初めてお越しの方はこちらをご覧下さい(リンク)
　[[attached(８)]]　足跡はこちらへどうぞ(リンク)
　[[attached(９)]]　質問などはこちらへどうぞ(リンク)
　[[attached(１０)]]　おすすめやLink集など(リンク)　予備アイコン：[[attached(１１)]]　[[attached(１２)]]　
[[attached(１３)]][url リンク名][[attached(１３)]][url リンク名][[attached(１３)]][url リンク名]
[[attached(１４)]][[attached(１５)]]

この記事で使用している画像はアイコンも含めまるごとお使い戴けます。背景色を選ばないように背景と透過させてありますが白系背景よりは黒系背景向きです。お手数ですが一旦自PCに保存してお使い下さい
お持ち帰りの報告などは例の如く一切必要ありません。表示の確認がてらお使いただければ幸いです
この枠は配置のテストも兼ねている為【左右各1枚】【上下各2枚】の合計6枚の画像で構成されています

左右の追加用画像
左用　　右用

レイアウト例で使用している左右用の画像は意図的に画像上部に空白部分を入れて作成しています。レイアウトで使用している画像で長さが足りない場合はこちらを追加して下さい。出来れば画像を繰り返さなくて済むように画像のサイズを合わせたものを用意する方が無難ですがそうもいかないケースもあるので、左右の画像を追加して続けて文章を書く為のwikiは前回記事や前々回の記事に載せています

記事で使用している画像はどんな色の背景でもそのまま使えるように総て透過PNGにしています。保存の際に拡張子が『.txt』になる場合は『.png』に変更して下さい
雰囲気に合いそうなフォントを配布物に使っていいかなど色々確認が出来ていないので、上のものはフォントを使用していませんがそれではあんまりなので

フォントを使ったこちらをご使用戴ければ^^;もう少しラフな方が雰囲気的にあってるとは思うのですが…
配布物については、Adobeの付属フォントの場合ビットマップ形式の静止画でフォントを変形させていなければ大丈夫だそうです。他のメーカーのケースも色々掲載されています。以前にちらりと見かけてブックマークしたつもりでしたが今回探し当てるのに全くヒットしないキーワードを入れてばかりだったのか、結構時間が掛かってしまいました orz
(後でもう一度検索に掛けてみると、お気に入りに入れているブログ様でこのページがリンクされている事実が判明しました。流石だ)

【word-spacing】の力技で改行や、スペースの多用で空白行を作ったような調整をしなければどのブラウザでも著しい表示崩れは起こらないし、所謂『背景wiki』を使用するのも(自分が使う/使わないは別として)表現のひとつとしてありだと思いますし、ウチはウチで非推奨の【border】を月ごとに色を変えて記事に部分的に使っています。ところが最初の [[attached()]]＆[[img（）]] 関連の記事を書いたのと前後して【Yahoo!ブログからのお知らせ】でWikiの使用についての記事が掲載されました

サポート外のwikiはなるべくというか使わないで欲しいとの事ですが、ことY!ブログで非推奨なwikiで記事内を装飾する傾向があるのは、他のレンタルブログに比べ自由度が低いからだったり…(逆に個人的にイイなと感じる点もあったり)
だからこそ印象的な写真やイラスト、フレーズがそこにひとつあるだけで『おおぅ』と目を惹かれてしまったりするのですが…