この記事は、ムーバブルタイプを使ったこのブログの作業メモです。
記事が多くなってくると、過去に投稿した見て欲しい記事を探すのが難しくなってくるので、目次を設置する事にしました。
「メインメニュー」→「テンプレート」→「メインページ」の中の、該当する部分に以下のような感じでタグを貼り付けました。tableタグでなくdivを使ってみました。わかりやすいように色をつけています。
| <div style="width: 100%;"> <div style="float: left; width: 33%; background-color:red;"> 左の列 </div> <div style="float: left; width: 33%; background-color:blue;"> 中央の列 </div> <div style="float: left; width: 33%; background-color:yellow;"> 右の列 </div> </div> <div style="clear:both"></div> |
↓こういう風に表示されます。↓
左の列
中央の列
右の列
最後に、「<div style="clear:both"></div>」を入れないと、
その後に入力したタグが「右の列」の更に右側に回りこんでしまうということを、KumaCrowさんに教えていただきました。
あやうく、また挑戦するとこでした。。。
日南商工会議所さん、はじめまして。
余計なお世話で申し訳ないんですが、
「clear:both;」についても言及しておいた方が良いのではないかしら。
＞KumaCrowさん
助言ありがとうございます。
「clear:both;」が無いと、その後のタグ等が、上の右の列内に表示されてしまうということでしょうか？divは使い慣れていないので、こうやって教えていただけると助かります。
記念すべき１００コメント目でした！(^_^)
日南商工会議所 岩下さん、こんにちは。
野暮ったいコメントをしてしまって申し訳ないです。
> 「clear:both;」が無いと、その後のタグ等が、
> 上の右の列内に表示されてしまうということでしょうか？
閉じておかないと、レイアウトがおかしくなる可能性があると思います。
ただ、困ったもので、「clear:both;」って、次のブロック要素でしか
出来ないんですよね。
floatを入れたブロック要素の後に、何かあれば良いですけれど、
何も無い場合は、ちょっとかっこう悪い感じになります。
例えば、何も入れていない空のdivを使ったり。
[div style=”clear:both;”][/div]
brでやっている人も見たことがあります。
[br style=”clear:both;” /]
これって、何かスマートな方法はないものなのかしら。
かっこいい方法を仕入れたら、教えていただけると嬉しいです。
> 記念すべき１００コメント目でした！(^_^)
ぶほぉ！記念すべき100コメント目ですか。恐縮です。(^-^;)>
追記：
コメントって、タグの記述禁止なのかしら。
[]で代用しました。
それでは、失礼します。
＞KumaCrowさん
メールで詳しく教えていただきましてありがとうございます。
勉強になりました！
記事も少し修正しました。
自分も何か情報を仕入れましたら、共有します。
タグの記述を許可しておりませんでしたので、一部のタグのみ許可しました。
今後ともよろしくお願い致します！