WP タグに枠をつける TwentyEleven

投稿日時: 投稿者:

ワードプレス初心者のカスタマイズ 作業8

wordpress

タグ（タグクラウド）に枠をつけます

①「スタイルシート(style.css」に追加

「スタイルシート(style.css」に追加します。
管理画面『外観』 >> 『テーマ編集』からスタイルシート(style.css)を開いて編集します。
※スタイルシート (style.css)の変更する前にバックアップしてください。
※小テーマを使用している方は、小テーマ側のスタイルシートを編集して下さい
テーマを更新（アップデート）した場合は、テーマに加えたカスタマイズがすべて失われます。テーマを修正する場合、子テーマの利用を検討してください。子テーマを使用すればテーマの変更は確実に保持されます。

文章を追加

スタイルシート (style.css)の変更前 ※変更する前にバックアップしてください
以下を追加します。

/* タグクラウドウィジェットに枠をつける */
aside[id*=tag_cloud] h3.widget-title {
background-color:#ff9c1a;
text-align:center;
font-size:14px;
color:#fff;
border:10px;
padding:1px 0;
}
 
#secondary aside[id*=tag_cloud] {
padding:0;
}
 
aside[id*=tag_cloud] {
border:4px solid #ff9c1a;
border-radius:4px;
}

aside[id*=tag_cloud] .tagcloud {
padding:3px;
}
/* タグ文字を囲う*/
.tagcloud {
  overflow: hidden;
  padding:1px 0;
}
 
.tagcloud  a {
  float: left;
  display: block;
  background: #f8b862;
  line-height: 100%;
  color: #222;
  text-decoration: none;
  font-weight: 400;
  font-size: 93%;
  padding: 4px 6px 3px;
  margin: 0 3px 3px 0;
  -webkit-transition: .3s ease;
  -moz-transition: .3s ease;
  -o-transition: .3s ease;
  transition: .3s ease;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}

.tagcloud  a:hover {
  background: #ff9c1a;
}

以上をstyle.cssに記載します

テーマを直接変更（WordPress）。タグ（タグクラウド）文字調整

②「functions.php」に追加

functions.phpに追加します。
管理画面『外観』 >> 『テーマ編集』からテーマのための関数 (functions.php)を開いて編集します。

【重要】
『functions.phpの編集』の際に、数字の半角記号を全角記号に記述ミスをしたらサイトと管理画面が『エラー』表示されて、サイトの観覧や編集できなくなります。
※編集前にバックアップしてください。

※小テーマを使用している方は、小テーマ側のスタイルシートを編集して下さい
テーマを更新（アップデート）した場合は、テーマに加えたカスタマイズがすべて失われます。テーマを修正する場合、子テーマの利用を検討してください。子テーマを使用すればテーマの変更は確実に保持されます。

スタイルシート (functions.php)に追加

※変更する前にバックアップしてください

以下を追加します。

/* タグ文字の変更 */

function my_tag_cloud_filter( $args = array() ){
  $args['smallest'] = 9;
  $args['largest']   = 9;
  $args['number']  = 20;
  $args['order']     = 'RAND';
  return $args;
}
add_filter('widget_tag_cloud_args', 'my_tag_cloud_filter');

以上をfunctions.phpに記載して終了です

テーマ更新

新しいバージョンに「テーマを更新」した場合は、テーマに加えたカスタマイズがすべて失われます。
テーマを修正する場合、子テーマの利用をした方がよさそうですが、勉強中なので子テーマのやり方がわかりません。
他のサイトで調べてください。

WordPress 作業カテゴリ

1.ヘッダータイトルの余白調整2.検索ボックスの位置変更3.『Proudly powered by WordPress』をCopyright ©に変更
4.固定ページのタイトルを非表示に変更5.メインサイドバーを変更6.メインサイドバーの調整
7.投稿(BLOG)タイトルの変更8.タグに枠をつける9.投稿にサイドバーを表示（プラグイン）
10.サイト全体の横幅サイズを1000pxから1400pxに変更11.サイトの余白をなくして横幅最大に変更12.サイトの上部余白を削除
13.ヘッダー画像のサイズ変更14.上部のグレーの線を削除15.マウスオーバーで画像半透明に変更
16.フッターエリアの色変更17.投稿ページにサイドバーを表示18.サイドバーの幅を変更
19.画像の枠線を消去20.表の上下の罫線を消去21.タイトルバーや文字の変更

関連記事

WP ヘッダータイトルの余白調整 TwentyEleven WP ヘッダー 検索ボックスの位置変更 TwentyEleven WP 『Proudly powered by WordPress』をCopyright ©に変更 TwentyEleven WP 固定ページのタイトルを非表示に変更 TwentyEleven WP メインサイドバーを変更 TwentyEleven WP メインサイドバーの調整 TwentyEleven WP 投稿(BLOG)タイトルの変更 TwentyEleven WP サイト全体の横幅サイズを1000pxから1400pxに変更 TwentyEleven WP サイトの余白をなくして横幅最大に変更 TwentyEleven WP ヘッダー画像のサイズ変更 TwentyEleven WP レイアウトのサイズを変更 TwentyEleven WP タイトルバーや文字をCSSを使って変更 TwentyEleven