htmlやcss、ライブドアブログのhtml、css編集に詳しい方に質問です。


すべての記事の上に広告文、下に相互リンクしてもらっているブログの紹介が載るように設定したいのですが、どのようにすればいいのかわかりません。

たとえば次のような感じです。
http://mozanasi.blog73.fc2.com/blog-entry-4631.html(エログなので18歳未満はアクセス禁止でお願いします。)

私が更新しているブログは
http://jyosikousei.net/(同じくエログです。)
です。

記事の上に、広告を1つ、記事の下に画像を使って相互リンク先を紹介したいです。

ライブドアブログでの具体的な編集の仕方を教えてくださる方、お手数ですが、どうぞご教授ください。

よろしくお願いします。



回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2010/04/22 21:19:20
  • 終了:2010/04/26 21:29:36

ベストアンサー

id:rouge_2008 No.1

rouge_2008回答回数594ベストアンサー獲得回数3512010/04/23 01:18:09

ポイント60pt

「デザインのカスタマイズ」でHTMLを編集します。

※一部だけ抜粋していますので、検索して該当箇所を編集してください。

※CSSで余白などのデザインを決めています。

・個別記事の場合は、「個別記事ページ」を編集

記事上部に挿入する場合

<!-- ..... MainColumn ..... -->
<div id="main" class="column">
<div class="column-inner">
<div class="column-inner-2">
<!-- ここに追加 -->
<div class="org-add1">
ここに広告のHTMLを記述
</div>
<!-- ここに追加 -->

記事下部に挿入する場合

			<li class="article-tool-box"><$ArticleToolBox$></li>
		</ul>
<!-- ここに追加 -->
<div class="org-add2">
ここに以下のように表示したいHTMLを記述します。<br>
<img src="画像のURL"><br>
<a href="http://blog.livedoor.jp/">livedoor ブログ</a><br>
<a href="http://www.google.co.jp/">Google 検索</a>
</div>
<!-- ここに追加 -->

「スタイルシート(CSS)」の編集で以下を追加します。

.org-add1 {
text-align: left;
padding: 20px 5px 5px;
}

.org-add2 {
text-align: left;
padding: 5px;
}

※サイズは好みで変更して大丈夫です。


・トップページの各記事の上部に挿入する場合

<div class="article-outer hentry">
<div class="article-outer-2">
<!-- ここに追加 -->
<div class="org-add1">
ここに広告のHTMLを記述
</div>
<!-- ここに追加 -->

・トップページの各記事の下部に挿入する場合

			<li class="article-tool-box"><$ArticleToolBox$></li>
		</ul>
<!-- ここに追加 -->
<div class="org-add2">
ここにHTMLを記述します。<br>
<img src="画像のURL"><br>
<a href="http://blog.livedoor.jp/">livedoorでブログを始める!</a><br>
<a href="http://www.google.co.jp/">Google 検索</a>
</div>
<!-- ここに追加 -->
id:rakusutasia

ありがとうございます!無事、うまく表示することができました。

2010/04/24 07:43:47
  • id:rakusutasia
    http://vipelog.blog27.fc2.com/
    のような形で広告と記事を同じようなデザインにする方法も教えていただけると嬉しいです!
  • id:rouge_2008
    記事のブロックに適用されているCSSを確認して、追加したブロックにも同じようなCSSが適用されるようにすれば可能だと思います。
    現在使用しているデザインが「ロハス1」だと思いますが、このデザインをカスタマイズして使用する予定ですか?
  • id:rouge_2008
    「ロハス1」の場合です。
    記事部分と同じように表示するために、HTMLの構造も変更しました。

    ・記事上部のHTML
    <!-- ここに追加 -->
    <div class="ads-outer">
    <div class="article-outer-3">
    <div class="article-title-myheader">
    <div class="article-title-myouter">
    <h2 class="article-title entry-title">広告タイトル</h2>
    </div>
    </div><!-- articlemyHeader End -->
    <div class="article-body entry-content">
    <div class="article-body-inner">
    サンプルテキストサンプルテキストサンプルテキスト<br />
    サンプルサンプルサンプルサンプルサンプルサンプルサンプルさんぷるさんぷるさんぷるさんぷる
    </div>
    </div><!-- articleBody End -->
    </div>
    </div>
    <!-- ここに追加 -->

    上記を、トップページの場合は「<div class="article-outer hentry">」の次に(※挿入場所も変更あり)、個別記事ページの場合は「<div class="column-inner-2">」の次に(※挿入場所は変更なし)記述します。


    ・記事下部のHTML
    <!-- ここに追加 -->
    <div class="ads-outer2">
    <div class="article-outer-3">
    <div class="article-title-myheader">
    <div class="article-title-myouter">
    <h2 class="article-title entry-title">広告タイトル2</h2>
    </div>
    </div><!-- articlemyHeader End -->
    <div class="article-body entry-content">
    <div class="article-body-inner">
    <img src="画像のURL"><br>
    <a href="http://blog.livedoor.jp/">livedoorでブログを始める!</a><br>
    <a href="http://www.google.co.jp/">Google 検索</a>
    サンプルテキストサンプルテキストサンプルテキスト<br />
    サンプルテキストサンプルテキストサンプルテキスト<br />
    サンプルサンプルサンプルサンプルサンプルサンプルサンプルさんぷるさんぷるさんぷるさんぷる
    </div>
    </div><!-- articleBody End -->
    </div>
    </div>
    <!-- ここに追加 -->

    上記を、トップページの場合は「</div><!-- articleOuter End -->」の次に、個別記事ページの場合は「 </div><!-- articleFooter End -->」の次に(※両方場所の変更あり)記述します。
  • id:rouge_2008
    CSSを忘れていました・・・
    前回追加分とそっくり入れ替えてください。

    .ads-outer {
    margin: 62px 0px 35px;
    text-align: left;
    }

    .ads-outer2 {
    margin: 35px 0px;
    text-align: left;
    }

    .article-title-myheader {
    background: url("http://parts.blog.livedoor.jp/img/usr/lohas001/bg_h2title.gif") no-repeat scroll 0 33px transparent;
    padding: 27px 0px 0px;
    }
  • id:rakusutasia
    rouge_2008様、詳しく教えていただきありがとうございます。明日、rouge_2008様のアドバイスを参考に、挑戦してみたいと思います。また、明日うまくできたかご報告いたします。
  • id:rakusutasia
    おおおおお!うまくいきました!!

    ありがとうございます^^

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません