JavaScriptとCSSでタブ切り換えUIを実装する
作業メモも兼ねて、やり方を忘れないように記録。
●参考記事●
wordpressのブログに実装してみました。
もちろん、私の場合、簡単に行きませんでした。
- jsファイル
tab_change.jsをjsフォルダにFFFTPでアップロードする。
このjsファイルの一部を書き換えました。
タブの数を増やしたいので、タブの名前を書き換えるついでに、
枚数（下記の行）を追加しました。
document.getElementById('tabの名前'),
ここで、追加した部分の最後に『,』をつけるのを忘れて、
表示がきちんとされなかった。『,』に注意。
タブの名前は、HTMLのファイルにあるid名と同じにする。
- cssファイル
今回実装したwordpressのブログは、『vicuna CMS』のスキンを使用しているもの。
サイトにログインして編集できるところにあるstyle.cssファイルには、タブ用のcssを記載できない。
どこにあるcssファイルに記載したらよいのか分からなかったが、
ググッて調べた結果、テーマフォルダ内の『module/mod_subSkin/1-subSkin.css』に記載し編集してアップロードすればよいことが分かった。
- htmlファイル
wordpress2.6になって、post内でdivが使えるようになった。
サンプルのまま、テキストのみ書換えて使用してみた。
ついでに、画像も挿入してみた。
無事に稼動しました。
気付いた事。
白い背景のページに、線で囲まれた白い背景のboxを設置しようとすると、
tabとboxの間のラインが消せないことに気付きました。
選んでいるtabとbox内の境のラインを消すためには、
box内の背景色とtabの背景色を同じにする必要があります。
ページの背景色は別にしないと、boxが見えません。
解決方法は今後の課題。もうすこし考えないといけません。
どんな風に使ったらよいか、これから要検証です。
