Recommended
More Related Content
More from Ryutaro Takayanagi
More from Ryutaro Takayanagi (20)
Recently uploaded
Recently uploaded (8)
画像挿入の仕方
- 1. 画像挿⼊の仕⽅ hibariオンラインマニュアル モジュール操作編 モジュール＞ CONTENTS > 情報追加 メンテナンス管理＞ ファイルマネージャ
- 2. ①エディタモードにおける画像挿⼊：ボタンはこちら 画像挿⼊の仕⽅ エディタモードにおける画像挿⼊は以下の⾚枠の部分になります。 こちらをクリックすると、ポップアップウィンドウが表⽰されます モジュール操作編 モジュール＞ CONTENTS > 情報追加 メンテナンス管理＞ ファイルマネージャ
- 3. ②画像をアップロードする場合、「サーバブラウザ」ボタンをクリック 画像挿⼊の仕⽅ ボタンを押したあと、こちらの画⾯が表⽰されます。 モジュール操作編 モジュール＞ CONTENTS > 情報追加 メンテナンス管理＞ ファイルマネージャ
- 4. ②「create」を押して、フォルダを作成 画像挿⼊の仕⽅ こちらのキャプチャはまだ初期画⾯で、何もサーバにファイルがアップロードされていない 画⾯です。今回は新規にフォルダを作成してみましょう。 uploadsフォルダが画像を⼊れておくための＜ルートフォルダ＞となります。テーマごと、 記事ごとなどで画像をフォルダ分けすることが可能です。 今回は「blog」フォルダを配下に作成してみます。「Create」ボタンを押しましょう。 モジュール操作編 モジュール＞ CONTENTS > 情報追加 メンテナンス管理＞ ファイルマネージャ
- 5. ③試しに「blog」フォルダを作成してみましょう 画像挿⼊の仕⽅ 「create」ボタンを押し、新しく作るフォルダを「blog」と名付けます。 作成後、uploadsフォルダの配下にblogフォルダができました。 モジュール操作編 モジュール＞ CONTENTS > 情報追加 メンテナンス管理＞ ファイルマネージャ
- 6. ④⽣成したフォルダの中に画像をアップロードしてみる 画像挿⼊の仕⽅ 右側の「add file」 クリックすると、右図のような画⾯になるので「ファイルを選択」より 画像アップロードしましょう。 モジュール操作編 モジュール＞ CONTENTS > 情報追加 メンテナンス管理＞ ファイルマネージャ
- 7. ⑤PC内から画像をアップロードする 画像挿⼊の仕⽅ 画像をご⾃⾝のPCから探します（キャプチャはWindows）。今回は桜の画像をアップロー ドしていきましょう。開くボタンを押すと、サーバにアップロードが準備がなされます。 Uploadボタンを押して、画像ファイルをアップロードしましょう。 ※画像ファイル名は必ず半⾓英数字である必要がございます。 モジュール操作編 モジュール＞ CONTENTS > 情報追加 メンテナンス管理＞ ファイルマネージャ
- 8. ⑥Uploadを押して、ファイルマネージャ内にダウンロード 画像挿⼊の仕⽅ Uploadが終わると、緑⾊のブログレスバーが表⽰されます。100%となって、全体が⻩緑⾊ になればアップロード完成です。こちらの画⾯を抜けるときは、「Cancel」ボタンを押しま しょう。 アップロードされると、右図のようになります。 モジュール操作編 モジュール＞ CONTENTS > 情報追加 メンテナンス管理＞ ファイルマネージャ
- 9. ⑦プレビュー機能、ファイル名変更ができます 画像挿⼊の仕⽅ アップロードした画像のプレビューを⾒るときは左図のように「Preview」ボタンで確認し てください。ファイル名を変更する際は右図のように「Rename」を押します。 モジュール操作編 モジュール＞ CONTENTS > 情報追加 メンテナンス管理＞ ファイルマネージャ
- 10. ⑧ご⾃⾝のPCにダウンロードもできます、削除もできます 画像挿⼊の仕⽅ ご⾃⾝のPCにダウンロードする際は左図の部分にある、「Download」ボタンを押してくだ さい。間違えてアップロードしたもの、または不要なものは右図の部分にある、「Delete」 ボタンで削除可能です。 モジュール操作編 モジュール＞ CONTENTS > 情報追加 メンテナンス管理＞ ファイルマネージャ
- 11. ⑨本⽂画像にアップロードする場合は、「select」ボタン 画像挿⼊の仕⽅ 本⽂画像にアップロードする際は、ファイルを選択後、「select」ボタンを押します。 selectボタンを押すと、右図のような最初のポップアップ画⾯に戻ります。 モジュール操作編 モジュール＞ CONTENTS > 情報追加 メンテナンス管理＞ ファイルマネージャ
- 12. 画像サイズの調整 画像挿⼊の仕⽅ 画像サイズはこちらで調整が可能です。鍵をクリックすると、縦横⽐の固定が解放されます。 画像幅に応じた⼤きさにする場合の⼀例として、 ・幅（100%） ・⾼さ（未⼊⼒） の状態にすると、特にスタイルシートがなくても、 width:100%;で指定した可変サイズになります。 モジュール操作編 モジュール＞ CONTENTS > 情報追加 メンテナンス管理＞ ファイルマネージャ
- 13. 画像にリンクを挿⼊する 画像挿⼊の仕⽅ 画像にリンクを設定する場合、「リンク」タブよりウィンドウを切り替えて設定を⾏ってく ださい。こちらでリンクURLと、ターゲット設定が可能となります。 モジュール操作編 モジュール＞ CONTENTS > 情報追加 メンテナンス管理＞ ファイルマネージャ
- 14. ⾼度な設定：画像ごとにid指定などもできる 画像挿⼊の仕⽅ スタイルシートごとに画像の表⽰⽅法も指定できます。 例えば、 ・id ・⽂字表記の⽅向 ・⾔語コード ・longdesc属性 ・スタイルシートクラス ・Title属性 ・スタイルシート など。 モジュール操作編 モジュール＞ CONTENTS > 情報追加 メンテナンス管理＞ ファイルマネージャ
- 15. 画像挿⼊の仕⽅ 画像が⼤きすぎる、設定を間違えてしまった場合は、挿⼊された画像を右クリックします。 こちらの「画像プロパティ」を押すことで、さきほどのポップアップ画⾯に戻ることができ ます。 モジュール操作編 モジュール＞ CONTENTS > 情報追加 メンテナンス管理＞ ファイルマネージャ ⑩すべての設定が完了したら、「OK」ボタンより本⽂に挿⼊