この記事ではワードプレスのテーマ「Xeory Base」のサイドウィジェットのカテゴリーのカスタマイズを行っていきます。
スポンサーリンク
カテゴリーの投稿数を表示させる
投稿数を表示させる手順
- ①：管理画面から「外観」＞「ウィジェット」を選択
- ②：サイドバーから「カテゴリー」をクリックして開く
- ③：「投稿数を表示」にチェックを入れ「保存」をクリック
これで投稿数が表示されるようになりました。
表示の確認
設定後ブラウザで見てみると、画像のように各カテゴリーに投稿数が表示されていることが確認できます。
しかし「Xeory Base」はデフォルトの状態だと、カテゴリー数が改行された状態で表示されてしまいます。
ここから少しだけコードを編集して、この数字をカテゴリー名の横に持ってくるようにしていきます。
カテゴリーの投稿数を横に表示させるカスタマイズ
編集場所を確認
- ①：管理画面から「外観」＞「テーマの編集」を選択
- ②：テーマファイルの中から「スタイルシート（style.css）」をクリック
- ③：CSSの中から「.widget_categories a」を探す（1178行目付近）
この「.widget_categories a」はカラースキームを「デフォルト」に設定している場合の編集場所です。
※カラースキームはワードプレス管理画面の「初期設定」の中にある「カラー設定」から確認できます。
〈デフォルトでない場合〉
カラースキームがデフォルトでない場合、③で探すコードを下記の対象コードにしてください。
［緑］→「body.color01 .widget_categories a」（2088行目付近）
［赤］→「body.color02 .widget_categories a」（2488行目付近）
［オレンジ］→「body.color03 .widget_categories a」（2888行目付近）
［ピンク］→「body.color04 .widget_categories a」（3288行目付近）
CSSの編集
先ほど見つけたコードを「,」を含む１行全てを選択します。
.widget_categories a,
このコードを下記のコードに置き換えます。
.widget_categories a{
display: inline-block;
}
〈デフォルトでない場合〉
カラースキームがデフォルトでない場合は下記のようなコードになります。
body.color01 .widget_categories a{
display: inline-block;
}
このコードは［緑］を例にしていますので、各色に合わせてbody.colorの番号を変更して下さい。
表示の確認
ブラウザ上で見てみると、各カテゴリー名の横に投稿数が表示されていることが確認できます。
これでカテゴリーの投稿数を横に表示させるカスタマイズは完了です。
※CSSはブラウザの履歴によって反映されない場合があります。
反映されない場合はブラウザの履歴を削除して確認してみて下さい。
初めてご質問させていただきます hazedon と申します。
Xeory Base のウィジェットの備え付けのカレンダーが、
デフォルトだと大きいのでサイズを小さくしたいのですが、
どうすればいいでしょうか？
hazedon さん
ご質問内容の「カレンダー」についてですが、style.cssから「.widget_calendar」という記述を探してみてください。
この中にある「font-size: 16px;」のフォントの数字を「10px;」などに変更する（小さくする）ことで、Xeory Baseのカレンダー全体のサイズ調整ができます。
カレンダーの場合はウィジェットサイズを変更することより、文字のサイズに合わせて調整することでバランスも保てますので試してみて下さい^^
AMYさん
ご回答いただきありがとうございます。
AMYさんに言われた通りにやってみましたところ、うまくいきました。
ただ、今度はバランス的にカレンダーの左の余白部分が少し気になる
ようになってしまったのですが・・・
カレンダーの位置をもう少し左側にすることは可能なんでしょうか？
勝手を言ってすみません。
hazedon
hazedon さん
ひとまずはよかったですが、確かにウィジェットタイトルとのズレを感じますね。。。失礼しました！
この場合cssの「.widget_calendar .side-widget-inner」という記述の中にある、「padding: 0 20px 20px;」という部分が配置に影響しています。
ここをフォントサイズが10pxとした場合「padding: 0 10px 20px;」に変更することで、ウィジェットタイトルの中央に寄せることができました。
この記述方法の場合は「10」の部分が両側の余白となるため、ここを0にすればウィジェットタイトルを同じ大きさにすることもできます。
「20」の方は下の余白をある程度調整できますので、試した上で好きな配置にしてみて下さい^^
AMYさん
ご回答いただきありがとうございます。
AMYさんに言われた通りにやってみましたところ
大変座りがよくなり大満足です。ありがとうございました。
質問ついでに、もう一つお聞きしたいことがあります。
メニューボタンの間隔が少し狭く感じるのですが、
ボタン同士の間を少し広げることは可能でしょうか？
お忙しいところすみません。
hazedon
hazedon さん
ご期待通りにできたようで、私も安心しました！
ところでグローバルメニューの間隔ですが、ここを広げたい場合はcssの260行目付近にある
#gnav li {
float: left;
position: relative;
padding: 0 24px 0 0;
}
というコードを探してみて下さい。
ここの「padding: 0 24px 0 0;」というコードを「padding: 0 24px 0 50px;」に置き換えることでメニューの間隔を広げることができます。
この「50px」という数値はあくまでも一例なので、ご自身のサイトに合わせて好きなサイズに変更してみて下さいね^^
AMYさん
ご回答いただきありがとうございます。
AMYさんに言われた通りにやってみましたところ
今回に限り何も変わらなかったです。
（ padding: 0 24px 0 0; → padding: 0 24px 0 50px; ）
にもちゃんと変えたのですが・・・
これは多分、わたしの説明が至らなかったせいだと思います。
申し訳ありませんでした。
メニューボタンとゆうのは、ヘッダー直下の “ホーム” とか “お問い合わせ”
のことで そのボタン同士の間の間隔のことであります。
（ちょっとくっつきすぎているように感じるので もう少し離した方が
クリックしやすいかなと・・・）
ちなみに、よくある等間隔にしたい とゆうことではありません。
hazedon
hazedon さん
ヘッダー下のメニューということで、理解はできていたつもりでしたがご期待に沿えず申し訳ありません！
理解のズレのある部分がイマイチ分からないため、まずは私の方で行った変更内容をお伝えします^^;
①「padding: 0 24px 0 0;」の初期状態がこのような感じです。
②これを「padding: 0 24px 0 50px;」に変更すると、メニューに間隔が広がった状態に変更できています。
実際にhazedonさんのURLを拝見して、テスト的にソースを変更してみたところ同じように間隔が空きました。
しかしこの内容では解決したい内容とは違うということになりますよね…f^_^;
メニューのボタンはこれとはまた別のものでしょうか？
AMYさん
とんでもないことになってしまいました！
メニューボタンがくっついたまま離れなくなってしまいました。
現状報告としまして pxの前の数値しかさわっていません。
現在は初期設定の「padding: 0 24px 0 0;」の状態です。
hazedon
AMYさん
お騒がせしてすみませんでした。
外観のメニューでいったん削除してからまた付け直したところ
うまくできました。
hazedon