2016年12月15日 - ふろんてぃあ日記
カレンダー
11 | 2016/12 | 01
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
シクレツイート
ギルド優先依頼
天廊武器シミュレータ
ブログランキング
モンスターハンターフロンティア・攻略ブログ
公式バナー
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

どうもこんにちは、KIAです。
最近、更新どころかINすら中々出来ない状況。

歌なし迎撃戦はつらいです(´・ω・`)

さて、そんなことより本日の本題は優先依頼のやつ修正の報告です。

えっと、トマトさんのブログで使っていただいていたのですが、右側が見切れている状況だったので
なんとか環境によって自動で縮小されるように頑張ってみました。

本体の大きさである220px以下のところに放り込むと自動で縮小されるようになってるはず。


<div id="yusen_box"style="overflow:hidden; margin-left:-3px;">
<iframe id="yusen_frame" src="http://blog-imgs-91-origin.fc2.com/k/i/a/kiamunnu/yusen_rotation.html" style="height:400px; width:220px; transform-origin:0 0; " frameborder="0"></iframe>
</div>

<script type="text/javascript" src="http://blog-imgs-91-origin.fc2.com/k/i/a/kiamunnu/yusen_rotation.js"></script>



親要素の横幅に合わせて横幅が変わるのではなく全体的にまるっと縮小されるので、横幅があまりにも狭すぎると文字がちっちゃくなってみえなくなる恐れが・・・。

まあ、そこまで極端に小さなサイドカラムは使いづらそうなので、大丈夫だとは思いますが。

あと220より大きい場合ですが、今回は何も考えておりません。
合わせて拡大するのも簡単にできそうだったんですが、縦横比を変えられない以上縦長になりすぎるかなと思ったので。

広い場合やその他ズレが生じたときの位置調整は
一番上の行の下記の色付き部分の数字をいじってもらえれば出来ます。

<div id="yusen_box"style="overflow:hidden; margin-left:-3px;">

左からの-の距離ということで(厳密行ったら多分違うけど)、-以下の数値が大きい程左にずれていきます。
上記の-3の場合だとデフォルトの位置より3px左にずらしてるということですね。

上下はずれない気がしてるんですがだと思いますが、動かす場合は先程いじった部分の右にmargin-top:を追加して、数値を入れていただければと。
この場合も-以下の数値が大きいほど上に移動し、正の値を入れると下に移動します。


以上改良報告でした。
使ってる方でレイアウト崩れてる方は、新しい方を試していただけたらうれしいです。

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。