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

関連記事

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

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

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

記事を読む

フィード取得サービスを利用して『画像付きカテゴリ別記事』を表示させる方法 その3『複眼RSS』

フィード取得サービスを利用して『画像付きカテゴリ別記事』を表示させる方法 その3『複眼RSS』

rss_watercolor_icon by mfinleydesigns, on Flic

記事を読む

サイトの名刺ファビコンテスト前哨戦-ファビコン設置方法-* アイキャッチ画像

動くファビコン、今ならアリ?

最近とんと見かけなくなった気がする動くファビコン… 今ならすごく目立つ気もしますが…実

記事を読む

IMG_20130519_144632 by smc_90, on Flickr blog表記ルール

毎日の更新でグダグダになりがちな『ブログの表記ルール』を再考してみました♪

本日は、『ブログ表記ルール』を考えたいと思います。 IMG_20130519_144632 b

記事を読む

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

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

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

記事を読む

shout! by su neko, on Flickr Wordpressの画像編集に絶望したーっ アイキャッチ画像

WordPress3.9更新後の画像編集画面に絶望したーっ!…ので、よく使うスタイル指定をメモメモ…

なんだか最近Wordpressの画像編集機能が微妙です。 3.9に更新してからというも

記事を読む

Tumblrボタン(フォロー、共有)設置方法 記事下設置やプロフィールへの設置、その他シェア方法など イチパン!サンプル

WordPressでTumblrボタンを実装してみた(記事下、サイドバーへの設置、その他シェア方法など)

  Share on Tumblr こちら、昨日作ったくつキッチュの姉妹サイト『イチ

記事を読む

フィード取得サービスを利用して『画像付きカテゴリ別記事』を表示させる方法 その2『Google Feed API』

フィード取得サービスを利用して『画像付きカテゴリ別記事』を表示させる方法 その2『Google Feed API』

もくじ Laser engraved RSS icon by Book Wor

記事を読む

boxo fart by boxo, on Flickr Some rights reserved ネットオウルWPblog利用中方はプラグイン「w3-total-cache」インストールしちゃダメ!ゼッタイ! アイキャッチ画像

ネットオウルWPblog利用中方はプラグイン「w3-total-cache」をインストールしちゃ、ダメ!ゼッタイ!

なあ……ワードプレスなんですぐ死んでしまうん?~~(  ゜  ゜) なあ……なんでなん

記事を読む

Don't Panic Badge by Jim Linwood, on Flickr いきなり来た!「データベース接続確率エラー」

いきなり来た!「データベース接続確率エラー」∑(゚Д゚)ガーン

  Don&#x27;t Panic Badge by Jim Linwood, on

記事を読む

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

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

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