Stingerの『Page Top↑』を可愛くカスタマイズしてみた♪

公開日: : 最終更新日:2014/02/01 STINGER, ブログ, ワードプレス, ワードプレス-テーマ

  くつキッチュ!アイコン-blog くつキッチュ!アイコン wordpress

Stingerで『Page Top↑』を可愛くカスタマイズしてみた♪

WordPressブログ立ち上げでいじったそのついでといっちゃなんですが、せっかくなのでカスタマイズ戦記を記事にしていこうかと思います。
まずは、『Page Top↑』から…

Photo by Flickr CJ'sフォトストリームPhoto by CJ’s Flickr

今回くつきがカスタマイズした『Page Top↑』
カスタマイズ前提のストイックなデザインSTINGERとはいえ、ここはそこまで目立たない部分ですのでカスタマイズ必須の箇所ではないのですが…

いじったのはちょっとした遊び心です。
劇的に雰囲気が変わるということはありませんが、ちょっとした個性が演出できているかと思います♪

完成図はページ下部の『Page Top』を御覧くださいませ。

STINGER『Page Top↑』のカスタマイズCSS

やり方はとても簡単♪
Stinger style.css 697行目ぐらいから下の『ページTOP』部分をそっくり入れ替え、任意の画像URLを入れて頂くだけです。

/*-----------------------------<br />
ページTOP<br />
------------------------------*/</p>
<p>#page-top {<br />
	position: fixed;<br />
	bottom: 40px;<br />
	right: 20px;<br />
	font-size: 10px;<br />
}<br />
#page-top a {<br />
	background: #665e53;<br />
	text-decoration: none;<br />
	color: #fff;<br />
	width: 80px;<br />
	padding: 10px 5px;<br />
	text-align: center;<br />
	display: block;<br />
background-image: url('通常表示させたい画像URL');<br />
background-repeat: no-repeat;<br />
background-position: center;<br />
	border-radius: 5px;<br />
	/* CSS3 */<br />
	-moz-border-radius: 5px;<br />
	/* Firefox */<br />
	-webkit-border-radius: 5px;/* Safari,Chrome */<br />
}<br />
#page-top a:hover {<br />
	text-decoration: none;<br />
	background: #d6cdc0;<br />
	color: #665e53;<br />
background-image: url('hover(マウスを画像の上に置いた)時に表示させたい画像URL');<br />
background-repeat: no-repeat;<br />
background-position: center;<br />
}<br />

※デフォルトのCSSに使用する場合はコピペして入れ替えて下さい。
※子テーマの場合はこのまま子テーマのstyle.cssに追加コピペして下さい。
※上コードのSTINGERのバージョンは『stinger3ver20131217』です。
※必ずバックアップを取ってから、作業して下さい。

画像URL下の指定の意味は

  • background-repeat: no-repeat; 画像を繰り返しにしない。
  • background-position: center; 画像を中央に配置。

デザインによって適宜変更して下さい。

ちなみに「もっと劇的に変えたい!」という方はこちら⇒http://liginc.co.jp/をご参考にドーンと行っちゃって下さいヽ(´ー`)ノ

画像に関して

画像サイズはwidth80px hight30pxが調度よいかと思います。

色味は今回Stingerのデフォルトstyle.css(background-colorやtext-color)に合わせて調整しました。

遊び心も大事ですが、このパーツで大事なのはあくまでも『Page Top↑』のメッセージ⇒「(クリックすると)上へ戻るよ!」ですので、これを邪魔しない程度にうっすら個性を出してみたいと思います。

  1. top-a-hover2『通常表示させたい画像』⇒CSSの背景色指定が#665e53ですので、同じ系統で少し濃い目の#534d44にし、テキスト(白)の判読性を邪魔しないように注意しました。
  2. top-a2『hover(マウスを画像の上に置いた)時に表示させたい画像』⇒これも背景色はStingerのstyle.cssデフォルトの明るい#665e53を基準にテキスト(黒)の判読性を邪魔しないよう、透過20%とかなり淡い色合いになってます。

画像を背景色より少し濃い目にする方法
CSSの#から始まるカラーコードをコピーし、ピッカーのカラーコード欄(#の横の入力欄)にペーストします。
カラーコードの色がプレビューされますので、そのちょっと下あたりスポイトアイコンでクリックします。
同系統で少し濃い目の色合いが選択されます。
Stingerで『Page Top↑』をカスタマイズしてみたよ! カラー選定方法

その他『Page Top↑』サンプル

一方姉妹サイト《イチパン!》では、ガーリー前面推しの苺の『Page Top↑』でございます。

2014-01-15_00h15_23

はいはい、ガーリーガーリーヽ(´ー`)ノ

ではでは皆さま楽しいWordPress&STINGERライフを~(*´∀`*)ノシ♪

記事がお気に召しましたら投票していただけると嬉しいです♪
ブログランキング・にほんブログ村へ
にほんブログ村

  • このエントリーをはてなブックマークに追加
  • Share on Tumblr

関連記事

Advertising and Rain by Jakob Montrasio, on Flickr ネットオウル『WPblog』の広告表示位置が変わったのでルール範囲内で位置を調整するよ♪

ネットオウル『WPblog』の広告表示位置が変わったのでルール範囲内で位置を調整するよ♪

Flickrの上ヤコブMontrasioによる広告や雨   ネットオウルか

記事を読む

WordPress立ち上げメモ 助けて!TOC+の反映されない(><) TinyMCE Advancedってどんなプラグイン?等 アイキャッチ画像

ドキ!トラブルだらけのワードプレスブログ立ち上げ大会小ネタメモφ(. .)

1週間ほど前にこのブログを立ち上げまして… 思いがけないトラブルや、新規導入のプラグイン等のメモが

記事を読む

くつキッチュ!SCRAPス WPにデフォルトでインストされてるプラグイン『HelloDolly』って一体何者?

WordPress謎のプラグインHelloDollyを有効化してみた結果www

  Photo by Stéfan  いかにもなタイトルですが、釣りじゃありません。 結論から申し

記事を読む

創作ブログに最適な「LINEトーク吹き出しCSS」で、表示が崩れるときの忘備録 カスタマイズサンプルアイキャッチ画像

創作ブログにピッタリな「LINEトーク風フキダシCSS」の表示が崩れるときの忘備録

あけましておめでとうございます。   会話形式の多いブログにピッタ

記事を読む

業務連絡のお詫びとWP怪奇現象の話 Chrome怪現象?「sample.com ページは機能していません ichipan.phpapps.jp でリダイレクトが繰り返し行われました。 次をお試しください: ページを再読み込みする Cookie を消去する ERR_TOO_MANY_REDIRECTS」 

【業務連絡】素材サイト告知に関するお詫びと、WP怪奇現象の話

    『イチパン!』 ログイン画面 登場人物:くつきちよこ ※管理人

記事を読む

Initial thoughts on Bilski by opensourceway, on Flickr

amazonJsで「amazonへのレスポンスがパース出来ません」エラーが出たときの対処法

Initial thoughts on Bilski by opensourceway,

記事を読む

2013冬の陣 名古屋・松阪・静岡の旅 その1

送水口最強伝説!素敵ブログ観察記1 『送水口倶楽部様』編

素敵ブロク観察記のこと 送水口倶楽部『2013冬の陣 名古屋・松阪・静岡の旅 その1』

記事を読む

写真公開時のセキュリティに関して Online safety for kids by IntelFreePress, on Flickr

意外と知られていないExif情報のこと/写真公開時のセキュリティに関して

  Online safety for kids by IntelFreePress, on

記事を読む

「サイトへの AdSense 広告配信が停止されています」がSeesaaのタグ検索結果ページだった場合 Seesaa問題のタグ検索結果ページ

「サイトへの AdSense 広告配信が停止されています」が、Seesaaのタグ検索結果ページだった場合の対応メモ

問題のSeesaaのタグ検索結果ページのイメージ↑怖い……((((;゚Д゚))))カ

記事を読む

ブラウザのみでWordPressが使える無料サービスCloud9を使ってみたッチュ!

ブラウザのみでWordPressが使える無料サービスCloud9を使ってみたッチュ!

クラウド最強エディタ「Cloud9」が、WordPressもブラウザのみでインスト・開発・公開が

記事を読む

  • 創作クラスタ応援し隊のくつきちよこ(崛起智世子)です。 このブログは、「ネット著 作権」、「セルフプロモーション」、「ワードプレス運用」、「電子書籍サービス」、 「自己出版(セルフパブリッシング)」、「創作」等に関する情報をお届けしておりま す。 ※Wiki『創作ステージ@まちペディア』(ちょっと押してますが)作成中です♪
  • follow us in feedly
  • くつキッチュ/スクラップス! on Tumblr

  • 「表現の自由を守る党」自作応援バナー くつきちよこ

  • マウスコンピューター/G-Tune