デジモノ大好き+

デジタルグッズ自腹レポ・Wordpress関連。+ バツ1おっさんのライフハック。

STINGER8の幅を広げてみた。 [WordPress]

投稿日:2018年8月3日 更新日:

記事下広告のAdsenceをダブルレクタングルにしたかったので気持ち幅を広げてみました。

ただ単に広げればいいってもんでもないので、世間一般的なモニター解像度から目標となる幅を決めてみました。

国内におけるモニター解像度のシェア率

自分はFullHD(1920×1080)のモニターを使っているけど、世間的にはどの辺なんだろうかと。
で、調べた結果 2018年1月から7月までのシェア率がこちら。

Desktop Screen Resolution Stats Japan
Jan – July 2018

出典:statcounter

ちょっとびっくりだけど、FullHD(1920×1080)がダントツ。これはデスクトップ。
そしてノートでは、FWXGA(1366×768)。

最小サイズのWXGA(1280×800)を考慮しても、サイト幅は1100pxでOKってことになりますね。

ちなみに一昔前まで主流だったXGA(1024×768)は、ランク外なんですね。

ワイド化してみた。

STINGER8のデフォルト幅は1060px。
これを1100pxにするには、以下のコードを子テーマのスタイルシートに追加。

[crayon-5d5984edab0b7324268209/]

これでギリ記事下広告のAdsenceをダブルレクタングルできるんですけど、ちょっと余裕が欲しいので、メインカラムの左右のスペースを50pxから30pxに変更。

[crayon-5d5984edab0c5452301556/]

これで、いい感じになりました。
記事下広告のAdsenceをダブルレクタングルのやり方はのちほど紹介します。

記事下広告を横並びにする方法は「Stinger8記事下のアドセンス広告を横並びにしてみた。 [WordPress]」をご覧ください。

テーマをいじる場合は、必ずバックアップをとり、自己責任で作業してください。
また、子テーマで作業するのが望ましいです。

スポンサーリンク

-WordPress
-, ,

関連記事

ソネブロからワードプレスへ。

So-netで「デジモノ大好き」をやっていましたが、ワードプレスで再出発です。 何かと話題のSTINGER。 アフィリエイター向けの無料テーマとして有名ですが、さらにアフィリエイトに特化したAFFIN …

Stinger8サムネイル画像を大きくして、スマホのレイアウト調整してみた。 [WordPress]

Stinger8のサムネイル画像のサイズは、100×100pxと小さくアイキャッチとしてはちょっと弱いので少し大きくしてみました。 そのままだとスマホのレイアウトが崩れてしまうのでそちらも調整。 今回 …

no image

Stinger8の記事タイトルをさりげなく装飾してみた。 [WordPress]

デフォルトもシンプルで文字のサイズも大きく見やすいのでいいんですが、せっかくなんで少し手を入れてみました。 こんな感じにしてみました。 デフォルトはこんな感じですよね。 変更した内容は センタリング …

カテゴリーの表示を個性的にしてみた。 [WordPress]

カテゴリー表示はテーマそのままだとちょっと寂しいので、少し手を加えてみました。 今回手を加えたのは、style.cssとfunctions.php。 カテゴリーの親子関係の表示を調整。 style.c …

Stinger8パンくずリストをおしゃれにカスタマイズしてみた。 [WordPress]

ナビゲーション系のカスタマイズ連投になりますが、今回はパンくずリストです。 デフォルトは色が薄く目立たないので、アイコンを付けたり、hoverで色付けしたりとちょこっと目立たせています。 今回はいつも …