HOME > よくある質問 > その他 > CSSを追記してインポートを行いたい、新規のCSS情報を適用するにはどうしたらいいのか

CSSを追記してインポートを行いたい、新規のCSS情報を適用するにはどうしたらいいのか

現在Webページに設定されているCSS情報と同一という事であれば、お客様環境から各ファイルをアップロードする事で変更可能です。詳細はJS・CSSのエクスポート/インポートページよりご確認ください。
また、現在設定されているファイルとは異なるCSSファイル(新規の情報)であればアップロード後に、<head>内に情報を追記する必要があります。

注意事項

  • ※サポートチームではCSSの修正方法や不具合時の対応は行えないため、変更時には必ずローカルにバックアップを取得の上、作業をお願いします。
  • ※この設定はver19.1からの仕様になります。使用できない場合はバージョンアップをお願いします。

CSSのエクスポート/インポート

CMSメニューより、ページ > JS・CSSのエクスポート/インポートより作業が行えます。
こちらでファイルをエクスポートし、ローカル編集後にインポートすることで、CSSファイルの修正内容をサイトに反映させることができます。

詳細の作業方法はJS・CSSのエクスポート/インポートページよりご確認ください。

再構築による反映

アップロードしたCSSを公開側に反映させるには、再構築が必要となります。
再構築を行う対象はどのページでもよいため、任意のページを選択の上、再構築をお願い致します。

注意事項

  • ※CSSの変更はブラウザ側のキャッシュに保存されているため、変更内容を確認したいときはページを再リロードしてご確認ください。

<head>内への設置

現在設定していないCSSファイル名でインポートした場合は、適応を行いたいページにインポートしたCSS情報を参照するように設定を行うする必要があります。

全ページへの適用

全てのページに設定される場合は
・共通設定での<head>内編集領域
・個別設定のしているページの<head>内編集領域
へ追記を行う必要があります。

共通設定での<head>内編集領域

管理画面内左上メニュー>設定>サイト設定 へ入ります。

サイト設定内の共通設定>内編集領域へ追記をお願いします。

「JS・CSSのエクスポート/インポート」よりCSSファイルをアップロードすると
https://ドメイン/dcms_media/css/○○.css
※赤字の部分はインポートを行ったファイル名が入ります
上記のようなディレクトリで情報が登録されます。

その為<head>内編集領域への設定情報としましては
<link rel="stylesheet" href="/dcms_media/css/○○.css" />
となります。

追記後は画面上部青い「保存」ボタンをクリックすると公開画面へ適用します。
※再構築の必要はありません。

個別設定のしているページの<head>内編集領域

ページごとに個別設定をしているかどうかは、管理画面内左上メニュー>ページ>サイト構成より確認することが出来ます。
ページ名の横に「オレンジ色のビックリマーク」が表示されているページは個別に<head>内が設定されているページとなります。

変更したいページの、ページ名右側何も書いていない部分をクリックしフローディングメニューを開きます。フローディングメニュー内上部の左から3つ目の歯車のマークをクリックして下さい。

▼GIF画像です。動きます。

ページ設定を変更するページへ遷移します。
ページ内の個別設定>その他の<head>領域からへ追加したCSS情報を設定します。

追記内容に関しては、共通設定での<head>内編集領域で記述した内容と同様になります。
追記後は画面内赤い「変更」ボタンをクリックし、再構築を行うと公開画面へ適用されます。

注意事項

  • ※<head>内の設定に関しまして、シェアパーツやテンプレートごとでの設定を行っている環境もございますので、設定箇所が分からない場合はサポートまでご相談ください。
  • ※適用後に表示崩れが発生した場合、サポートにて対応しかねますのでご了承ください。
セミナー情報

よくある質問TOP5

機能一覧から探す
セミナー情報