ヘルプセンター

区切りを入れる方法

Wordpressテンプレートの一つであるthe7ついてご説明します。
(本マニュアルはthe 3.9.2を元に作成しております)

 

ここでは、区切り線でレイアウトを区切るための二種類の要素について記載しています。
余白を空けてレイアウトを区切る方法についてはをご覧ください。 

  • 区切り(水平区切り線)
  • 区切りテキスト(見出しの水平区切り線)

 

 

 

■区切りについて 

レイアウトを区切りたい時は、水平な区切り線や、テキスト付きの区切り線を使用することができます。

title_separator.png 水平な区切り線を表示する時に使用します。

線の種類や長さ、厚み、位置などを設定できます。
separatorlline01.png

 

区切りの追加方法 

  1. 区切り線を挿入したい箇所をクリックします。


  2. 要素追加画面が表示されるので、「区切り」をクリックします。
    separatorlline02.png

  3. 区切り 設定画面が表示されます。
    separatorlline03.png

  4. 「色」プルダウンで線の色を選択します。
    e                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            

  5. 「整列」プルダウンで区切り線の位置を選択します。
    separatorlline04.pngseparatorlline05.png

  6. 「スタイル」プルダウンで線のレイアウトを選択します。
    separatorlline07.pngseparatorlline08.png


 


 

【画像の追加方法】

詳細手順を以下に記載します。

 

  1. 区切り線を挿入したい箇所をクリックします。


  2. 要素追加画面が表示されるので、「区切り」をクリックします。
    separatorlline02.png

  3. 区切り 設定画面が表示されます。



  4. 画像を選択します。
    画像の指定方法によって画像サイズやキャプションの設定方法が異なるため、本項目でまとめて記載しています。

    1. 画像選択 - 画像の指定方法の選択
      「Image source」プルダウンで画像の指定方法を選択します。

      • Media library:メディアライブラリ上の画像を選択して設定できます。
      • External link:外部の画像を指定できます。
      • Featured link:アイキャッチ画像に設定されている画像が自動的に設定されます。


    2. 画像選択 - 指定方法に応じた画像の設定
      「画像」または「External link」項目にて、画像を設定します。

      • Media libraryの場合
        「Media library」を選択すると「画像」が表示されるので、挿入する画像を設定します。
        1. 画像下の「+」をクリックします。
        2. 画像セット画面が表示されるので、挿入したいファイルをアップロードするか、アップロード済みのファイルをメディアライブラリから選択し、右下の「画像セット」をクリックします。


        3. 画像が設定されます。


      • External linkの場合
        「External link」を選択すると「External link」欄が表示されるので、リンク先を入力します。


      • Featured linkの場合
        設定項目が表示されないため設定不要です。(アイキャッチ画像が反映されます)


    3. 画像選択 - 画像の大きさの設定
      「画像サイズ」に入力すると、表示する大きさを設定できます。

      • Media LibraryとFeatured linkの場合
        「thumbnail」「medium」「large」「full」またはピクセル(幅×高さ)で設定します。


      • External linkの場合
        ピクセル(幅×高さ)で設定します。


    4. 画像選択 - キャプションの設定
      選択または入力すると、キャプションを表示できます。(しなければ表示されません)
      表示例)
       → 

      • Media LibraryとFeatured linkの場合
        「Add caption?」にチェックを入れると、画像の「キャプション」の内容が画像下に表示されます。


      • External linkの場合
        入力した内容が画像下に表示されます。



  5. 画像の配置を設定します。
    「画像配置」プルダウンを選択すると、選択した画像を配置する位置を設定できます。
     → 


  6. 画像のスタイルを設定します。
    「画像スタイル」プルダウンを選択すると、画像の表示形式を設定できます。
    (「境界線の色」項目が追加で表示されるスタイルを選択した場合は併せて設定してください)
     → 
    表示例)




  7. 画像クリック時の挙動を設定します。
    「On click action」プルダウンを選択すると、画像をクリックした時の挙動を設定できます。
    singleimage38.pngsingleimage39.png

    • なし
      特に挙動はありません。

    • Link to large image
      リンク先」プルダウンが追加で表示されるので「同じウィンドウ」か「新しいウィンドウ」かを選択します。画像をクリックすると、選択したウィンドウで大きな画像が表示されます。

    • カスタムリンクを開く
      画像リンク」(URL入力欄)と「リンク先」プルダウンが追加で表示されるので設定します。画像をクリックすると、画像リンクに入力したURLが、選択したウィンドウで表示されます。

    • ズーム
      画像にカーソルを合わせると画像の大きさはそのままでズームした状態で表示されます。
       → 

    • Open Magnific Popup
      画像クリック時にモーダルウィンドウで画像が表示されます。
       → 


  8. 画像のアニメーションを設定します。
    「CSSアニメーション」プルダウンを選択すると、アニメーションの種類を設定できます。



  9. 画像にカーソルを合わせた時の見え方を設定します。
    「Image hovers」プルダウンで、マウスオーバー時の見え方を設定できます。

       Disable       Enable
      



  10. 画像読み込みタイミングの設定を設定します。
    「Lazy loading」にチェックを入れると、Webページのスクロールに応じてその画像を読み込みます。※通常はページ表示時に全データがダウンロードされますが、スクロールまで読み込みを遅延させることでページ表示時間を縮小できます



  11. 設定完了後、「変更保存」をクリックします。
  12. 選択した画像が追加されます。

 


 

【画像の変更方法】

  1. 作成した単一画像にカーソルを合わせると操作オプションが表示されます。


  2. 鉛筆マークをクリックすると単一画像 設定画面が表示されます。
  3. 変更したい項目を変更します。操作手順は追加方法と同様です。
  4. 「変更保存」をクリックします。
  5. 内容が更新されます。

 

 


 

【画像の削除方法】

  1.  作成した単一画像にカーソルを合わせると操作オプションが表示されます。


  2. ゴミ箱マークをクリックすると確認ダイアログが表示されます。


  3. 削除したい場合は「OK」、削除を取りやめたい場合は「キャンセル」をクリックします。
  4. 「OK」をクリックした場合、選択した単一画像が削除されます。
他にご質問がございましたら、 CMSサポートへお問い合わせください

コメント

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