ヘルプ

  1. ピッパサックTOP
  2. ヘルプ
  3. サイト編集
  4. CSS編集（上級）

CSS編集（上級）

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

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


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


↓サイトプレビュー


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



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



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



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



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



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



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


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

↓サイトプレビュー


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



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



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



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



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

↓サイトプレビュー




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




以上で作業は完了です。

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

関連ヘルプ

ページ

 サイト編集 ページ 固定ページを作成したり、ページの一覧を見ることができます。 ページの詳細設定や自由な編集ができます。 ※Free：５ページまで / Bussines：50ページまで / Exclusive / 1000ページまで

ブログ

 サイト編集 ブログ ブログを投稿しタグを付けることでフィルターをかけてブログの記事を表示させることができます。 例えば、「重要なお知らせ」というタグと、 「スタッフブログ」というタグを付けます。 ページエディタでブログパーツを埋め込みます。 タグ：のところを未選択にすると、投稿したブログ記事が全一覧で表示されます。 サイトプレビュー↓ タグにスタッフブログを入れ...

イベント

 サイト編集 イベント イベントでは通常のリスト表示に加え、カレンダー表示も出来るようになっています。※表示切替方法 イベントを登録したら、パーツでイベントの設定をします 右の歯車を押すとパーツの設定画面が表示され、 タイプをカレンダーにすると↓のようにカレンダーになります。

フォーム

 サイト編集 フォーム フォームを作成しサイト上で表示可能な機能です。 フォームで作成されたものは、アンケートやお問い合わせ等に使用可能です。 項目は自由に追加できますので用途に合わせて作成をしてください。

ワンターンフォーム（会員）

 サイト編集 ワンターンフォーム 会員向けにワンターンフォームを作成する事が可能です。会員は課題ページからフォーム入力を行いワンターンフォームを提出することが出来ます。 ①こちらから新しいフォームを追加することが出来ます。 ②indexはワンターンフォーム個々のIDです。 ③タイトルはフォームのタイトルです。 ④ワンターンフォームのサイトURLです。 ⑤編集ボタンからフォームの編集ができ...

ナビゲーション

 サイト編集 ナビゲーション   ①ナビゲーション名を入力して、項目を追加します。 ②タイトルには追加したナビゲーション名を表示します。 ③ナビゲーションの編集ができます。 ④ナビゲーションの複製ができます。 ⑤ナビゲーションの削除ができます。 タイトルを入れ、項目追加するとナビゲーションが追加できます。  

階層メニュー

 サイト編集 階層メニュー 仕組みはナビゲーションと同じです。 階層メニュー追加でメニュー名を入れて項目を追加しましょう。 すると階層メニュー一覧に先程追加したメニューが表示されます。 ①ナビゲーション名を入力して、項目を追加します。 ②タイトルには追加したナビゲーション名を表示します。 ③ナビゲーションの編集ができます。 ④ナビゲーションの複製ができます。 ⑤ナビゲー...

ギャラリー

 サイト編集 ギャラリー 「ページエディター」の「パーツを追加」からギャラリーを選択します。 ①ギャラリーのタイトルです。 新規でギャラリーを追加した場合は、タイトルが自動で割り振られます。 タイトルは左のサイドバーから「サイト編集」→「ギャラリー」を選択し、ページ移動してテキストボックスから変更することができます。 ②様々な表示タイプを選択することができます ※表示タイプ（...

ファイル管理

 サイト編集 ファイル管理 ここでは、サイトに関するすべてのファイルの操作が可能です。 画像アップロード、ディレクトリ作成、ファイル管理などが出来ます。  

OAuth設定

 サイト編集 OAuth設定 OAuth（オープン認証）とは、インターネットを通じて、一つのサービス（プロバイダ）のリソースを別のサービス（消費者）が安全に利用できるようにするための設定です。 アカウントの管理が煩雑にならずに済むというのが、Oauth機能のメリットになります。 但し、Googleは準備中のため、現在はkomachiとしか連携していません。