人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

はてなダイアリーのヘッダーの下に空欄行を入れる手法を教えて下さい。

現在、はてなダイアリーを3カラムにして使っておりますが、
"ヘッダー"と ""メイン記事部分+サイドバー部分"" との間に空欄行を作成し、
この空欄行には必要に応じて、
はてな記法やhtmlタグを使用した文章やリンク(URL)を表示したいと思います。

ダイアリー管理ページ内デザインの、どの部分にどのようなタグやCSSを記入すれば実現できますでしょうか?

(はてなダイアリー上部部分、現在のものと実現したいものの画像を添付致します)

ご指導宜しくお願い申し上げます。

1364219323
●拡大する

●質問者: ???
●カテゴリ:はてなの使い方 ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

質問者から

◆ ダイアリーURL: http://d.hatena.ne.jp/SumireS+PUB/


◆自動回答拒否を設定しておりますが、
回答をしようと思われていらっしゃるかたで、回答ができない状態の場合は、
設定を解除致しますのでコメント欄を通じてご連絡下さい。
(自動回答拒否機能使用の場合、設定者側では 実際に拒否されているIDが把握できません)


1 ● Hiroto
●150ポイント

ページのヘッダ、スタイルシートを以下のようにしてください。

ページのヘッダ

<div class="Test">
この部分を「空欄行」にします。
</div>

スタイルシート

.Test{
 height: 50px;
 padding: 5px;
 background-color: #ffff00;
}


???さんのコメント
Hiroto様 わかりやすいご指導ありがとうございます。 書いて下さったタグ類で、希望の空欄を実現できました。 回答ありがとうございました。 <(_ _)>

2 ● a-kuma3
●300ポイント

使っているテーマにもよると思うのですけれど、「ページのヘッダ」辺りをいじる感じになると思います。
「管理」→「デザイン」→「デザイン編集」→「詳細」の「ページのヘッダ」の部分です。

ぼくが使ってるのは、極シンプルなテーマで、見た目はこんな感じ。
f:id:a-kuma3:20130325230930p:image
で、ページのヘッダはこう。

<div class="main">

それに、こんな感じの行を加えると、

<div style="border: 3px solid red;">ここに、なんぞやの文字を入れれば良かろう...</div>
<div class="main">

見た目が、こうなります。
f:id:a-kuma3:20130325230931p:image

はてな記法は使えないみたいですが、HTML のタグは有効だと思います。


SumireS さんが使ってるテーマだと、ページのヘッダは、こんな感じで始まっていますか?

<div id="outline">
<div id="sidebar_left">
 ...

id="outline" の前に <div>?</div> を入れると、イメージ通りに行が挿入されると思います。

<div> ここに、なんぞやの文字を入れれば良かろう... </div>
<div id="outline">
<div id="sidebar_left">
 ...

???さんのコメント
a-kuma3様 回答ありがとうございます。 >> ページのヘッダは、こんな感じで始まっていますか? <div id="outline"> <div id="sidebar_left"> ... << はい。そうでございます。 >> id="outline" の前に <div>?</div> を入れると、イメージ通りに行が挿入されると思います。 << はい。 できました。 ご提示下さいました画像2つめにあります 赤い枠入りの表記に魅了されまして、 ヘッダー画像下にできた空欄行へ bgcolor="#ecf5ff" style="border:dotted #666666 thin;" を表示できましたなら・・・と思いまして、 いろいろ試してみたのですが、どうも上手くいかずに四苦八苦しております。 CSSのところには、Hiroto様ご指導の下記を入れてあります。(高さと背景色番号を変えました) /*ヘッダー下空欄行*/ .Test{ height: 20px; padding: 5px; background-color: #f9f9f9; } お手数をおかけして申し訳ございませんが、 今少しのご指導を賜ることができましたなら幸甚です。 <(_ _)>

a-kuma3さんのコメント
>> bgcolor="#ecf5ff" style="border:dotted #666666 thin;" を表示できましたなら・・・と思いまして、 << >|txt| <div>ここに、なんぞやの文字を入れれば良かろう...</div> ||< とあるところを、 >|txt| <div class="short_message">ここに、なんぞやの文字を入れれば良かろう...</div> ||< として(Test というのも何なので)、CSS のところに以下のような感じ? >|txt| .short_message { background-color: #ecf5ff; border: dotted #666666 thin; padding: 0.5em 2em; } ||< エリアの内側の余白は、適当に入れてみました。

???さんのコメント
a-kuma3様 ご丁寧なご指導ありがとうございます。 バッチリ 成功 できました! \(^O^)/ わ?い わ?い! 念願のダイアリー構成に到達できて非常にうれしいですぅぅぅ。 誠に誠に、ありがとうございました。 <(_ _)>
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ