ヘルプセンター

【the7】画像を追加/変更する方法

このマニュアルは、ブラウザ:Google Chrome、テーマ:the7 ver 3.9.2 で作成しています。
ご利用のブラウザやテーマのバージョンによって見た目が異なる場合がございます。

ここでは画像を追加する方法を説明します。



例として、左側に画像、右側にテキストのページで説明します。

<画像の追加方法>

予め、行を追加して、カラムを分けます。
行の追加方法と、カラムの分け方はこちらでは説明しません。各マニュアルをご覧ください。

  1. 画像を追加したい箇所にある「+」マークをクリックします。




  2. 「要素を追加」画面が表示されるので、「単一画像」をクリックします。




  3. 「単一画像 設定」画面が表示されるので、「画像」にある「+」マークをクリックします。




  4. 「画像セット」画面が表示されるので、「ファイルをアップロード」をクリックします。




  5. 画面の指示に従って、設置する画像をドラッグ&ドロップする もしくは
    「ファイルを選択」ボタンをクリックして、画像を選択してください。




  6. 画像をドラック&ドロップ もしくは「ファイルを選択」から画像を選択したら、
    画像が選択されている(チェックマークがついている)ことを確認します。




  7. 「代替テキスト」を入力します。
    ※SEO的にも、ユーザービリティ的にも必要ですので、写真の説明などを入力します。(日本語で構いません)
    代替テキストを入力したら、「画像セット」ボタンをクリックします。




  8. 「画像セット」画面が閉じて、「単一画像 設定」画面に戻るので、「画像サイズ」を入力して設定します。


    画像サイズの詳細

    ■thumbnail : WordPressで指定しているサムネイルサイズ(デフォルト値 150px×150px)

    ■medium : WordPressで指定している中サイズ(デフォルト値 300px×300px)

    ■large : WordPressで指定している大サイズ(デフォルト値 1024px×1024px)

    ■full : アップロードした画像のサイズ

    ■直接指定 : 例 200x100 など、直接 幅 x 高さ のピクセル数を指定します

    ※設置したカラム枠より画像が大きい場合は、自動で縮小されます。
     一旦、「full」を指定して、プレビューで様子を見ながら調節してください。


  9. 「画像配置」を選択します。



    ■左 : 画像が左寄せで表示されます
    ■右 : 画像が右寄せで表示されます
    ■中央 : 画像が中央で表示されます


  10. 必要に応じて「画像スタイル」を指定します。
    「画像スタイル」とは、画像に対して様々な加工をさせます。
    例えば「Circle」を選択すると、画像が丸型で表示されます。
    ※Default は加工無しです




  11. 必要に応じて、画像をクリックした時の動作を指定します。


    On click actionの詳細

    ■なし : 何もしない

    ■Link to large image : 元サイズの画像を単体ページで表示させます。
    ※次の項目「リンク先」(表示先)で「同じウィンドウ」か「新しいウィンドウ」かを選べます。

    ■カスタムリンクを開く : 画像にリンクを張ります
    ※次の項目「画像リンク」でリンク先となるURLを入力します。
    ※さらに次の項目「リンク先」で「同じウィンドウ」か「新しいウィンドウ」かを選べます。

    ■ズーム : ズームします。

    ■Open Magnific Popup : ポップアップで画像が表示されます。


  12. 必要に応じて、画像が表示される時の動作(アニメーション)を指定します。
    例えば「fadein」を選択すると、画像がフェードインで表示されます。
    ※none はアニメーションなしです。





  13. 設定が完了したら「単一画像 設定」画面の「変更保存」をクリックして閉じます。

  14. ページの「変更をプレビュー」もしくは「プレビュー」ボタンをクリックしてページを確認します。


  15. 問題なければ「更新」 もしくは 「下書きを保存」ボタンなどをクリックしてページを保存します。
    以上で画像の追加は完了です。

 

<画像の変更方法>

既に設置されている画像を変更する方法を説明します。

  1. 変更したい画像の上をマウスオーバーして表示されるメニューの「鉛筆」マークをクリックします。




  2. 「単一画像 設定」画面が表示されるので、画像の上の「×」マークをクリックします。
    「×」をクリックすると、画像の指定が解除されます。




  3. 「画像」にある「+」マークをクリックします。




  4. 「画像セット」画面が表示されるので、「ファイルをアップロード」をクリックします。




  5. 画面の指示に従って、設置する画像をドラッグ&ドロップする もしくは「ファイルを選択」ボタンをクリックして、画像を選択してください。




  6. 画像をドラック&ドロップ もしくは「ファイルを選択」から画像を選択したら、画像が選択されている(チェックマークがついている)ことを確認します。




  7. 「代替テキスト」を入力します。
    ※SEO的にも、ユーザービリティ的にも必要ですので、写真の説明などを入力します。(日本語で構いません)
    代替テキストを入力したら、「画像セット」ボタンをクリックします。




  8. 「画像セット」画面が閉じて、「単一画像 設定」画面に戻るので、「変更保存」ボタンをクリックして閉じます。

  9. ページの「変更をプレビュー」もしくは「プレビュー」ボタンをクリックしてページを確認します。



  10. 問題なければ「更新」 ボタンをクリックして保存&公開します。
    以上で画像の変更は完了です。

 

他にご質問がございましたら、 CMSサポートへお問い合わせください

コメント

株式会社シーエムエスエス
CMSサポート
Tel : 03-6869-0379(月~金/10:00~18:00)
Powered by Zendesk