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
-, , ,

関連記事

【裏技】iPhoneの画面に触れずにYouTube広告をスキップする方法|音声コントロールの使い方

皆さん、こんにちは!SOUNDABILITY 2.0のひびきです。 突然ですが、YouTube観てますかー?? 僕は普段料理をしながらラジオ代わりにYouTubeを流していることが多いんですが、その時 …

【Mac向け】歌ってみた動画のダウンロード方法や動画の合わせ方等の作り方まとめ|iMovie編

歌ってみた動画の作り方の記事って調べるといくつか出てくるけど、みんな肝心の元動画のダウンロード方法を書いてないのってやっぱり著作権的にグレーだから?? たしかにそうなんですよね、オケはボカロP本人が配 …

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

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

【新しい動画共有】Twitterカードに外部動画リンクを無課金で広告のように埋め込む方法|ビデオウェブサイトカード

YouTuberやバンドマン、歌い手の皆様、動画投稿していますか? って、それこの前と同じやんけ!!ww 【最新版】Twitter動画にYouTube等の外部URLリンクを埋め込む方法|Media S …

【ステータス:除外?!】Google Search Consoleでインデックスされない時の対処法|WordPress5.1

今回はちょっと趣向を変えてSEO関連の記事を。 ウェブサイトを運営していくにあたって欠かせないSEO対策ですが、個人レベルでやれることはたかがしれています。 それでもやらないよりはやった方が良いので、 …