クリスマス前３連休
2013/12/23(月)は天皇誕生日で土日からの３連休となりました。
世の中は先取りでクリスマスの雰囲気が街中にあふれていました。
どこに出掛けてもクリスマスの飾り付けやクリスマスの音楽が流れて非常に楽しそうな雰囲気。
皆さん、満喫されましたか？
さて、そんな私はこの３日間何をやっていたかと言うと、Googel+に「はてな村ぐぐたす出張所」という名前のコミュニティーを立ち上げてみたり、ヘッダーメニューを付けたり、そのヘッダーメニューの隙間を狭くしたりと、ブログ関連の事ばかりやっていました。
お陰様で、ぐっと見栄えが変わったのではないかと思います。（スマホで見ている人にはわかりませんね。ＰＣで見た時の見栄え変更なので。）
我流から王道への誘い
そんな３連休の最終日にやった「タイトル画像とヘッダーメニューの隙間を狭くする」ですが、これは試行錯誤の末に、無理矢理実現したものでした。
CSS（スタイルシート）はどうも苦手で何をどう調整したら良いのかわからない事ばかり。
１つ１つ色んなブログの方のデザインを参考にさせてもらいながら、調整しました。
最終的に取った手法は
ヘッダーメニューのdivのmarginを-50pxとかにして、無理矢理上部に食い込ませる
というもの。
初心者には上出来だ♪
と１人喜んでいたら「もっとこうしたら良いよ！」と天の助けが！
天の助け「局長様」からのアドバイス
昨日の記事に局長様(id:kyokucho1989)からコメントを頂きまして、どうもコメントを読む限りでは一昨日の記事で「助けて下さい！」と書いた私を助けるべく、調べて下さっていたようです！
そして来てみたら一応、狭くなってたので「既に出来ていた・・・」と書かれていましたが、
「いえいえ、我流にめちゃくちゃにやっただけなので、本来はどう設定すべきなのかを教えて頂けるのは非常に、非常～に助かります！」
という気持ちです。
以下は局長様からのコメントを紹介させて頂きます。
隙間を狭くするにはtop-editareaを変えればいいと思います。
#top-editarea{
width: 980px;
margin:30px auto;
}これは幅980px、余白を上下30px、横は自動ということを意味しています。そこでデザインCSSに
#top-editarea{
margin:5px auto;
}こんな風にすれば上下の余白が5pxと狭くなります。
ぬぉぉぉ！
そんなスマートに狭くする手段があったんですね！
比較してみましょう♪
「我流」私が無理やりmarginにマイナスの値をセットして表示したパターン。
「王道」局長様に教えて頂き、きちんとmarginに設定したパターン。
んー見栄えが全然違いますねー。
同じ要領で下に配置したdivにもmarginを設定したら、きちんと隙間が開きました♪
なるほどー、テーマで使用しているスタイルも後出しジャンケンの要領で、上書きできるんですね～。
というか「top-editarea」というdivとかも全然知りませんでした。
スタイルシートの達人の皆さんは、こういったテーマのスタイルも「見つけては変更して」と書き換えながらデザイン調整をされているんですね！
非常に勉強になりました！
普段テーマが使っているdivとかはほとんど意識した事がなかったです(^^;
自分で作ったdivのみ。
局長様、３連休の貴重な休暇の時間を私なんかのために使って調べて、コメント下さって、本当にありがとうございました！
少しでもお礼の気持ちを表すために局長様から頂いたコメントには
★ グリーンスター
を贈らせていただきました！
グリーンスター初めて使ってみました。
数が有限なので
ここぞ
という時に使おうと思って取っておきましたが、今回こそが「ここぞ！」というタイミングかな、と。
局長様、本当にどうもありがとうございました(*^o^*)/
また他にもコメントを頂き、隙間を狭くするのに挑戦して下さったid:Jazzy-T様もどうもありがとうございました！
隙間は狭くなったけど他にももっと変更した
え？
さっきの画像なんか変だって？
これですか？
そうなんです！
ずっと前から気になっていた「相互RSS一等地問題」を解決したんです！
相互RSS一等地問題とは
・タイトル下ヘッダーに相互RSSを設置すると、HPの一等地（タイトル下）を占有されてしまう
・また高さもそこそこ取るのでブラウザ表示した時に、記事本文がほとんど表示されない
という問題です。
あ、勝手に命名しました。
「いつかやろう！」
とずっと思いつつも
「いつやるの？年末休暇でしょ！」
と改善できずにここまで来ましたが、局長様のアドバイスのお陰でインスピレーションが刺激され、一気にやってみました！
相互RSSはこれまで2つ並べて表示していたのですが、１つに統合しタイトル右に配置しました！
タイトル画像に食い込んでいるのはご愛敬(^^;
年末にテーマを差し替えて、もう少し見やすくしたいと思っています。
あと空いた一等地にはGoogleアドセンスを貼ってみました。
右にまだ隙間があり、改善の余地はありますが、昨夜はここまでで力尽きました・・・。
何はともあれ、見栄えが大きく変わったのではないかと。
環境による差異まではノーチェックなので「この環境では崩れてたよー」とかありましたらコメント等で教えて頂ければ直したいと思いますので、よろしくお願いしますm(__)m
まとめ
・我流変更ではmarginにマイナス値を設定し無理矢理食い込ませ
・王道変更はmarginを大きい値から小さい値に変更する事で「隙間を小さく」する
・相互RSS一等地問題も一応解決
・はてなブログはとても親切な方達がいらっしゃる素敵な空間
