ＮＣ３のインストール・移行・カスタマイズの記録

やはりひとつのソースでPC・スマホの表示・制御が難しいので、２つのブロックでPC用、スマホ用のソースを記載して画面の大きさによって切り替える方法となってしまいました。

Foundationの場合はできたのですが・・・

取り敢えず、操作性を考え断念してしまいました。

もう少しスマホ用の色目を整え完成としま～す。

やはりスマホのリスト形式の3層目ページにはまってしまい今まで触ってしまいました。

3層目の確認用として「お問合せ」ページの下に3層目として「お問合せの下の下１・２」を作成しています。

3層目も表示できています。一度ご覧ください。・・・・やったあ～！

（何層でも行けると思うのですが、4層目までは確認しました）

今回はプラグインのカスタマイズで、

/app/Plugin/Menus/Controller　の　MenusController.php　を少し変更

「dropdown」を表示タイプに指定した場合、すべてのページを表示対象とするためすべてのページ情報を取得するように変更

/app/Plugin/Menus/View/Elements/Menusの「header」を複写し「dropdown」として配置

 index.ctp、list.ctp、list_start.ctp、list_end.ctpをdropdownのbootstrapのタグを吐き出すように変更

/app/Plugin/Menus/webroot/cssにdropdownのフォルダを作成しstyle.cssを作成

デザインなどオーバーライドする部分のみ記述

/app/Plugin/Menus/webroot/jsにdropdownのフォルダを作成しmenus.jsを作成

一階層目のクリックが発火しなかったのでclickイベントリスナーを設定

次は、ページトップへの移動ボタン設置でも挑戦してみようかな？

今日は一日中、PCの前で・・・、よく頑張りました。

通常業務を終え、今回は右カラムのリンクボタンをグリッド表示するように変更しました。

PCではひとつずつ縦にならんでいますが、タブレットでは、中央カラムの下に移動し、横一列に４つを表示。

スマホでは二つずつに2段に表示。

「お知らせ」を使用して作成していますが、htmlソースで記載しています。

一つずつをDIVでくくりclass指定しています。

<div class="col-md-12 col-sm-3 col-xs-6" style="padding-bottom: 10px;">
京町堀
</div>
<div class="col-md-12 col-sm-3 col-xs-6" style="padding-bottom: 12px;>
デモサイト
</div>

てな具合に・・・

簡単に説明するとひとつの枠（ここでは右カラム）横幅一杯が12でmdがPC、smがタブレット、xsがスマホ

classを表し、col-「表示するサイズ」-「表示幅の数値」を指定することにより実現しています。

みなさんも一度試されてはいかがでどうでしょうか。

ちょっとレスポンシブを体感・・・

カスタマイズではないのですが、ホームページ作成の「WEB制作実績」のページに以前制作させていただきましたものを掲載しました。

全てNetCommons2で制作したものばかりです。

他にも自治体関係のサイト・学校も作成させていただいています。

本日、dropdownメニューを作成し追加したのですが、デザイン的にはいまいちで以前のものを再現できていません。

また、タブレット・スマホした際の下位ページの表示がドロップダウン形式になっており「もうみっつ」ぐらいです。

（NC2のレスポンシブはCSSフレームワークとしてFoundationを使って実装していたのですが、今回はBootstrapでAnglerJS、やはり難しいですね）

一応、Bootstrapのdropdownリストを使用し作成しているので、メニューのブロックはひとつでレスポンシブ制御しています。

っで、今日はここまで。

本日はちょこちょこと触っていろいろ行いました。

今度また時間を見て、このメニューを完成させま～す。

完成した際にはカスタマイズ方法も掲載したいと思います。

さくらの無料のSSLを申請しSSL化してみました。

githubの情報「Let's Encrypt対応」にてスムーズに完了。

https://github.com/NetCommons3/NetCommons3/wiki/Let%27s-Encrypt%E5%AF%BE%E5%BF%9C