毎日、Twitterで日々の成果や頑張りをツイートしてします!

【STORK19カスタマイズ】ページボタンの形を変える方法を解説!

Stork19カスタマイズ3アイキャッチ

みなさん、お疲れ様です!カズトンです!

今回もWordPressのテーマである「Stork19」をカスタマイズしていこうと思います!

今回で3回目ですね!1,2回目をまだ見てない人は、こちらからぜひ見てみてください!

アイキャッチ画像
アイキャッチ画像

では、今回のカスタマイズテーマを紹介します!

今回のカスタマイズは、「ページボタンを丸のデザインにする!」というものです!

この記事では、以下のようにデザインをカスタマイズしていきたいと思います!(もしわからなかった所があれば、TwitterのDMででも!)

今回の記事は、「Stork19のページボタンのデザインを○に変える方法を解説」です!

今回の記事は、以下の人におすすめ!
  1. WordPressテーマ「Stork19」を利用している人
  2. HTMLやCSSについて詳しく知らない人
  3. WordPress初心者の人

WordPressテーマ「Stork19」を利用している人は、コピペだけでも問題ないと思います!

すぐにコピペをしたい人は、こちら

他のテーマを使われている方は、下の記事からHTMLのクラス名やID名の取得方法を確認してからこちらの記事を見ていただけるとカスタマイズをスムーズに行えると思います!

WordPressを自分で簡単にカスタマイズしたいと思う人は、こちらの記事を読んでみて下さい!

アイキャッチ画像

では、スタートです!

今回するカスタマイズについて

先ほども少しお話しましたが、

今回のカスタマイズは、トップページのページを表示させるボタンの形を変えるというものです!

今回の記事では、「正方形」から「丸」の形に変えていくデザインを実装していきたいと思います!

ページボタンとは、なにか

ページボタンとは

ページボタンは、トップページの下にあるこちらのボタンのことです!

こちらのボタンのことですね!ブログの記事が何ページにも渡って掲載されています!

全部表示させると長くなるので、ページを分けて表示させる仕組みですね!そのページ移動に使われるのがこのボタンです!

デフォルトだと、このように正方形に角丸になっている状態です!コレを○の形に変えていこうと思います!

このボタンの色の変え方は、テーマのカスタマイズから行えます!

ボタンの色の変え方は、こちら

ボタンの色を好きに変えよう!

CSSでもボタンの色を変えることができますが、今回は誰でも実装ができる方法を紹介いたします!

ボタンの色の変え方は、WordPressのダッシュボード画面を開いて、「外観」→「カスタマイズ」→「サイトカラーの設定」→「メイン領域のリンク色」から設定できます!

だいたいのカスタマイズはここから変更できますね!

Step1

「外観」→「カスタマイズ」の順にクリック

Step2

「サイトカラー」をクリック

Step3

下にスクロールして、「リンク色」を変更する。

すると、ボタンの色が変わります!

色のコードを調べたい人は、こちらのサイトで確認してみて下さい!

カラーコードとは、色をパソコンでもわかるようにコード化したものです!(「黒」→「#000」)

CSSの指定方法

今回カスタマイズするためのCSSコードをまとめたいと思います!

今回必要となるのは、一つ!「デザインを○にするコード」です!

事前にこのボタンのHTMLのクラス名を調べておきました!(Stork19を利用している人は、同じだと思います!)

ボタンのクラス名は、「.page-numbers」

自分のサイトのボタンクラス名を見つけたい場合は、下の記事を読んで下さい!

アイキャッチ画像

指定するコードについて

では、指定するためのCSSコードを紹介していきたいと思います!

まずは、「ドット+クラス名」と指定して「{}の中」に○の形に指定するコードを入れます!

今回は、50%と指定していますが、pxでも指定することができ値が大きくなればなるほど、○の形に近づいて行きます!

20pxとか30pxなど、値を入れてどんなデザインになるのか確かめて見て下さい!「角丸→楕円→丸」のように、値を大きくしていくと形が変化していきます!

そして、「!important」とは、他のコードよりも優先する!という意味です!これがないと、○の形にならないので気をつけてください!

実際のコードで見てみると

実際のコードは、以下の通りです!

前回と短くて、楽〜〜!笑

.page-numbers{
  border-radius: 50% !important;
}

カスタマイズ方法

では、毎度同じですがカスタマイズしていきましょう!

まずは、WordPressのダッシュボード画面に移動してください!

手順

Step1

まずは、先ほど紹介したCSコードをコピーしてください!

.page-numbers{
  border-radius: 50% !important;
}

Step2

「WordPressのダッシュボード」→「外観」→「カスタマイズ」→「追加CSS」と順番に進めていってください!

Step3

先ほどコピーしたコードを貼り付けたら完成!!

実際に見てみると

実際に見てみると、こんな感じです!

カスタマイズ完成です!

終わりに

最後まで、読んでくださりありがとうございます!

今回で3回目のカスタマイズです!

少しずつですが、サイトも良くなってきている気がします!

他のWordPress(Stork19)のカスタマイズ記事も見てみてくださいね!