ファイルマネージャーでアップロードした画像をcssの背景画像でも使用する方法について

2015年5月20日 at 21:21

はじめまして。

バージョン5.6.3.3にて、スライドショーで使用する画像をファイルマネージャーでアップロードし、同じ画像を背景画像としても使いたくてcssのbackground-imageで絶対パスにて下記の様に指定したところ、指定したurlの前に自動的に'/themes/[テーマハンドル]/'が追加されていまい背景画像が表示されません。

背景画像を使用する場合は、テーマのフォルダ内にも画像を保存しcssで相対パスにて指定するしか方法はないのでしょうか。

もしそうであれば、同じ画像を2重でサーバーにアップロードする事となり、画像を変更した場合にファイルマネージャーとテーマのフォルダの両方の画像を入れ替える必要がありますので、ファイルマネージャーでアップロードした画像を背景画像でも使用する方法があればご教授をお願い致します。

■指定したcss
background-image: url(http://◯◯◯◯◯.sakura.ne.jp/files/9514/3210/9412/courses.jpg);

■Chromeのデベロッパーツールで確認した結果
background-image: url(/themes/[テーマハンドル]/http://◯◯◯◯◯.sakura.ne.jp/files/9514/3210/9412/courses.jpg);

お手数をお掛けしますが、よろしくお願い致します。

タグ:

Re: ファイルマネージャーでアップロードした画像をcssの背景画像でも使用する方法について

2015年5月21日 at 10:22
CSSの読み込み方法で $this->getStyleSheet() を使うとパスが変換されますので、$this->getThemePath(); を使えば変換が行なわれません。
http://concrete5-japan.org/help/5-6/design/theme-design-basic-seminar/
 

Re: ファイルマネージャーでアップロードした画像をcssの背景画像でも使用する方法について

2015年5月21日 at 15:18
hissy様

ご教授、ありがとうございます。

$this->getThemePath();を使って下記のコードを変更する事で、ファイルマネージャーでアップロードした画像を背景画像でも使用できました。

【変更前】
$this -> addHeaderItem('<link rel="stylesheet" media="screen" type="text/css" href="' . $this -> getStyleSheet('typography.css') . '" />');

【変更後】
$this -> addHeaderItem('<link rel="stylesheet" media="screen" type="text/css" href="' . $this -> getThemePath() . '/typography.css' . '" />');