取説 一覧 / CSS編集(上級)

CSS編集(上級)

  • サイト編集
  • css編集(上級)
CSSを自由自在に編集して、ページをカスタマイズすることが可能です。 ※CSSの知識が必須となります。

FireFoxプラグインのFirebug Chromeのデペロッパーツールをご利用頂ければ効率的な編集と確認が可能です
※上級者用 CSS知識が必要です。CSSがわからない場合は変更しないで下さい。


〜編集手順〜
1、編集するページを用意します
  今回は見出し「スポットその1 〜隠れ家温泉〜」と「スポットその2 〜有名温泉〜」を変更します。


↓サイトプレビュー


2、ページエディタ画面より、編集したいパーツの歯車マークを押下します。



3、「class」へ「クラス名」を追加します。
   ※任意の文字列で構いません
   ※今回は【m3】というクラス名を追加しました



4、下書きの内容を保存します



5、左側コンテンツ一覧より、「サイト編集」⇨「CSS編集(上級)」へ進みます



6、編集画面が開きます
  ※初めて開く場合でも、記述してある場合があります。その場合は最終行で改行を行い、1行下から編集をお願いいたします。



7、CSSのプログラムを記述し、変更を押下します
  ※今回は「クラス名」【m3】を編集するCSSのプログラムを記述しております
  ※下書き保存がありませんので、「変更」ボタンを押下すると即本番反映しますのでご注意ください
  ※/*   */で囲むとコメントアウトすることが可能です



8、ページエディタ画面へ戻り、「下書きプレビュー」を押下します。


9、反映した状況を確認します

↓サイトプレビュー


10、次に「スポットその2 〜有名温泉〜」を変更します。
   手順は先ほどと同じで、管理画面より下記の歯車マークを押下します



11、クラス名に【m3】を追加します。



12、下記のどちらかで「下書き保存」します



13、「下書きプレビュー」を押下します



14、反映状態を確認します
   両方同じスタイルになっています

↓サイトプレビュー




15、「下書きプレビュー」で問題ないことを確認し、「反映」ボタンを押下して、本番反映します




以上で作業は完了です。

CSSは同様の設定を複数に行うということが可能です。
同じクラス名を指定してあげることで、何度も同じプログラムを書くことなく、きれいにサイトを作成することができます。



CSSエディタのショートカットコマンド

Line Operations

Windows/Linux Mac Action
Ctrl-D Command-D Remove line
Alt-Shift-Down Command-Option-Down Copy lines down
Alt-Shift-Up Command-Option-Up Copy lines up
Alt-Down Option-Down Move lines down
Alt-Up Option-Up Move lines up
Alt-Delete Ctrl-K Remove to line end
Alt-Backspace Command-Backspace Remove to linestart
Ctrl-Backspace Option-Backspace, Ctrl-Option-Backspace Remove word left
Ctrl-Delete Option-Delete Remove word right
--- Ctrl-O Split line

Selection

Windows/Linux Mac Action
Ctrl-A Command-A Select all
Shift-Left Shift-Left Select left
Shift-Right Shift-Right Select right
Ctrl-Shift-Left Option-Shift-Left Select word left
Ctrl-Shift-Right Option-Shift-Right Select word right
Shift-Home Shift-Home Select line start
Shift-End Shift-End Select line end
Alt-Shift-Right Command-Shift-Right Select to line end
Alt-Shift-Left Command-Shift-Left Select to line start
Shift-Up Shift-Up Select up
Shift-Down Shift-Down Select down
Shift-PageUp Shift-PageUp Select page up
Shift-PageDown Shift-PageDown Select page down
Ctrl-Shift-Home Command-Shift-Up Select to start
Ctrl-Shift-End Command-Shift-Down Select to end
Ctrl-Shift-D Command-Shift-D Duplicate selection
Ctrl-Shift-P --- Select to matching bracket

Multicursor

Windows/Linux Mac Action
Ctrl-Alt-Up Ctrl-Option-Up Add multi-cursor above
Ctrl-Alt-Down Ctrl-Option-Down Add multi-cursor below
Ctrl-Alt-Right Ctrl-Option-Right Add next occurrence to multi-selection
Ctrl-Alt-Left Ctrl-Option-Left Add previous occurrence to multi-selection
Ctrl-Alt-Shift-Up Ctrl-Option-Shift-Up Move multicursor from current line to the line above
Ctrl-Alt-Shift-Down Ctrl-Option-Shift-Down Move multicursor from current line to the line below
Ctrl-Alt-Shift-Right Ctrl-Option-Shift-Right Remove current occurrence from multi-selection and move to next
Ctrl-Alt-Shift-Left Ctrl-Option-Shift-Left Remove current occurrence from multi-selection and move to previous
Ctrl-Shift-L Ctrl-Shift-L Select all from multi-selection

Go to

Windows/Linux Mac Action
Left Left, Ctrl-B Go to left
Right Right, Ctrl-F Go to right
Ctrl-Left Option-Left Go to word left
Ctrl-Right Option-Right Go to word right
Up Up, Ctrl-P Go line up
Down Down, Ctrl-N Go line down
Alt-Left, Home Command-Left, Home, Ctrl-A Go to line start
Alt-Right, End Command-Right, End, Ctrl-E Go to line end
PageUp Option-PageUp Go to page up
PageDown Option-PageDown, Ctrl-V Go to page down
Ctrl-Home Command-Home, Command-Up Go to start
Ctrl-End Command-End, Command-Down Go to end
Ctrl-L Command-L Go to line
Ctrl-Down Command-Down Scroll line down
Ctrl-Up --- Scroll line up
Ctrl-P --- Go to matching bracket
--- Option-PageDown Scroll page down
--- Option-PageUp Scroll page up

Find/Replace

Windows/Linux Mac Action
Ctrl-F Command-F Find
Ctrl-H Command-Option-F Replace
Ctrl-K Command-G Find next
Ctrl-Shift-K Command-Shift-G Find previous

Folding

Windows/Linux Mac Action
Alt-L, Ctrl-F1 Command-Option-L, Command-F1 Fold selection
Alt-Shift-L, Ctrl-Shift-F1 Command-Option-Shift-L, Command-Shift-F1 Unfold
Alt-0 Command-Option-0 Fold all
Alt-Shift-0 Command-Option-Shift-0 Unfold all

Other

Windows/Linux Mac Action
Tab Tab Indent
Shift-Tab Shift-Tab Outdent
Ctrl-Z Command-Z Undo
Ctrl-Shift-Z, Ctrl-Y Command-Shift-Z, Command-Y Redo
Ctrl-, Command-, Show the settings menu
Ctrl-/ Command-/ Toggle comment
Ctrl-T Ctrl-T Transpose letters
Ctrl-Enter Command-Enter Enter full screen
Ctrl-Shift-U Ctrl-Shift-U Change to lower case
Ctrl-U Ctrl-U Change to upper case
Insert Insert Overwrite
Ctrl-Shift-E Command-Shift-E Macros replay
Ctrl-Alt-E --- Macros recording
Delete --- Delete
--- Ctrl-L Center selection