ブログのデザインを変えてみるヾ(・ε・`*)
まいど、こんばんわ~
麻耶さんです

数日後の自分へ
「今月の■■日は友だちの誕生日だから、忘れないようによ~く覚えておいてください
」
↑はメイプルに何の関係もないプライベートな話だけど、忘れそうでちょっと怖い(´・ω・`)
前日のぎりぎりになって、「ぁ、忘れてたー!」って気付く瞬間は本当に恐怖そのものだよね

宿題のレポート書くのをわ~す~れ~て~た~~~
・・・って、提出期限前日の夜に気付いたときのドキドキ感と言ったら
(※大まかな筋書きはまとまっていたおかげもあって、何とかして仕上げました)
予定はカレンダーとスケジュール帳に分かりやすく書いておこう
前置きはそのへんにして、ブログのデザインを少し変更しました
そんなわけで自分用メモも兼ねて、大まかな仕様&変更点を書いておきます

ブログの横幅(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でなめらかに一番上に移動してくれます。
バージョンとかどうするべきなんでしょ・・・。素人の私にはちょっと難しい。

その他
細かい余白とかをちょっと修正してます。
たぶん、不具合みたいなものはない・・・と思う。・゚・(*ノД`*)・゚・。
おまけ
ピンクビーンふきだし
作ったはいいけど、使い道が・・・って感じなんだよね(;ωノ|柱|。。。
なので、自分のブログで使ってみたいなんて人がもしいたら、自由にご利用ください
記事を書く画面で、使いたい場所に以下のタグを入れる。
中身は適当にアレンジしてください
ふきだしの画像はこれです
あとは細かい部分をゆっくり変えていこうかな?
ではメンテナンスが終わるまで、しばらくお待ちください(*-ω-*)

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




数日後の自分へ

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

↑はメイプルに何の関係もないプライベートな話だけど、忘れそうでちょっと怖い(´・ω・`)
前日のぎりぎりになって、「ぁ、忘れてたー!」って気付く瞬間は本当に恐怖そのものだよね


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

・・・って、提出期限前日の夜に気付いたときのドキドキ感と言ったら

(※大まかな筋書きはまとまっていたおかげもあって、何とかして仕上げました)
予定はカレンダーとスケジュール帳に分かりやすく書いておこう

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

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



■ブログ全体(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でなめらかに一番上に移動してくれます。
バージョンとかどうするべきなんでしょ・・・。素人の私にはちょっと難しい。


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

ピンクビーンふきだし

作ったはいいけど、使い道が・・・って感じなんだよね(;ωノ|柱|。。。
なので、自分のブログで使ってみたいなんて人がもしいたら、自由にご利用ください

記事を書く画面で、使いたい場所に以下のタグを入れる。
中身は適当にアレンジしてください

<p style="border:hidden; width: 260px; height:130px; padding:22px 25px 130px 30px; background: url(画像のアドレス) no-repeat;">
ここに文字を入れてね。
すると、大体こんな感じでピンクビーンの夢の中みたいな文章が書けます。png形式で透過してるよ。
これをコピーすれば、OK!</p>
ふきだしの画像はこれです

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

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

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