ブログデザインを変更しました。
なんだかんだでブログ運営を始めてから３ヶ月が経過し、気づけば記事数も５０記事を超えている感じです。
３ヶ月経過したのでなんか心機一転といいますかとりあえずサイトデザインとかいじってみたくなったので『手っ取り早くテーマ変更でもするか』と思い立ちテーマストアを徘徊していたら『Space』というザ・シンプルな良作品があったので速攻変えました。
個人的にすごく気に入ったテーマなので紹介記事を勝手に書いています。 ちなみに作者様はこの方ですね。
『Space』に関しての記事も書かれています。 ぜひ気になる方はどうぞ。
ブログデザインを変更した。テーマストアの新着テーマにあった『Space』っていうザ・シンプルな良作品に。
結果何がいいといいますと、『圧倒的なシンプルさ』ですよね。
あとはエンターで行間を入れた際の空き具合とも時間の余裕がある感じが読みやすさをさらに倍増させてくれているところが気に入っています。 僕としてはこの『思考ノイズ↵』ってブログは『ゆるっと雑記するブログ』として位置付けているので、日記とかメモが割とかそういう節があるブログはこのテーマの雰囲気がぴったりだなと思います。
あとは編集画面で『HTMLをそのまま組み込めるところが◎』だと思いました。 他テーマだと『そのまま編集』と『HTML編集』が別になっていたりするので僕は面倒だなと思っていたのですが、『Space』に関してはコードをそのまま組み込んでも反映されるようになっているので読者ボタンを配置したりするのが楽でいいです。
『でもこれだといちいちプレビュー見なきゃいけなくね？』っていう人は『リアルタイムプレビュー』っていう機能があったのでそれを使ったらいいかと思います。
画像とかも差し込んだ際はコードで表記されるのですがリアルタイムプレビューを使えばしっかりとどのように表示されているかを確認することができます。
ちょっとエンジニア気質がある方に向いてそうな編集画面ですね。僕はこういう感じが大好きなのでしばらくはこのテーマにお世話になろうかなと思います。
あとは行間とか色々とカスタマイズできますよーってことをテーマ説明の枠で書いてくださっているのを引用しておきます。 カスタマイズしてもかなり面白く仕上がりそうなので興味のある方はやってみてください。
この『Space』は文字のサイズや、文字と文字との空間や余白を重視し、読みやすさを意識してデザインされた1カラムテーマです。もちろんレスポンシブ対応。線や装飾といったものは極力使わず、かなりシンプルなテーマになっています。
このテーマの特徴 「読む」ことを意識したシンプルなデザイン パンくずやサイドバーをすべて下部へ移動 画面の幅によって変わる文字サイズや行間 行間を参考にして作られた縦方向の余白や空間（よって、こちらも画面幅で変化します） 簡単なカスタマイズ例 簡単なカスタマイズ例をいくつかご紹介します。
デザインのカスタマイズの仕方は、ヘルプのブログのデザインを変更する（カスタマイズ） - はてなブログ ヘルプや、「はてなブログ カスタマイズ」などでネット検索などをしたら簡単にやり方が分かります。
横幅を変える よくレクタングル（大）系の広告を2つ並べて設置しているブログがありますが、本テーマでは横幅の最大値を「読みやすい」と感じる文字数（一行最大35文字）に設定しています。カスタマイズしなければ横幅が足りませんので、表示する場合は次のうように変更してください。
#container { max-width: 672px; }ブログ名を左寄せ ブログ名を左側に寄せにしたいときは、次のように設定します。
#blog-title-content { text-align: left; }パンくずを戻す パンくずを通常通りの場所に表示する場合、次のようにすれば戻ります。
#top-box { order: 0; }フォントサイズ・行間を変える このテーマはモバイル相当の画面（575px以下）の文字サイズを基準として画面の大きさで相対的に変化します。また全体の余白や高さなど、縦方向のそのほとんどが文字サイズの変化で相対で微妙に変わります。
この基準となる文字サイズを変更すると、全体の文字サイズも変更します。
#html { font-size: 16px; }また（ちょっと専門的な話なのですが）文字サイズや行間の変化は以下のように指定しています。
特に行間はメディアクエリで上書するか!importanを付けないとカスタマイズできませんので、ご参考にしてください。
html { /* 0px～575px */ font-size: 16.2px; /* 文字サイズ */ line-height: 1.9; /* 行間 */ } /* * 変更はbodyタグで指定しています。 */ @media (min-width: 576px) { /* 576px～767px */ body { font-size: 1.03086em; /* 約16.7px */ line-height: 1.925; } } @media (min-width: 768px) { /* 768px～991px */ body { font-size: 1.06173em; /* 約17.2px */ line-height: 1.95; } } @media (min-width: 992px) { /* 992px～1199px */ body { font-size: 1.09259em; /* 約17.7px */ line-height: 1.975; } } @media (min-width: 1200px) { /* 1200px以上 */ body { font-size: 1.12346em; /* 約18.2px */ line-height: 2; } }
こんな感じです。
興味のある方は『Space』ぜひ使ってみてください。
よろしかったら僕のブログの読者登録もお願いいたします。
