Warning: Constant POST_PLUGIN_LIBRARY already defined in /home/pasora/pasona-sp.com/public_html/wp-content/plugins/similar-posts/similar-posts.php on line 27
Stinger8カスタマイズ ページトップへ戻るボタンの背景色変更 | 思いだし にっき
サイトアイコン 思いだし にっき

Stinger8カスタマイズ トップへ戻るボタンの背景色変更

<p><img class&equals;"aligncenter size-full wp-image-11633" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;2819080&lowbar;s&period;jpg" alt&equals;"" width&equals;"384" height&equals;"288" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>Stinger8のカスタマイズをしていて、下の方にスクロールした時に「トップへ戻るボタン」がないのが不便だなあと思い、追加しようと思っていたら・・<&sol;p>&NewLine;<p>よく見ると・・・なんと元々あったんですね!&lpar;ï¿£&Dcy;ï¿£&semi;&rpar; あまりに薄くで見えませんでした。<&sol;p>&NewLine;<p>画面右下に、ホコリのように白いなんかがあります。<br &sol;>&NewLine;それが<strong>トップに戻るボタン<&sol;strong>でした。<&sol;p>&NewLine;<p>あまりに薄くて見えないくらいなので、このボタンをカスタマイズすることにしました。<&sol;p>&NewLine;<p><&excl;--more--><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>トップへ戻るボタンの背景色の変更<&sol;h2>&NewLine;<div class&equals;"sb-type-drop">&NewLine;&Tab;<div class&equals;"sb-subtype-a">&NewLine;&Tab;&Tab;<div class&equals;"sb-speaker">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;&Tab;<img src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;plugins&sol;speech-bubble&sol;img&sol;s&lowbar;j9&period;png" class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-name">波空<&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;<div class&equals;"sb-content">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-speech-bubble">白い埃のようなもの・・・これがデフォルトの「トップへ戻る」ボタンです。<&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;<&sol;div>&NewLine;<&sol;div>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-8145" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;top2&period;png" alt&equals;"" width&equals;"273" height&equals;"140" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<div class&equals;"sb-type-drop">&NewLine;&Tab;<div class&equals;"sb-subtype-b">&NewLine;&Tab;&Tab;<div class&equals;"sb-speaker">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;&Tab;<img src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;plugins&sol;speech-bubble&sol;img&sol;icon&lowbar;n2&period;png" class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-name">猫にゃん<&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;<div class&equals;"sb-content">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-speech-bubble">う~ん、言われてもよく見ないとわからないくらい薄い! <&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;<&sol;div>&NewLine;<&sol;div>&NewLine;<div class&equals;"sb-type-drop">&NewLine;&Tab;<div class&equals;"sb-subtype-a">&NewLine;&Tab;&Tab;<div class&equals;"sb-speaker">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;&Tab;<img src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;plugins&sol;speech-bubble&sol;img&sol;s&lowbar;j1&period;png" class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-name">波空<&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;<div class&equals;"sb-content">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-speech-bubble">まずは「トップへ戻る」ボタンの背景色を変更してみました。<&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;<&sol;div>&NewLine;<&sol;div>&NewLine;<p>ダッシュボードの「外観」&Implies;「テーマの編集」で子テーマのスタイルシートを開きます。<&sol;p>&NewLine;<p>スタイルシート&lpar;style&period;css&rpar;の一番下に次のコードを追加します。<&sol;p>&NewLine;<div class&equals;"su-note" style&equals;"border-color&colon;&num;dae3e4&semi;border-radius&colon;2px&semi;-moz-border-radius&colon;2px&semi;-webkit-border-radius&colon;2px&semi;"><div class&equals;"su-note-inner su-u-clearfix su-u-trim" style&equals;"background-color&colon;&num;f4fdfe&semi;border-color&colon;&num;ffffff&semi;color&colon;&num;090101&semi;border-radius&colon;2px&semi;-moz-border-radius&colon;2px&semi;-webkit-border-radius&colon;2px&semi;">&NewLine;&ast;&&num;8211&semi; トップへ戻るボタン &&num;8211&semi;&ast;&sol;<br &sol;>&NewLine;&num;page-top &lbrace;<br &sol;>&NewLine;bottom&colon; 20px&semi;&sol;&ast;下側からの位置&ast;&sol;<br &sol;>&NewLine;right&colon; 20px&semi;&sol;&ast;右側からの位置&ast;&sol;<br &sol;>&NewLine;font-size&colon; 50px&semi;&sol;&ast;アイコンのサイズ&ast;&sol;<br &sol;>&NewLine;&rcub;<&sol;p>&NewLine;<p>&num;page-top a &lbrace;<br &sol;>&NewLine;padding&colon; 5px&semi;&sol;&ast;アイコン内の余白&ast;&sol;<br &sol;>&NewLine;width&colon; 50px&semi;&sol;&ast;横の幅&ast;&sol;<br &sol;>&NewLine;height&colon; 50px&semi;&sol;&ast;高さ&ast;&sol;<br &sol;>&NewLine;line-height&colon; 45px&semi;&sol;&ast;アイコンの配置&ast;&sol;<br &sol;>&NewLine;background&colon; &num;f08080&semi;&sol;&ast;ここに背景の色を入れてください &ast;&sol;<br &sol;>&NewLine;&rcub;<br &sol;>&NewLine;<&sol;div><&sol;div>&NewLine;<p>記述したら「ファイルを更新」をクリックします。<&sol;p>&NewLine;<p style&equals;"text-align&colon; center&semi;">図のようになりました。↓<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-8147" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;top4&period;png" alt&equals;"" width&equals;"217" height&equals;"148" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-8151" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;top3&period;png" alt&equals;"" width&equals;"473" height&equals;"342" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>背景の色は「background」で指定します。<&sol;p>&NewLine;<p>図の赤枠のところに好きな色のコードを設定することで変えられます。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>色のコードは色々なサイトで調べられますが<br &sol;>&NewLine;<a href&equals;"https&colon;&sol;&sol;www&period;colordic&period;org&sol;" target&equals;"&lowbar;blank" rel&equals;"noopener"><strong>原色大辞典<&sol;strong><&sol;a><&sol;p>&NewLine;<p><a href&equals;"https&colon;&sol;&sol;ironodata&period;info&sol;search&sol;" target&equals;"&lowbar;blank" rel&equals;"noopener"><strong>配色の見本帳<&sol;strong><&sol;a><&sol;p>&NewLine;<p>などが解りやすいかもしれません。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>トップに戻るボタンを丸くする<&sol;h2>&NewLine;<div class&equals;"sb-type-drop">&NewLine;&Tab;<div class&equals;"sb-subtype-a">&NewLine;&Tab;&Tab;<div class&equals;"sb-speaker">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;&Tab;<img src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;plugins&sol;speech-bubble&sol;img&sol;s&lowbar;j1&period;png" class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-name">波空<&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;<div class&equals;"sb-content">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-speech-bubble"> デフォルトではアイコンは四角い枠に矢印があるんだけど・・。これを丸にしてみました。<&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;<&sol;div>&NewLine;<&sol;div>&NewLine;<div class&equals;"sb-type-drop">&NewLine;&Tab;<div class&equals;"sb-subtype-b">&NewLine;&Tab;&Tab;<div class&equals;"sb-speaker">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;&Tab;<img src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;plugins&sol;speech-bubble&sol;img&sol;icon&lowbar;n2&period;png" class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-name">猫にゃん<&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;<div class&equals;"sb-content">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-speech-bubble"> 丸のがボタンぽいにゃ <&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;<&sol;div>&NewLine;<&sol;div>&NewLine;<p>スタイルシート&lpar;style&period;css&rpar;に次のコードを追加します。<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-8148" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;top6&period;png" alt&equals;"" width&equals;"346" height&equals;"55" &sol;><&sol;p>&NewLine;<div class&equals;"sb-type-drop">&NewLine;&Tab;<div class&equals;"sb-subtype-a">&NewLine;&Tab;&Tab;<div class&equals;"sb-speaker">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;&Tab;<img src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;plugins&sol;speech-bubble&sol;img&sol;s&lowbar;j1&period;png" class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-name">波空<&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;<div class&equals;"sb-content">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-speech-bubble"> 丸みの調整はコード内の%の部分を変更すると変わりますね。好みで設定します。<&sol;p>&NewLine;<p>&NewLine;<&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;<&sol;div>&NewLine;<&sol;div>&NewLine;<div class&equals;"su-note" style&equals;"border-color&colon;&num;dae3e4&semi;border-radius&colon;2px&semi;-moz-border-radius&colon;2px&semi;-webkit-border-radius&colon;2px&semi;"><div class&equals;"su-note-inner su-u-clearfix su-u-trim" style&equals;"background-color&colon;&num;f4fdfe&semi;border-color&colon;&num;ffffff&semi;color&colon;&num;090101&semi;border-radius&colon;2px&semi;-moz-border-radius&colon;2px&semi;-webkit-border-radius&colon;2px&semi;">&NewLine;&num;page-top a&lbrace;<br &sol;>&NewLine;border-radius&colon;30px&semi;&sol;&ast;角を丸くする&ast;&sol;<br &sol;>&NewLine;&rcub;<br &sol;>&NewLine;<&sol;div><&sol;div>&NewLine;<div class&equals;"sb-type-drop">&NewLine;&Tab;<div class&equals;"sb-subtype-a">&NewLine;&Tab;&Tab;<div class&equals;"sb-speaker">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;&Tab;<img src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;plugins&sol;speech-bubble&sol;img&sol;s&lowbar;j1&period;png" class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-name">波空<&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;<div class&equals;"sb-content">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-speech-bubble"> こんな感じになりました(^^)<br &sol;>&NewLine;<&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;<&sol;div>&NewLine;<&sol;div>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-8149" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;top7&period;png" alt&equals;"" width&equals;"321" height&equals;"136" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<div class&equals;"sb-type-drop">&NewLine;&Tab;<div class&equals;"sb-subtype-a">&NewLine;&Tab;&Tab;<div class&equals;"sb-speaker">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;&Tab;<img src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;plugins&sol;speech-bubble&sol;img&sol;s&lowbar;j1&period;png" class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-name">波空<&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;<div class&equals;"sb-content">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-speech-bubble"> アイコンの形を変更したり、オリジナル画像に変更したりもできるんだけど・・どうも、また他のPHPをコピーしなくちゃだめみたいなので・・・次にします<&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;<&sol;div>&NewLine;<&sol;div>&NewLine;<div class&equals;"sb-type-drop">&NewLine;&Tab;<div class&equals;"sb-subtype-b">&NewLine;&Tab;&Tab;<div class&equals;"sb-speaker">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;&Tab;<img src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;plugins&sol;speech-bubble&sol;img&sol;icon&lowbar;n2&period;png" class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-name">猫にゃん<&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;<div class&equals;"sb-content">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-speech-bubble"> ほんとにできるのかにゃ?じゃあ、それは次ということでなんか食べに行こうよ~ <&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;<&sol;div>&NewLine;<&sol;div>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><a href&equals;"&sol;&sol;www&period;blogmura&period;com&sol;ranking&period;html"><img src&equals;"&sol;&sol;www&period;blogmura&period;com&sol;img&sol;www88&lowbar;31&period;gif" alt&equals;"" width&equals;"88" height&equals;"31" border&equals;"0" &sol;><&sol;a><br &sol;>&NewLine;<a href&equals;"&sol;&sol;www&period;blogmura&period;com&sol;ranking&period;html">にほんブログ村<&sol;a><&sol;p>&NewLine;&NewLine;


Warning: Undefined array key "adsense_ad_type" in /home/pasora/pasona-sp.com/public_html/wp-content/plugins/quick-adsense-reloaded/includes/amp-condition-display.php on line 298

Warning: Undefined array key "adsense_ad_type" in /home/pasora/pasona-sp.com/public_html/wp-content/plugins/quick-adsense-reloaded/includes/amp-condition-display.php on line 298

Warning: Undefined array key "adsense_ad_type" in /home/pasora/pasona-sp.com/public_html/wp-content/plugins/quick-adsense-reloaded/includes/amp-condition-display.php on line 298
モバイルバージョンを終了