SOUNDABILITY 2.0

音楽 & PC ライフハック情報サイト

WEB関連 WordPress

【WordPress】STINGER 8のページナビゲーション(ページ送り)をカスタマイズしてデザインの崩れを修正

投稿日:2020年6月9日 更新日:

今回は5人くらいに刺さる1分で読めるシリーズですw

そもそもWordPressでSTINGER8のテーマを使ってる人ってどのくらいいるんですかね?

僕はシンプルで相変わらず気に入っていますが、無料のテーマかつ使っている人もそこまで多くないせいか、情報が古かったり、自分でカスタマイズしないとデザインが微妙だったり、そういった問題は多いです。

僕もいつかは有料テーマに手を出す日がくるのか自分でも分かりませんが、それまでは工夫しながら使い続けていこうと思っています!

そんな中で今回ご紹介したいのは、そのSTINGER8のページナビゲーションについて。

ページナビという言葉に馴染みのない人もいるかもしれませんが、記事一覧のページを送っていくこれのことです。

ページングページネーションページ送りとも言ったりしますね。

そんなページナビ、実はSTINGER8ではデフォルトでデザインが崩れています…。

11記事書いて初めて気付くので僕も最初は気にもしていなかったのですが、ようやく慣れてきた矢先にみんな通る道となることでしょうw

お洒落にカスタマイズする方法は調べれば山程出てくるとは思いますが、個人的にはシンプルな方が好きなので、最初に出した画像のように、デフォルトの設定を活かした最もシンプルなカスタマイズ方法をお届けしようと思います。

ページナビゲーションのカスタマイズ方法

そもそもWordPressのデザインカスタマイズも色々な方法がありますが、テーマエディターから直接コードを書き込むのはあまりおすすめできません

もちろん子テーマ等を使って対策をしている人も多いと思いますが、もしテーマ自体のアップグレードがあった場合に、またイチから設定しなくてはいけなくなる可能性があるからです。

なので、極力大元のコードには追記せず、WordPressが用意しているカスタマイズ項目の追加CSSからカスタマイズするようにしましょう。

デザイン修正のカスタマイズコード

難しい説明は抜きにして、修正には追加CSSに下記のコードをコピペするだけです!

.st-pagelink .page-numbers {
	box-sizing:border-box;
	padding:10px;
	height:42px;
}

ほら、直ったでしょ?

かんたーん!!

さいごに

同じようなカスタマイズ方法を紹介している人も多いですが、幅や高さにこだわりを感じなかったので、僕なりに美しさを考慮したものにアレンジしています。

スマホ表示の場合また微妙に変わるので、そこもこだわりたいという人は追加CSSの最後にこのように記述して

@media only screen and (max-width: 640px) {
st-pagelink .page-numbers {
	box-sizing:border-box;
	padding:10px;
	height:◯px;
}
}

◯pxのところに任意の数字を入れて高さを微調整してみてください。

こうすればスマホ表示の時にだけこちらのコードが優先されるので、他のデザインカスタマイズにも応用できますからね。

恐らくこのページは数少ないSTINGER8ユーザーの方が見ていると思うので、良ければ同じテーマを使う者同士情報共有しつつ是非仲良くしてくださーい!

筆者Twitterへ→ひびき(@gt_hibiki)

-WEB関連, WordPress
-, , ,

関連記事

【最新版】Twitter動画にYouTube等の外部URLリンクを埋め込む方法|Media Studioの使い方

YouTuberやバンドマン、歌い手の皆様、動画投稿していますか? 近年スマートフォンの爆発的普及により、どこでも手軽に動画を楽しめるようになり、そのパイオニアとも言えるYouTubeではYouTub …

【初心者向け】WordPressの始め方とおすすめの安いレンタルサーバー|ロリポップで簡単インストール

早いものでサイトを引越してから約1ヶ月が経ちました。 噂には聞いていたWordPress…凄いですね! めちゃくちゃ良くできてる!!誰もが使う理由が分かりますわ。 特にSEO対策が凄いです!ちょっと書 …

【待望のアップデート】WordPress Popular Posts Ver.5でサムネイルが表示されない時の対処法

つい先程、毎朝の日課でWordPressにログインしてみたら1件の通知が。 確認してみると WordPress Popular Postsのアプデがきているではありませんか!! 今年WordPress …

【Gutenberg対応】WordPress5.0でブログカードを追加CSSのみでカスタマイズする方法|STINGER 8

WordPressブロガーの皆さんこんには! 昨年アップデートされた最新版WordPress「Gutenberg」で導入されたEmbed機能、使ってますか? 一言で説明すると「埋め込み」機能という感じ …

【目指せ1万PV】初心者に参考にして欲しいブログの書き方とアクセス数を増やす10の方法

というわけで勝手な自主企画! 当ブログの月間1万PV超えを記念して、ブロガーによるブロガーのための記事を10記事まとめて書きました!! 1万PVを達成したら書きたいと思っていたんですよね〜。 夏くらい …