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

関連記事

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

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

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

記事を読む

Girls skipping at an athletics carnival by Powerhouse Museum, on Flickr オッスオラ!…から転生した美少女っぽいSTINGER LADYSを早速お試させて頂きました

オッスオラ!…から転生した美少女っぽいSTINGER LADYSを早速お試させて頂きました♪(あとちょろっとbtn素材配布)

現在テーマの衣替え中につき、へんな角丸祭りになっていてすみません; Girls s

記事を読む

とつぜんですがここでクイズです。「発酵」に関する画像にチェックを入れてください。

面倒な画像認証を楽しいぷちクイズにできるGoogleAPI『reCAPTCHA』設定方法♪

※ダミー認証画像です(笑)くつきちよこ 登場人物:くつきちよこ ※管理人   佐藤 ※ゲス

記事を読む

Q&A by opensource.com, on Flickr そんなに良くある感じじゃない質問(検索ワード)への回答 第二弾

そんなに良くある感じじゃない質問(検索ワード)への回答 第二弾

検索キーワードで(個人的にツボに入ったという意味での)ヒットしたもの、及び当サイトでは該当す

記事を読む

マウスコンピュータのHDが壊れました illust by 3104o ©佐藤利音

ヱ□カテゴリにアドセンスを表示させない『Display Widgets』『Widget Logic』は創作家サイトに必須のWPプラグイン!

26歳社畜之図 佐藤利音 on Twitter  ハイ、広告表示されてないですね?

記事を読む

Image taken from page 113 of 'Lilliput Lyrics ... Edited by R. Brimley Johnson. Illustrated by Chas. Robinson' by The British Library, on Flickr googleWebフォントを使ってみたよ!副題『不機嫌ウィザードは、邪悪な女王とジャックのための毒性醸造を行います。』

2ステップでお手軽簡単な『GoogleWebフォント』を使ってみたよ!「不機嫌ウィザードは、邪悪な女王とジャックのための毒性醸造を行います。」

前から気になっていたWebフォントを使ってみました♪ Image taken from

記事を読む

A calm owl by Tambako The Jaguar, on Flickr 【お知らせ】姉妹サイト『イチパン!』復旧しました( ;∀;) くつキッチュアイキャッチ画像

【お知らせ】姉妹サイト『イチパン!』復旧しました( ;∀;)

A calm owl by Tambako The Jaguar, on Flickr Some

記事を読む

I believe I can fly - I believe I can touch the sky... by Harold Kuiper, on Flickr TOC+を使えば記事内リンクもツーステップで簡単♪ 『wp 文字まで飛ぶようにしたい』で検索されていらしたどなたかへの手紙 

TOC+を使えば同一記事内リンクもツーステップで簡単♪ 『wp 文字まで飛ぶようにしたい』で検索されていらしたどなたかへの手紙 

  秘密の抜け穴 I believe I can fly - I believe I can

記事を読む

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

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

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

記事を読む

scream and shout by Mindaugas Danys, on Flickr 『SyntaxHighlighter Evolved』がフリーズしまくりで絶望したーっ!!時の対処法。

「記事内コード表示用Wpプラグイン『SyntaxHighlighter Evolved』がフリーズしまくりで絶望したーっ!!」場合の対処法。

記事内コード表示用Wpプラグイン『SyntaxHighlighter Evolved』を適用

記事を読む

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

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

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