読者です 読者をやめる 読者になる 読者になる

ディスディスブログ

気分変調症の男がテレビ番組の感想やカメラ、ファッションのことなどを書きます

『はてなブログ』のテーマ「Written」の記事幅を広げる私なりの方法と手順を紹介します

スポンサーリンク

『はてなブログ』のテーマ「Written」の記事幅を広げる、私なりの方法を紹介させていただきます。
私はcssに詳しくないので、詳しい方からすると滅茶苦茶なことをしているかもしれません。間違っていても良いから取り敢えず「Written」のカスタマイズの参考例を見てみたい、という方のための記事としてご覧いただければと思います。

 


はてなブログ

hatenablog.com


当ブログ『ディスディスブログ』は『はてなブログ』を使っています。はてなブログはブログのテーマを決めて、そこから色々カスタマイズをして自分なりのブログの外観を決めていくことになります。変更しないで問題がないと思えば、変更せず・カスタマイズせずに使ってももちろん大丈夫です。


Written - テーマ ストア


ちなみに自ブログは「Written」にしています。「Written」はシンプルなデザインで完成度が高いテーマと思いますので、デフォルトのまま使っても特に問題はないかと思われます。しかし、自ブログでは記事下に横並びの広告を載せていまして、これがサイドバーに被る症状が出てしまっていました。これでは見栄えも良くないですし、おそらくあれな意味でもOUTでしょう。


 


はてなブログの記事幅を変更する方法は?

chipspd.hatenadiary.jp


「Written」の記事幅を変更するために、先ず私がしたことは検索です。「はてなブログ 記事 幅」と検索した結果、『チップの日常』さんの記事がトップに来ていたのでそちらに書かれていた内容をそのまま試してみました。しかし、残念ながら同じようにしても記事幅は全く変わりませんでした。


wannabe-jellyfish.hatenablog.com


検索結果の2番目にあった『くらげになりたい。』さんの記事もそのまま試しました。@media screenを使ってブラウザの最小幅を指定してから各idの幅 (width) を指定してあげるやり方ですが、こちらもやはり記事幅の変更は反映されませんでした。

これらのブログ主さんが間違えたことを教えているということではありません、決して。特に「Written」以外のテーマを利用している方は、まずこちらの方法を試してください。変更していただき、思うように結果が反映されたならそれで解決です。

しかし「Written」の場合はおそらく同じようにCSSを変更しても結果は反映しないはずです。これは『はてなブログ』のテーマ毎に、使われているidが異なっていたりidの数を多く使っていたりするため、ブログ主さんと自ブログとで使われているidが異なっていた場合、あるいは自ブログの方がidを多く使われている場合には、変更が狙い通りに反映しない可能性があるのではないか、と私は理由を推測しています。

一時は管理画面内で変更を指定する場所を違えているのではないかとも思ったのですが、反映されていることはされていました。例えば、「wrapper」だか「main」だかは忘れましたが、widthを1200pxほどに変更したところ、「カラム落ち」をしてサイドバーがメインカラムの下に落ち込みました。なので反映自体されています。自分が指定した場所より優位なCSSが効いてしまっていて、自分の指定が思うように効かせられていない、ということが起こっていたようです。


 


はてなブログテーマ「Written」の記事幅を広げる方法は?

www.weed.nagoya


考えられることは一通り行っても記事幅を変更できなかったことで、これは詰んだかなぁと思っていたのですが、検索語句を何か別のもの(忘れました)に変更したところ、見つけたのが『Weed.nagoya』さんの記事です。こちらが解決へと導いてくださいました。本当にありがとうございます。救世主。

こちらの記事では、Google Chromeのブラウザを使用した「デベロッパーツール(検証モード)」を利用しての記事幅変更の方法が書かれていました。私もそれに倣って自ブログを表示させて、といってもトップページではなくブログ記事一つを表示させたところで、MacBookのトラックパッドを2本指でタップして(Windowsならマウスを右クリックして)、表示されるメニューから「検証」を選択、「デベロッパーツール」を表示させてみました。

 


f:id:dysdis:20161229123035j:plain


すると、自ブログのHTMLの構造が見え、任意の場所にマウスをホバーさせるかクリックするかすることで、何のCSSがどのように効いているのかが一目でわかるようになります(画像参照のこと)。

画像を見ると、はてなブログテーマ「Written」の場合は、「container」「container-inner」「content」「wrapper」「main」「box1」「box2」のidがあって、左記のカッコのうち左から大きく右へ行くほどに小さくなっています。小さくなっていると書くとわかりにくいですね……基本的には左が右を内包している感じです。

上記のように他のブログさんで教えてくださった方法が自ブログで反映されなかった原因は、「wrapper」や「main」の幅 (width) をいくら変更したとしても、それらを内包する「content」や「container-innner」や「container」の幅を変えていなければ「content」などで指定された幅より広くはならない、ということでしょう。子要素を大きくしたければ先ずその親要素を大きくせねば、と。

そこで自ブログの場合は、下記のように各idの幅 (width)を変更しました。変更するためには「ダッシュボード」→「デザイン設定」→「カスタマイズ」→「デザインCSS」へと進む必要があります。「デザインCSS」をクリックして編集ウィンドウをポップアップさせた後、ウィンドウ内に「/*/system*/(あえて一部を全角にしています、実際は半角です)」などと書かれた箇所があるかと思いますが、その下にでも書き加えると良いでしょう。変更を決定するときは「変更を保存する」ボタンをクリックします。

変更内容に関して特別な狙いはないです。「container」が1200pxにして、その両サイドに多少の余白が欲しいので「container-inner」 と「content」が1100px、ブログの左カラムに該当すると思われる「wrapper」と「main」が760px、右カラムのサイドバー「box2」が300pxにして、「main」と「box2」を足して1060pxとして40px余白を作るイメージです。私の場合はこのくらいがちょうど良いバランス感がありました。

#container {
    width: 1200px;
}
#container-inner {
    width: 1100px;
}
#content {
    width: 1100px;
}
#wrapper {
    width: 760px;
}
#main {
    width: 760px;
}
#box2 {
    width: 300px;
}

私はこんな具合に変更しました。

 


注意点

cssをいじる際の注意点は、メモなどに変更前の状態を「コピペ」しておくこと、この1点です。

変更前の状態を保存せずに内容をいじってしまうと、表示がおかしくなった場合にどこをどういじったからおかしくなったのか、その原因を特定しづらくなります。特定しづらくなるだけならまだ良いですが、特定できなくなったら非常に面倒なことになりますので。いつでも変更前の状態に戻せるように別の場所にコピペしておきましょう。

 


おわりに

このように変更したことで、記事下の横並びの広告がサイドバーに被らず、余白も適度に作れたかなと思っています。といってもこれで完成ではなく、時間を置くことでまた違った物の見方が生まれるかもしれないですから、あくまで暫定的なものです。

はてなブログのテーマ「Written」をお使いのはてなブロガーで、記事幅の変更に苦戦している方、変更したいけど諦めてしまった方はぜひ一度試してみてください。widthの数値は皆さんの好みで変更すると良いでしょう。プレビューや別窓にご自身のブログを表示させるなどして、納得できる記事幅を探してみてください。なかなか面白いですよ。

上記デベロッパーツールを使用した編集方法はテーマに限らず有用と思いますから、他のテーマをお使いの方も参考になさってください。その場合は上記の、私のCSSの幅指定では表示崩れを起こす危険があります。適当な数値に変えてくださいね。

以上です。今回参考させて頂きましたブログ主の皆さん、本当にありがとうございました。

dysdis.hatenablog.com