CSSのみ!Stinger7やAffinger3でダブルレクタングル横にする方法!コピペでOK!

      2016/08/19

function.phpはできるだけ触りたくない・・・

生徒
Affinger3はダブルレクタングルが縦ですね!横にしたいけどどうしたらいいんでしょう・・・。
先生
んーいやほら、縦の方が結果が良かったってENJIさんがレポート出されてたし、そのほうが良さそうだよ!
生徒
それはそうなんだけど、やっぱり私のサイトではなんだか右側のスペースが気になってしまって・・・でも親テーマのphpはあんまり触りたくないし・・・。
先生
大丈夫!セレクターに注意して組めば、子テーマのCSSだけでもダブルレクタングル横にできちゃうよ!
生徒
ホントですか??やったぁ♪

※今回の記事は英語関係の記事ではありません。趣味のコーディングに関する記事です。

私のようにプログラミング言語(php)がわからない人にとって、function.phpをいじるのって、勇気が入ります。冒頭の吹き出しのように詳しい方でもそばにいてくれるといいんですが・・・やっぱり自力解決しないといけない・・・。

親テーマのPHPを修正するときは、事前にバックアップしたり、編集箇所をサーバー側のFTPで確認してから行うなど、細心の注意を払わなきゃいけないし・・・。アドセンスをダブルレクタングルにしたくても、プログラミングをいじるのは抵抗がある人も多いと思います。

そこで今日は子テーマのCSSのみで変更できるように頑張ってみました。

もし間違っても、変更箇所をきっちり削除すれば大丈夫ですし、php言語を変更する訳ではないので、サイトが真っ白になることもないでしょう!ただし、あくまで自己責任で行ってくださいね。

あくまで私の成功例です。サイトのCSSを修正し、メイン部分の幅を調整している場合にはいまからご紹介するコードを少し修正する必要があるので注意しましょう!

ちなみに私は、まだまだCSSコーディングはド素人なので、もっと簡潔にCSSを組めるのかもしれません。もしお分かりになる方いらっしゃいましたら、ぜひ教えてください・・・懇願!

あ、一応WEBクリエイター能力認定試験エキスパートに満点合格はできたので、HTML5とCSS3の基礎知識程度は持っています。

・・・と前置きが長くなってしまいました。ではまずはCSSコードからご紹介。私の備忘録にお付き合いいただきありがとうございます♪ちなみに私はaffinger3を使っています。(stingerシリーズの他のテーマの場合はセレクターが若干異なるかもしれません。)

スポンサーリンク

コピペでOK!記事内アドセンスをダブルレクタングル横に!

/*ダブルレクタングル表記*/
#comments #respond {
  float:none;
}

 

#wrapper {
  max-width: 1060px;
}

 

article aside div:first-child {
  overflow:hidden;
}
.smanone {
  padding: 0 !important;
}

 

@media only screen and (min-width:1120px){
article aside .widget {
  float: left!important;
  margin-right: 21px!important;
}
}

上記のCSSを子テーマにコピペするだけで大丈夫だと思います。#wrapperの幅を変更されている場合は、再度調整などをしてくださいね。もう一度言います。コピペは自己責任で行ってください!!心配な方は事前にバックアップをとっておいてくださいね。

今回のポイントは、擬似クラスによるセレクターです。

phpって何してくれてんの?

function.phpで行われていることは、HTMLの自動生成(たぶん)だと思います。

いろいろな条件を与えて、このときは関連記事を表示とか、ヘッダーにはこの要素を持ってきて、とかそういうのを自動生成してくれるプログラミングがfunction.phpだけでなく、親テーマのphpファイルに記述されています。(こんなの自分で記述できたら魔法使いみたいですよね!)

そのため、CSSで使用するセレクターはクラス属性などがはじめから(php上で)設定されているとわかりやすいんですが、デフォルトのCSS上で必要のないものにはわざわざID属性やクラス属性などがついていないですね。

そんなときに便利なのが、CSS3から実装されている擬似クラス属性です。私のサイトでは:hoverなどを使ってデザインを変えています。以下の説明は別に読まなくてもOKです。CSSの記述の説明をしています。

今回のCSS記述の説明をします♪

今回のポイント

擬似セレクター:【:first-child】

要素内にある並列関係(同じタグ)の子要素の一番はじめの要素を取ることができるセレクターです。今回はこれを二回使いました。

まずは、ダブルレクタングル広告を収容している親要素であるdivに【overflow:hidden】を記述。

セレクターの説明:article(記事内)のaside(記事下アドセンスや関連記事部分)のdiv:first-child(はじめのdiv)をとってきて{overflow:hidden}をかけてください。お願いします!

という意味の呪文がこれ↓
article aside div:first-child {
overflow:hidden;
}

この記述は飛ばしてしまうと、その下にある、関連記事がアドセンスの背景のように裏側に来てしまいます。floatはその名の通り、全面に浮かせる処理なので、overflow:hiddenの処理をしないといけません。

次にダブルレクタングル内のはじめのアドセンスを左にフロートさせます。はじめから左側にあるのですが、フロートをしないと、右側にモノを置くことができません。(flexでも可ですが・・・)

また、今回は、スクリーン幅が1120px未満になると、自動的にダブルレクタングル横が縦に変わってしまいます。これは、記事の幅が狭くなり、右に置いていたものが下に落ちてしまうからです。

なので、この1120pxを起点として、スクリーン幅が1120px以上の時は、ダブルレクタングル横になれ!と呪文を唱えますよ。

スクリーン幅が1120px位上のときなんですが【@media only screen and (min-width:1120px)】、
記事内(article)のasideの中のdivの中にあるはじめのdiv(div:first-child )について【article aside div div:first-child】、(ここまでではじめのアドセンスをセレクトしていますよ)これを左にフロートしてください。そのとき、右側のアドセンスがくっつくと困るので、余白を右側に21pxとってください。

この呪文が↓
@media only screen and (min-width:1120px){
article aside .textwidget {
float: left;
margin-right: 21px;
}
}

上の条件以外(スクリーン幅が1120px未満)は、ダブルレクタングル横にしていても自動的に落ちて縦のダブルレクタングルになります。そのとき、上で与えたフロートや右側の余白などは不要になるので、下記の記述で相殺してしまいます。また、縦のダブルレクタングルの際、下に余白を追加したいので余白下を10pxとっていますよ。

article aside div div:first-child {
float: none;
margin-right: 0;
margin-bottom: 10px;
}

この.smanoneの記述は、プログラム上で余白上が設定されているのを相殺して0にするためのもの。!importantを入れないと、プログラム上のHTMLでのstyleタグが優先されてしまうためです。

.smanone {
padding: 0 !important;
}

最後に↓の記述はメインパートの幅を広げ、記事幅を広げることでダブルレクタングル横の幅を確保するためのものです。

#wrapper {
max-width: 1060px;
}

最後に

CSSを2ヶ月間勉強して、まだまだコーディング知識不足の私です。もっとうまく記述できる方もいらっしゃると思います。何かいい書き方などありましたら、私のツイッターアカウントなどにご連絡いただけると大変うれしいです。

CSSはできるだけシンプルにしておいたほうがページ速度はアップすると思います。そのためphp上で横レクタングルにできるかたは、そのほうが利点もあると思います。ただ上の記述程度ではそこまで速度は変わらない気がしますが・・・。親テーマを修正したくない方は、CSS記述のみでダブルレクタングル横に挑戦してみてはいかがでしょうか?

 - ワードプレス