画像を表示させよう
ページに画像をアップロード、表示、削除する方法を解説しています。
画像をアップロードして表示させる †
画像アップロード画面を開く †
編集ボタン一覧にある赤枠で囲まれている「画像」ボタンを押すと画像アップロード画面が開きます。
画像をアップロードする †
画像アップロード画面を開いたら、赤枠で囲まれた右端にあるタブ「新規アップロード」をクリックします。
すると、「ここにファイルをドラッグ&ドロップするか、クリックでファイル選択」の画面が出現します。
赤枠に囲まれた部分にアップロードしたい画像をドラッグ&ドロップすると自動でアップロードされます。
赤枠に囲まれた部分をクリックした場合はディレクトリが出現し、ここからファイルを選択してアップロードもできます。
※すでにアップロードされているファイル名と同名のファイル名をアップロードはできません。ファイル名を変えてからアップロードしてください。
アップロードした画像の表示設定を変更する †
アップロードした画像は画像の表示位置、大きさ、リンク先を指定することが可能です。
表示位置 †
画像の表示位置を選択できます。左寄せ、センタリング、右寄せから選択してください。初期状態は左寄せに設定されています。
機能の詳細に関しては画像の左寄せ・センタリング・右寄せを参照してください。
大きさ †
画像の大きさを設定できます。設定できるのは100%、75%、50%、25%の4種類です。
機能の詳細に関して画像の表示サイズを変更するを参照してください。
リンク先を指定 †
3のところにある入力フォームにURLを入力すると、リンク先を指定できます。
また、攻略Wiki内にリンク先を指定したい場合は、該当のページ名だけで指定できます。
機能の詳細に関しては画像にURLリンクを貼るを参照してください。
アップロードした画像を選択して編集画面に構文を挿入する †
画像をアップロードした後は以下の手順で編集画面に構文を入れれば完了です。
- このページのタブをクリック
- アップロードされた画像のサムネイルから、表示したい画像をクリックして選択
- 選択した画像の情報が右画面に表示されるので、確認してタグ挿入をクリック
- 指定した画像ファイル名が入った構文「&ref(ファイル名.拡張子)」が編集画面に記入されたら完了です。
アップロードした画像の削除 †
アップロードした画像の削除は、画像を選択し、右に表示される画像情報の下部の「ファイルを削除する」をクリックしてください。
ほかのページから画像を指定する †
ほかのページにアップロードされた画像を指定して表示することも可能です。
- 他のページタブをクリック
画像アップロード画面にある赤枠に囲まれた「ほかのページ」タブをクリックしましょう。 - 入力フォームにページ名を入れる
入力フォームに画像を呼び出したいページ名を入力してください。 - 表示を押す
ページ名を入力した後に表示を押すと、メニュー下部に入力したページでアップロードされた画像一覧のサムネイルが出現します。 - ページに表示させたい画像を選んでクリック
サムネイルからページに表示させたい画像をクリックしてください。
入力フォームに「#ref(ページ名/ファイル名.拡張子)」が書き込まれれば成功です。
表示結果
画像のURLから表示させる †
画像の表示はアップロード以外にも画像のURLをコピー&ペーストして指定することも可能です。
書式
#ref(画像URL) &ref(画像URL);
記入例
#ref(http://cdn.wiki.denfaminicogamer.jp/files/attachment/000/136/106/full_upload.jpg)
表示結果
画像のリンクを非表示にする †
画像のリンクを非表示にするには以下の書式を利用します。
書式
#ref(ファイル名,nolink) または &ref(ファイル名,nolink);
使用例
#ref(no_image.jpg,nolink)
使用結果
画像がクリックできません。
画像を枠で囲む †
機能解説
画像を枠で囲みます。
書式
#ref(dummy01.png,wrap)
使用例
#ref(no_image.jpg,wrap,50%)
使用結果
テキスト回り込みの画像 †
テキストの回り込みの指定と解除 †
機能解説
画像の横にテキストを回り込ませて表示する。
書式
#ref(no_image.jpg,around) テキスト #clear
使用例
#ref(no_image.jpg,around,50%) 画像の横にテキストを表示させます。 画像の横にテキストを表示させます。 #clear
使用結果
画像の横にテキストを表示させます。
画像の横にテキストを表示させます。
画像とテキストに余白をあけたい場合は、#styleを追加します。
使用例
#style(class=addMarginRight) #ref(no_image.jpg,around,50%) #style(end) 画像の横にテキストを表示させます。 画像の横にテキストを表示させます。 #clear
使用結果
画像の横にテキストを表示させます。
画像の横にテキストを表示させます。
コメント