ふたつぼし inside

制作・活動内容、機材の使い方、作り方などなど

ユーザ用ツール

サイト用ツール


サイドバー

**ふたつぼしHomeに戻る**
**ふたつぼしストアを覗く**

コンテンツマップ



dandelions

最近更新されたページ

activities:management:edit-image

Dokuwikiの画像表示をサンプル確認

Dokuwikiのページ編集で、画像を貼り付けるときに各種設定の違いでどのように表示されるのか、サンプル画像(1000 × 750 px)で確認しました。

画像貼り付け時の設定画面「リンク設定」


1)リンク先

クリックでリンク先に移動するアクションのチェック

リンク先にファイル属性あり

リンク先に画像のみ
Click me!
リンクのみ表示
var_1000-0750_4_3.jpg

(参考)別のページへリンク(設定画面の選択肢にはなく、別途リンク先を手修正)
Click me!


※ 特に設定しないと、リンクのある画像上でコメントとしてファイル名が表示されますが、意味ないので、スペースか補足コメントを入れるようにしています。

2)位置

表示位置設定の違いによる実際の表示の状況とテキストとの位置関係を確認(画像はSサイズ)

指定なし var_1000-0750_4_3.jpg編集画面で画像ファイル名に続けて書いた文章は、このように画像の真ん中あたりから表示されるが、ページの右端を超えると、画像の下の行に続いていく。画像ファイル名の直後で改行して文章を書くと、画像の下の行から始まる。

左寄せ var_1000-0750_4_3.jpg画像の右側は通常の文章エリアとなるため、文章の左側に画像を挿入した形になる。段落の切り替え、改行等通常の文章のまま表示される。以下ダミー文字%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

中央 var_1000-0750_4_3.jpg特に改行等を行わなくとも画像の両脇は空欄になり文章は入らない。

右寄せ var_1000-0750_4_3.jpg画像は右端に寄り、左寄せの場合とは逆のレイアウトになる。文章の量が多ければ左寄せと同様に感じられるが、文が短かったり途切れている場合でも画像は右端なので、中央にスペースが空くことがありえるので注意が必要。
以下ダミー文字$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

※1.左寄せと右寄せを選択した場合で、まわりの文章が少ない場合に、画像が次の段落まではみ出して非常にみっともない見た目になることがあります。編集画面でわからずにプレビューしてはじめて気がつきますが、この場合適当に数行分改行記号「\\ 」を挿入してスペースを作って、次の段落にぶつからないように調整するしかなさそうです。開いているブラウザの幅によってはそれでも画像が回り込んでくることもあるのですが、対応しきれない部分が出てきます。

※2.画像の表示設定と文章の位置関係は、PCとモバイルとでも意図していないような見え方になることがあるので、怪しいときは確認したほうがよいでしょう。

3)イメージサイズ

画像の表示サイズ設定の違いによる、ページ中に占める面積の違い(ファイルサイズはサンプル画像(.jpg)の参考値)

S:(200 × 150px: 5.6KB)var_1000-0750_4_3.jpg
M:(400 × 300px: 14.1KB)var_1000-0750_4_3.jpg
L:(600 × 450px: 25.6KB)var_1000-0750_4_3.jpg
O:(表示上688 × 516px: 109.4KB), オリジナル1000 × 750px: 106.8KB ※オリジナルがページ幅より大きい場合は、ページ幅に合わせて縮小されるvar_1000-0750_4_3.jpg
※オリジナル画像の方がS/M/Lの規定サイズより小さい場合は引き伸ばして表示されます。

activities/management/edit-image.txt · 最終更新: 2021/09/11 17:58 by Staff_Ujiie