LAMPにCMSでサイト作ってみた(concrete5編)
LAMP(Linux+Apache+MySQL+PHP)の環境構築とconcrete5というCMSのインストールは完了しました。
で、実際にサイトを作ったので過程を忘れないように走り書き。
サイトを作った目的は、ググッてもでてこないような社内でのみ活用できる情報を、
どこかにまとめておきたかったので、散らばっている情報を集約するサイトを作りました。
※あとconcrete5でサイト作ってみたかったってのもあるかな…？
素人が社内向けに作ったので、サイト制作のフローとかターゲットはどうするのとか考慮してません。(というかわかりません)
デザインはあとで変えれるので、先にコンテンツありきでパパッと作りました。
テーマ
まずは、見た目を決めるテーマ。
テーマは自作できるが、自分でテーマを作るにもデザインは全くできないのでTwitterで
「何かいいテーマありますかー？」とツイートしたところ、関西ユーザーグループ代表の@HissyNCさんからオススメのテーマが来ました。
何も考えずにとりあえず、テーマをインストールして触ってみたところ、CSSフレームワークということが判明。
CSSのクラスに数字を入れることでカラムの大きさを自由に変えれるというテーマでした。
ここで説明するより、以下のリンク先を読んだほうが理解できると思うので説明を省きます。
[ssl url='http://coliss.com/articles/build-websites/operation/design/922.html' title='ページの幅960pxを基準にして、設計するグリッドデザイン']
デザイン作成を簡略化するためにテーマの自作を避けたのに、教えてもらったテーマがデザインの全くないフレームワーク…。
でも、せっかく教えてもらったのでとりあえず使ってみることにしました。
CSSによるデザイン
ここから、サイトの構成(ワイヤーフレーム)をどうするのかとCSSによる見た目の調整を実施。
ナビゲーションに何を置くのか、サイドバーを作ったとして何を置くのかを紙に書きながら検討した結果、1カラムで対応し、ヘッダー部のナビゲーションを固定してすることにしました。
もう960gsを導入する意味がほとんどなくなったけど、仕方ない。cssのリセットのみ活用ということで…。
あとは
・jQueryつっこんでドロップダウンメニュー
・CSS3を使って見た目の調整等
・IEがCSS3に対応していないので、PIE.htcというものを使ってIEにも適応
コンテンツ作成
ここからは特に書くことなく、ひたすら中身を充実させるべく、集めた情報を書いたり、コピペしたりなど。
concrete5では、エリアにブロックというものを積み上げてサイトを作っていくが、
標準で使えるブロックでは対応できずに、Designer Contentという拡張ブロックを使いました。
(自分で公式サイトにDesigner Contentの使い方の記事を書かせてもらいましたが、全く覚えてなかったので参考になりました…)
その他メモ
→CSSの読み込みの前に入れると動いたので、とりあえず読み込み前に移動
ナビゲーションエリアのセンタリング(IE8のみ)
→自分のPCではセンタリングできてるけど、他人のIE8で見るとセンタリングになってない。
ググッて調べた結果、marginやらtext-alienやらを反映させてもできずに諦めた。
(doctypeをhtml5なのがあかん??)
PIE.htcが有効にならない
→自作サーバーなので、何も設定入れていなかったが、以下の記載をサーバー側へ設定。
htaccessファイルに"AddType text/x-component .htc"
オートナビブロックにjQueryの適用方法
→オートナビブロックをドロップダウンメニューにしたかったが、classの適用方法などがわからずに
結局、グローバル下書きブロックを作ってHTMLを直接書きました。
(手段はなんでもよかったので、結果が自分の思い通りにできたので未調査)
追記
フォルダ権限を変える方法
→chmodコマンドを使う
間違えて作ったDBを削除
→drop database ***;
まとめ
concrete5のコミュニティに所属(ん？)している以上は何か作りたかったので、空いた時間にちょこちょこ更新してたら、とりあえずサイトができたのブログに書いてみました。
簡単ではあるがサーバー構築からとサイト作成までの知識としてではなく、経験できたのでよかったと思います。
参考リンク
- [ssl url='http://www.webcreatorbox.com/tech/css-heading-list-blockquote/' title='Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える']
独り言
作ったのはいいけど、誰かメンテしてくれるんかなぁ…
