kohki様

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

最初に私がしたのは
【concrete5がインストールされているディレクトリ】/concrete/themes/greek_yogurt/elements/header.php
をローカルに置き、17行目のhead内にお教えいただいたサイトの
<script type="text/javascript" src="./footerFixed.js"></script>
を書き、そのheader.phpファイルを
【concrete5がインストールされているディレクトリ】/themes/greek_yogurt/elements/
にアップロードし、同じフォルダにfooterFixed.jsをアップロードしました。

ですがフッターは下部に固定されず、他にも自分なりには試したのですが駄目でした。

今回、kohki様にお返事いただいた
/【concrete5がインストールされているディレクトリ】/themes内に/elements/greek_yogurt/elements/フォルダを作り、その中に
【concrete5がインストールされているディレクトリ】/concrete/themes/greek_yogurt/elements/内のheader.phpの17行目のhead内にお教えいただいたサイトの
<script type="text/javascript" src="./footerFixed.js"></script>
を書き込んだheader.phpをアップロードし、同じファイルにfooterFixed.jsをアップロードしました。

しかしやはり結果は変わらずです　泣

根本的にやり方が間違えているのでしょうか？

何度も本当にすみません。よろしくお願い致します。

泣きたい気持ちはわかりますが、まず正確に現状をお伝えいただかないと、解決できません。

ひとまず、index.htmlと書かれていた件は、実際にはそうされていなかったと解釈しました。

次に気になる部分があります。

/【concrete5がインストールされているディレクトリ】/themes内に/elements/greek_yogurt/elements/フォルダを作り、その中に
【concrete5がインストールされているディレクトリ】/concrete/themes/greek_yogurt/elements/内のheader.phpの17行目のhead内にお教えいただいたサイトの

もしこのようにされているのであれば、
/【concrete5がインストールされているディレクトリ】/themes/elements/greek_yogurt/elements/header.php
の17行目を書き換えたことになりますが、これは間違いです。正しくは
/【concrete5がインストールされているディレクトリ】/themes/greek_yogurt/elements/header.php
です。

次に、外部に作ったJavaScriptの読み出し方ですが、foterFixed.jsを紹介しているページは、concrete5を前提とした解説ではないので、コードを紹介されたそのまま書き加えても読み出しできません。

誤：<script type="text/javascript" src="./footerFixed.js"></script>
正：<script type="text/javascript" src="<?php echo $this->getThemePath(); ?>/footerFixed.js"></script>

この場合、footerFixed.jsは、elementsフォルダの下ではなく、テーマフォルダ直下
/【concrete5がインストールされているディレクトリ】/themes/greek_yogurt/footerFixed.js
に置くのがスマートでしょう。

ここまで正しく出来ていますか？

kohki様

ご返信ありがとうございます。
度々返信いただき大変申し訳なく思っています。

index.html等、自分で色々触ったファイルは全て元に戻してあります。

/【concrete5がインストールされているディレクトリ】/themes内に/elements/greek_yogurt/elements/フォルダを作り、その中に
【concrete5がインストールされているディレクトリ】/concrete/themes/greek_yogurt/elements/内のheader.phpの17行目のhead内にお教えいただいたサイトの、、、、、

↑↑は間違いなのですね。

お教えいただいた通り
/【concrete5がインストールされているディレクトリ】/themes/greek_yogurt/elements
のフォルダのheader.phpの17行目head内に
<script type="text/javascript" src="<?php echo $this->getThemePath(); ?>/footerFixed.js"></script>
を追加しアップロードしました。

footerFixed.jsのファイルも
/【concrete5がインストールされているディレクトリ】/themes/greek_yogurt/
内に置きました。

現状では特に変化は無いようですが、追加するものがあるのでしょうか？


>>誤：<script type="text/javascript" src="./footerFixed.js"></script>
正：<script type="text/javascript" src="<?php echo $this->getThemePath(); ?>/footerFixed.js"></script>

↑↑で追加の<?php echo $this->getThemePath(); ?>部分は先日お教えいただいた
http://concrete5-japan.org/help/5-6/design/theme-design-basic-semin
２．テーマパス
のことなのですね。
なんとなくしかわからないので<?php echo $this->getThemePath(); ?>をどこに追加すればCSS ファイルや JS ファイルを読み込むのかまだ自分自身わかっていなく、、完全に勉強不足です。。

説明が不足ぎみで申し訳ありませんがよろしくお願い致します。

index.html等、自分で色々触ったファイルは全て元に戻してあります。

なぜindex.htmlを作られたのかはわかりませんが、greek_yogurtの中にindex.htmlは存在しません。存在しないファイルを作ってもオーバーライドされないので、間違いの元になりますから今後、テーマカスタマイズの時はindex.htmlを忘れたほうが良いでしょう。

引用が前後しますが…

なんとなくしかわからないので<?php echo $this->getThemePath(); ?>をどこに追加すればCSS ファイルや JS ファイルを読み込むのかまだ自分自身わかっていなく、、完全に勉強不足です。。

一旦、concrete5から離れて説明します。
CSSやJavaScriptは、原則的にhead内で読み込みます。（例外もありますが）
かつてHTMLの勉強をされた中で、おそらく、index.htmlなどのhtmlファイルを作り、その中のhead要素内で、

<link rel=“stylesheet” href=“/css/style.css” type=“text/stylesheet” />

などと記述するように学習されたかと思います。

ここで、話はconcrete5に戻ります。一方で、テーマが持つCSSファイルは、

/【concrete5のルート】/themes/theme_name/

の下に置くことになります。毎回themesとかテーマの名前を書いていると間違いの元ですし、途中からテーマの名前が変わり、ディレクトリ名が変更となれば、全部書きなおしです。
そこで、concrete5には<?php echo $this->getThemePath(); ?>と書けば、そのテーマのディレクトリまでのパスを書き出してくれる仕組みが予め用意されています。
これが、greek_yogurtでは、header.phpの11,12,13行目あたりのことになります。

ここまではCSSを例にお話しましたが、JSも原則として同じです。

次に、上記書き込みの通りにやっていただければ、本来はfooterFixed.jsが読み込まれているはずです。
それでも外観に変更がないのであれば、

１）正しく読み込めていない
２）別の理由でフッターが固定できていない

可能性が考えられます。

まず、１の可能性を排除しましょう。
JSが正しく読み込めているかどうかは、ブラウザの開発者ツールで調べることができます。
ブラウザによって開発者ツールのデザインは異なりますが、できることは大体同じです。
ここでは、Chromeの開発者ツールを参考にお話します。
参考：http://www.buildinsider.net/web/chromedevtools/01

デベロッパーツールを起動し、Resoucesというタブを開きます。
次に、左カラムの中から
Frames→(serverの名前もしくはファイル名)→Scriptsと開きます。その中に「footerFixed.js」が存在すれば、正しく読み込まれています。
詳しくは、添付ファイル「ss1.png」を見て下さい。
私の環境でgreek_yogurtにfooterFixed.jsを組み込んだ時の開発者ツールがどう表示されているかがわかると思います。

まずは、ここまで確認しましょう。

kohki様

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

お教えいただいた通り、開発者ツールを表示しFramesフォルダ→ホームページアカウント名フォルダ→Script　を開くとfooterFixed.jsはありました。

ということは、kohki様が仰っていたように　２）別の理由でフッターが固定できていない　という事でしょうか。

ひとつ気になったのですが、Chromeの開発者ツールを表示後、ページをリロード後にはScript内のfooterFixed.jsが無くなっていますがこれは正常なのでしょうか？
一応画像を添付させていただきます。

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

また引用が前後しますが…

ひとつ気になったのですが、Chromeの開発者ツールを表示後、ページをリロード後にはScript内のfooterFixed.jsが無くなっていますがこれは正常なのでしょうか？
一応画像を添付させていただきます。

正常ではないです。
添付ファイルを確認しましたが、本当にリロードした直後のものですか？
リロード後のものは、GoogleMapブロックを追加していないと追加されないJavaScriptも存在しています。
仮に、footerFixed.jsの読み込み方が悪かったとしたら、footerFixed.jsがリロード後に消えたとしても、GoogleMapブロックを追加しないと出てこないJavaScriptが読み込まれているのは不自然です。
何か心当たりはありませんか？

なお、リロード前の状態は、正しくfooterFixed.jsが読み込めています。従って、読み込み以外の理由であると考えれます。

あと、スクリーンショットは、私が貼ったように、画面全体を撮っていただけますか？　隠したいところは隠してもらってもいいので、全体のレイアウトが分かるような状態でお願いします。

kohki様

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

正常ではないのですね、、
先ほどの画像はリロード直後のものです。
最初のワイヤーフレームとは少し違っていますが一応画面全体の画像を添付いたします。

一応ですが前々回、質問したときに
index.html等、自分で色々触ったファイルは全て元に戻してあります。
↑と書きましたが、これはフッターを下部に固定しようと自分なりに挑戦した時に書き換えたファイルのみを元に戻したという意味で、完全に全てをインストール時のように戻したという意味ではありません。説明不足でした。この時に触ったファイルはできる限り元に戻したつもりです。

今まで思い出せる範囲ですがだいたいしてきたことは順番に
1フッターにリンクを消す
2typography.cssファイルに書き足してフッターの色を変える
3typography.cssファイルに書き足して、ヘッダーのサイト名を真ん中に寄せそれをロゴに入れ替える
4typography.cssファイルに書き足してグローバルナビを中央に配置
5typography.cssファイルに書き足してbodyのbackground-coloｒを変更
ここまではすんなりできたのですが、ここからフッターを下部に固定するためにheader.php、footer.php、typography.css、index.html等を色々触っては元に戻すのを繰り返していました。
このとき辺りににもともとグローバルナビにあった概要、ブログなどのページは削除し新規にパージを追加しました。
この辺りでひとつおかしな事に気づいたのですが、トップ画面から他に作ったページ(添付画像でいうとcontactとかmapのページです)へ移動するとコンテンツの横幅が10pxほど右に移動します。
逆にいうとtopのページだけ左に10pxほど寄っているというか。。
それと平行してお教えいただいたサイトを参考にしながら
インストールしたディレクトリ/blocks/autonav/templates/にglobal_naviというフォルダを作り/作成したview.phpとview.cssを入れてカスタムテンプレートを作り何とか適用できた感じです。
その後、フッターの問題が解決しないので作業を進めようとメインレイアウトにレイアウトを追加し、そちらにgooglemapと店舗情報を追加し、その後開発者ツールの事をお教えいただいたので画像を添付しお送りさせていただきました。

何かしてはいけない事をしてしまっているのでしょうか。。。

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

いつも本当にご迷惑をおかけして申し訳ありません。。。

やってはいけないことではありませんが、このスレッドはあくまで「フッターを底辺に固定する」ことが目的なので、
それ以外の目的で編集やコンテンツ追加をされると、原因の究明が難しくなります。

リロードだけで、開発者ツールのResourcesがそのように変化するのはおかしいので先述のように質問しましたが、
やはりリロードではなく、他のコンテンツの追加等もされていた、ということなんですね。

色々header.phpやfooter.phpを触られたということなのですが、その後もしっかりfooterFixed.jsを読み込む記述は残されていますか？
もう一度ソースコード内を検索して、読み込みコードがあるかどうかチェックしてください。

次に、新しく添付していただいた画像ですが、どちらもウインドウの高さよりもページコンテンツの高さが高くなっているので、
footerFixed.jsが正しく読み込まれていたとしても、これは正しい描画結果です。
footerFixed.jsが機能するのは、ページコンテンツの高さが、ウインドウの高さよりも低い時のみとなります。

この辺りでひとつおかしな事に気づいたのですが、トップ画面から他に作ったページ(添付画像でいうとcontactとかmapのページです)へ移動するとコンテンツの横幅が10pxほど右に移動します。
逆にいうとtopのページだけ左に10pxほど寄っているというか。。

あくまでこのスレッドは、フッターを下辺に固定することが目的ですので、他に気になることがあれば、別にスレッドを立ててください。
フォーラムは問題解決の場だけでなく、後からconcrete5を学ぶ人のための情報でもあります。
後から学ぶ人のためにも、問題は細かく切り分け、なるべく１トピック１スレッドでお願いします。

補足です。
footerFixed.jsがgreek_yogurtに正しく実装された場合の挙動をお示ししておきます。

kohki様

いつもお世話になります。

フッターの下部固定の件ですが、先日
色々header.phpやfooter.phpを触られたということなのですが、その後もしっかりfooterFixed.jsを読み込む記述は残されていますか？
もう一度ソースコード内を検索して、読み込みコードがあるかどうかチェックしてください。

↑↑のように仰られていたのでその後も徹底的にheader.phpやfooter.phpのコード内及び、その他にも関係があるかも知れないファイルのソース内を元のソースと見比べながら細かくチェックしたのですが、結局わかりませんでした。
ですので、一度コンクリート5を削除し再インストールしまずフッターの固定から始めることにしました。
コンテンツの幅が他のページにいくと右10pxほど移動する件も気になっていましたので。
先日書いたコンテンツの幅がずれる件はフッターの固定と何か関わりがあるのかもしれないと思い書かせて頂きました。

それで今回新たにインストールしフッターの下部固定から始めました。まず新規インストールされた状態から
【concrete5がインストールされているディレクトリ】/themes/内にgreek_yogurtのフォルダを作る
【concrete5がインストールされているディレクトリ】/themes/greek_yogurt/内にelementsフォルダを作る
【concrete5がインストールされているディレクトリ】/concrete/themes/greek_yogurt/elements/内のheader.phpをFFFTPにて一旦ローカルに置きTerePadにてhead内17行目にお教えいただいた
<script type="text/javascript" src="<?php echo $this->getThemePath(); ?>/footerFixed.js"></script>
を書き込みUTF-8Nで保存。そのheader.phpをFFFTPで
/【concrete5がインストールされているディレクトリ】/themes/greek_yogurt/elements/内にアップロード。
お教えいただいたhttp://blog.webcreativepark.net/2007/11/16-012253.htmlページ内のfooterFixed.jsをダウンロードし/【concrete5がインストールされているディレクトリ】/themes/greek_yogurt/内にfooterFixed.jsをFFFTPを使ってアップロードしました。
あと、ホームページのアドミンバーの管理画のシステムと設定からキャッシュとスピード設定をクリックしブロックキャッシュとオーバーライドをキャッシュをオフにしました。
その後フッターが下部に固定されているか確認したのですが、ホーム以外の概要、検索、ブログ画面上すべて固定されていませんでした。
なぜでしょうか？
今回の件には関係無いかもしれませんが、先日書き込みした他のページにいくとコンテンツの横幅が10pxほど右にズレる挙動もインストール時からのものでした。

一応今回の関係画像を添付致しますのでチェックお願い致します。

CROMEの開発者ツールの表示ですが、CROMEを立ち上げ最初にホームページのURLを入れてページを表示させた後に開発者ツールを表示させてresources→ホームページアドレス→scriptのタブを見るとfooterFixed.jsの表示がありますが、今回も同じくリロード後は無くなっています。それとこの状態から概要、検索、ブログのページに行ってもどのページにも最初からresources→ホームページアドレス→scriptのタブを見てもfooterFixed.jsの表示はありません。もちろんリロード後もありません。
ですがCROMEを立ち上げて最初に概要や検索やブログのページアドレスを入れた後に開発者ツールを表示させてresources→ホームページアドレス→scriptのタブを見るとfooterFixed.jsの表示があります。これもリロード後にはまたfooterFixed.jsの表示がなくなります。

何か関係があるのでしょうか？

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

kohki様

失礼します。
先ほど添付した画像1ですが一番上の画像と二番目の画像の説明文が逆でした。
失礼しました。

原因究明がわかりやすいよう、丁寧に書いて頂きありがとうございました。

それで、こちらも同じ作業をしてみたところ、新しい事実がわかりました。

以前説明したとおり、$this->getThemePath(); は、テーマへのパスを自動的に書きだす、と説明しましたが、
これは、オーバーライド時であっても、元のテーマパスを読みだしてしまうようです。

ブラウザでソースコードを読んでいただければ、footerFixed.js読み出しのパスに/concrete/と入っているのが分かると思います。

で、どうもこれはconcrete5の仕様のようなので、以下のように力技で書いてみると、footerFixed.jsを実装することができました。

<?php $path = $this->getThemePath();
$path = str_replace("/concrete", "", $path);?>
<script type="text/javascript" src="<?php echo $path; ?>/footerFixed.js"></script>

一度、これで試していただけますでしょうか？

kohki様

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

header.phpのhead内の17,18,19行目に
<?php $path = $this->getThemePath();
$path = str_replace("/concrete", "", $path);?>
<script type="text/javascript" src="<?php echo $path; ?>/footerFixed.js"></script>
を記載し
【concrete5がインストールされているディレクトリ】/themes/greek_yogurt/elements/内にheader.phpをアップロードし確認したところフッターが下部に固定されていました。

今回、説明不足にも関わらず長々と私の質問にお付き合いいただき大変感謝いたします。

少しでもこのスレッドがコンクリート5を使用する方の足しになれば幸いです。
また何かありましたらご迷惑をおかけしますがよろしくお願い致します。
本当にありがとうございました。