Cocoonの使い方やカスタマイズとオリジナルスキン

Cocoonのページトップボタンの設定と位置を変えるカスタマイズ

スポンサーリンク
カスタマイズ
この記事は約1分で読めます。

各ページで、右下に表示される矢印マークのページトップボタンの設定と、少しだけ位置を変えるカスタマイズです。

 

スポンサーリンク

ページトップボタンの設定

Cocoon設定ボタン

Cocoon設定・ボタン

設定項目
  • トップへ戻るボタンの表示・非表示
  • ボタンのアイコンフォント選択(10種)
  • ボタンの背景色・文字色
  • ボタン画像

ボタンのアイコンフォントも複数用意されていて選択するだけで簡単に設置可能です。

ページトップボタン

アイコン、背景色、文字色を設定して保存すれば完了です。

ページトップボタン

 

カスタマイズ方法

簡単なCSS追記のみです。

CSS追記は以下のいずれかから行って下さい。

外観→カスタマイズ追加CSS

外観→テーマエディターstyle.css

 

 

表示位置を変える

ページが一番下まで表示された際に、フッターの文字とかぶる。

ページトップボタン

 

ボタンをちょこっと上にあげる

ページトップボタン:カスタマイズ

CSS

以下のCSSを追記します。

/************************
/ ページトップボタン
/************************/
#go-to-top {bottom: 80px;}

 

コメント

タイトルとURLをコピーしました