みどり同盟ブログはHabboホテル内で結成されたみどり同盟の公式サイトです。

↓みどり同盟ブログ内サーチ↓

みどり同盟ブログ内サーチ

↑みどり同盟ブログ内サーチ↑

↓リストメニュー↓

最新記事50件
 
最新コメント50件
 
過去の記事

↑リストメニュー↑

 

↓記事グループ説明↓

過去の記事

過去の記事リストからの場合は、同じ年・月に投稿された記事を一覧表示しています。

また、カレンダーからの場合は投稿日が同じ記事を、みどり同盟ブログ内サーチを利用した場合は検索語句が含まれる記事をすべて表示しています。

 

↑記事グループ説明↑

前のページ 2/2  :  ↓10件ずつ表示されているページを切り替えることができます↓
 

↓記事↓

2004/07/20 (火)
ミニ画像拡大機能
by PONJAN
編集アドバイス(メニュー)に戻る ≫

 


みどり同盟ブログに横幅が400ピクセル以上のサイズの画像を貼りつけると全体の表示(他の人の記事も!)が崩れることがあります。
そこで、小さめの画像を表示しておき、クリックすることで大きい画像を別ウィンドウで表示するといった方法で、横幅が400ピクセル以上の画像を扱うことが可能となります。

 


画像を投稿するときに「ミニ画像も作る」と書かれている部分のチェックボックスをチェックして投稿すると、投稿した画像とは別に、同じものを、横幅を120ピクセルにして同じ縮尺率で縦幅も縮小してくれたミニ画像を自動的に作って投稿してくれます。
画像の名前にも自動的に“(ミニ画像)”を追加してくれます。
例:
“簡単な説明”を「ぽんじゃまか」にして、「ミニ画像も作る」のチェックボックスをチェックして投稿。
  ↓
「新しい記事の投稿」や「記事編集」の「↓画像を選択してください」には“ぽんじゃまか”と“ぽんじゃまか(ミニ画像)”の2つの画像が追加されている。
  ↓
画像リストではミニ画像は表示されないが、ミニ画像も自動作成した画像には「簡単なの説明」の右に“[ミニ画像あり]”←こんな表示がある。

 


ミニ画像拡大機能

 


ミニ画像を記事に挿入すると、なにやら長ったらしいタグが自動で記事に埋め込まれる。
  ↓
ミニ画像が挿入された記事では、ミニ画像をクリックすると、元のサイズの画像が、画像ちょうどの大きさの別窓で開く。
開いた画像をクリックすると別窓が閉じる。

 


実際に使ってみた例:
自転車留め
同じ大きさの画像をミニ画像にして並べた場合、別窓が開いたまま次のミニ画像をクリックするとさっきの窓が新しい画像に切り替わってしまいます。
そんなときはたとえ1ピクセルでもいいので大きさを変えた元画像を投稿しておいてください。
そうすると別窓が次々と開きますので、閲覧者が別窓をずらすことによりまるでポラロイド写真を並べたように全部の画像(別窓)を同時に見てもらうことができます。
つまり、画像が切り替わるか、別窓をもう一個開くかは画像の大きさで判断させています。
より詳しくは、縦+横で計算していますので、横を1ピクセル縮めて縦を1ピクセル増やすと±ゼロなのでダメです
微妙に大きさを変える場合は縦か横どちらか一方だけ変えるのが良さそうです。
 
 
 
 

↑記事↑

 

↓記事↓

2004/07/20 (火)
画像表示位置の指定
編集アドバイス(メニュー)に戻る ≫

 


画像の表示位置の指定にはいくつかの方法がありますが、ここでカンタンな方法を紹介します。

 


■画像を左右に表示する(文章の回りこみ)

 


画像を挿入したときのタグ
例:
<img src="/img3/painttools.gif" width="84" height="49" alt="paint_tools" class="pict" />

この最後の部分の class="〜" を hidari や migi に変更します。
class="hidari" 画像が左に寄ります。
class="migi" 画像が右に寄ります。

 


paint_tools<img src="/?image=502" width="84" height="49" alt="paint_tools" class="hidari" />
普通に画像を挿入しただけでも、画像は左に寄りますが、こうやって指定すると、このように文字が右側に回りこみます。

paint_tools
<img src="/?image=502" width="84" height="49" alt="paint_tools" class="migi" />
今度は画像右寄せで文字を左に回りこみ。

■画像を記事の真ん中に表示する

 


画像タグ全体を <div class="center">〜</div> で囲んでしまいます。
paint_tools
<div class="center"><img src="/img3/painttools.gif" width="84" height="49" alt="paint_tools" class="pict" /></div>

■画像の枠線を消す
上の2つの例を見てお気付きかも知れませんが、class="pict" を削除すると枠線が消えます。
paint_tools
<img src="/img3/painttools.gif" width="84" height="49" alt="paint_tools" />

このほかにもたくさんの方法がありますが、みどり同盟ブログではできるだけ多くのPC環境で同じように表示されるよう調整していますので、よそのサイトで調べたからといってすぐに記事や画像に適用しないでください。
「よそのサイトでこんな方法が載ってたけど使っても大丈夫?」「こんなことはできる?」「なぜ●●のようにできないの?」などの疑問・質問はFAQのほうから投稿してください。
 
 
 
 

↑記事↑

 

↓記事↓

2004/07/20 (火)
記事の途中で「記事の続き」を開いてジャンプ
by PONJAN
編集アドバイス(メニュー)に戻る ≫

 


例:次の記事でお確かめください
第一回 みどり集合(10月18日)【無事終了!】

 


このように、記事の途中で(多くの場合記事の最初のほうになると思われます)文字や画像をクリックすると、「記事の続き」を開いた状態にして、その先頭位置へジャンプするというものです。

最初に、「自分の記事から他の記事へリンクする」と同様に、目的の記事(ジャンプ先)の記事番号を調べメモしておきます。
今回は自分の記事で、しかも今編集中の記事というわけですから、下書き→プレビューで調べてください。

 


<a href="#cont○○" onclick="showMore('○○','/md.cgi?eid=○○#sequel');" onkeypress="showMore('○○','/md.cgi?eid=○○#sequel');" accesskey="1">●●</a>

○○の部分5箇所に、メモしておいた同じ記事番号を入れます。
●●は閲覧者にクリックさせる部分で、文章でも画像タグ(<img〜/>)でもかまいません。

 


例に挙げた記事の該当部分はこうなっています。
第一回の様子は<a href="#cont759" onclick="showMore('759','/md.cgi?eid=759#sequel');" onkeypress="showMore('759','/md.cgi?eid=759#sequel');" accesskey="1">記事の続き</a>でどうぞ。

 


次に、「記事の本文」の最後の文章を<div>で囲みます。

 


<div id="cont○○">▲▲</div>

○○はさっきとおなじ記事番号です。
▲▲は「記事の本文」の最後の行ですが、一行だけではなく、最後の行が含まれる段落を囲んでください。
こうすればヘンなところにジャンプせずに記事が読みやすくなります。

 


例の記事では絵文字の画像タグも入れてこうなっています。
<div id="cont759">PONJANの予想:2人<img src="/e/j32.gif" width="15" height="15" alt="" class="emoji" /></div>
 
 
 
 

↑記事↑

 

前のページ 2/2  :  ↑10件ずつ表示されているページを切り替えることができます↑