テーマ「エレメンタル」を利用してフッター部分を作成しているのですが、PCとスマホとでデザインを変えたいと思っています。
添付した写真のように、PCは見出しを3つ横並びにしてその下にそれぞれの子を並べますが、スマホでは見出しを3つ縦に並べて、＋を押すと子が現れるようにしたいです。
どのようにすれば実装出来ますでしょうか、ご教授お願いいたします。
大まかな流れを説明します。
まずHTML/CSS/JavaScriptを使って、ご希望の動きをするナビゲーションパーツをコーディングします。
次に、オートナビブロックのカスタムテンプレートを作成します。 application/blocks/autonav/templates/my_navigation/ というフォルダを作成します。
my_navigation 部分は任意です。お好きな名前にしてください。
フォルダの中に view.php を作成し、最初に作成したHTMLに合わせてオートナビブロックのテンプレートを作成してください。
CSSは view.css JavaScript は view.js というファイルを作成してそれぞれ最初に作成したものを入れてください。
詳しくは日本語書籍も参考にしてください。
返信ありがとうございます。
難しそうですね、、説明を聞いてもパッとイメージが出来ない初心者な者で、、、
書籍を熟読して勉強したいと思います。
その日本語書籍というのは、concrete5公式活用ガイドブックのことでしょうか？
もしそうであれば持参しておりますので、何ページに記載があるか教えていただけませんでしょうか…？ すみませんがお願いいたします。
公式活用ガイドブックはバージョン5.6向けに書かれた本ですので古いです。
『世界一わかりやすいconcrete5導入とサイト制作の教科書』の方をご参考ください。
あと、難しそうであれば、マーケットプレイスから使えそうなアドオンを探すのも手です。
『世界一わかりやすいconcrete5導入とサイト制作の教科書』も購入しようと思います。
ちなみにですが、PCの見た目を作ってからそれをモバイルプレビューで見た時に、PCで見る画の左側4分の1ぐらいが表示されるのですが、PCで見る画をそのままスマホでも見れるようにしたい場合は使用しているテーマ「エレメンタル」のfooterのcssでwidthを書き換える感じになりますでしょうか？
私がやろうとしているPCとスマホでデザインを変えるというのは、使用しているテーマ「エレメンタル」のコードに何か書き加えたりするのでは無く、オートナビブロックのカスタムテンプレートを作成しなければ実現出来ないという認識で間違いないでしょうか？
はい、そうです。エレメンタルを微調整はCSSを少し書き加える程度でできるでしょうが、これは微調整の域を超えていると思います。
なるほどです！
オートナビブロックについて勉強してトライしてみたいと思います。
また質問させてください。
hissyさん、
作成中のフッター部分の文字を全て記事ブロックで書いていてリンクを付けたりスライドインで表示されるように記事ブロックのカスタムテンプレートも作成したりしていたのですが、オートナビブロックのカスタムテンプレートを作成してPCとスマホの表示デザインを変えるとなると、記事ブロックで書いたものは全て消すということで間違いないでしょうか？
記事ブロックを使いたければ、記事ブロックを使ってもいいですよ。どのブロックを使うかは自由です。
そうなのですね！
そしたら作成途中なので記事ブロックのままでいきたいですが、この場合、オートナビブロックのカスタムテンプレートはどのように適応させるのでしょうか？
『世界一わかりやすいconcrete5導入とサイト制作の教科書』を購入し、オートナビブロックのカスタムテンプレート作成方法に関する箇所を探しているのですが見つけられません、、
詳しく書かれている参考になるページはどこか、教えていただけますでしょうか？
すみませんがよろしくお願いいたします。
Lesson 10 でブロックのカスタムテンプレートの作成方法が解説されていますので、参考にしてください。
お返事ありがとうございます。参考にさせていただきます。
何度もすみませんm(__)m
hissyさんが教えてくださったように、
HTML/CSS/JavaScriptを使って希望の動きをするナビゲーションパーツをコーディングした後、
オートナビブロックのカスタムテンプレートを
application/blocks/autonav/templates/my_navigation/ このようにフォルダを作成し、my_navigationフォルダの中にview.php、view.css、view.jsを用意しました。
view.phpは、まず、/concrete/blocks/autonav/view.php ←ここに記述してあるものをコピーして自作するview.phpに書き、そこに自分が最初に作成したHTMLを入れ込んでいくかと思うのですが、どの部分に入れ込めば良いかが分からなくて、、ご教授いただきたいです。
すみませんがよろしくお願いいたしますm(__)m
ナビゲーションですので、大体 ul タグでコーディングされていると思います。
オートナビのデフォルトの view.php もそうなってますので、大きく変える必要はありません。
/*** STEP 1 of 2: Determine all CSS classes (only 2 are enabled by default, but you can un-comment other ones or add your own) ***/
コメントで↑のように書かれているところ以降は、現在表示中のページとか、サブメニューがあるかどうかなどの条件に従って自動的につけられるクラス名を定義しているところです。コーディングに合わせて変えてください。
//*** Step 2 of 2: Output menu HTML ***/
次にコメントで↑のように書かれているところ以降は、ナビゲーション部分のコーディングを調整するところです。 ul ではなく ol にしたいとか、さらに div で囲みたいとかの場合はこの部分を変更してください。
ありがとうございます！
そのようにやってみます。
度々申し訳ありません。
文字の表現のし易さや、なるべく使っているブロックを改修前と同じにしたい(希望するレスポンシブは同じなので) ということを考えまして、やはり記事ブロックで実装していきたく、もう一度ご質問させていただきたいです。
記事ブロックのカスタムテンプレートを
application/blocks/content/templates/my_navigation/ このようにフォルダを作成し、my_navigationフォルダの中にview.php、view.css、view.jsを用意しました。
view.phpはデフォルトのものを自作のview.phpにコピーし、そこに自分が最初に作成したHTMLを入れ込んでいくかと思うのですが、どの部分にどのように入れ込むことになりますでしょうか？？
度々すみませんがご教授よろしくお願いいたします。
記事ブロックでいいなら、CSSやJavaScriptはHTMLブロックを設置してその中に入れて仕舞えば良いでしょう。PHPを触るまでの必要はありません。
1 Like
そうなのですね！
ありがとうございます。試してみます。