Stinger8のページリンクボタンのカスタマイズ方法

Wordpress
スポンサーリンク

このブログでは、Stinger8 というテーマを使っています。

シンプルで自由度の高いことろがいいテーマです。

ただ問題がないというわけでもなく…

特に気になったのは、ページリンクのボタン。

デフォルトではこんな風な表示になっていました。↓

ボタンの中の数字が枠からはみ出てしまっているんですよね。

この記事ではこれを下の写真のように修整する方法を紹介します。↓

手順を最初から紹介するので、順番にやってみてください。

手順1

以下のCSSコードをコピーします。

.st-pagelink .page-numbers {
box-sizing:border-box;
border:1px solid #ccc;
padding-top:5px;
padding-right:10px;
padding-bottom:25px;
padding-left:10px;
margin-right:5px;
margin-bottom:5px;
font-size:15px;
min-width:20px;
height:20px;
display:block;
float:left;
text-align:center;
}

手順2

ダッシュボードから外観→カスタマイズを選び、クリックしてカスタマイズ画面に移ります。

手順3

カスタマイズ画面の左にあるメニューの一番下の追加CSSをクリック。

それができたら追加CSSのところに手順1でコピーしたコードを貼り付ける。

これでOKです。

作者のあとがき?(読まなくてもいいところ)

手順1についてなのですが、このページを見てくれているのは初心者の方だと思うので、

そのコードはどこから出てきたんだよ?!

と感じたのでは?

それが気になる方に向けての説明も一応書いておきます。

ただ僕自身もまだ詳しくないので、効率の悪い方法でやっている気がします…

でも、みなさんがこれからカスタマイズしていく中で必要な知識になるはずなので紹介しておきます。(ここでは最低限のCSSの知識を前提として解説します。)

まずスタイルシートを探します。

WordPressの管理画面で左側にあるメニューの中から外観→テーマエディターを探します。

するとこんな画面になるはずです。↓

スタイルシートを開いていることを確認したら、スタイルシートのファイルの内容の欄のどこかをクリックし、Ctrl+Fを押します。

こんな風に検索バーが出てくるので、バーの中にカスタマイズしたいものに関係しそうな言葉を入れて検索します。

今回は “page” と入力しました。

検索すると、その言葉がマーカーペンで強調されたように表示されます。

それを手掛かりにして、関係ありそうなタグを探します。

このあたりかな、というコードを見つけました。

そのあたりコードをまとめてコピーして、追加CSSに貼り付けます。

後は適当に数値なり、プロパティなりを変えて上手くいくように調整していきます。

CSSなんて何も分かんないよ~(泣)

というかたにはサルカワさんというサイトを紹介しておきます。

僕なんかが紹介するまでもなく有名なサイトで、めちゃめちゃ分かりやすいです。

僕もお世話になっております。

コメント

タイトルとURLをコピーしました