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

ベストアンサー

• rouge_20082015/04/08 23:55:13

  

  ダッシュボードの「デザイン」→「カスタマイズ」タブ内にある「デザインCSS」でCSSによるデザイン変更が可能です。
  今回の場合は、以下の記述を追加してみてください。
  

  #container-inner {
    width: 100%;
  }
  #main {
    width: 100%;
  }
  .entry-header {
    width: 80%;
  }
  
  

  
  

  表示を確認しながら任意の数値を指定してみてください。
  特に「.entry-header」は記事タイトル、カテゴリー、日付等の表示部ですので、日付の表示位置に影響します。
  
  
  【※※ 追記 ※※】
  
  訂正したスタイルを追記します。
  

  #container-inner {
    width: 100%;
  }
  #content-inner {
    position: relative;
  }
  #wrapper {
    float: none;
    margin-left: 250px;
  }
  #main {
    width: 100%;
  }
  #box2 {
    position: absolute;
    top: 0;
    left: 0;
  }
  .entry-header {
    width: 80%;
  }
  

  
  
  

  【※※ 追記 ※※】
  
  右サイドバーに変更するスタイルです。
  

  #container {
    background: url('/css/theme/solid/box2_bg.png') repeat-y right;
  }
  #container-inner {
    width: 100%;
  }
  #content-inner {
    position: relative;
  }
  #blog-title, #wrapper {
    padding-left: 30px;
    padding-right: 25px;
    border-left: none;
  }
  #wrapper {
    float: none;
    margin-right: 255px;
  }
  #main {
    width: 100%;
  }
  #box2 {
    position: absolute;
    top: 0;
    right: 0;
  }
  .entry-header {
    width: 100%;
    padding-right: 0;
  }
  #footer {
    background: url('/css/theme/solid/box2_bg.png') repeat-y right;
  }
  #footer-inner {
    margin-left: 0;
    border-left: none;
  }
  

  スター

  • 

    9件のコメントを見る

  • ガー！ 2015/04/09 12:23:50

    #mainのwidthを%で指定すると、#box2が#mainの下に行ってしまいます。

    スター

  • rouge_2008 2015/04/09 20:40:25

    最大画面にしていないと確かにそうなりますね。
    気がつきませんでした。すみません・・・
    以下を追加してみてください。(※少し間違えたので投稿し直しています。)
    

    #container-inner {
      width: 100%;
    }
    #content-inner {
      position: relative;
    }
    #wrapper {
      float: none;
      margin-left: 250px;
    }
    #main {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
    .entry-header {
      width: 80%;
    }
    

    スター

  • ガー！ 2015/04/10 17:31:26

    今度は重なってしまいました。
    Firefox 37.0.1でもIE 11でも同じです。
    http://miscellaneousness.hatenablog.com/

    スター

  • ガー！ 2015/04/10 18:08:10

    はてなブログ固有の問題なのかHTML&CSS一般の問題なのかはわかりませんが、id:platismさん作成のテーマModuleの説明を見ると、marginを使って#mainと#box2が重なっていないように見せることしかできないのですかね。（計算が大変…）
    
    # HTML&CSSにはXAMLのDockPanelのようなものが無い？

    スター

  • rouge_2008 2015/04/10 19:54:42

    Google ChromeとFirefox 35.xで確認してみましたが、こちらでも重なっている状態でした。
    昨日確認した時とは違う動作になっていましたので、はてな側で何らかの変更が行われたのかもしれません。(CSSの変更点を纏めてコメントする時に、私が何か見落とした可能性もありますが・・・)
    私の方でも再度確認してみますが、はてな側で機能変更等を行っている可能性もありますので、その場合は作業が落ち着くまで待つ必要があると思います。
    
    XAMLについては分かりませんので「DockPanel」がどのような機能なのか分かりませんが、HTMLの出現の順番がはてなブログではコンテンツ部分が先で、メニューなどサイドバー部分が後になっています。
    このような場合に、左側に幅固定のサイドバー、右側に残りの可変幅のコンテンツを表示するのは難しいと思います。(サイドバーとコンテンツ部分の表示が逆だと可能だと思いますが・・・)

    スター

  • rouge_2008 2015/04/10 23:26:20

    すみません。私のうっかりミスでした。
    訂正後のスタイルは回答欄に追記しました。
    今度は大丈夫だと思いますが、表示不具合があるようでしたらお知らせください。

    スター

  • ガー！ 2015/04/11 00:39:48

    おおっ！かなり良い感じになりました。ありがとうございます。
    後は.entry-headerの幅がちょっと短いのとかを微調整すれば行けそうです。
    ちなみに、スクロールバーが右側だとサイドバーも右側の方がマウス操作し易いかもしれないと思っていたので、できれば両方試してみたいと思ってました。

    スター

  • rouge_2008 2015/04/11 21:35:13

    一応、右サイドバーに変更するスタイルを回答欄に追記しました。
    左サイドバーと同様に「position」プロパティで位置を決めています。
    「css positon」で検索して、絶対配置、相対配置について調べてみてください。

    スター

  • ガー！ 2015/04/12 12:06:27

    ありがとうございます。
    サイドバーの画像を別途左右反転する必要がありますが、右サイドバーもうまくいきました。
    http://miscellaneousness.hatenablog.jp/

    スター

その他の回答

• ガー！

  2015/04/05 22:22:37

  XAMLだとこんな感じで実現できます。（これを実行したのが添付画像です）

  <Window x:Class="TestWpfLayout.MainWindow"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          Title="MainWindow" Height="350" Width="525">
    <DockPanel>
      <StackPanel Width="100">
        <Button Content="Button"/>
        <Button Content="Button"/>
      </StackPanel>
      <RichTextBox x:Name="richTextBox" MinWidth="300" DockPanel.Dock="Top">
        <FlowDocument PageWidth="{Binding ActualWidth, ElementName=richTextBox}">
          <Paragraph><Run Text="RichTextBox"/></Paragraph>
        </FlowDocument>
      </RichTextBox>
    </DockPanel>
  </Window>
  

この質問へのコメント

質問の情報

登録日時

2015-04-05 22:15:37

終了日時

2015-04-12 12:08:43

回答条件

1人2回まで

この質問のカテゴリ

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

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

人気の質問

• ヤクルトスワローズ　近藤弘樹は現役引退後は、何をしますか？ren9908271日前
• 日常系アニメって何が面白くて流行したんでしょうか？日常系アニメが流行した当時の時代背景などを是非教え…匿名質問者22日前
• 通信販売で買える冷凍のラム肉で美味しいところを教えてください。５００ｇから１ｋｇくらい買いたいです。…匿名質問者11日前
• 2つ質問です。①ドラゴンボールがフリーザ編で終わっていたらドラゴンボールはどうなっていったと思います…匿名質問者2日前
• 以下の特徴をもつ犬のキャラクターを思い出したいです。ご存知の方、教えていただけませんか？ 白くてマッ…question1hat1日前

メニュー

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

PC版

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