どうか教えて下さい！
| 質問 > フロント機能 > 画像、CSSフォルダの設置場所 |
フロント機能
 |
| スレッド表示 | 新しいものから | 前のトピック | 次のトピック | 下へ |
| 投稿者 | スレッド |
|---|---|
| ax1701 |
投稿日時: 2018/7/15 12:40
対応状況: −−−
|
一人前   登録日: 2018/6/11 居住地: 投稿: 95 |
画像、CSSフォルダの設置場所 [EC-CUBE] 3.0.16、新規インストール
[レンタルサーバ] さくら共用プレミアム [OS] FreeBSD [PHP] PHP 7.1.17 [データベース] MySQL 5.7 [WEBサーバ] Apache 2.4系 [ブラウザ] IE 11.0.65 [導入プラグインの有無] 無効化中 [カスタマイズの有無] 某社 ２カラムデザインテンプレート使用中 現状はカテゴリ削除と商品登録２０品程度。 新規ページの作成をしています。 他社レンタルサーバーで作っているHTMLのページを新規ページに移植をしようと考えています。 現状の新規ページにはテスト用の文章だけを入れていますが、HTMLをコピーし、CSSや画像のフォルダーを作りリンクさせようと考えています。 その際のフォルダーの設置場所で悩んでいます。 某社デザインテンプレート使用しているので、その中にフォルダーを作るべきなのか？ それ以外の場所が適切なのだろうか？ です。 デザインに関するCSSとTOPページに使用されている画像は、某社デザインテンプレートのフォルダーの中にあります。 新規ページの場所は以下です。 home/html/user_data/xxx.twig 商品画像などは html/upload/save_image ですから、 html/uploade/xxx とフォルダーを作るほうが適切でしょうか？ いずれにしても、コピーしたHTMLやCSSで指定すれば良いのだろうと と思いますが、初めての事なのでわかりません。 どうぞよろしくお願いします。 |
| 468 |
投稿日時: 2018/7/15 13:10
対応状況: −−−
|
神   登録日: 2008/10/26 居住地: 投稿: 3217 |
Re: 画像、CSSフォルダの設置場所 正直なところ、新規ページに利用するCSSや画像などのリソースは、
/html以下であれば、どこに配置しても問題ないと思います。 (デザインテンプレートを切り替える予定がないのであれば) /html/template/テンプレート名 は、テンプレートパッケージの切り替えやエクスポート、インポートの対象となるディレクトリです。 /html/upload/save_image/ は、管理画面の商品登録時に商品画像が自動的に登録されるシステム的に利用しているディレクトリです。 /html/user_data/ は、管理画面のコンテンツ管理>ファイル管理で操作できるディレクトリになります。 こちらのディレクトリは、FTP等サーバへの接続手段が無くても、 ファイルの追加・削除が行えますので、 新規ページに利用するリソースはここに配置されたほうが良いのではないかと思います。 (テンプレート切り替えの影響も受けないと思います) ファイルを配置する箇所によって、twig上のパスの書き方が変わってくると思います。 {{ app.config.front_urlpath }} = /html/template/テンプレート名 {{ app.config.image_save_urlpath}} = /html/upload/save_image/ {{ app.config.user_data_urlpath}} = /html/user_data/
|
| ax1701 |
投稿日時: 2018/7/15 14:52
対応状況: 開発中
|
一人前 登録日: 2018/6/11 居住地: 投稿: 95 |
Re: 画像、CSSフォルダの設置場所 ４６８ 様
お忙しいところ、どうもありがとうございます。 /html/user_data/CSS /html/user_data/img とフォルダーを作りファイルを入れます。 twig上のパスの書き方ですが、上記であれば {{ app.config.user_data_urlpath}} = /html/user_data/CSS {{ app.config.user_data_urlpath}} = /html/user_data/img としてファイルを指定すれば良いのですね？ すみません、初めての事でわからないことが多いです。 ご教示いただければ幸いです。 |
| ax1701 |
投稿日時: 2018/7/15 17:19
対応状況: 開発中
|
一人前 登録日: 2018/6/11 居住地: 投稿: 95 |
Re: 画像、CSSフォルダの設置場所 ４６８ 様
お世話になっております。 html/user_data/css/xxx.css のように配置し、 新規ページtwig内で以下のようにリンクをさせると良いのでしょうか？ {% extends 'default_frame.twig' %} {% block main %} <!-- 新規ページ用CSS --> <link rel="stylesheet" href="{{ app.config.front_urlpath }}/html/user_data/css/xxx.css"> 以下は省略します。 重ね重ねすみません。 |
| 468 |
投稿日時: 2018/7/15 22:35
対応状況: −−−
|
神 登録日: 2008/10/26 居住地: 投稿: 3217 |
Re: 画像、CSSフォルダの設置場所 CSSの読込を追加する場合、
のように{% block stylesheet %}{% endblock stylesheet %}にlinkタグを追加してください。 href属性のパスは、「/html/user_data/」以下を指定しますので{{ app.config.user_data_urlpath}}を書いてください。 {% block stylesheet %}{% endblock stylesheet %}に記述する理由は、 default_frame.twigを見ていただくと話が早いのですが、 {% block stylesheet %}{% endblock %}と記述されている箇所があります。 新規追加したページのtwigで{% block stylesheet %}{% endblock stylesheet %}の間に書いた記述が、 default_frame.twigの{% block stylesheet %}{% endblock %}に挿入されます。 同じく{% block main %}{% endblock %}に書いた内容は、 default_frame.twigの{% block main %}{% endblock %}に挿入されます。 何故、default_frame.twigと繋がるのかというのは、 {% extends 'default_frame.twig' %}を記述して、 default_frame.twigを指定しているからと私は理解しています。 あと、default_frame.twigの最後のほうも確認していただきたいのですが、 {% block javascript %}{% endblock %}というjavascriptを挿入する為のエリアも用意されていますので、 javascriptを追加する場合は、{% block javascript %}{% endblock %}を利用されると良いと思います。
|
| ax1701 |
投稿日時: 2018/7/16 0:36
対応状況: 開発中
|
一人前 登録日: 2018/6/11 居住地: 投稿: 95 |
Re: 画像、CSSフォルダの設置場所 ４６８ 様
ご回答ありがとうございます。 先ほどまで自分なりにやってると上手く行きましたが、 私のやり方と468 様のやり方とどちらが適切なのでしょうか？ 先ほどまでやっていましたので、４６８様の内容は、明日理解したいと思います。 私は新規ページtwig内に以下のように記述しました。 ======================================== {% extends 'default_frame.twig' %} {% block main %} <!-- 新規ページ用CSS --> <link rel="stylesheet" href="{{ app.config.user_data_urlpath }}/css/photo.css"> <div id="contents" class="main_only"> <h2>当ショップポリシー</h2> <p class="photo1"><img src="{{app.config.user_data_urlpath}}/img/xxx.gif"></p> <p>xxxxxxxxxx</p> </div><!-- #contents ↑ --> {% endblock %} ======================================================= <link rel="stylesheet" href="{{ app.config.user_data_urlpath }}/css/photo.css"> は、当初、 href="{{ app.config.front_urlpath }}/html/user_data/css/photo.css"> と記述していましたが画像が表示されず、ページのソース表示を見ると同部分のパスが変だったので書き換えました。 画像の記述も同様だったので書き換えると表示されました。 いつもお世話になっています。 明日 ４６８様の内容を良く理解いたします。 |
| 468 |
投稿日時: 2018/7/16 1:28
対応状況: −−−
|
神 登録日: 2008/10/26 居住地: 投稿: 3217 |
Re: 画像、CSSフォルダの設置場所 特にどちらの記述でも問題無いと思います。
最終的に表示されたページのHTMLソースを見た時に、 <link>タグが<head></head>の中に表示されるか、 <body></body>の中に表示されるかの違いになります。
|
| ax1701 |
投稿日時: 2018/7/16 10:09
対応状況: 解決済
|
一人前 登録日: 2018/6/11 居住地: 投稿: 95 |
Re: 画像、CSSフォルダの設置場所 ４６８ 様
お世話になっています。 default_frame.twig内を確認しました。 新しいページのtwigファイル内で２通りの記述が出来る事、 理解できました。 ２つの新しいページを作っており、２つとも正常に表示されました。 本当にありがとうございました。 |
| スレッド表示 | 新しいものから | 前のトピック | 次のトピック | トップ |
