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-10527" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;1257713&lowbar;s&period;jpg" alt&equals;"" width&equals;"384" height&equals;"256" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>前回はStinger8のデフォルトの「ページトップへ戻る」ボタンの背景色と形を変えてみました。<&sol;p>&NewLine;<p>この元々のアイコンは矢印になっていますが、好みで変更ができます。<&sol;p>&NewLine;<p>アイコンの変更と、オリジナル画像に変更する方法の紹介です。<&sol;p>&NewLine;<p><&excl;--more--><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>アイコンの変更<&sol;h2>&NewLine;<p>アイコンの画像を変更するには「<strong>Font Awesome<&sol;strong>」を使います。<&sol;p>&NewLine;<p>Font Awesomeについては<&sol;p>&NewLine;<p>「<a href&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;8071&period;html" target&equals;"&lowbar;blank" rel&equals;"noopener"><strong>Stinger8のカスタマイズ 見出しタグh3とh4の装飾の変更<&sol;strong><&sol;a>」<&sol;p>&NewLine;<p>に詳細記事がありますので、よければご覧ください。<&sol;p>&NewLine;<p>使いたいアイコンを「Font Awesome」で探します。<&sol;p>&NewLine;<p>「Font Awesome」で使いたいアイコンを見つけたらクリックします。<&sol;p>&NewLine;<p>すると次のような画面になりますので、<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-8158" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;mo2&period;png" alt&equals;"" width&equals;"451" height&equals;"554" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>赤い枠で囲まれているコードをコピーします。<&sol;p>&NewLine;<p>※「Copy code」をクリックするとコードがコピーされます。<&sol;p>&NewLine;<p>そのコードを子テーマのフッター&lpar;footer&period;php)に貼り付けます。<&sol;p>&NewLine;<p>元のコードと書き換えると選んだアイコンになるんですね。<&sol;p>&NewLine;<p>この記述はダッシュボードの「外観」&Implies;「テーマの編集」で行います。<&sol;p>&NewLine;<p>今回のアイコン(紙飛行機)は&lt&semi;i class&equals;&&num;8221&semi;far fa-paper-plane&&num;8221&semi;&gt&semi;&lt&semi;&sol;i&gt&semi; がアイコンのコードになります<&sol;p>&NewLine;<p>しかし、子テーマにはテーマフッター&lpar;footer&period;php)がないので、<&sol;p>&NewLine;<p>親テーマからコピーしてこなければなりません。<&sol;p>&NewLine;<p>コピーの仕方がわからない場合は<br &sol;>&NewLine;「<a href&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;8126&period;html" target&equals;"&lowbar;blank" rel&equals;"noopener"><strong>Stinger8カスタマイズ タイトルをロゴ画像に phpのコピー<&sol;strong><&sol;a>」 <&sol;p>&NewLine;<p>を参照してください。<&sol;p>&NewLine;<p>コピーすると子テーマのテーマの編集にテーマフッターが追加されます。<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-8159" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;mo1&period;png" alt&equals;"" width&equals;"501" height&equals;"97" &sol;><&sol;p>&NewLine;<p>子テーマのフッター&lpar;footer&period;php)で次の部分を探します。<&sol;p>&NewLine;<p>大体50行辺りにあると思います。<&sol;p>&NewLine;<p>&nbsp&semi;<&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;">&lt&semi;&excl;&&num;8211&semi; ページトップへ戻る &&num;8211&semi;&gt&semi;<br &sol;>&NewLine;&lt&semi;div id&equals;&&num;8221&semi;page-top&&num;8221&semi;&gt&semi;&lt&semi;a href&equals;&&num;8221&semi;&num;wrapper&&num;8221&semi; class&equals;&&num;8221&semi;fas fa-angle-double-up&&num;8221&semi;&gt&semi;&lt&semi;&sol;a&gt&semi;&lt&semi;&sol;div&gt&semi;<br &sol;>&NewLine;&lt&semi;&excl;&&num;8211&semi; ページトップへ戻る 終わり &&num;8211&semi;&gt&semi;<&sol;div><&sol;div>&NewLine;<p>「fas fa-angle-double-up」はFont Awesome5のアイコンです。<&sol;p>&NewLine;<p>この部分を好みのアイコンのコードに変更します。<&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;">&lt&semi;&excl;&&num;8211&semi; ページトップへ戻る &&num;8211&semi;&gt&semi;<br &sol;>&NewLine;&lt&semi;div id&equals;&&num;8221&semi;page-top&&num;8221&semi;&gt&semi;&lt&semi;a href&equals;&&num;8221&semi;&num;wrapper&&num;8221&semi; class&equals;&&num;8221&semi;<span style&equals;"color&colon; &num;ff0000&semi;">far fa-paper-plane<&sol;span>&&num;8220&semi;&gt&semi;&lt&semi;&sol;a&gt&semi;&lt&semi;&sol;div&gt&semi;<br &sol;>&NewLine;&lt&semi;&excl;&&num;8211&semi; ページトップへ戻る 終わり &&num;8211&semi;&gt&semi;<br &sol;>&NewLine;<&sol;div><&sol;div>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-8160" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;mo4&period;png" alt&equals;"" width&equals;"514" height&equals;"49" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>変更後は次のようになります。<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-8161" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;mo3&period;png" alt&equals;"" width&equals;"180" height&equals;"96" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>気にいったアイコンが見つかればそれを使用すればよいのですが、<&sol;p>&NewLine;<p>オリジナル画像にしたいという場合もあります。<&sol;p>&NewLine;<p>オリジナル画像に変更してみます。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>アイコンフォントの画像をオリジナルに変更<&sol;h2>&NewLine;<p>先に画像を用意します。<&sol;p>&NewLine;<p>60㎝幅くらいがよいようです。<&sol;p>&NewLine;<p>画像を用意したら、Stinger8の「メディア」にアップします。<&sol;p>&NewLine;<p>アップした画像のURLをメモしておきます。<&sol;p>&NewLine;<p>(ここらへんの操作に関して解らない場合は<&sol;p>&NewLine;<p>「<a href&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;8126&period;html" target&equals;"&lowbar;blank" rel&equals;"noopener"><strong>Stinger8カスタマイズ タイトルをロゴ画像に phpのコピー<&sol;strong><&sol;a>」を参照してください。)<&sol;p>&NewLine;<p>そしてURLをコピーしたら子テーマの「footer&period;php」を開きます。<&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;">&lt&semi;&excl;&&num;8211&semi; ページトップへ戻る &&num;8211&semi;&gt&semi;<br &sol;>&NewLine;&lt&semi;div id&equals;&&num;8221&semi;page-top&&num;8221&semi;&gt&semi;&lt&semi;a href&equals;&&num;8221&semi;&num;wrapper&&num;8221&semi; <strong><span style&equals;"background-color&colon; &num;ffff00&semi;">class&equals;&&num;8221&semi;far fa-paper-plane&&num;8221&semi;<&sol;span><&sol;strong>&gt&semi;&lt&semi;&sol;a&gt&semi;&lt&semi;&sol;div&gt&semi;<br &sol;>&NewLine;&lt&semi;&excl;&&num;8211&semi; ページトップへ戻る 終わり &&num;8211&semi;&gt&semi;<&sol;div><&sol;div>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-1337" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;11&sol;yajirusi&period;png" alt&equals;"" width&equals;"54" height&equals;"58" &sol;><&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;">&lt&semi;&excl;&&num;8211&semi; ページトップへ戻る &&num;8211&semi;&gt&semi;<br &sol;>&NewLine;&lt&semi;div id&equals;&&num;8221&semi;page-top&&num;8221&semi;&gt&semi;&lt&semi;a href&equals;&&num;8221&semi;&num;wrapper&&num;8221&semi;&gt&semi;<strong><span style&equals;"background-color&colon; &num;ffff00&semi;">&lt&semi;img src&equals;&&num;8221&semi;画像のURL&&num;8221&semi;&gt&semi;<&sol;span><&sol;strong>&lt&semi;&sol;a&gt&semi;&lt&semi;&sol;div&gt&semi;<br &sol;>&NewLine;&lt&semi;&excl;&&num;8211&semi; ページトップへ戻る 終わり &&num;8211&semi;&gt&semi;<&sol;div><&sol;div>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>「class&equals;&&num;8221&semi;far fa-paper-plane&&num;8221&semi;」を削除して、画像のURLを記入します。<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-8162" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;mo6&period;png" alt&equals;"" width&equals;"408" height&equals;"131" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>ちゃんと表示されました。<&sol;p>&NewLine;<h2>Stinger8トップへ戻るボタンの変更 さいごに<&sol;h2>&NewLine;<p>やってみると、案外スムーズにできました。<&sol;p>&NewLine;<p>カスタマイズ自体はどちらかと言えば、記事のためというより、自分の備忘録のような感じで書いていますが、同じようなことで、やり方を探している人もいるのではないかと思い、残しています。<&sol;p>&NewLine;<p>あなたの参考になれば幸いです。<&sol;p>&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;

モバイルバージョンを終了