livedoorブログの質問です

カレンダーを、タイトル画像の右側に移したいのですが、当然設定画面のドラッグアンドドロップでは対応できません。
きっとCSSをカスタマイズするのだと思います
テンプレートは、キュア(2カラム)というのを使っています。
どのあたりをいじったらよいか、ご教示いただけると幸いです。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2009/11/09 08:27:46
  • 終了:2009/11/11 18:31:38

ベストアンサー

id:rouge_2008 No.1

rouge_2008回答回数594ベストアンサー獲得回数3512009/11/09 23:47:05

ポイント60pt

キュア(2カラム)でしたら、ブログパーツの設定でのドラッグ&ドロップだけで可能です。

1.Bの方からカレンダーのブログパーツをAの方に移動します。

2.Aの一番上にカレンダーを移動します。

3.「ブログに反映する」をクリックします。

これだけで大丈夫です。

表示位置をもう少し変更したい場合にCSSを編集します。

とりあえず上記の設定だけしてから、表示に問題がないか確認してみてください。

URLはダミーです。

http://q.hatena.ne.jp/

id:clinejp

質問があいまいでした

右側の一番上に移動することはできるのですが、ブログパーツ領域ではなくて、ブログタイトルの画像が入っているところ、つまりブログ領域の上の部分に入れたいのです。これひとつだけ、別格扱いにしたいのですが、これはドラッグ安堵ドロップでは無理ですよね。

2009/11/10 01:04:04
  • id:rouge_2008
    ドラッグ&ドロップだけでは無理ですね。
    CSSを編集して2カラムから3カラムにすれば可能なはずです。
    Aにカレンダーのブログパーツだけ残して、他のブログパーツはBに移動します。
    その他にCSSの編集がけっこうたくさん必要になると思います。
    まだ試していませんので、試してから後でコメントします。
  • id:rouge_2008
    一応出来ましたが、確認があります。
    タイトル+カレンダーの下に記事+ブログパーツを表示しますか?
    要するにタイトル+カレンダーのボックス幅を広げて、その横には何も表示しない。
    それとも、タイトル+カレンダーの下に記事だけを表示、横にブログパーツを表示しますか?(カレンダーの横からブログパーツが表示される形)
    どちらにするかで、HTMLの構造を変更する必要があります。
  • id:rouge_2008
    前者だとブログパーツの設定だけで変更した場合とあまり変わらなくなってしまいますので、後者の方法をご紹介します。

    まずHTMLを変更します。(トップページの場合ですが、他のページも同じように変更してください。)

    「float」によるボックスの表示位置変更の為、15行目くらいにある「<div id="container">」の後ろに次の2行を追加して、ヘッダー(タイトルとカレンダー)、メイン(ヘッダーと記事)を囲みます。
    (※この閉じタグは、後ほどの手順で追加します。)
    <div id="container">

    <div id="mainbox">
    <div id="myheader">

    次にタイトル表示のボックスを閉じている3個の「</div>」の後ろに、プラグインAのボックス「<div id="sub" class="column">」~「</div><!-- subColumn End -->」を移動(切り取って貼り付け)します。
    ※ボックスの外にはみ出さない為の回避手段として、「<hr class="clear" />」も追加して、先ほど追加した「<div id="myheader">」の閉じタグも一緒に追加します。
    </div>
    </div>
    </div>

    <div id="sub" class="column">
    <div class="column-inner">
    <div class="column-inner-2">
    <!-- ..... PluginList A ..... -->
    <$PluginList_A$>

    </div>
    </div>
    </div><!-- subColumn End -->
    <hr class="clear" />
    </div>

    一番最初の手順で追加した<div id="mainbox">の閉じタグを、「</div><!-- mainColumn End --></div><!-- content End -->」の次の行に追加します。
    </div><!-- mainColumn End -->

    </div><!-- content End -->
    </div><!-- mainbox End -->

    先ほど追加した次の行に以下の行を追加して、プラグインBのボックスを囲みます。
    <div id="sidebox">

    次に追加した「<div id="sidebox">」の閉じタグと、デザイン崩れの回避手段として先ほどと同じように「<hr class="clear">」の2行を「</div><!-- extraColumn End -->」の後ろに追加します。
    </div><!-- extraColumn End -->
    </div><!-- sidebox End -->
    <hr class="clear" />

    ※HTMLの変更は以上です。
    次にCSSの変更分です。

    「div#main div.column-inner」の背景指定を無効にします。
    div#main div.column-inner {
    margin: 0 230px 0 0;
    /* background: #ffffff url(http://parts.blog.livedoor.jp/img/usr/cure/main_bottom.gif) no-repeat 0 100%; */
    padding: 5px 15px 20px;
    }

    「div#sub」の上の外側余白をマイナス値を小さくして、表示位置を下げます。
    div#sub {
    float: right;
    display: inline;
    width: 220px;
    margin-top: -5px;
    }

    「div#sub div.column-inner」の下の内側余白を小さくします。
    div#sub div.column-inner {
    padding-bottom: 5px;
    }

    追加した「div#myheader」、「div#mainbox」、「div#sidebox」の3つのボックスのCSSを追加します。
    div#myheader {
    width: 690px;
    background: #ffffff url(http://parts.blog.livedoor.jp/img/usr/cure/main_top.gif) no-repeat top;
    padding: 25px 0 10px;
    }

    div#mainbox {
    float: left;
    width: 690px;
    background: #ffffff url(http://parts.blog.livedoor.jp/img/usr/cure/main_bottom.gif) no-repeat 0 100%;
    }

    div#sidebox {
    float: right;
    margin-top: 50px;
    }

    float利用によるデザイン崩れ回避手段として追加した「hr.clear」のCSSを追加します。
    hr.clear {
    clear: both;
    visibility: hidden;
    }

    「div.blog-title-outer」の背景指定を無効にして、カレンダーの分だけ幅を小さくします。
    div.blog-title-outer {
    /* background: #ffffff url(http://parts.blog.livedoor.jp/img/usr/cure/main_top.gif) no-repeat top; */
    color:#339999;
    text-align: left;
    /* width:690px; */
    width:470px;
    float:left;
    }

    「td table.caltblday」の下の外側余白を小さくして、カレンダーの下の余分な余白を取り除きます。
    td table.caltblday {
    margin: 0 auto 5px;
    width: 180px;
    color: #003333;
    font-size: 82%;
    }


    これで作業は終わりですので、試してみてください。
  • id:clinejp
    たくさんのソースを書いていただいてありがとうございます
    恐縮です。
    理解しながら進めています。
    とりいそぎお礼まで。
  • id:rouge_2008
    忘れていた箇所があったので追加します。

    ボックス「div#content」内に「dive#main」が一つだけになって、左寄せする必要がなくなったので、float指定を無効にします。
    div#main {
    /* float: left; */
    display: inline;
    width: 100%;
    margin: 0 -220px 0 0;
    }

    カレンダーの記事がある日付の背景色を変更します。(※デフォルトでは白なので、どの日付にリンクがあるか分からない状態になっていました・・・)
    td table.caltblday td.calon a {
    color: #003333;
    text-decoration: none;
    background: #b3e5e6;
    padding:2px;
    }

    けっこう変更点が多く、アーカイブや個別記事のHTMLも変更しなければならないので大変ですが、頑張ってください。(^^)
  • id:clinejp
    別のブログ作って恐る恐るやっています
    いろいろ本当にありがとうございました

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

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

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

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