おびやまロボット研究所ブログ

アコーディオンメニュー：
クリックで開くメニューはアコーディオンメニューというらしい。
左にアコーディオンメニューを追加、これに関しては別サイトからサンプルを探す。JSとCSSが使われてる？
CSSファイルをtempnateのCSSに追加。
考え方としては、チェックボックスとリストをセットで作って、ちえっくボックスは非表示でメニューにして、そこをクリックするとチェックがつく、
チェックの有無によってリストの表示幅を変える。ちけっくなければ表示幅０で非表示、チェックされたら表示幅を広げる。
このチェックは別のページに行くと引き継がれないところが難点。

ページの構造：
トップの横に並んだヘッダーメニューからは、トップケージのページのコピーのメイン記事を書き換えたものを作った。画像ありなしの2種類を使い分け。
ページの構造を、共通部分と記事に分けて作成。
記事の部分をインクルードして表示するようにした。
インクルードの方法は、既存のベタ打ちのページを上手く読み込めれば手間がかからないので、phpで取り込むか、SSIでインクルードするようにした。
どっちも試しながら作ってみたので、混在してしまってる。
トップページとヘッダーメニューのページは、SSI。
各記事はphpで呼ぶようになって統一感ないが、せっかく作った軌跡もあるし素人なのでまあしょうがない。

試しながらわかったこと：
SSIの動作については、.htaccessを作る、内容はさくらインターネットのサイト内で検索して作った。
ファイルの拡張子は、shtml指定。それ以外だと動かない。
SSIとphpが混在してもダメ。phpを使うなら、.phpの拡張子にしないといけない。
ファイルのインクルードはphpでもできるので、全部php書いてみたらそれでも動いた。
shtmlで引数を渡す方法が分からなかったので、再度メニューからコンテンツに飛ぶところだけ
contents.php?記事番号
を作った。記事番号はから ファイルのディレクトリと拡張子をつけて呼び出すように作った。
記事は一通り書き換えて、記事用のディレクトリ内に置く。
写真は楽天からの移植のページのものは、imageR　の中。
tempnateのひな形のイメージは、 img の中。
js,cssのディレクトリもtempnateのもの。
研究紹介ページの写真も、他のたくさんの写真と一緒にすると整理しにくいので別にディレクトリ作った。

記事のかきかた：
記事には、
最上段にコンテンツメニュー番号
ページ名称とホームへのリンクを貼る。

　

の順でタグを３種類使い分け。
最後に、前と後のページのリンク。

最初と最後にちょっと面倒な作業が入るが、他は以前のコンテンツをそのまま使った。

関連作業：
以前の　www.cpu4edu.netの方のページのサイドメニューを新ページにリンクを貼りなおした。
これまでは、ルート直下の番号.HTMLにつながっていたが、ルート直下にファイルが多すぎてみずらいので、記事用のディレクトリに整理した。