Cyclone Slider(スライド画像の編集) Cyclone Slider(スライド画像の追加・削除・修正) 管理ページ左列メニューに並ぶ、「Cyclone Slider」で、トップページの「スライダー」を再設定します。スライダーの設定［Cyclone Slider］メニューを選択します。画像を全て変更したい場合は、[Add Slideshow]ボタンを選択して、一から設定をする事もできます。一部の画像を更新したい場合に、新しく用意した画像を、そのまま置き換えるだけでは、サイズが揃わない場合があるかもしれません。画像の編集が必要な時、専用の画像処理ソフトが必要な場合もありますが、サイズ変更や表示範囲の変更なら、ブログシステムのメディアライブラリの編集機能で修正できます。ここでは、その方法を手順に従って、解説いたします。スライダーの再設定【1】編集したい画像を確認します。 [メディア]メニューでライブラリに画像を[新規追加]します。デジカメなどで撮影したファイルや、入手した画像ファイルなどを、そのままアップロードします。【2】[Cyclone Slider]の任意のスライダーの[編集]を選択します。下図は、3つのスライドショーが設定されている場合です。修正したいタイトルを選択し、編集画面に切り替えます。【3】スライドショーの編集 ①図例は、「testslide」という名前のスライドショーの編集画面を開いたところ ②画像の追加(青枠の②) Slidesのブロック(緑枠)内には、既に登録された画像がリストされています。更に下の青枠部分に、2つのボタン(Add Slide/Add Images as Slides)が並んでいます。「Add Images as Slides」ボタンを押し、表示させたい画像を指定します。コントロールキー又はシフトキーを使い、複数画像を指定することもできます。メディアのライブラリが開くので、用意した画像を選択すると、④の緑枠内に指定した画像がスライドとして登録されます。 ③設定の保存必要なスライドが登録できたら、右サイドの「公開(更新)」ボタンを押します。右上「Slider Preview」で、スライダーの実際の動きが確認できます。スライドの動きが確認できたら、詳細の設定をしましょう。そのままで問題ない場合は、これで編集完了です。 ④スライドの順番設定タイトルバーには、設定した画像の数だけ、Slide-1(タイトル名),Slide-2(タイトル名)と表示され、スライドを表示する順に上から下に並びます。タイトルバーのグレー部分を、上下にドラッグして追加した画像の表示順を変更します。 ⑤不要なスライドの削除画像を差し替えする場合は、不要なスライドを削除します。 Slide タイトルバーをクリックし、更に全てのスライダーオプションを開いた状態が左図です。右側の赤い×マークを押すと、スライドが削除されます。 (元画像は残っているので、入れ替え・削除は何度でも再設定が可能です。) ※オプションの表示を最小化したい場合は、×マークではなく、タイトルバーをクリックします。 ⑥画像の変更もしも新しい画像が期待しない画像の場合は、何度でも差し替え可能です。タイトルバーをクリックすると、そのスライドのオプションが設定できるようになります。画像下の「Get Image」ボタンを押すと、メディアライブラリが表示され、別画像の読み込みが可能です。スライドオプション画像の右側に、4つのメニューボタン(Caption/Link/Image Archives/Slide Transition Effects)が並び、詳細な追加設定ができます。左の例では、全てのオプションメニューを開き、各々設定してありますが、これらの設定は省略可のため必要に応じて行います。 [Caption] -Title/Description ⑦スライドのタイトルと説明文タイトルと説明文がスライド画像の領域内に、表示されます。また、設定更新すると、「Slide-1 ひまわり」のように、タイトルバーに名前が表示されます。 [Link] -Link URL/Option Link in ⑧画像クリック時のリンク先スライドが表示されている時にマウスクリックで特定のページにリンクします [Image Attributes] -Alternate Text/Title Text ⑨画像の置き換え文画像が表示されない時に、代わりに表示されるテキストオンマウスでも、ここで指定したテキストが表示されます [Slide Transition Effects] -Transition Effects/Speed/Delay ⑩スライド切り替えエフェクト [Enable Slide Effects]を選択すると追加で3項目オプションが選択できるようになり、次の画像に切り替わる時に7種類の画像エフェクトとその切り替わり時間と間隔(1000分の1秒単位の数値)を指定できます。スライドのサイズ加工(表示領域変更など) 追加したスライドのサイズが大きすぎる、表示される領域が意図した範囲と違いすぎるなど、スライド画像はそのままでは利用できないケースが多くあります。ここでは、画像の調整を手順に従い解説いたします。 ①既存スライダーの設定サイズを確認します。右サイドバーの「Width(横幅)」「Height(縦高)」の数値をメモしてください。表示箇所は、下図をご参照ください。 ※新たに用意される画像の横幅は、既存設置してあるスライダーのWidthよりも大きいかどうかご確認ください。もし、画像が小さい場合は、画像が荒れる、左右に余白ができてしまう、などの予期しない表示になりますので、なるべく大きな画像をご用意ください。スライダー設定画面の右サイドバー Basic Settings Slidesを設定する時のオプションと同様に、スライドごとではなく、スライドショー全体に同じ機能を設定します。 ①の場所に表示している、スライダーを表示するための幅と高さの設定値がスライド画像の設定の際に重要になります。 Width スライダーの設定幅(ピクセル単位の数値) Height スライダーの設定高(ピクセル単位の数値) Width Management:画面幅が違うデバイスでどのように表示させるかを指定します。 Responsive:ブラウズ画面に合わせて拡大縮小します。ただし、最大幅は、元の幅です。 Full:ブラウズ画面に合わせて拡大縮小し、指定最大幅を超えて画像のフルサイズで表示します。 Fixed:指定どおりの固定幅をキープします Show Navigation? 切り替え用のサムネール(小さい画像)か、丸印(※テンプレートによって違う)を表示する Resize Images? Yes:画像のサイズ変更をスライドショーの環境に変更する。No:オリジナルの画像サイズで表示する上記3項目も、スライド画像のサイズに影響する部分です。敢えて固定サイズに修正したり、オリジナルのサイズを指定しておく方法もありますが、マルチデバイス対応にするためには、これらの項目の変更は、あまりお勧めいたしません。スライド用途の横長画像の作成 ②先に画像のサイズ変更を完了させ、その後にスライダーへのスライド登録を行います。 ③メディアライブラリを開き、スライド用に加工するための画像を選択します。 ④右サイドの「添付ファイルの詳細」画面(青枠内)から「メディアを編集」を選びます。 ⑤画像の縮尺の変更横幅×縦高の順で、実寸数値が表示されます、まず左側の横幅を設定します。 ①で確認したWidthの数字を入力し、縮尺変更をします。 (サンプルの既設スライダーはwidthが2000pxなので、整数値2000を入力してあります。) ※実寸数値よりも大きい数値は指定できません。 ※縦高は、幅に比例する数値が自動計算されるので、そのままでOKです。「縮尺変更」ボタンを押すと、新たなサイズに変更された画像が保存されます。続いて縦高を設定します。 ⑥画像のトリミングスライダーの表示画面は、一般的な写真の縦横比よりも横長に設定しています。そのため多くの場合、上下のトリミング(切り抜き)処理を行うことになります。手順としては、最初に、設定したスライダの幅に画像を合わせ、次に高さを比率で設定し、最後に表示領域の位置を調整します。縦横比の枠内(青枠部分)に①で確認したwidthを左の入力ボックスに、heightの数値を右のボックスに入力します。 ※横幅が設定の大きさより小さい画像を操作する場合は、幅は、実寸値を入力します。高さは、別途比率計算して適当な数値を入力します。 ※①でメモした、width値とheight値の比率を整数になるように調整する必要があります。例えば既設のスライダーが2000：600なら500：150と書いても、10：3でも構いません。 ※もし幅が640×480の写真を新たにスライドとしてサイズ調整するなら、幅640に対して高さを192(=640÷10×3)にします。ただし、幅2000px以上のブラウザでスライダを見た時、画像は3倍以上に引き延ばされるため、画質が非常に粗く見えてしまう事になります。なるべく高画質なデータのご準備をおすすめいたします。次に、左側の画像の上にマウスポインタを移動させ、表示させたい範囲を左上から右下に向かってドラッグし点線で囲います。 (ドラッグすると、選択範囲を示す点線と8か所のハンドルが表示されます。) 選択範囲のボックス内に、現在指定した幅と高さの範囲が数値で表示されるので、横幅widthとheightの数値を改めて入力すると、正確な大きさで選択範囲も連動するので、縦横比と切り抜く範囲を目で確認できます。 ⑦トリミングボタン点線範囲内にマウスポインタを移動すると、大きな十字ポインタに変わるので、写真の表示したい領域をカバーする範囲に点線枠をドラッグ移動させます。切り抜き範囲の指定が完了した画像を最終的にトリミングするために、[トリミングボタン(緑枠)]をクリックします。もし変更したい場合は、⑥青枠の上部分に「元の画像を復元」に用意されたボタンをクリックする事で、最初のサイズに戻すこともできます。トリミングした結果に問題がなければ、画像下の[保存]ボタンを押します。以上で、スライド画像の準備は完了です。右サイドバーの[更新]で画像修正内容を更新します。続いて、メディアライブラリに保存された画像を、Cyclone Sliderに追加します。【3】スライドの編集の②スライダーの設定に戻り、設定した画像を選択し、必要なオプションを設定し、右サイドの更新ボタンを押します。最後に、完成したスライドの様子を確認し、変更があれば、上記の設定を再度繰り返します。