おはようございます。
簡単アメブロ集客の住福です。
絶賛、風邪引き中なんですが、今日から2泊3日の出張。。。
大丈夫かな~m(_ _)m
さて、今朝は“アメブロカスタムでお役立ち系”の記事を書きます。
どうしよう!ブログデザインが崩れた!
初心者の方が、ご自身でブログカスタムなどをされる際によくあることです。
私も、まだ不慣れなときに“サイドバーがなぜか一番下に行く”という、とんでもないことが起こりました!
そのときは、アメーバヘルプに助けられたんですが、沢山の方のカスタムをやるうちに、これだけでなく、いろんな崩れ方をしている方がいらっしゃることに驚かされます。
たとえば…
・記事が左サイドバーの下に表示される
・右サイドバーが記事の下に表示される
・文字サイズが変わっている
・文字の色が変わっている
・ブログ全体が太字で表示される
・右サイドバーが記事の下に表示される
・文字サイズが変わっている
・文字の色が変わっている
・ブログ全体が太字で表示される
などなど。
そして、どれも答えは同じ。
すごくシンプルな理由で崩れているんです。
終了タグをちゃんと入れてあげよう!
Webの基本なんですが、文字やデザインの装飾は“タグ”というもので指示されます。
たとえば…
太字であれば
<strong>ココに文章</strong>
文字サイズであれば
<font size="3">ココに文章</font>
中央揃えであれば
<div align="center">ココに文章</div>
とっいった感じです。
このタグ、どこかで見たことあるなーって方は多分それです^^
デザインが崩れる時って、ほとんどこのタグの間違いにより発生しています。
タグの間違いは特に、</div>終了タグが2重に重なっていたり、足りなかったりというものが多いようです。
タグは基本的に、開始タグ(<div>)と終了タグ(</div>)のセットになっています。
上記の例でいくと、タグ後半のスラッシュ( / )がついている方が終了タグです。
</strong>
</font>
</div>
この終了タグに、スラッシュ( / )や山カッコ( < > )がちゃんとついていないと、デザインが崩れてしまうんですね。
本文をセンター揃えにするタグを入れている本文の例です。
正しいタグ○
<div align="center">
ココに文章
</div>
終了タグが多すぎ×
<div align="center">
ココに文章
</div></div>
↑</div>終了タグを一つ消してください。
終了タグが足りない×
<div align="center">
ココに文章
↑</div>終了タグを書き加えてください。
タグの一部が足りないor多すぎる×
<div align="center">
<span>
ココに文章
</span</div>
↑</span>タグの>を追加してください。
<div align="center">
ココに文章
<div>
↑スラッシュ( / )を追加してください。
崩れているタグを探す方法
一番手っ取り早いのは、最近いじった箇所や、更新した記事などを確認することです。
フリースペースやメッセージボード、プラグインだったりもします。
記事の場合は記事ごとに開いてみます。
記事タイトルをクリックすると記事ごとの表示になるので、タグに誤りのあるページだけ、崩れて見えます。
記事をどれだけ確認しても、変わらない場合はフリースペースやメッセージボード、プラグインに誤りがある可能性が高いです。
今日の記事、ちょっと難しかったですよね^^
でもけっこう役にたつと思います!
どうしても自分で直せないという時は、少し料金頂きますが、修正して差し上げます♪お問い合わせ下さい^^
そういえば、この方とはコレがキッカケで繋がらせていただけたようなものです^^
もうすぐカスタムも完成するので喜んで頂けるといいな~♪
【重要なお知らせ】
■集客力がつく、無料のメール講座にご登録下さい♪
とあるサロンオーナーが自分ブランドを作り、集客と売上を変えていくお話です^^
Next Innovation 住福 純
私は福岡だけでなく、北九州、久留米、熊本、長崎、佐賀、鹿児島、大分、宮崎などの九州各地から、東京、大阪、北海道、海外まで多方面でコンサルを行っています。九州ではまだまだ少ないインターネット集客コンサルティング、個人事業主のブランディング(強みの発掘と売り出し)を行っています。