♥♥♥回答ポイント 450ptウォッチ 1

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

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

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

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

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

• はてなアカウントでログイン
• 無料ユーザー登録

みんなの回答

• ♥♥♥

  2013/03/25 23:04:08

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

  
  

  ◆自動回答拒否を設定しておりますが、

  　回答をしようと思われていらっしゃるかたで、回答ができない状態の場合は、

  　設定を解除致しますのでコメント欄を通じてご連絡下さい。

  　（自動回答拒否機能使用の場合、設定者側では　実際に拒否されているIDが把握できません）

Hiroto2013/03/25 23:10:47

満足150pt

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


ページのヘッダ

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




スタイルシート

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




• 「空欄行」のクラス名は必要に応じて書き換えてください。
• ここでは、「空欄行」の高さを50ピクセル、パディングを5ピクセル、背景色を黄色に設定していますが、必要に応じて書き換えてください。

スター

• 

  1件のコメントを見る

• ♥♥♥ 2013/03/26 00:15:10

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

  スター

a-kuma32013/03/25 23:21:23

満足300pt

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

ぼくが使ってるのは、極シンプルなテーマで、見た目はこんな感じ。

で、ページのヘッダはこう。

<div class="main">




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

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

見た目が、こうなります。


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


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

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

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

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

スター

• 

  3件のコメントを見る

• ♥♥♥ 2013/03/26 00:15:37

  a-kuma3様
  
  回答ありがとうございます。
  

  ページのヘッダは、こんな感じで始まっていますか？
  

  
  

  
  ...

  
  

  はい。そうでございます。
  

  id="outline" の前に

  ～

  を入れると、イメージ通りに行が挿入されると思います。

  
  

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

  スター

• a-kuma3 2013/03/26 00:32:29

  bgcolor="#ecf5ff" style="border:dotted #666666 thin;"
  を表示できましたなら・・・と思いまして、

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

  とあるところを、

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

  として（Test というのも何なので）、CSS のところに以下のような感じ？

  .short_message {
      background-color: #ecf5ff;
      border: dotted #666666 thin;
      padding: 0.5em 2em;
  }
  

  エリアの内側の余白は、適当に入れてみました。

  スター

• ♥♥♥ 2013/03/26 01:05:16

  a-kuma3様
  
  ご丁寧なご指導ありがとうございます。
  バッチリ　成功　できました!
  
  ＼(^O^)／　わ～い　わ～い!
  
  念願のダイアリー構成に到達できて非常にうれしいですぅぅぅ。
  
  誠に誠に、ありがとうございました。
  
  <(_ _)>

  スター
• その他の回答を読む

この質問へのコメント

• ♥♥♥2013/03/26 01:45:12
  Hiroto様　a-kuma3様
  
  迅速かつ的確な回答を頂きまして、ありがとうございました。
  長年の念願であったダイアリー構成デザインが実現でき、狂喜乱舞しております。
  心よりの感謝とお礼を申し上げます。
  <(_ _)>

質問の情報

登録日時

2013-03-25 22:48:43

終了日時

2013-03-26 01:32:08

回答条件

1人5回まで

この質問のカテゴリ

• はてなの使い方
• ウェブ制作

この質問に含まれるキーワード

人気の質問

• この英文どうなってますか？ The boy seemed to be waiting for his mother to come.（その少年は母親が来…匿名質問者112日前
• 不定詞の形容詞的用法らしいんですけど、副詞的用法と書いたら✖️ですか？ I want to buy a book to read …匿名質問者112日前
• 日向陽葵という○V女優が好きなのですが似ている○V女優はいますか匿名質問者19時間前
• 共通テストで使われるプログラミング言語は共通テスト特有の言語と聞いたのですが、受験勉強で身につけたプ…匿名質問者120時間前
• 内定してほしいポケモンはいますか？匿名質問者20時間前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ