はてなブログのスマホ用ブログデザインをちょっとだけ弄りました

スマホのデザインがイマイチ

　この前変デジ研究所のロンスタさん(id:lonestartx) に、スマホのデザインに関して色々アドバイスをうけました。そのときは、さも「分かった！」という顔でフムフムと頷いていたのですが、よく考えたら自分はスマホのページもPC表示で見ていたので全然分かっていなかったことに後で気づきました。
　その後自分でスマホ用ブログ見て唖然、なんかあまりにイマイチ。これは改善せねば！と思い。頑張ってデザインをちょっとだけ弄ってみました。

　このブログに来る人の99%以上は興味ないと思いますが、こうやってメモって公開しておかないと自分が後でデザイン直せなくなるので、仕方なくやったこととか公開しておきます。私も我慢してるので、みなさんも我慢して下さい。

デザイン変化

　デザインの変化です。多分ここ見てる人の99%くらいはどうでも思ってるでしょうが、自分にとっては結構重要なので満足してます。ブログってそういうのが大事。

使用前

　全体的に白いし、広告がずれてるし、肝心の記事がタイトルしか見れない

使用後

　少し色付けて、広告もピッタリ合わせました。ヘッダーも消して記事の内容が少し見えてきました。

変更した点

デザイン変更

　詳細 -> デザイン設定 -> headに要素を追加 ってところに以下の謎の英文字を挿入。今までこんなところ全く弄ったことなかったよ！意味はよく分かってないから、詳しくは参考サイトを参照してね☆
　自分で変えたのは background: #e0e0ff; の色コード変更して色を変えたくらいだよ！

<style>
#body #header {
  margin: 0 0 0 0;
  padding: 5px 0 0 0;
  background: #e0e0ff;
  width: 100%;
}
#body .header-blog-icon {
  height: 60px;
}
#body .header-blog-icon img {
  border: 0;
}

#globalheader-container {
  display:none;
}
</style>

位置修正

　広告の位置のずらし方分からず、ずっと「まあいいや」とほっといたのですが、今回色々調べたら以下のような形式で簡単に位置の修正ができることがわかりました。調べると「なんでもっと早く調べなかったんだ」ということは一杯ありますね。何事もちゃんとサボらず調べねば。

<div style="text-align:left;margin-left:-10px">
位置ずらしたい内容
</div>

　PC表示の方も広告ずれてて放置してたのでついでに修正しました。

ブログタイトル

　タイトル、「からあげとポニーテール」の「ル」だけが2行目に来てて見苦しかったので、えいやっとポニーテールを削除。特にブログタイトルとか何の思い入れも無いので思い切って「幼女のほぉむぺぃじ」とかにしてもよかったのですが、今回はやめておきました。デザインのためならブログタイトルすら変える漢（おとこ）、それがからあげ。

参考にしたサイト

　もう先人たちにおんぶに抱っこです。

関連リンク