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

2015年6月27日 at 16:41

インストールしたままのテーマでサイトを作っていますか?

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

2015年6月27日 at 22:56
お返事ありがとうございます。

インストールしたままのテーマということはヘッダーやフッターは最初のまま文字の大きさや位置は全く変更できないのでしょうか?

マーケットプレイスに接続してテーマなどを少し探してもましたが中々気に入ったものが見つからず。。。

他にテーマなどの入手方法等あればお教えください。

引き続きご回答よろしくお願い致します。
 

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

2015年6月28日 at 20:31
ブロックの赤枠で囲まれていない部分は、HTMLやCSSの知識がないと修正できません。
もしそれでも良ければカスタマイズの仕方をお教え出来ますが、よろしいですか?
 

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

2015年6月29日 at 9:55
kohki様

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

実は5年ほど前に1冊、ホームページ作成の本を買い、ホームページ作成に挑戦したことがあります。
その時に四苦八苦した覚えがあり、しかしコンクリート5のデモ動画を見て、これならもっと簡単にできそうだと思い挑戦してみました。
デモ動画ほど簡単ではなかったですが、、、
なので少ーーしの知識だけはあるので大変お手数ですがよろしければお教えいただけますでしょうか?

それと追加でヘッダーの左上にサイトの名前があるのですが、これを画像に変えて中央に持ってきたいと思います。この方法もよろしければお願いできますでしょうか?

5年ほど前に制作しようとした時はwindousのメモ帳を使ってHTMLとCSSを書きました。今回もファイルをメモ帳で書き換えていいのでしょうか?

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

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

2015年6月29日 at 11:17
では、FTPでサーバーにアクセスできるということ前提でお話します。

まず、メモ帳なんですが、concrete5のテーマではUTF-8という文字コードを扱います。
メモ帳では、UTF-8を扱うのに問題があるため、他のエディタを準備してください。
TeraPadというのがオススメです。

http://www.forest.impress.co.jp/library/software/terapad/

また、TeraPadで保存する時は、UTF-8Nで保存するようにしてください。
下記URLに詳しく書いてあります。

http://www.php-factory.net/trivia/03.php

次に、テーマは何をお使いか、ということです。
「水色」ということなので、GreekYogurt だと思いますので、
その前提で話を進めます。

まずは、フッターリンクの消し方です。

◆フッターリンクの消し方
FTPでアクセスし、concrete5がインストールされているディレクトリを開いてください。

/【concrete5がインストールされているディレクトリ】/concrete/themes/greek_yogurt/elements/footer.php

というファイルがあります。これを一旦ローカルに保存しましょう。
なお、/concrete/ ディレクトリの下にあるファイルは、絶対に上書きしたり削除したりしないでください。

次にTeraPadでこのfooter.phpを開き、27行目の

<p class="footer-tag-line"><?php echo t('Built with <a href="http://www.concrete5.org/" alt="Free Content Management System" target="_blank">concrete5 - an open source CMS</a>')?></p>


という記述を


<!— <p class="footer-tag-line"><?php echo t('Built with <a href="http://www.concrete5.org/" alt="Free Content Management System" target="_blank">concrete5 - an open source CMS</a>')?></p> -->


とし、HTMLのコメントアウトにします。
いきなり消してもいいのですが、何か不具合があったらまずいので、一旦コメントアウトにしてください。

次に、FTPソフト上で

/【concrete5がインストールされているディレクトリ】/themes/

というディレクトリにアクセスしてください。
これの中身は空っぽだと思いますが、次のようにディレクトリを作ります。

/【concrete5がインストールされているディレクトリ】/themes/greek_yogurt/elements/

footer.phpをダウンロードしてきたディレクトリと構成が良く似ていますが、/concrete/ディレクトリではないところがポイントです。

最後に、ローカルで編集したfooter.phpを、この新しく作ったディレクトリにアップロードします。

この作業が済んだら、おつくりになったconcrete5のサイトURLにブラウザでアクセスして、再読み込みをします。
再読み込みしても変化がない場合は、管理画面でキャッシュのクリアをしてください。
テーマのカスタマイズをしている最中は、キャッシュをオフにするのがお作法です。

コメントアウトして正常に表示が消えたら(他の体裁崩れなどがなければ)、footer.phpの27行目を削除しても構いません。

◆フッターの水色を他の色に変える

同じ要領で、

/【concrete5がインストールされているディレクトリ】/concrete/themes/greek_yogurt/typography.css

というファイルを、ローカルに保存します。

次に、変えたい色を決めます。単純に色名を表す英単語を入力するか、微妙なニュアンスの色を使う場合は、16進数の色コードを決めます。
英単語表記にしたい場合は、以下のURLを参考にしてください。
http://blog.livedoor.jp/html_color/archives/50716737.html
16進数でやるなら、以下のURLを参考にしてください。
http://html-color-codes.info/japanese/

次に、typography.cssを開き、最後の行に以下のように追記してください。


div#main-container #footer {
background-color: #ddd;
}


#dddのところを、色名の英単語か16進数のコードにします。#dddは、明るいグレーを意味します。

最後に、ローカルで編集して保存したtypograpy.cssを、

/【concrete5がインストールされているディレクトリ】/themes/greek_yogurt/

にアップロードして保存します。

ブラウザを再読み込みして、変化しているか確認してください。

ヘッダー左上のロゴを画像にして中央揃えにするのは、これが終わってからにしましょう。
 

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

2015年6月29日 at 12:43
お返事ありがとうございます。

大変わかりやすい説明でありがとうございます。
記載の通り入力するとリンクも削除できましたしフッターの色も変更できました。
思うように変更できるとこんなにも楽しいのですね!

この要領で【concrete5がインストールされているディレクトリ】/concrete/themes/greek_yogurt/typography.css
の中の6行目のbackground-color: #dff5ff;の#dff5ffを変更して
【concrete5がインストールされているディレクトリ】/themes/greek_yogurt/
にアップロードするとテーマ色?の水色の色も変更できるということでしょうか?

お忙しい中お手数をおかけし大変恐縮ですが、ヘッダーの画像の件もよろしくお願い致します。
 

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

2015年6月29日 at 13:08
そういうことです。

先ほど、typography.cssの最後に記述してもらったのは、理由があります。
CSSには、記述が優先されるルールというのがあり、
後に記述されたもののほうが優先される、というのがルールの1つとしてあります。
(他にもルールはあるのですが…)

div#main-container #footer も、本来は23行目に書いてありますが、ここを書き換えず、最後に記述することによって、不具合があった場合、追記した箇所のみコメントアウトや削除することによって対応しやすいので、こうしています。
(もちろん、必ずしもこうしないといけない、ということはありません。)

さて、ヘッダーにロゴを作って真ん中に寄せたいということですが、
右にあるナビゲーションはどうされますか?
ロゴは真ん中でナビゲーションが右にあると、左に隙間が空いてしまいますが、それでもいいでしょうか。

また、このテーマの作りは、サイト名(ロゴ)は左に、ナビゲーションは右に寄るように作られているので、ロゴを真ん中にするのにはちょっとHTMLに手を入れる必要があります。

それを含めて、どういうふうにヘッダーのレイアウトを表現したいかを教えていただけますか?
出来れば、簡単な図解にしていただいて、こちらに添付ファイルをつけてもらえると助かります。
 

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
 

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

2015年6月29日 at 7:48
kohkiさんがおっしゃる通り、赤枠が出ないのはテーマの中を自分で書き換える(HTMLなど)の作業が必要です。といってもわかりやすくお話ししてくださると思うので、この機会に是非挑戦してみてはいかが?

ちなみに同じgreek yogurtでも、インストールして表示されてる状態かカスタマイズの準備が出来ている状態で、手順が違いますし、マーケットプレイスで購入したテーマも同じです。
なので、インストールしたままですか?とお訪ねしました。

道案内をするときに、いまどの場所にいるか?で答え方が違うのと同じように、できるだけ迷わないようにと思っているだけなので、「逆に質問されてしまって、どうしよう?」と思わないでくださいね。
 

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

2015年6月29日 at 12:34
お返事ありがとうございます。

今回は最後まで挑戦したいと思います!

私も手探りで政策しているのdこれからも言葉足らずなところがあるかもしれませんがよろしくお願い致します。