サイドバーの位置をずらさないまま記事本文の上に広告を貼りたい

PR 2017/6/29

このトピックには7件の返信、2人の参加者があり、最後にcianにより9年、 4ヶ月前に更新されました。

7件の返信スレッドを表示中

投稿者

投稿
- 2017年6月29日 5:31 PM #53550
  
  cian
  ゲスト
  
  皆さん、こんにちは。
  
  イラストで申し訳ないのですが、
  
  View post on imgur.com
  
  このようにサイドバーと要素（広告など）が平行させたい場合にはどうすればよいでしょうか？
  
  (header.php)の
  <main itemscope itemprop=”mainContentOfPage”>の下にコードを貼るとサイドバーもその分一緒に下がりますし、
  <div id=”main” itemscope itemtype=”http://schema.org/Blog”>の下だと記事の上なので広告の場合、記事タイトルと広告が近いので規約違反になりそうですし・・・
  
  一応、 <main itemscope itemprop=”mainContentOfPage”>の下に置いて、#main { margin-top: 200px;}
  要素の部分にmargin-bottom:-200px;
  とやっていけてるのですが、
  ネガティブマージンはあまりよくないって聞くので、できればネガティブマージンを使わずに済む方法があれば教えて欲しいです。
  
  よろしくお願いします。
- 2017年6月29日 6:21 PM #53554
  
  わいひら
  キーマスター
  
  の下だと記事の上なので広告の場合、記事タイトルと広告が近いので規約違反になりそうですし・・・
  
  以下のように設定して、.yosoに対して、マージンを設定すれば適切に離すことはできるかと思います。
  <div class="yoso">要素部分（広告コード）</div>
- 2017年6月29日 10:05 PM #53560
  
  cian
  ゲスト
  
  わいひら様
  
  ありがとうございます。
  
  できれば画像のようにヘッダーと記事を囲むborderの間に要素を置きたいです。
  かつ、サイドバーの位置が下がらないようにしたいんです。
  
  View post on imgur.com
  
  どうでしょうか・・・？
- 2017年6月30日 11:14 AM #53568
  かうたっく
  ゲスト
  トップページのカスタマイズとして、#mainの領域内に入れると簡単ですよ＾＾
  Simplicity2 child: 投稿ページ (home.php)にdiv要素を足して、元々あったlistを読み込む記載をdivで囲みます。
```
<?php //トップページ用 ?>
<?php get_header(); ?>
<div class="yoso">要素</div>
<div class="moto-main">
<?php get_template_part('list') ?>
</div>
<?php get_footer(); ?>
```
  #mainで指定されたボーダーと余白を初期値に戻し、yosoとmoto-mainに同じスタイルを指定すると、要素も同じスタイルになり、#mainの位置と並びますよ。
```
#main {
  padding: 0;
  border: none;
  border-radius: 0;
}
.moto-main, .yoso {
  padding: 20px 29px;
  border:1px solid #ddd;
  background-color:#fff;
  border-radius: 4px;
  margin-bottom: 30px;  
}
```
  色々考えた中、これが簡単な方法かな！？と思われます？
- 2017年6月30日 11:31 AM #53570
  
  かうたっく
  ゲスト
  
  mainタグ内にdivで要素追加、listはdivで囲い装飾した結果、サイドバーと横一列に。
  
  http://netakiri.net/uploader/src/up0268.png
- 2017年6月30日 12:28 PM #53571
  
  cian
  ゲスト
  
  かうたっく様
  
  ありがとうございます。
  トップページはできたのですが、個別の方が反映されません。
  個別投稿ページ (page.php)も同じように
  
  <?php get_header(); ?>
  <div class=”yoso”>要素</div>
  <div class=”moto-main”>
  <?php get_template_part(‘breadcrumbs-page’); //固定ページパンくずリスト?>
  </div>
  
  とやったのですが無理でした。
  個別の方には反映させたい場合、どうすればいいでしょうか？
- 2017年6月30日 5:22 PM #53577
  わいひら
  キーマスター
  header.phpを以下のように書いて、
```
          
          <main itemscope itemprop="mainContentOfPage">
          <div class="yoso">要素</div>
            <div id="main" itemscope itemtype="http://schema.org/Blog">
```
  style.cssに以下のように書けばいけるかと思います。
```
main{
  box-sizing: border-box;
  float: left;
  position: relative;
  width: 740px;

}
.yoso{
  background-color: red;
  margin-bottom: 15px;
  padding: 20px 29px;
}
```
  あと、モバイルに関しては、メディアクエリを書くか、mobile.cssに書くかして、自前で調節してください。
- 2017年6月30日 11:18 PM #53582
  
  cian
  ゲスト
  
  わいひら様
  　
  ありがとうございます。
  
  モバイルもやらなくちゃいけないんですよね・・・
  頑張ります
投稿者

投稿