1428239737 はてなブログのテーマをカスタマイズして本文を画面一杯に広げたい


色合いや部品の配置のバランスから公式テーマのSolidを使おうと思っているのですが、本文がWebブラウザーのウィンドウ幅一杯に広がらず固定されているのが不満です。
HTML&CSSは詳しくないのですが、FirefoxのWeb開発ツールで
「#container-innerが951pxに、#mainが600pxに固定されているのが原因ではないか」という所までは調べましたが、どう変更すれば実現できるのか、そもそもはてなブログのカスタマイズ機能で実現可能なのかもわかりません。
(これらのwidthを削除しただけでは左側の#box2に#mainが重なってしまいました。)

どうカスタマイズすれば実現できるでしょうか?

回答の条件
  • 1人2回まで
  • 登録:
  • 終了:2015/04/12 12:08:43
id:miscellaneousness

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>

ベストアンサー

id:rouge_2008 No.1

回答回数595ベストアンサー獲得回数351

ダッシュボードの「デザイン」→「カスタマイズ」タブ内にある「デザイン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;
}
他7件のコメントを見る
id:rouge_2008

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

2015/04/11 21:35:13
id:miscellaneousness

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

2015/04/12 12:06:27

その他の回答0件)

id:rouge_2008 No.1

回答回数595ベストアンサー獲得回数351ここでベストアンサー

ダッシュボードの「デザイン」→「カスタマイズ」タブ内にある「デザイン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;
}
他7件のコメントを見る
id:rouge_2008

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

2015/04/11 21:35:13
id:miscellaneousness

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

2015/04/12 12:06:27

コメントはまだありません

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

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

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

回答リクエストを送信したユーザーはいません