ブログのデザインを変えてみるヾ(･ε･｀*)

まいど、こんばんわ～　　麻耶さんです


数日後の自分へ

「今月の■■日は友だちの誕生日だから、忘れないようによ～く覚えておいてください」


↑はメイプルに何の関係もないプライベートな話だけど、忘れそうでちょっと怖い(´･ω･｀)

前日のぎりぎりになって、「ぁ、忘れてたー！」って気付く瞬間は本当に恐怖そのものだよね

宿題のレポート書くのをわ～す～れ～て～た～～～

･･･って、提出期限前日の夜に気付いたときのドキドキ感と言ったら
（※大まかな筋書きはまとまっていたおかげもあって、何とかして仕上げました）

予定はカレンダーとスケジュール帳に分かりやすく書いておこう

---

前置きはそのへんにして、ブログのデザインを少し変更しました

そんなわけで自分用メモも兼ねて、大まかな仕様＆変更点を書いておきます




ブログの横幅(width)

■ブログ全体(main)： 740px→850px
┣左メニュー(left) 　： 200px(190px)
┗記事部分(right)　 ： 450px→560px(530px)
括弧内はpadding（余白）を引いた数値です。横幅を110px増やしてます。
横幅が広がったおかげで、長い文章を書きやすくなって書くペースも上がる！


文字サイズ

全体的に少し大きくしました。


画像のサイズ

画像の横幅がボックスの大きさを超えたときに、画像を自動で縮小させます。
以下の記述を入れる。素人なので、用語がよく分からない！！
imgだけだと全部の画像が対象になってしまうので、その辺は適当にアレンジしとく？

img {
max-width: 100px;
height: auto;
}


スマートフォンで閲覧したとき用

文字が自動で拡大されてデザインが崩れたので、崩れた箇所に以下の記述を入れる。
これって、bodyで指定したほうがいいの？わからなーい(´･ω･｀)

-webkit-text-size-adjust: 100%;


関連記事を表示する

デザインとかがまったく作られてなかったので、cssでぽちぽち書きました。
出来具合は微妙なところ。


実用性が怪しい･･･

ある程度ページを下にずらすと、PageTopの画像が右から出てくる。実用性はあれです。
今、流行り(?)のjQueryでなめらかに一番上に移動してくれます。
バージョンとかどうするべきなんでしょ･･･。素人の私にはちょっと難しい。




その他

細かい余白とかをちょっと修正してます。
たぶん、不具合みたいなものはない･･･と思う｡･ﾟ･(*ﾉД`*)･ﾟ･。


おまけ

ピンクビーンふきだし

ここに文字を入れてね。

すると、大体こんな感じでピンクビーンの夢の中みたいな文章が書けます。png形式で透過してるよ。
これをコピーすれば、OK！

作ったはいいけど、使い道が･･･って感じなんだよね(；ωﾉ|柱|。。。

なので、自分のブログで使ってみたいなんて人がもしいたら、自由にご利用ください


記事を書く画面で、使いたい場所に以下のタグを入れる。

中身は適当にアレンジしてください

<p style="border:hidden; width: 260px; height:130px; padding:22px 25px 130px 30px; background: url(画像のアドレス) no-repeat;">
ここに文字を入れてね。

すると、大体こんな感じでピンクビーンの夢の中みたいな文章が書けます。png形式で透過してるよ。
これをコピーすれば、OK！</p>

ふきだしの画像はこれです



あとは細かい部分をゆっくり変えていこうかな？



ではメンテナンスが終わるまで、しばらくお待ちください(*-ω-*)




意外と拍手もされて、驚き。ありがとう