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
WordPressテーマStinger3の見出しタグのカスタマイズ | 思いだし にっき
サイトアイコン 思いだし にっき

WordPressテーマStinger3の見出しタグのカスタマイズ

<p>ブログを描いていると文章の中身をわかりやすくするために見出しを使います。<&sol;p>&NewLine;<p>ワードプレスのテーマによって、初期設定はさまざまですが、もう少しこんな風にしたいとか。<&sol;p>&NewLine;<p>こだわりたい時もありますね。<&sol;p>&NewLine;<p>最初のころは、見出しをつけることすら知らなかったので、つけた方がわかりやすいと解った時も、自分でそれらを変更するという考えもありませんでした(^^;) が・・・・<&sol;p>&NewLine;<p><&excl;--more--><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>見出しタグh2やh3を変えたい<&sol;h2>&NewLine;<p><strong>Stinger3の見出しタグ<&sol;strong>はそのままでも結構いいかなと思う反面、<br &sol;>&NewLine;h2のボーダーの色や太さをもう少し変えたいな、とか・・<&sol;p>&NewLine;<p>ささやかな変更をしたい欲求にかられ、変更方法を探してみました。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>h2見出しのボーダーの変更<&sol;h2>&NewLine;<p>これはスタイルシートを少し変えればいいだけなのでやってみた。<&sol;p>&NewLine;<p>ダッシュボードの外観からテーマの編集をクリック。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-2089 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;01&sol;sm1&period;png" alt&equals;"CSSへ" width&equals;"213" height&equals;"315" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>右欄の「スタイルシート」をクリックして、表示させる<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-2090 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;01&sol;sm2&period;png" alt&equals;"スタイルシート" width&equals;"258" height&equals;"252" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>全体の1&sol;4くらいのところにある見出しの部分がそれにあたる。<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-2091" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;01&sol;sm3&period;png" alt&equals;"h2のCSS" width&equals;"629" height&equals;"392" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h3>ボーダーカラーと幅を変更<&sol;h3>&NewLine;<p>色はこちらを参照。 <a href&equals;"http&colon;&sol;&sol;www&period;colordic&period;org&sol;">カラー表<&sol;a><&sol;p>&NewLine;<p>ダークレッド(darkred &num;8b0000)にしてみました。<br &sol;>&NewLine;太さ(幅)は5pxから10pxへ。<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-2092" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;01&sol;sm4&period;png" alt&equals;"h2の変更" width&equals;"618" height&equals;"393" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;&NewLine;<&excl;-- WP QUADS v&period; 2&period;0&period;92 Shortcode Ad -->&NewLine;<div class&equals;"quads-location quads-ad" id&equals;"quads-ad" style&equals;"">&NewLine;<&sol;div>&NewLine;&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>h3の色の変更<&sol;h2>&NewLine;<p>h2の変更から少し下にスクロールするとh3のタグの設定があります。<&sol;p>&NewLine;<p>h3タグは「チェック」デザインになっているので、そのまま使用。<&sol;p>&NewLine;<p>色を変えてみた。<&sol;p>&NewLine;<p>background-image&colon; url&lpar;images&sol;cah3-bk&period;png&rpar;&semi;の部分の&lpar;images&sol;cah3-bk&period;png&rpar;を好みで変えればOK<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-2093" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;01&sol;sm5&period;png" alt&equals;"h3変更" width&equals;"606" height&equals;"426" &sol;><&sol;p>&NewLine;<p> <br &sol;>&NewLine;図のように色が変更できます。<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-2080" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;01&sol;タグh3&period;png" alt&equals;"h3のチェックマークの色" width&equals;"405" height&equals;"99" &sol;><&sol;p>&NewLine;<p>※これは最近のバージョンのみのようです。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>h4の背景色の変更<&sol;h2>&NewLine;<p>h4もh3から下にスクロールしたところに表示されています。<&sol;p>&NewLine;<p>h4はあまり使うこともないけど、試しに背景の色を変えてみました。<br &sol;>&NewLine;カラー表から好みの色を選択、バックグランドカラーを変更。<br &sol;>&NewLine;少し濃いめの色になってしまいましたが・・・これでしばらく様子見。<&sol;p>&NewLine;<p>最後に変更を保存して完了。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-2094 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;01&sol;sm6&period;png" alt&equals;"保存" width&equals;"601" height&equals;"390" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>さて、どんな感じになったかプレビューで確認してみるも・・<&sol;p>&NewLine;<p>あれ??あれれ??なんで変わってないの!?<br &sol;>&NewLine; <br &sol;>&NewLine; <br &sol;>&NewLine;ここで再度CSSを見直したり、再度更新してみたり・・<br &sol;>&NewLine;それでも元のままでした。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>変更が反映されない!対処は<&sol;h2>&NewLine;<p>今回、反映されない変更の原因は自分にあると、必死で見直すも変わらず。<br &sol;>&NewLine;ここでまたもや調べ直したら、他にも悩んだ人がいました。<&sol;p>&NewLine;<p>やっぱり反映されないことってあるようです。<&sol;p>&NewLine;<p>私の場合は<strong>キャッシュが原因<&sol;strong>でした。<&sol;p>&NewLine;<p>キャッシュが残ってることが原因の場合があります。<&sol;p>&NewLine;<p>キャッシュに、過去に閲覧した履歴が残っているため、いくら再表示しても変わらなかったのですね。<br &sol;>&NewLine;この場合のキャッシュは最初にサイトを観た時にそれを記録してある・・<br &sol;>&NewLine;要は二回目以降にそのサイトを観たときに、すばやく表示するための仕組みですね。<&sol;p>&NewLine;<p>それが原因でCSSを変更しても過去の閲覧した状態で表示されてしまうようです。<&sol;p>&NewLine;<p>これならキャッシュをクリア(消去)すれば解決です。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;&NewLine;<&excl;-- WP QUADS v&period; 2&period;0&period;92 Shortcode Ad -->&NewLine;<div class&equals;"quads-location quads-ad" id&equals;"quads-ad" style&equals;"">&NewLine;<&sol;div>&NewLine;&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h3><span style&equals;"font-size&colon; 14pt&semi;">キャッシュの削除<&sol;span><&sol;h3>&NewLine;<h4><span style&equals;"font-size&colon; 14pt&semi;"><strong>ブラウザごとのキャッシュ削除の方法<&sol;strong><&sol;span><&sol;h4>&NewLine;<p><span style&equals;"color&colon; &num;ff00ff&semi;"><strong>IE(InternetExplorer9)<&sol;strong><&sol;span><br &sol;>&NewLine;「ツール」&srarr;「閲覧履歴の削除」&srarr;「インターネット一時ファイル」を「削除」<&sol;p>&NewLine;<p><strong><span style&equals;"color&colon; &num;ff00ff&semi;">Firefox<&sol;span><&sol;strong><br &sol;>&NewLine;「ツール」&srarr;「最近の履歴を削除」&srarr;「すべての履歴」&srarr;「キャッシュ」を「今すぐ消去」<&sol;p>&NewLine;<p><strong><span style&equals;"color&colon; &num;ff00ff&semi;">Chrome<&sol;span><&sol;strong><br &sol;>&NewLine;「設定」&srarr;「履歴」&srarr;「閲覧履歴データの消去」&srarr;「閲覧履歴データを消去する」<&sol;p>&NewLine;<p><strong><span style&equals;"color&colon; &num;ff00ff&semi;">Safari<&sol;span><&sol;strong><br &sol;>&NewLine;「編集」&srarr;「キャッシュを空にする」&srarr;「空にする」<&sol;p>&NewLine;<p>ブラウザのツールなどで設定を変えればいいのですが、もっと簡単な方法がありました。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h4><strong><span style&equals;"font-size&colon; 14pt&semi;">スーパーリロード<&sol;span><&sol;strong><&sol;h4>&NewLine;<p>スーパーリロードとは、強制的に優先して再読み込みさせる方法です。<br &sol;>&NewLine;キャッシュ削除をショートカットキーで、すばやく実行するということですが。<&sol;p>&NewLine;<p><strong><span style&equals;"color&colon; &num;ff00ff&semi;">Windowsの場合<&sol;span><&sol;strong><&sol;p>&NewLine;<p>ブラウザが IE、Chrome、Firefox、opera の時は<br &sol;>&NewLine;<strong>Ctrl+F5キー<&sol;strong><&sol;p>&NewLine;<p>ブラウザがSafariの時は<br &sol;>&NewLine;<strong>Ctrl+Rキー<&sol;strong><&sol;p>&NewLine;<p><strong><span style&equals;"color&colon; &num;ff00ff&semi;">Macの場合<&sol;span><&sol;strong><&sol;p>&NewLine;<p>ブラウザがChrome、Safari、Opera では<br &sol;>&NewLine;<strong>Command+Rキー<&sol;strong><&sol;p>&NewLine;<p>ブラウザがFirefox では<br &sol;>&NewLine;<strong>Command+Shift+R<&sol;strong><br &sol;>&NewLine;になります。<&sol;p>&NewLine;<p>スーパーリロードで確認!さっそく「Ctrl」&plus;「F5」キーを押します。<br &sol;>&NewLine;こんな感じになりました&lpar;&Hat;o&Hat;&rpar;v<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-2087" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;01&sol;sm7&period;png" alt&equals;"hタグ変更完成" width&equals;"619" height&equals;"225" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>まずは成功です。<&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;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;<&sol;div>&NewLine;<&sol;div>&NewLine;<p>見出しタグは本当はいろいろやってみたいデザインとかあるんですけど、まだ理解のおよばない部分も多くあるので、自分のペースで少しずつ試していきたいと思います。<&sol;p>&NewLine;<p>ちょっとオリジナルと違う表示にしたい!と思ったら試してみませんか?<&sol;p>&NewLine;<p>フォントの色やサイズ余白なども同様に少し変えれば変更できます。<&sol;p>&NewLine;<p>いろいろ考えてから、気に入ったデザインに変更するやり方が見つかったら・・また書いてみたいと思います(^^)<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>前の記事へ <a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;2035&period;html">1枚の画像で複数リンク!イメージマップの作り方<&sol;a><br &sol;>&NewLine;次の記事へ <a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;2551&period;html">DuplicatorでWP丸ごと引越 GMOからXserver1<&sol;a><&sol;p>&NewLine;<p style&equals;"text-align&colon; right&semi;"><a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;page-1472&period;html"><span style&equals;"color&colon; &num;0066cc&semi;">WordPress一覧へ<&sol;span><&sol;a><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><a href&equals;"http&colon;&sol;&sol;affiliate&period;freebieac&period;com&sol;link&period;php&quest;i&equals;580f01029d0b2&amp&semi;m&equals;584c839908d81"><img src&equals;"http&colon;&sol;&sol;affiliate&period;freebieac&period;com&sol;data&period;php&quest;i&equals;580f01029d0b2&amp&semi;m&equals;584c839908d81" width&equals;"728" height&equals;"90" border&equals;"0" &sol;><&sol;a><&sol;p>&NewLine;<p><a href&equals;"&sol;&sol;diary&period;blogmura&period;com&sol;ranking&period;html" target&equals;"&lowbar;blank" rel&equals;"noopener"><img src&equals;"&sol;&sol;diary&period;blogmura&period;com&sol;img&sol;diary88&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;diary&period;blogmura&period;com&sol;ranking&period;html" target&equals;"&lowbar;blank" rel&equals;"noopener">にほんブログ村<&sol;a><&sol;p>&NewLine;<p><a title&equals;"日々の出来事 ブログランキングへ" href&equals;"http&colon;&sol;&sol;blog&period;with2&period;net&sol;link&period;php&quest;1839199&colon;9200"><img src&equals;"http&colon;&sol;&sol;blog&period;with2&period;net&sol;img&sol;banner&sol;c&sol;banner&lowbar;1&sol;br&lowbar;c&lowbar;9200&lowbar;1&period;gif" width&equals;"110" height&equals;"31" border&equals;"0" &sol;><&sol;a><br &sol;>&NewLine;<a style&equals;"font-size&colon; 12px&semi;" href&equals;"http&colon;&sol;&sol;blog&period;with2&period;net&sol;link&period;php&quest;1839199&colon;9200">日々の出来事 ブログランキングへ<&sol;a><&sol;p>&NewLine;&NewLine;

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