画像管理の使い方-SIRIUS2の使い方

SIRIUS2では旧SIRIUS2に較べて画像挿入のオプション機能が強化されました。

編集画面内に画像を挿入するにはいくつかやり方がありますが、最も簡単なのは記事装飾メニューの［画像］をクリックして当該画像を選択→挿入するやり方です。

こちらが［画像］をクリックして表示される画像専用の管理画面。実はかなりのオプションが用意されてます。

①新規追加

編集画面内で独自の画像を使うには事前の画像登録が必要です。
ここをクリックして使いたい画像を選択→「開く」をクリックすると管理画面内に放り込まれます。

その後に画像を挿入したい場所をクリック→画像管理画面を開き、挿入したい画像をクリック→「挿入」で記事内に埋め込まれます。

画像の登録だけならリボンバーの【画像管理】からでもできます。

違いは【画像管理】画面には「挿入」ボタンがないため記事内への画像挿入ができないということ。

②画像フォルダ

画像の名称や削除などは画像管理画面内でもできますが、大量の画像を一度に操作したい場合はここでの操作は手間がかかります。そんな時はここをクリックするとWindows上での直接操作ができます。

これに関しては画像のフォルダ分け-画像フォルダの直接管理をご覧ください。

③表示形式

表示形式はサムネイルや詳細形式などいくつかあるのでお好きなものを。
また拡張子ごとの表示形式もあります。

画像の挿入に関しては基本的には記事装飾メニューの［画像］をクリック→画像を登録→その画像を指定して「挿入」をクリックという流れですが、SIRIUS2には『詳細を設定して挿入』というオプションも用意されてます。

やり方は挿入したい画像を①選択すると②「詳細を設定して挿入」がアクティブ状態になるのでクリックします。

【詳細設定】画面が開くとさまざまなオプションが用意されてます。

①画像サイズ

通常は「指定なし」で問題なし。「原寸サイズ」もほぼ同じ意味。それ以外は使用用途によって最適なサイズを選択します。

②表示・オプション・スタイル・クラス

表示

画像加工しなくても画像の形を2種類から選択できます。

「シャドウ」にチェックを入れるとぼかしのついた外枠（影）が付きます。
「写真風」にチェックを入れると縁取り印刷した感じの仕上がりになります。

”「シャドウ」をかけてみたけどやっぱない方がよかったかも”なんてこともあります。そんなときは編集画面の画像タグをダブルクリックします。
すると「シャドウ」がかかった状態の詳細設定画面が立ち上がるのでそこで修正をかけていきます。

既存の画像にシャドウを付けたいと思った時も画像タグをダブルクリックすることで同じように詳細設定画面が立ち上がります。

オプション

ここは画像を横並べにしたい時に使える機能で、画像を複数枚選択した時にここの選択肢がアクティブになります。（Ctrl＋画像クリックで複数選択可）

「画像を横並べする（スマホ1列）」にするとスマホ表示時は画像が縦に並んで見やすくなります。

複数画像の場合、画像タグをダブルクリックしても1個の画像しか表示されません。
こういう時は2つの画像タグを囲んでる全体タグごと選択した状態で記事装飾メニューの［画像］をクリックすれば元の詳細設定画面が開きます。

スタイル・クラス

『スタイル』タブ内は画像タグ内に独自のスタイルを追記したい時に直接書き込みます。
たとえば画像の周りに枠を付ける”border: 1px solid #ddd;”といったように。普段は使う必要のない箇所です。

『クラス』タブも同様に必要であれば独自クラス名やID名を書き込みます。

③回り込み

ここの機能は便利といえば便利なんですが、実践ではほとんど使うことはないんじゃないかと思ってます。
しかも初心者の方にはちょっとわかりにくいかもしれないのでできるだけ詳しくご紹介してみます。

左に回り込み

仮に下のようなテキストが配置されててその間に画像を挿入してみます。

挿入する画像は縦横300pxの画像。『回り込み』で「左に回り込み」を指定します。
編集画面上にも画像タグが挿入されます。
（赤下線部分が”左回り込み”用クラスです）

実際に表示してみた結果がこちらで、画像が”その下に位置するテキストの左側に回り込む”という構図ですね。

ただこのままだと永遠にテキストが右側に回り込んでしまいます。
そのため「テキスト3...」という文以降の回り込みを解除したい場合は、「テキスト3...」の前に記事装飾メニューの［タグ］→「画像の回り込み解除」を選択して「<br class="clear" />」という専用クラスを入力してやります。

これで「テキスト3...」以降は通常の左寄せ入力になります。

中央揃え

回り込みはなく、画像は中央に配置されます。

右に回り込み

「左に回り込み」と反対に、テキストは左に画像は右に配置されます。

左寄せ・右寄せ

「左寄せ」は「指定なし」と一緒で通常の配置です。
「右寄せ」は回り込みはなく、画像は右端に配置されます。

④altテキスト

デフォルトで「｛AUTO｝」と記入されてますが、これは画像情報の『説明』欄に記入されたテキストを自動表示するという意味です。
あえて別の表記に変えたい、もしくは説明欄が空欄の場合などはここを差し替えます。

【画像の最適化】に関しては詳細ページを別で用意してあるのでそちらをご覧ください。