Re: フッターのリンクについて

2015年6月29日 at 18:11

お返事ありがとうございます。

なるほど、そういうことなのですね。

簡単すぎで申し訳ないですがサイトの構成を添付いたします。
お店のサイトを作っています。
今回一度コンクリート5を入れなおしたのですが、入れなおす前に色々イジってみたところ、編集でナビゲーションを削除しても編集後の画面ではナビゲーションが削除されていませんでした。
今回、特にナビゲーションのようなものは必要無いと考えていたので、削除か見えなくする方法ががあればお教えいただこうと思っておりました。

よろしくお願い致します。

Re: フッターのリンクについて

2015年6月29日 at 19:13
おおっと、これはかなり高度な内容ですね(^_^;)

ひとまず、ロゴを画像にして真ん中に揃える、右肩に電話番号を入れる。をやりましょう。

先ほどのfooter.phpやtypography.cssの修正をした手法なんですが、「オーバーライド」といいます。

詳しくは省きますが、/concrete/以下にあるファイルをコピーして、修正したものを、/concrete/ではない同じディレクトリ階層に置くことによって、concrete5の大元を修正する方法です。
これの良いところは、もし何か間違いがあって正常に動作しなくなっても、修正したファイルを削除したり移動させることによって、元の状態に簡単に戻すことができます。

先ほど、/concrete5/以下のディレクトリ・ファイルは絶対に修正しないと言ったのは、こういう理由からです。

ここから先は、特に申し添えない限りは、この「オーバーライド」によって、各ファイルを修正し、しかるべきディレクトリに配置してください。

◆ロゴを画像にして、真ん中に揃える
typography.cssを修正します。ファイルの末尾に、


div#main-container #header h1 {
float: none;
width: 100%;
text-align: center;
display: block;
margin-left: 0;
}


と書きます。

リロードしてみると、サイト名が真ん中に寄っているのがわかるでしょうか。

次に、ロゴ画像をアップします。
管理画面に入り、ファイルマネージャという項目を選択します。
ここは、ローカルや他のサーバーから画像などのファイルをconcrete5の中へ入れる窓口です。
「ファイルを選択」からローカルの画像を選んで、「ファイルをアップロード」すれば、concrete5の管理画面で扱える画像ファイルとしてアップすることができます。

次に、トップページに戻ります。
アドミンバー左上にある「編集」ボタンを押して、編集モードに入ります。
サイト名の書かれているブロックをクリックし出てきたドロップダウンメニューの一番最初にある「編集」を押します。
すると、編集画面が出てきますので、とりあえずサイト名の文字をBackspaceキーなどで削除しましょう。

次に、空のフィールドになった欄の上にある水色のバーがありますが、その左端「画像を追加」をクリックします。
すると、先ほど使用したファイルマネージャが立ち上がります。ここで、先ほどアップロードした画像をクリックし「選択」を押します。

これで、ロゴ画像が入ったかと思います。ブロック編集ダイアログの右下にある「保存✓」を押して、編集を完了してください。その後、アドミンバー左端にある「編集中」をクリックし、「この編集を公開」を押して編集モードを終了します。(編集モードを正しく終了しないと、編集内容は反映されませんので注意してください)

これで、ロゴが真ん中に寄ったかと思います。

◆グローバルナビを中央揃えにする
お示しのワイヤーフレームとは少し趣きが違うかもしれませんが、ナビゲーションを中央揃えにしてみます。

typography.cssの最後に、次のように追記します。

div#main-container #header ul {
float: none;
margin: -20px 0 20px;
text-align: center;
}


ブラウザをリロードしてみてください。どうでしょうか。少し思ってたのと違うかもしれませんが、とりあえずは真ん中に揃ったと思います。

◆ロゴの右脇に、電話番号と文言を入れる。
再び編集モードに入ります。「サイト全体のSite Nameに追加する」をクリックし、記事ブロックを追加してください。

追加後、記事ブロック編集画面となりますから、ここで文言と電話番号を書き込みます。
文言と電話番号を選択肢、右揃えのボタンを押してください。
Microsoft Officeと同じようなボタンです。

右揃えになったら、保存ボタンを押し、編集モードを終了します。

このままだと、

ロゴ

文言・電話番号

グローバルナビ

の順にならび、それぞれが高さを持つため、ロゴとグローバルナビの間に隙間が出来ていると思います。ちょっとこれは不格好ですね。

文言・電話番号の記事ブロックを上にずらし、その分グローバルナビを上に近づけてみます。

再び編集モードに入り、文言と電話番号の書かれた記事ブロックをクリックします。
するとドロップダウンメニューの下から2つ目に「デザイン」という項目があるので、クリックしてください。
このブロックの体裁を調整するダイアログが出てきますから、「余白」というタブをクリックし、「マージン」の「上」に「-100px」と入力します。

あとは、右下の「保存」ボタンを押し、編集モードを終了して、編集内容を確定させてください。

するとどうでしょうか? 記事ブロックが右上にずれた分、グローバルナビとロゴの隙間が小さくなったと思います。

なお、次に編集モードに入る時は、文言・電話番号のブロックは高さが非常に低くなり、一見すると消えてしまったかと思いますが、これはマイナスの値を与えてしまったことによる編集モード時だけの見た目です。ブロックの背の高さは低いのですが、クリックして編集すれば、きちんと中身は保存されていますし、編集しても反映されます。

◆ここまでの総括
ここで使っている技術は、HTMLとCSSのテクニックです。上記コードではfloatを解除していますが、CSS初学者の方は最初につまづきやすいところでもあります。また、余白タブにマイナスを打ち込んでいるのは、CSSでいうところのmargin-top: -100px;と同義です。これはネガティブマージンという手法で、どちらかといえば、力技というか、高度なテクニックです。
また、このように、concrete5はcssをファイルに書くだけでなく、編集モードや管理画面から制御する方法もあります。

というわけで、ここまで手順通りにやってこられたのであれば、比較的すんなりレイアウトの変更は出来たと思います。
しかし、そのためには、CSSの基本知識と、どこをどのように修正すれば思い通りのレイアウトに描画されるか、という知識に基づく推測力が必要です。

◆グローバルナビの枠組みレイアウトについて
おそらく、コンテンツの横幅いっぱいに、ページヘのリンクの個数ごとに、ボタンの幅を均等に割り付けたいのだと思いますが、これはかなり高度なテクニックです。
おっしゃるとおり、CMSではページ数の増減があるため、割付には、ページに応じて幅を割り出すコーディングをしなければなりません。
最近までは、CSSだけでこれをするのは無理でしたが、IE8以前を無視してもいいのであれば、以下の記事のようにすれば、対応できます。
http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/
英語の記事ですが、コードを読むだけでも勉強になります。途中にHTMLとCSSを自由に編集して、見た目がリアルタイムに確認できる「Code pen」というサービスが貼ってあるので、そこで自由に編集してみれば、挙動がわかるでしょう。

◆フッターを下辺に固定する
色々やりかたはありますが、確実なのは、JavaScriptを使う方法です。
http://blog.webcreativepark.net/2007/11/16-012253.html


以上のことを行えば、お示しのワイヤーフレームのようなレイアウトになります。

このように、concrete5といえど、自分の臨むデザインを実現するには、少なからずHTMLとCSSの知識が求められます。
他のテーマも探されたということですが、もし仮に一番気に入ったテーマがあってそれをインストールしたとしても、絶対に細かいところで不満が出てきて、それを修正するためにHTMLやCSSの知識が必要となります。
5年前に勉強しようとしてそのままになっているということですが、ぜひこの機会に、もう一度勉強されてみることをオススメします。
 

Re: フッターのリンクについて

2015年6月30日 at 18:15
度々、早々にお返事いただきありがとうございます。

ヘッダーのロゴを中央に寄せるのと電話番号の位置の移動は迷うことなくできました。
少しずつですが要領がわかってきた感じです。

グローバルナビの枠組みレイアウトについてですが、先日再インストールする前に色々適当にさわっていたところ、グローバルナビに関しては例えばですが、編集画面にし、ヘッダー画像に追加→レイアウトを追加→列を必要なだけ指定し、できた各ブロックに記事を追加して文字や画像を挿入してそれらにリンクをはれば簡単なのかな?となんとなく思ったのですが、この方法では間違いなのでしょうか?
この方法は間違いでやはりhtmlでリストを作ってcssで大きさなどを調整していく場合、htmlはどのファイルに書き込めばよいのでしょうか?

今までお教えいただいた感じとしてはテーマをgreek_yogurtで編集していてcssをさわる場合は
/【concrete5がインストールされているディレクトリ】/concrete/themes/greek_yogurt/typography.css
のtypography.cssローカルに置き、書き足して
/【concrete5がインストールされているディレクトリ】/themes/greek_yogurt/
にアップロード。
phpをさわる場合は
/【concrete5がインストールされているディレクトリ】/concrete/themes/greek_yogurt/elements/footer.php
のfooter.phpローカルに置き、一応コメントアウトし書き足して
/【concrete5がインストールされているディレクトリ】/themes/greek_yogurt/elements/
にアップロードすると言う事でよいのでしょうか。。。?
これは同じファイルがある場合/【concrete5がインストールされているディレクトリ】/themes/
にあるファイルの情報が優先されるということでしょか?

そもそもグローバルナビを作るときはオートナビを利用しないといけないのか?
ブロックに記事を追加した場合は〔記事を編集〕からhtmlを入力したりデザインからcssを入力できるようなのですが(まで試したことはないですが)オートナビをグローバルナビにしないといけないならhtmlやcssをどこから入力するのかな?という感じです。まったく検討違いかもしれませんがまだわからないことだらけです。
数年前に作ったホームページですが未完成ですが実は一部を公開して検索エンジンにも載るようにしたのですが、検索すると自分が作ったホームページのグローバルナビにリンクされているページが全て検索ページにずらりと並んでいと事があります。今思えばこれはグローバルナビがきちんとできていなかったことが原因だったのかなと思います。

質問が取っ散らかりわかりにくくて申し訳ありません。

Code penのリンクありがとうございました。非常にわかりやすいです。
フッターの固定はまだまで先になりそうなので今の問題が解決してから頑張ります;
時間があればお教えいただければと思います。

よろしくお願いいたします。
 

Re: フッターのリンクについて

2015年6月30日 at 22:14

グローバルナビの枠組みレイアウトについてですが、先日再インストールする前に色々適当にさわっていたところ、グローバルナビに関しては例えばですが、編集画面にし、ヘッダー画像に追加→レイアウトを追加→列を必要なだけ指定し、できた各ブロックに記事を追加して文字や画像を挿入してそれらにリンクをはれば簡単なのかな?となんとなく思ったのですが、この方法では間違いなのでしょうか?


まず、この世界には絶対的に正しいやり方、間違っているやり方というのはありません。
ただ、「そのやり方よりかは、こっちのやり方のほうが望ましい」とか
「◯◯を優先するのであれば、絶対に××をやってはいけない」ということはあります。

で、グローバルナビにレイアウトを使うやり方ですが…

1. ページが追加された時に、自動的にページへのリンクが追加されない
2. フルサイトマップ等でページの順序を並び替えた時に、その並びが反映されない
3. レイアウト機能は、div要素が大量に深く生成されるので、ナビゲーションのHTML構成としては向いていない(SEOの解釈的にも不利)
4. レイアウトを切り、レイアウトごとに記事ブロックを入れ、ページへのリンクを貼る作業は大変に手間

などが挙げられます。

逆に、オートナビを使えば、上記の問題は全てクリアされるわけです。


この方法は間違いでやはりhtmlでリストを作ってcssで大きさなどを整していく場合、htmlはどのファイルに書き込めばよいのでしょうか?


オートナビのhtml構成を変更するには、カスタムテンプレートという機能を使います。
カスタマイズテンプレートの機能については、以下をご覧ください
http://concrete5-japan.org/help/5-6/developer/block_custom_template/
http://www.onside.com/web_design/6560.html


今までお教えいただいた感じとしてはテーマをgreek_yogurtで編集していてcssをさわる場合は
(中略)
にあるファイルの情報が優先されるということでしょか?


ご認識の通りです。concrete5では、テーマに限らず、このオーバーライドの仕組みでカスタマイズしていきます。


そもそもグローバルナビを作るときはオートナビを利用しないといけないのか?


そんなことはありませんが、レイアウト機能を使うよりかは、オートナビのほうが良いでしょう。(理由は先述のとおり)
また、マーケットプレイスのアドオンに、Manual Navというものもあります。

http://www.concrete5.org/marketplace/addons/manual-nav/

オートナビは、ブロック編集画面のプルダウンメニューから、ページを表示する一定の法則を作って、ページへのリンク集をつくります。
一方、Manual Navは、表示させたいページだけを自分で選び、並び順もサイトマップの順序とは別に、自由に構成することができます。
ただ、これは逆の意味もあり、ページを追加しても自動的にリンクは追加されませんし、
サイトマップ上で並び順を変更しても、Manual Nav上で、もう一度並び替える必要が出てきます。
Manual Navは、グローバルナビの中でも、サイト規約やプライバシーポリシーなど、ヘッダーのすぐ上に小さく表示させるようなリンクに適しています。


ブロックに記事を追加した場合は〔記事を編集〕からhtmlを入力したりデザインからcssを入力できるようなのですが(まで試したことはないですが)オートナビをグローバルナビにしないといけないならhtmlやcssをどこから入力するのかな?という感じです。


先述のとおり、カスタムテンプレート機能を使って実現できます。


数年前に作ったホームページですが未完成ですが実は一部を公開して検索エンジンにも載るようにしたのですが、検索すると自分が作ったホームページのグローバルナビにリンクされているページが全て検索ページにずらりと並んでいと事があります。今思えばこれはグローバルナビがきちんとできていなかったことが原因だったのかなと思います。


ちょっとこれについてはよくわかりません。検索したキーワードにもよりますし、キーワードがそのサイトでしか使われていないもの(例えばサイト名などの固有名詞)で検索すれば、そのサイトにあるページで検索結果が埋まることは、とても自然なことです。


フッターの固定はまだまで先になりそうなので今の問題が解決してから頑張ります;
時間があればお教えいただければと思います。


どちらかといえば、フッター固定のほうが早くできるかもしれません。
もし躓いたら、また別スレッドを立ててください。

がんばってください。
 

Re: フッターのリンクについて

2015年7月1日 at 15:13
kohki様
お返事ありがとうございます。

やはりグローバルナビはオートナビを使用するのが後々のことを考えると良いということなのですね。
ありがとうございます。

お教えいただいたカスタムテンプレートの動画は少し長いようなので時間のあるときに見て挑戦したいと思います。
ここがやはり一番の難関のような気がします;

わからないことがでてきた時はまた質問したいと思います。たぶんすぐでてきそうな気がしますが。。。

忙しくされてる合間にいつもご返信くださり重ねて御礼申し上げますm(__)m