速報・最新ネタ

ニュースネットでお小遣い稼ぎ

STINGER5初心者でも簡単にページトップボタンの大きさと色をカスタマイズする方法

   

Sponscred Links

初心者でも簡単にページトップボタンの大きさと色をカスタマイズする方法

STINGER5ページトップボタンって下画像のようにちょっとダサくないですか?

必ずSTINGER5をバックアップしてから自己責任で行ってください

このサイトの情報より行ったカスタマイズによるすべての責任は負いかねます

バックアップの方法はこちらから

目次
■ ページトップボタンを左にずらしてみた
■ ページトップボタンをちょっと大きく表示してみた
■ STINGER5のいろいろなカスタマイズもよろしければ参考にしてください

■ ページトップボタンを左にずらしてみた

画像でもお分かりの通り右に張り付いてちょっと分かりずらい。

色もグレーとちょっと残念な感じがしますよね。

ページトップへボタン

デフォルトではPAGE TOPボタンが右に寄っているのでこれを少し離してみます。

ワードプレスの(ダッシュボード)から「外観」→「テーマの編集」→「styke.css」をクリックします。

ページトップへボタン2-2
styke.css

#page-top {
position: fixed;
z-index: 9999;
bottom: 20px;
right: 0px;
font-size: 12px;
}
#page-top a {
background: #665e53;
text-decoration: none;
color: #fff;
padding: 10px;
text-align: center;
display: block;
-moz-opacity: 0.3;
opacity: 0.3;
}

right: 0px;これが右サイドに張り付いている原因。

ここを、

right: 25px;左に寄せてみた。

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

はい、できましたね。

■ ページトップボタンをちょっと大きく表示してみた

次に、ページトップボタンをちょっと大きく表示してみます。

bottom: 20px;→30px;

font-size: 12px;→35px;

に変更してみました。

数字を変更するだけですので、自分の好みに合わせてカスタマイズしてみてください。

/*——————————–
PAGE TOP
———————————*/
#page-top {
position: fixed;
z-index: 9999;
bottom: 30px;
right: 25px;
font-size: 35px;
}

次に色を変更してみます、下に記載しているコード。

background: #665e53;→#e0ffff;

color: #fff;→#0000cd;

明るいブルーと薄いブルーに変更色を変えてみました。

カラーコードを書き換えてお好きな自分好みの色に変更できます。

カラーコードはこちらからどうぞ

#page-top {
position: fixed;
z-index: 9999;
bottom: 30px;
right: 25px;
font-size: 35px;
}
#page-top a {
background: #e0ffff;
text-decoration: none;
color: #0000cd;
padding: 20px 25px;
text-align: center;
display: block;
-moz-opacity: 0.3;
opacity: 0.3;
border-radius: 5px;
}

ページトップへボタン初心者でも簡単にカスタマイズ

マウスを当てると以下のようにカラーチェンジします。

ページトップへボタン初心者でも簡単にカスタマイズ

このように変更できました、お疲れさまでした。

Sponscred Links

■ STINGER5のいろいろなカスタマイズもよろしければ参考にしてください

STINGER5のトップページに、最新投稿記事の全文を1件だけ表示する方法!初心者用・簡単カスタマイズ

STINGER5のh2・h3・h4見出しカスタマイズ|プロのような見出しを初心者でも簡単に作る方法

STINGER5・h2~h4デフォルト見出しをAddQuickTagを使って簡単に使用する方法

初心者の私にもできた!!STINGER5のh2見出しをカスタマイズする簡単な方法

STINGER5初心者ができた、ヘッダー画像設定とヘッダーのサイズを変更する簡単な方法http://sokuhou.top/%E3%80%8C/post-1554/%E3%80%8D

STINGER5の進化版STINGER6の情報もあるよ。

STINGER6というWordPressテーマと子テーマのインストール|SEOに強いSTINGER5を改良!!http://sokuhou.top/%E3%80%8C/post-1538/%E3%80%8D

 - 未分類 , , ,