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
Stinger3でタグクラウドのスタイル変更 文字サイズや枠線 | 思いだし にっき
サイトアイコン 思いだし にっき

Stinger3でタグクラウドのスタイル変更 文字サイズや枠線

<p><img class&equals;"aligncenter size-full wp-image-10522" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;1609378&lowbar;s&period;jpg" alt&equals;"" width&equals;"384" height&equals;"256" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>サイドバーにあるタグの表示がどうも気になります。<&sol;p>&NewLine;<p>よく使われるタグのフォントサイズが大きくなるようで、不揃い感が半端ないです。<&sol;p>&NewLine;<p>気持ちよく並べたいとフォントサイズの統一や枠線で飾るなど変更してみました。<&sol;p>&NewLine;<p>テーマはStinger3です。<&sol;p>&NewLine;<p><&excl;--more--><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>タグクラウドのスタイル変更<&sol;h2>&NewLine;<h3>その1 タグクラウドのフォントサイズを揃える<&sol;h3>&NewLine;<p>よく使われるタグは大きくなるようで汚いというか・・はかなり見にくいので、<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-8193" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;fc4decb6d5af87e089d10b8201b1ac36&period;png" alt&equals;"" width&equals;"420" height&equals;"283" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>文字を同じサイズに統一してから別の方法で表現できるようにしたいと思います。<&sol;p>&NewLine;<p>CSSをいじるようなので、とりあえずバックアップしてから!<&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;<p><strong><span style&equals;"font-size&colon; 18pt&semi;">手 順<&sol;span><&sol;strong><&sol;p>&NewLine;<p>ダッシュボードの「外観」&Implies;「テーマの編集」&Implies;「スタイルシート」と開き<&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;">&NewLine;&sol;&ast; タグクラウドのフォントサイズを統一 &ast;&sol;<br &sol;>&NewLine;&period;tagcloud a &lbrace;<br &sol;>&NewLine;font-size&colon; 16px &excl;important&semi;<br &sol;>&NewLine;&rcub;<&sol;div><&sol;div>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-8194" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;49e713d7440bf138158863463b670f24&period;png" alt&equals;"" width&equals;"467" height&equals;"131" &sol;><&sol;p>&NewLine;<p>記述できたら「ファイルを更新」をクリックします。<&sol;p>&NewLine;<p>結果はこんな感じです。<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-8195" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;4e8727823c3f2c34a7c95e1063525d93&period;png" alt&equals;"" width&equals;"379" height&equals;"194" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h3>その2 タグクラウドの文字を枠線で囲む<&sol;h3>&NewLine;<p>文字サイズが揃っただけでもスッキリはしたのですが、味気ないというか・・・<&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;">&NewLine;&sol;&ast; タグクラウドのフォントサイズ統一 &ast;&sol;<br &sol;>&NewLine;&period;tagcloud a &lbrace;<br &sol;>&NewLine;font-size&colon; 16px &excl;important&semi;<br &sol;>&NewLine;<strong><span style&equals;"color&colon; &num;ff0000&semi;">border&colon; solid 1px &num;000080&semi;<br &sol;>&NewLine;border-radius&colon; 5px&semi;<br &sol;>&NewLine;display&colon; inline-block&semi;<br &sol;>&NewLine;padding&colon; 5px&semi;<br &sol;>&NewLine;margin-bottom&colon; 8px&semi;<&sol;span><&sol;strong>&lt&semi;&sol;span &gt&semi;<br &sol;>&NewLine;&rcub;<br &sol;>&NewLine;<&sol;div><&sol;div>&NewLine;<p>先ほどのフォントサイズ統一の後に赤字の部分を追記します。<&sol;p>&NewLine;<p>フォントサイズも枠線の色も好みで変更できます。<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-8196" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;109a3a4dad4c16fbb4783605d7283a34&period;png" alt&equals;"" width&equals;"483" height&equals;"183" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>表示結果は次のようになります。<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-8197" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;d71a581817ced9b0d51379fe584a18ed&period;png" alt&equals;"" width&equals;"349" height&equals;"288" &sol;><&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;<h3>その3マウスオーバー時に背景色をつける<&sol;h3>&NewLine;<p>タグクラウドにマウスオーバーしたときに背景色が付くようにしました。<&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;">&NewLine;&sol;&ast; タグクラウドのマウスオーバー時の背景色 &ast;&sol;<br &sol;>&NewLine;&period;tagcloud a&colon;hover &lbrace;<br &sol;>&NewLine;background-color&colon; &num;f6bfbc&semi;<br &sol;>&NewLine;text-decoration&colon; none&semi;<br &sol;>&NewLine;color&colon; &num;000&semi;<br &sol;>&NewLine;&rcub;<br &sol;>&NewLine;<&sol;div><&sol;div>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-8198" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;fe507120d383f837019248a868929398&period;png" alt&equals;"マウスオーバー時の背景色" width&equals;"413" height&equals;"124" &sol;><&sol;p>&NewLine;<p>フォントサイズ(16&srarr;14)・枠線の色も変えて、最終的に次のようになりました。<&sol;p>&NewLine;<figure id&equals;"attachment&lowbar;8199" aria-describedby&equals;"caption-attachment-8199" style&equals;"width&colon; 358px" class&equals;"wp-caption aligncenter"><img class&equals;"size-full wp-image-8199" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;09&sol;dfebb10c243244efc14f179d7db4482c&period;png" alt&equals;"" width&equals;"358" height&equals;"192" &sol;><figcaption id&equals;"caption-attachment-8199" class&equals;"wp-caption-text">タグクラウドスタイル変更<&sol;figcaption><&sol;figure>&NewLine;<p>以上で終了!<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>Stinger3のタグクラウド編集 さいごに<&sol;h2>&NewLine;<p>CSSの知識もないまま、様々なサイトを探し回り・・・<&sol;p>&NewLine;<p>今回のタグクラウドのスタイルの変更ももっと他のやり方もみつけましたが<&sol;p>&NewLine;<p>一番失敗が少なそうな(^^; 簡単なやりかたを参考にさせていただきました<br &sol;>&NewLine;&lt&semi;&lpar;&lowbar; &lowbar;&rpar;&gt&semi;<br &sol;>&NewLine;(参考:西沢直木のIT講座)<&sol;p>&NewLine;<p>タグが見やすくなったところでもう一度カテゴリーやタグの見直しをしなくちゃ・・というところですね(^^;)<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>WordPressの他の記事は<a href&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;page-1472&period;html" target&equals;"&lowbar;blank" rel&equals;"noopener"><strong> WordPress記事一覧<&sol;strong><&sol;a>から<&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;

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