PCインストラクターの川上です。
先週の水曜日(12月11日)に、アメブロの仕様が変更になりましたね。
(以前こちらの記事で書いています。)
仕様変更点は2点です。
1つは、記事本文のフォントサイズが12pxから14pxに変更になったことで、
もう1つは、ブログ全体のフォントがメイリオフォントに変更になったことです。
(追記:この2点目の変更はいつの間にかなくなってましたね^^;)
本来であれば、この2点の変更は喜ばしいことなのです。
どうしてか、というと、この2点の変更を、まずカスタマイズしてください、とお伝えしているからです。
文字サイズやフォントを変更することによって、見やすくする、そんな意図があるからです。
しかし・・・
改行位置が変更になって、今まで書いた記事がガタガタになってしまった、メッセージボードやサイドバーの文字が横に伸びてしまった、と困った~
といった状況になってパニックになっている方もいらっしゃたりするようです。
そこで、今回は文字サイズやフォントが変更になる前の状態にさっくり戻す、という方法を書いてみます。
まず、アメブロデザインが「CSS編集デザイン」を使用している方はCSSソースの一番下に次のソースを入力またはコピー&ペースト(コピペ)していただくとよいです。
/* 記事本文の文字サイズを元に戻す */
.articleText {
font-size: 12px !important;
}
/* アメブロのフォントを元に戻す */
body, input, button, select, textarea {
font-family: "MS Pゴシック","Hiragino Kaku Gothic Pro",Arial,Helvetica;
}
記事本文の文字サイズを元に戻す方法は、他にも
.articleText {
font-size: 100% !important;
}
または
.articleText {
font-size: 1em !important;
}
でもOKです。
これは、アメブロの元々の標準サイズが12pxになっているからなのです。
そして・・・
アメブロデザインが用意されているデザインを使用している方(CSS編集が使えない方)は、フリースペースかフリープラグインに次のコードを入力またはコピー&ペースト(コピペ)していただくとよいです。
<style type="text/css">body{font-family:"MS Pゴシック","Hiragino Kaku Gothic Pro",Arial,Helvetica;}</style>
<style type="text/css">.articleText{font-size: 12px !important;}</style>
注意1. フリースペースに記述する場合は、それぞれ<style>~</style>の行は改行を入れずに1行にしてください。
注意2. フリープラグインに記述する場合は、配置設定をお忘れなく。
実際にフリープラグインに記述した例はこちら↓↓↓
文字サイズとフォント変更後(12月11日以降)のブログ↓
文字サイズとフォントを元に戻したのブログ↓
これで、バッチリ元のレイアウトに戻ったでしょうか?
文字サイズとフォントが変わるだけで、こんなにレイアウトがばらんばらんになってしまうものなのですねぇ~
<注意!>
ただし、ブログ記事を書いて、「表示を確認する」で確認すると、文字は大きいまま、フォントはメイリオに変わって表示されてしまいますので、ご注意ください。
投稿すると、ちゃんと小さくはなりますが・・・
でも、確認できないかもしれませんから、くれぐれもご注意を!
以上、ワンポイントレッスンでした。
LIDS澄川・ライフデザインスクール
川上 雄大