デジタルグッズ自腹レポ・Wordpress関連。＋バツ1おっさんのライフハック。

Stinger8のページトップボタンを目立たせてみた。 [WordPress]

投稿日：2018年8月13日更新日：2018年8月16日

page-top-button_imgs01

主張が強すぎるのもなんですが、あまりにも目立ってないので手を加えてみました。

↑右端にあるこれね。
（わかりずらいので、囲ってみました。）

style.cssを変更

差分はこんな感じです。

#page-top {
	right: 20px;
}
#page-top a {
	background: #f3f3f3;
	color: #222;
	border: 1px #222 solid;
	border-radius: 24px;
	-webkit-border-radius: 24px;
	-moz-border-radius: 24px;
}
#page-top a:hover {
	background: #222;

#page-top {

right: 20px;

}

#page-top a {

background: #f3f3f3;

color: #222;

border: 1px #222 solid;

border-radius: 24px;

-webkit-border-radius: 24px;

-moz-border-radius: 24px;

}

#page-top a:hover {

background: #222;

ボタンを丸くして右から少し離してみた。

page-top-button_imgs02

マウスオーバーは色を反転。

page-top-button_imgs03

テーマをいじる場合は、必ずバックアップをとり、自己責任で作業してください。
また、子テーマで作業するのが望ましいです。

-WordPress
-WP, カスタム, スタイルシート

: ソネブロからワードプレスへ。

So-netで「デジモノ大好き」をやっていましたが、ワードプレスで再出発です。何かと話題のSTINGER。アフィリエイター向けの無料テーマとして有名ですが、さらにアフィリエイトに特化したAFFIN …

: Stinger8パンくずリストをおしゃれにカスタマイズしてみた。 [WordPress]

ナビゲーション系のカスタマイズ連投になりますが、今回はパンくずリストです。デフォルトは色が薄く目立たないので、アイコンを付けたり、hoverで色付けしたりとちょこっと目立たせています。今回はいつも …

: Stinger8ページナビ「PREV」「NEXT」をカスタマイズしてみた。 [WordPress]

関連記事直下にある「PREV」「NEXT」を削除や非表示してるところもあるけど、サイト内リンクを削除してしまうのはもったいない。せっかくなので、触ってもらえるようにカスタマイズしてみました。今回手 …

: カテゴリーの表示を個性的にしてみた。 [WordPress]

カテゴリー表示はテーマそのままだとちょっと寂しいので、少し手を加えてみました。今回手を加えたのは、style.cssとfunctions.php。カテゴリーの親子関係の表示を調整。 style.c …

: Stinger8のタイトルとキャッチフレーズをセンタリングしてみた。 [WordPress]

Stinger8のタイトルとキャッチフレーズはデフォルトだと左寄せになります。 style.cssに追記するだけ style.css に以下を追記。 [crayon-5c17f60b9c37e4711 …