写真ブログやカメラブログをやっている人は、できるだけ写真をでかく貼りたいもの。
でも、写真を貼る本文エリアを大きくするとレイアウトが一気に崩れてしまう。
自分は今までそう思って諦めていました。
所が、突然、解決方法を発見。
この方法を使えば、写真はでっかく、レイアウトは崩れず（サイドバーが落ちたりしない）写真ブログにすることができます。
簡単に解説すると、このCSSは、まずブログの幅をきめてから自動的にブログパーツの大きさが変わるようになります。
当然、ブログに貼られた画像の大きさもブログ読者のプラウザウインドウの大きさに合わせて限界まで大きくなる。
この感動は一度試してみないとわからないかもしれません。
このCSSを使うと、画像がこんな風にでっかく表示されるようになる。
わかりやすく書くとパソコンゲームなどで、ウインドウの大きさを変えても、ゲーム画面のレイアウトは変わりませんよね？
あんな風になるわけです。
今までは、ブログの幅を決めて、ブログ本文エリアの大きさを決めて（PX,％）サイドバーの大きさを決めてって感じでデザインされていました。
そのせいで、ブログに幅が広い画像を貼るとサイドバーが下に落ちる、とう笑えない状況になったことが何度もあります。
このCSSは、それを回避することができる理想的なCSSになります。
ブログの画像をそれ程大きくする必要はない時は、ブログに貼った画像を小さくする機能がはてなブログにあるのでそれを使います。
画像の端をマウスポインタで掴んで（ドラッグして）、動かしてやる。
まず自分の環境。
ブログは、はてなブログ。
はてなブログに画像を貼る際、はてなブログのサービスからではなくGoogleフォトから貼るようにしています。
ブログのデザインテーマは、Naked。
で、下のブログに紹介されている、はてなブログを幅広表示にするカスタムCSSをコピーして、はてなブログのダッシュボード→デザイン→デザインCSSに貼り付けます。
それだけで、画像は大きく、サイドバーは落ちない、というある意味カメラブログに取っては理想的なブログデザインになります。
写真だけではなくて、アニメのイラストや漫画、画像なども大きく載せられるので、かなりオススメのCSSだと思います。
まずは、Nakedの紹介。
デザインCSSに貼るCSSを紹介しているブログ。
自分のブログデザインのCSSは現在こういう風になっています。
ブログの環境は人によって違うため、これをデザインCSSにコピーして貼り付けてもうまくいかないかもしれません。
ライブドアブログやFC2ブログ、Seesaaブログなどで使えるかどうかはわかりません。
ノートパソコンの画面解像度は1366X720、デスクトップパソコンの画面解像度は1920×1080が今は主流ですかね？
昔の用にブログ幅が1000Px以下である必要はないと思います。
でも、このCSSだと解像度が低くても、しっかり追従してくれるのでそこは便利です。
念の為にスマホ画面でも見てみましたが、スマホ用のデザインで、ちゃんと見ることができました（スマホはスマホ用のデザインで見たほうが見やすいため、レスポンシブデザインのチェック欄はオフにしてます）
課題は、本文エリアが大きくなりすぎて、サイドバー部分が細く見えること。
これをCSSに貼り付けてみましたが、見事にサイドバーが下に落ちてしまいました。
#box2 {
float: right;
width: 400px; /* サイドバーの幅 */
}
以下、はてなブログのブログデザインテーマNakedのブログの横幅を広くするCSSになります。
/*ここから*/
/* <system section="theme" selected="6653812171397406126"> */
@import url("http://hatenablog.com/theme/6653812171397406126.css");
/* </system> */
@media screen and (min-width:1110px) {
#content-inner, #n-menu .menu-inner, #n-menu .menu-inner {
max-width: 2400px;
}
.entry-header, .entry-content {
font-size: 105%;
}
}
@media screen and (min-width:1400px) {
.entry-header, .entry-content {
font-size: 110%;
}
}
@media screen and (min-width:1600px) {
.entry-header, .entry-content {
font-size: 115%;
}
}
@media screen and (min-width:1800px) {
.entry-header, .entry-content {
font-size: 120%;
}
}
/*ここまで*/
/*TOPに戻るボタンをブログに付ける*/
#page-top {
display:none;
position:fixed;
right:10px;
bottom:20px;
margin: 0;
padding: 0;
text-align:center;
}
#move-page-top{
color:rgba(0,0,0,0.4);
text-decoration:none;
display:block;
cursor:pointer;
}
#move-page-top:hover{
color:rgba(0,0,0,0.6);
}
@media only screen and (min-width: 400px){
#page-top{
right:50%;
margin-right: -450px;
}
/*ブログに使われるfontを変更する*/
body {
font-family: Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
/*ブログタイトルの文字の大きさを変更する*/
#title a {
font-family: sans-serif;
font-size: 150%;
}
/*ブログ下説明文の文字の大きさ、色を変更する*/
#blog-description {
color:#f8f8ff;
font-size:180%;
}
