【コピペだけ!】STORK(ストーク)のページャーをカスタマイズしよう!

【コピペだけ!】STORK(ストーク)のページネーションをカスタマイズ

 

ここあです。

 

WordPressテーマSTORK(ストーク)

カスタマイズしようと思えば

いろいろな部分がカスタマイズできます。

 

フォントを変えたり、見出しを変えたり…

 

今回はSTORKユーザーが

あまりしていないと思われる

ページャーのカスタマイズ方法をご紹介します。

 

せっかくオシャレなWordPressテーマSTORKを手に入れたんだし

「とことんこだわってカスタマイズしたい!」

という方にはおすすめです。

 

私もやっています^^
(こだわりも大事…)

 

ページャーのカスタマイズもコピペだけで

簡単にできるのでぜひ試してみてくださいね。

 

そもそもページャーとは?

ブログのタイトルを見て

「ページャーをカスタマイズしよう!」

と言われても…

 

「ページャーって何?」ってなりますよね^^;

 

ページャーとはズバリ…

トップページの一番下にあるアレです。

 

↓ そう、これです。

ストーク:ページネーション

 

 

STORKのデフォルト(標準)のページャーは

角がカッチリした縦長の四角になっていますよね。

 

落ち着いた色調で

カチっとしたサイトデザインにしている人には

これで全然問題はないでしょう。

 

しかし、パステル系の雰囲気で

「柔らかい雰囲気にしたい」と思う方には

少し不満があるのではと思います。

 

なので、もう少し柔らかくできないものかと

調べてみました。

 

  • ページャーの角を丸くする方法
  • ページャーを円形にする方法

2通りご紹介しますので

 

あなたのサイトの雰囲気に合わせて

調整してみてくださいね。

 

ページャーのカスタマイズ方法

CSSコードを以下の場所記載してください。

 

ダッシュボードメニューから

外観 → カスタマイズをクリック。

ダッシュボードメニュー

 

 

追加CSSをクリックし、CSSコードを入力しましょう。

dropshadow

 

 

CSSコードをコピーした瞬間に見た目が変わります^^

 

角が丸いページャーのCSS

角が丸いページネーション

 

まずはシンプルに

ページャーの角を落とすCSSです。

 

.pagination a, .pagination span{
padding: 7px 14px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

ちなみに調整の仕方は…

10pxと表示されている部分の数字を大きくすると

角丸の大きさが大きくなります(円に近づく)

 

逆に数字を小さくすると角丸が小さくなります。

角丸の大きさを変えたいときは10pxの部分

3カ所全て数字を揃えてくださいね。

 

ブラウザによって

見え方が変わる可能性がありますので…^^

 

また、形状は正方形にしてありますが

padding: 7px 14px;の7pxとか14pxの数字を変えると

四角の形状も変えることができます。

 

丸いページャーのCSS

円形のページネーション

 

次に、私と同じく

ページャーを角丸ではなく

円形にするCSSコードです。

 

.pagination a, .pagination span{
padding: 7px 14px;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
@media only screen and (max-width: 767px){
.pagination a, .pagination span{
padding: 8px 14px;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
}

私と同じであれば、上記CSSコードで

ほぼ正円に見えるはずですが…

 

微調整したい場合は

padding: 7px 14px;の数字を変えてみてください。

形状が変わります。

 

STORK(ストーク)のページャーカスタマイズまとめ

STORK(ストーク)のページャーカスタマイズまとめ

 

このページャーの変更は

ブログのデザインにこだわりたい人のためのCSSコードです。

 

ページャーの形状を変えることは

さほど大きなことではありませんが

 

それでもトップページにある

ページャーの形状を変えるだけで

訪問者には少し違った印象を与えられるのではと思います。

 

STORK(ストーク)は画面右下にある

トップへ戻るボタンのカタチも丸いので

 

ページャーのカタチを変更すると

統一感が出て良いかもしれませんね。

 

サイトのイメージをかわいくしたい方は

ぜひ変更してみてくださいね。

 

その他のカスタマイズ方法は

こちらの記事に記載しています。

ぜひ参考にしてみてください^^

 

最後までお読みいただきありがとうございました!

 

設定でよく分からないことがあれば

気軽にご相談くださいね!

「ここあ」に問い合わせをする

 

合わせて読みたい!

 

ネットで毎月30万円以上の自動収益を得ながら
「自分らしい人生」を送る方法を無料公開!

●自動化の仕組みで毎月30万円を稼ぐ仕組みの全貌マニュアル
●「デザインばか」のここあが半年で収益化したネットビジネスのノウハウ
●主婦やニートでもネットで毎月5〜10万円の不労所得を得る方法
●ここあが副業にネットビジネスをすすめる理由
●20年サラリーマンをしてきてなぜ今になって脱サラしたのか?
●パソコン音痴でもパソコン一台で年収1000万円稼ぐ手法
●安定を求めれば求めるほど不安定になる理由とは?
●いくら知識があっても、あなたが絶対に成功できない理由
●副業解禁の時代をナメているとこれからどうなってしまうのか?

などなど、掲載できるものだけをピックアップしてみました。

無料メール講座本編では、もっと秘匿性の高い内容もたくさん出していきます。

また、私がこれまで100万円以上投資して学んだ有料セミナーでしか手に入らない情報もコッソリ無料メール講座でお伝えしていきます。

※この無料メール講座は、有料講座で聞いた内容も多数含まれており、予告なく募集を終了する可能性があります。

ですので、募集している今のうちにプレゼントを受け取ってくださいね。

下記のボタンをクリックして

・「あなたのお名前
・「メールアドレス

を入力してご登録お願いします。

ここあ公式「LIFE DESIGN通信

お名前
メールアドレス

ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年に独立。現在はネットとデザインのスキルを活かし幅広い分野で活動中。己を磨き誠実に対応すれば、仕事や人脈、そして人生までも大きく変えることができる「ネットビジネスの素晴らしさ」、そして会社に頼らず「自分らしく生きる方法」をこのブログを通じて発信しています。「一度きりの人生」あなたも私と一緒に謳歌しませんか?