KASABUTA-ENDLESS

*

[WordPress]フッターのトップへ戻るボタンの位置を変更する方法(Hueman)

   

スポンサーリンク

[WordPress]フッターのトップへ戻るボタンの位置を変更する方法(Hueman)

ワードプレステーマ「Hueman」では、トップへ戻るボタンがフッターのど真ん中に位置している。

右側にあったほうが認知しやすいと思うので、なんとか動かしてみたいと思う。

作業と並行しながら記事を書いているので、かなり試行錯誤すると思います。

結論だけ知りたいなら飛ばしてください。

要素を検証

スタイルシートやphpなど、どこをいじればいいのかわからないので、要素を検証してみる。

「トップへ戻る」ボタンの上で「要素を検証」をクリック。

2014-12-08_171927

#back-to-topが該当してる感じですね。

右側のCSSを詳しく見てみると、

2014-12-08_211107

「text-align: center」と思いっきり記述されてますね。

要素を中央寄せに指定しているということです。

まぁ、ここらへんのCSSを変更すればいけそうな気がする。

右寄せに挑戦

試しに、子テーマのスタイルシートに

#back-to-top{text-align: right; }

と加えてみます。

残念ながら変化はありませんでした。

じゃあ、次は親テーマのスタイルシートの、

#footer-bottom #back-to-top { background: #eaeaea; color: #777; overflow: hidden; text-align: center; width: 60px; height: 30px; display: block; margin: 0 auto; margin: 0 auto -30px; 
-webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.05); 
box-shadow: inset 0 1px 0 rgba(0,0,0,0.05); }

この部分を子テーマのスタイルシートにコピペします。

そして、「text-align: center」のcenterを「right」に変更してみます。

#footer-bottom #back-to-top { background: #eaeaea; color: #777; overflow: hidden; text-align: right; width: 60px; height: 30px; display: block; margin: 0 auto; margin: 0 auto -30px; 
-webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.05); 
box-shadow: inset 0 1px 0 rgba(0,0,0,0.05); }

これでどうでしょうか。

あ~ダメだ。

こんなんなっちゃった。

2014-12-08_212302

枠の中で右寄せになっちゃったわけですから、この枠自体を動かせばいいということですな。

……

………30分後

やっとわかりました。

#footer-bottom #back-to-top {background: #ffffff; color: #777; overflow: hidden; text-align: center; width: 60px; height: 30px; display: block; float: right;  margin-right: 67px; 
-webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.05); 
box-shadow: inset 0 1px 0 rgba(0,0,0,0.05); }

「display: block」の後に「float: right」を追加しました。

その後ろにあった、「margin:~」は削除して「margin-right」を追加してます。

「margin~」を消したことによって何か不具合があるかもしれませんが、自己責任ということで。

やっとこさ右寄せが出来ました!

2014-12-08_222553

これで完了であります。

おつかれさまでした。

[WordPress]フッターのトップへ戻るボタンの位置を変更する方法(Hueman)のまとめ

無事に出来たのは良かったものの、完成品を見てみるとあんまり見た目が良くないような気もする…

もしかしたら元に戻すかもしれません…

後はどんなカスタマイズをしようかしら。

 - WordPress, 使い方

336adosensu

336adosensu

Message

メールアドレスが公開されることはありません。

  関連記事

By: Kohei Uesaka
[STINGER5]サイドバーのウィジェットとかの順番を入れ替える方法

スポンサーリンク [STINGER5]サイドバーのウィジェットとかの順番を入れ替 …

14924952180_a6cbfdafda_z
センス良いね!画像をポップアップで拡大表示するワードプレスプラグイン

Photo:Le Danseur by Roy Barnett Jr. &nbs …

By: Waiting For The Word
WordPressインデックスされない!原因と理由は?

スポンサーリンク WordPressブログがインデックスされない原因と理由を調査 …

By: Travis Isaacs
[ワードプレス]手動でcssやphpのバックアップをとるアナログな方法

[ワードプレス]cssやphpのバックアップをとる方法 ワードプレスのHowto …

By: maaco
ワードプレスで他のサイトをスクリーンショット画像とタイトル付きリンクで紹介するプラグイン?

スポンサーリンク ワードプレスの記事中で他のサイトをスクリーンショット画像とタイ …

By: NASA Goddard Space Flight Center
STINGER5でサイドバー上部にプロフィール欄を設置する方法

スポンサーリンク ワードプレステーマSTINGER5でサイドバーの最上部にプロフ …

By: Piotr Drabik
ワードプレスでカテゴリーの記事数と階層を表示させる簡単な方法

スポンサーリンク ワードプレスでカテゴリーの記事数と階層を表示させる簡単な方法 …

By: Chris Potter
画面のキャプチャ後に編集まで出来ちゃう拡張機能(アドオン)が便利らしいゾ♪

スポンサーリンク クロームやインターネットエクスプローラー、ファイアフォックス等 …

stinger5
STINGER5の文字サイズを変更する方法

つい先日、今頃になって気がついたのですけどね、 「なんか、うちのブログ、文字小さ …

By: Amanda  Cabral
[ワードプレス]flickrの写真を簡単に挿入できてクレジット表記も自動の超便利なプラグイン

スポンサーリンク flickr上の著作権フリーの写真や画像を簡単に検索・挿入でき …