せっかく掲示板

掲示板の新規作成
TOPページ > FAQ一覧 >

FAQ/アップロード画像のサイズ縮小表示

最終更新日:2015/11/12

アップロード画像は、各利用者様がバラバラなサイズの画像をアップロードする事があります。
掲示板などのレイアウトによっては、表示が崩れてしまう事がありますので、アップロード画像のサイズ固定の方法をお勧めします。

 

大きいサイズの縮小化

せっかく掲示板では、アップロードした画像を記事と一緒に表示させる場合、以下の2種類の方法で、縮小させることが出来ます。

1.ブラウザ側にて、大きな画像を縮小させる。
→ ブローバンド回線では、早めに表示されますが、画像の表示に時間が掛かります。大きな画像の場合、表示完了までに時間が掛かる。

2.サーバ側にて、大きな画像を縮小させる。
→ ブロードバンド以外でも、ストレスなくスムーズに表示されますが、色の多い画像は、縮小編集に若干時間が掛かります。大きな画像の場合、表示開始までに時間が掛かる。

 

※画像を縮小表示しても、画像をクリックする事でオリジナルサイズの画像を確認する事が出来ます。

 

設定方法

※ほとんどのサンプル掲示板では、JavaScriptを使用したタグに設定済みです。

 

1.有料版(アクティブモード)になっている事が条件です

2.メンテナンスルームにログインします。

3.ファイルのアップロード準備をします

4.MESSAGE編集に入ります

5.BASE1,2 RES1,2内にあります、以下のタグを修正してください。

通常のイメージタグの場合

<img src="$icon">

      ↓

<img src="$icon" width="50">  (横幅を50ピクセルにて固定する場合)
<img src="$icon" height="50">  (縦幅を50ピクセルにて固定する場合)

 

JavaScript(ジャバスクリプト)を使用したタグの場合

<script type="text/javascript">
<!--
var IMG = "$icon";
if ( IMG != ""){
document.write('<img src="'+IMG+'">');
}
// -->
</script>

      ↓

横幅が150ピクセルを超えている場合150ピクセルにて固定する方法(ブラウザ側による縮小表示)
(画像をクリックすると、オリジナル画像に合ったサイズのウィンドウが開き、オリジナル画像を確認出来ます。)

<script type="text/javascript">
<!--
var IMG = "$icon";
var size_w = "$size_w";
function open$lot() {
var wwidth = $size_w + 45;
var wheight = $size_h + 30;
window.open("","$lot","width="+wwidth+",height="+wheight+",scrollbars=yes");
}
if ( IMG != "" && size_w > 150){
document.write('<div align="center"><a href="'+IMG+'" target="$lot" onClick="open$lot()">');
document.write('<img src="'+IMG+'" border="0" width="150" alt="IMG">');
document.write('<\\/a><\\/div>');
}else if ( IMG != ""){
document.write('<div align="center"><a href="'+IMG+'" target="$lot" onClick="open$lot()">');
document.write('<img src="'+IMG+'" border="0" alt="IMG">');
document.write('<\\/a><\\/div>');
}
// -->
</script>

※150ピクセルと言う縮小単位を変更する場合、青文字の150の数値を変更下さい。

 

横幅が150ピクセルを超えている場合150ピクセルにて固定する方法(サーバ側による縮小表示)
(画像をクリックすると、オリジナル画像に合ったサイズのウィンドウが開き、オリジナル画像を確認出来ます。)

<script type="text/javascript">
<!--
var IMG = "$icon";
var size_w = "$size_w";
function open$lot() {
var wwidth = $size_w + 45;
var wheight = $size_h + 30;
window.open("","$lot","width="+wwidth+",height="+wheight+",scrollbars=yes");
}
if ( IMG != "" && size_w > 150){
IMG2 = IMG.replace('bbs/upfile', 'upfile/size/150');
document.write('<div align="center"><a href="'+IMG+'" target="$lot" onClick="open$lot()">');
document.write('<img src="'+IMG2+'" border="0" width="150" alt="IMG">');
document.write('<\\/a><\\/div>');
}else if ( IMG != ""){
document.write('<div align="center"><a href="'+IMG+'" target="$lot" onClick="open$lot()">');
document.write('<img src="'+IMG+'" border="0" alt="IMG">');
document.write('<\\/a><\\/div>');
}
// -->
</script>

※150ピクセルと言う縮小単位を変更する場合、青文字の150の数値を変更下さい。

 

 

横幅が150ピクセルさらに縦幅100ピクセルを超えている場合150ピクセル×100ピクセル以内にて固定する方法(サーバ側による縮小表示)
(画像をクリックすると、オリジナル画像に合ったサイズのウィンドウが開き、オリジナル画像を確認出来ます。)

<script type="text/javascript">
<!--
var IMG = "$icon";
var size_w = "$size_w";
function open$lot() {
var wwidth = $size_w + 45;
var wheight = $size_h + 30;
window.open("","$lot","width="+wwidth+",height="+wheight+",scrollbars=yes");
}
if ( IMG != "" && size_w > 150){
IMG2 = IMG.replace('bbs/upfile', 'upfile/cutsize/150-100');
document.write('<div align="center"><a href="'+IMG+'" target="$lot" onClick="open$lot()">');
document.write('<img src="'+IMG2+'" border="0" width="150" alt="IMG">');
document.write('<\\/a><\\/div>');
}else if ( IMG != ""){
document.write('<div align="center"><a href="'+IMG+'" target="$lot" onClick="open$lot()">');
document.write('<img src="'+IMG+'" border="0" alt="IMG">');
document.write('<\\/a><\\/div>');
}
// -->
</script>

※150ピクセルと言う縮小単位を変更する場合、青文字の150の数値を変更下さい。

注意:MESSAGE編集のBASE1、2、RES1,2内では、\文字は直後の文字をエスケープしますので、半角\文字を使用する場合は、\\と入力してください。

 

お問い合わせ

print サポートフォーム

FAQランキング

• 画像のアップロード機能

• Twitterに掲載する方法

• 掲示板の作り方・設置方法

• 削除人にチェックを依頼する

• クッキーが効きません(Internet Explorer)

• メンバー機能で具体的に何が出来るの?

• 新規作成方法(日記編)

• 新規作成方法(掲示板編)

• 記事の削除方法

• 掲示板が荒らされたようです (掲示板荒らし対策)

• モバイルページのFORM編集

• SSL機能をONにする

• 投稿文字数(容量)の制限

• 無料版→有料版へ新規申し込み方法

• プロキシサーバの許可設定

有料版アクティブモード

pay 有料版アクティブモードでは、こんな機能が出来るようになります。

個人識別機能(トリップ機能)

メールアドレスの転送フォーム化

バナー広告が非表示