[WordPress]フッターのトップへ戻るボタンの位置を変更する方法(Hueman)
[WordPress]フッターのトップへ戻るボタンの位置を変更する方法(Hueman)
ワードプレステーマ「Hueman」では、トップへ戻るボタンがフッターのど真ん中に位置している。
右側にあったほうが認知しやすいと思うので、なんとか動かしてみたいと思う。
作業と並行しながら記事を書いているので、かなり試行錯誤すると思います。
結論だけ知りたいなら飛ばしてください。
要素を検証
スタイルシートやphpなど、どこをいじればいいのかわからないので、要素を検証してみる。
「トップへ戻る」ボタンの上で「要素を検証」をクリック。
#back-to-topが該当してる感じですね。
右側のCSSを詳しく見てみると、
「text-align: center」と思いっきり記述されてますね。
要素を中央寄せに指定しているということです。
まぁ、ここらへんのCSSを変更すればいけそうな気がする。
右寄せに挑戦
試しに、子テーマのスタイルシートに
[css]#back-to-top{text-align: right; }[/css]
と加えてみます。
…
残念ながら変化はありませんでした。
じゃあ、次は親テーマのスタイルシートの、
[css]#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); }[/css]
この部分を子テーマのスタイルシートにコピペします。
そして、「text-align: center」のcenterを「right」に変更してみます。
[css]
#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); }[/css]
これでどうでしょうか。
…
あ~ダメだ。
こんなんなっちゃった。
枠の中で右寄せになっちゃったわけですから、この枠自体を動かせばいいということですな。
…
……
………30分後
やっとわかりました。
[css]#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); }[/css]
「display: block」の後に「float: right」を追加しました。
その後ろにあった、「margin:~」は削除して「margin-right」を追加してます。
「margin~」を消したことによって何か不具合があるかもしれませんが、自己責任ということで。
やっとこさ右寄せが出来ました!
これで完了であります。
おつかれさまでした。
[WordPress]フッターのトップへ戻るボタンの位置を変更する方法(Hueman)のまとめ
無事に出来たのは良かったものの、完成品を見てみるとあんまり見た目が良くないような気もする…
もしかしたら元に戻すかもしれません…
後はどんなカスタマイズをしようかしら。
336adosensu
336adosensu
関連記事
-
便利スギィ!!投稿編集画面でペイント・お絵かき出来るワードプレスプラグイン「deviantART muro」
ワードプレスの記事投稿で画像を使用したい時に、 「ペイント等で画像を作成・保存→ …
-
wordpress「Parse error: syntax error, unexpected~backwpup/backwpup.php on line 69」PHPバージョンアップで治る
どうも。 久しぶりにブログのプラグインをアップデートしたところ、やはりエラーが発 …
-
ブログの写真・画像に枠をつけてチョット綺麗に見せる方法
スポンサーリンク ブログに掲載する写真や画像に枠をつけてチョット綺麗に見せる簡単 …
-
[Hueman使い方]サイドバーの背景色を変更する方法。その2
スポンサーリンク [Hueman使い方]サイドバーの色を変更する方法。その2 前 …
-
WordPressのテーマをCocoonに変更。Stinger5から約3年ぶり
どうも。 やる気になったらそのときにやるべし。 今からワードプレスのテーマを変更 …
-
アクセス数の激減。cocoonに変更直後から。もとに戻して確認してみる
どうも。 先日、衝撃のメールが届きました。 グーグルアナリティクスからアクセス解 …
-
スマホにも強い!STINGER5のインストール手順
先日、大人気のワードプレステーマ「STINGERシリーズ」作者のENJIさんが新 …
-
画面のキャプチャ後に編集まで出来ちゃう拡張機能(アドオン)が便利らしいゾ♪
スポンサーリンク クロームやインターネットエクスプローラー、ファイアフォックス等 …
-
エラー105「DNS ルックアップでエラーが発生したため…」の解決方法
DNS ルックアップでエラーが発生したため、kasabuta-endless.n …
-
[WordPress]投稿日付と時間の表示を変更する。あと投稿者名を削除する方法(Hueman)
スポンサーリンク [WordPress]投稿日付と時間の表示を変更する。 あと投 …