ひとまず、ロゴを画像にして真ん中に揃える、右肩に電話番号を入れる。をやりましょう。
先ほどの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: フッターのリンクについて
なるほど、そういうことなのですね。
簡単すぎで申し訳ないですがサイトの構成を添付いたします。
お店のサイトを作っています。
今回一度コンクリート5を入れなおしたのですが、入れなおす前に色々イジってみたところ、編集でナビゲーションを削除しても編集後の画面ではナビゲーションが削除されていませんでした。
今回、特にナビゲーションのようなものは必要無いと考えていたので、削除か見えなくする方法ががあればお教えいただこうと思っておりました。
よろしくお願い致します。