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

関連記事

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

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

  Online safety for kids by IntelFreePress, on

記事を読む

【お知らせ】姉妹サイト『イチパン!』を半年後をめどに閉店させていただきます。 アイキャッチ画像 illust by くつきちよこ

【お知らせ】姉妹サイト『イチパン!』を半年後をめどに閉店させていただきます(*´▽`*)ノシ~

イラスト:くつきちよこ   登場人物:くつきちよこ ※管理人   佐

記事を読む

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

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

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

記事を読む

livedoorブログの縦書きテンプレート『縦書き(β)』を、お試してみました♪ livedoorブログ縦書き用テンプレート『縦書き(β)』の使ってみたサンプル。最後の行に、強制両端揃えの不具合がみられる。

livedoorブログの縦書きテンプレート『縦書き(β)』を、お試してみました♪

  livedoorブログ『縦書(β)』サンプルブログ くつきちよこ 登場人物:くつき

記事を読む

人生でやりたい100のリスト アイキャッチ画像 Miami Beach sightseeing bus tour - Ocean Drive by interbeat, on Flick

記事を書いているだけで人生が楽しくなった!「人生でやりたい100のリスト」がめっちゃオススメ!!

昨日こちらのテーマ(子テーマヘッダー部分CSS)でお世話になっておりますQtaro さん

記事を読む

Title:Peeking Diet Bos on Flickr Some rights reserved

今さらだけど、大事な事!「写真をブログにアップする時の注意点」

  Title:Peeking Diet Bos on Flickr Some right

記事を読む

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

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

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

記事を読む

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

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

もくじ Laser engraved RSS icon by Book Wor

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

スポンサードリンク

スポンサードリンク

Comment

  1. […] こちらは、『創作支援屋 くつキッチュスクラップス!』さんのこちらの記事の通りにやりました。ご参照ください! […]

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


Time limit is exhausted. Please reload CAPTCHA.

スポンサードリンク

スポンサードリンク

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

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

  • くつキッチュ!SCRAPス アイコン 創作支援 カテゴリへ《創作支援》

    くつキッチュ!アイコン カテゴリwordpress全般へ 《WP関係》

    くつキッチュ!アイコン-copyright-著作権カテゴリへ  《著作権関係》

    くつキッチュ!アイコン小ネタ/物語用小ネタ カテゴリへ  《小ネタ/物語用小ネタ etc...》
    ※オンマウスでタイトルが表示されます。




『創作支援屋くつキッチュスクラップス!』は、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。