More Related Content
What's hot
What's hot (20)
Similar to 初めてのConcrete5
Similar to 初めてのConcrete5 (20)
初めてのConcrete5
- 2. 自己紹介 ❖ 名前：こざる Twitter: @kozaru_kodera! ❖ Web系フリーランス! ❖ 守備範囲 コーディング・デザイン（ちょっと）・ js（ちょっと）! ❖ 好きなもの 、絵本、ビール、オイスター 最近、お茶とカメラもお気に入り
- 4. アジェンダ ❖ 画像ナビゲーションのコーディング! ❖ 各ブロック項目のコーディング（例：ページリスト）! ❖ コーディングで気をつけた事! ❖ 感想など concrete5に組み込むためのコーディングをする際に、! 気をつけた事をまとめました。
- 5. グローバルナビゲーションのコーディング ❖ GlobalArea：headerの場合 ①Site Name ②Header Nav ③Global Nav! ❖ ①画像ブロック ②③デザイナー・コンテント・プロ（DCP） （http://www.concrete5.org/marketplace/addons/designer-content-pro/） ① ② ③
- 6. DCPを使うときの画像ナビゲーションは背景画像で .global-nav li a.research {! ! width: 102px;! ! background-image: url(../images/global_nav01.png);! ! margin-left: 3px;! } <nav class="global-nav" role="navigation">! <ul>! <li><a href="1_0.html" class="research">研究最前線</a></li>! <li><a href="2_0.html" class="documentary">ドキュメンタリー</a></li>! <li><a href="3_0.html" class="persons">京大人間図鑑</a></li>! <li><a href="4_0.html" class="researchhelp">研究支援</a></li>! </ul>! </nav> ★DCPでの設定を簡単にするために! 画像ナビゲーションは! aタグに背景画像指定しました。! ! →次ページ参照
- 7. DCP（デザイナー・コンテント・プロ）に追加 <nav class="global-nav" role="navigation">! <ul>! <li><a href="1_0.html" class="research">研究最前線</a></li>! <li><a href="2_0.html" class="documentary">ドキュメンタリー</a></li>! <li><a href="3_0.html" class="persons">京大人間図鑑</a></li>! <li><a href="4_0.html" class="researchhelp">研究支援</a></li>! </ul>! </nav> 各項目リンク項目設定でDCPが完成！! この部分とは別に、view.php側で、 currentクラスの設定をしています。! （菱川さんに手伝っていただきました。 ! ありがとうごさいます。） ★imgタグを置く場合は、 管理画面側での設定が２ つ(リンクと画像）必要 で、view.phpの設定も少 し複雑になります。各項 目にクラスを指定して、背 景画像で設定する事で、 設定が楽になります。
- 9. ブロック項目毎にクラスを指定して 中のクラスはネストでCSSコーディングする <div class="row research-box">! <div class="col-xs-2">! <a href="#"><img src="images/1_pict01.jpg" alt="pict"></a>! </div><!-- /.col-xs-2 -->! <div class="col-xs-4">! <h2><small><span class="date">2014.00.00</span><span class=“new">NEW</span></small>! <a href="#">ホップ抽出物でアルツハイマー病の発症を抑えることに成功</a></h2>! <p>−認知症の発症と進行の予防につながると期待−</a></p>! </div><!-- /.col-xs-4 -->! </div> .research-box {! margin-top: 20px;! .col-xs-2{! padding-right: 5px;! img{! width: 90px !important;! }! }! .col-xs-4{! padding-left:5px;! h2{! [….省略….]! padding:0;! &:before{! width: 0;! height: 0;! }! a{! .link-hover-yellow();! }! [….省略….]! }! } ブロックで同じスタイルは基本使い回して使用しました。! ! ブロック項目毎のクラスを作り、中身はそのクラスでネストしてスタイル! 設定をしておくと管理しやすかったです。（今回はLESSを使用）! Bootstrapのクラスや他の場所でも使用するクラスも、このブロックの中だ けで使いたいスタイルは、ブロック項目のcssセレクタをネストして設定し ました。
- 10. コーディングで気をつけた事：テーマに入るクラスと ブロックで使うクラスをネストしない <div class="row columnheader">! <div class="col-xs-2">! <section class=“home-research">! ! <h1 class=“home-h1">∼</h1>! ! <?php ! ! ! $a = new Area('HomeResearch');! ! ! $a->display($c);! ?>! </section>! </div>! <div class="col-xs-2">! <section class="home-documentary">! </section>! </div>! <div class="col-xs-2">! <section class="home-persons">! </section>! </div>! </div> home.php（テーマ用PHP）
- 11. コーディングで気をつけた事：テーマに入るクラスと ブロックで使うクラスをネストしない <div class="row columnheader">! <div class="col-xs-2">! <section class=“home-research">! ! <h1 class=“home-h1">∼</h1>! ! <?php ! ! ! $a = new Area('HomeResearch');! ! ! $a->display($c);! ?>! </section>! </div> .home-research {! ! .home-h1 {! ! ! background-image: url(../images/.…png);! ! }! } HomeResearchエリアに、research-boxクラスを 使用したブロックが入る場合、ブロックは他の エリアで使い回す可能性があるので、右記のよ うなネストされたcssセレクタを書かないように 気をつけました。 .home-research {! .research-box{! ! margin-top: 20px;! }! } NG テーマ内で使うと決めているクラスは、下記 のようなネストでcssセレクタを書きました。 home.php（テーマ用PHP）
- 13. おわり ありがとうございました！