JIN

JINカスタマイズ|ページャーのデザインを丸から四角にする

ページャーをカスタマイズ

ページャー部分を丸から四角に変更するカスタマイズをしてみました。

メンくん
ブログのデザインをすっきりさせたついでに、全体的にやさしい四角に変更したよ
くま
やさしい四角ってなんやねん

やさしい四角とは角が少しだけ丸い四角のことです。(ぼくの勝手な意見です)

ページャーとは、ページ送りするボタンのことです。JINでは、デフォルトは丸いデザインになっていますね。

では、さっそくカスタマイズした画像をお見せしますね。

[toc]

カスタマイズした結果

beforeの方がデフォルトで丸いページャーですが、afterではやさしい四角になっています。


BEFORE


AFTER


メンくん
記事が四角いカード型だから、丸いデザインよりも四角いデザインのほうが馴染むね

このカスタマイズはものすごく簡単です。

カスタマイズに慣れている人なら1分もかかりません

手順通りに行えば誰でもできるカスタマイズです。

カスタマイズの準備

これからカスタマイズに取り掛かっていきますが、まずはじめにこちらを読んでください。

カスタマイズは自己責任にてお願いします(カスタマイズ前にバックアップ推奨)。コードを記入してもうまく反映されない場合があります。このカスタマイズは、あくまでもぼくのサイトで行ったものです。

くま
カスタマイズは仮に同じテーマであっても、100%成功する補償はありません。

カスタマイズコードを書き込む場所を開きます。

一般的には子テーマ(外観>テーマエディター>style.css)に書き込みますが、めんどくさい方は追加CSSにぺぺっと貼り付けても大丈夫です。

追加CSSについてはこちらの記事でかなり詳しく説明しています。カスタマイズを初めてやる方は必ず読んでおきましょう。

カスタマイズを書き込む場所は大きく分けて2つ。テーマエディターのstyle.cssとカスタマイザーの追加CSSがあります。お好きな方に書き込みましょう。

カスタマイズコード

今回のコードはかなり短いです。

.pagination a {
    border-radius: 3px;
}
くま
短すぎてやばいなww
メンくん
角を丸っこくするだけだからねw

カスタマイズの締め

カスタマイズコードを書き込んだら、最後に必ずキャッシュ削除して更新をしましょう。

これを忘れてしまうとせっかくカスタマイズしたのにデザインに反映されません

キャッシュ削除
簡単な方法は Ctrl + F5 を押す方法です。またはF12を押した後に更新マークを右クリックして「キャッシュの消去とハード再読込」をクリックします。

メンくん
今回は、かなり簡単なカスタマイズでしたが、これだけでもオリジナリティが出てきますね!

ここにボックスタイトルを入力