H1として背景に画像をおき、その上に文字をのせたい

2013年5月7日 at 11:22

HPでよくみるページ内の見出しとして、
H1タグに背景の画像をおいて、その上に文字をのせたいのですが、どうすればできますか?

タグ:

Re: H1として背景に画像をおき、その上に文字をのせたい

2013年5月7日 at 15:04
どのようにホームページを作られているかによって変わりますし、個人差はあると思います。この場合は大きく分けて二つ可能性があると思いますが、どちらでしょうか?

1、同じテーマを使っているページにはすべてに同じデザインを使用する場合
2、同じテーマでもページによって、表示する場合と表示しない場合、またはページによって文字色や背景を変更したい場合。

concrete5ではいろいろやり方があり、どういう方法がベストかは作成方法、運用方法によって異なります。

例えばですが、
1の場合テーマに書く。メリットとしては実際にページ作成者が変更できないので消される心配がないということです。そのかわり簡単なPHPコードが必要です。

2の場合ブロックで表示する。メリットはテーマを触らなくていいので設置が楽にできます。ただ、ページ作成者が削除できるので注意が必要です。
ページタイトルを表示するブロックを関西ユーザーグループで作成しているのでそれを使って、ブロックのデザインから背景画像を設定する。下記のURLのZIPボタンでダウンロードできます。
http://github.com/acliss19xx/headline_block

僕であればHTMLやCSSの知識に乏しいので2の方法でやるかなぁと思います。
わかりにくい文章になりましたが、参考にしていただければ幸いです。
 

Re: H1として背景に画像をおき、その上に文字をのせたい

2013年5月9日 at 10:29
ご丁寧にありがとうございます。

今回は、2でやってみようと思います。
まず、ダウンロードしてFTPでpackagesにアップするところまではできました。
でも公式サイトにかいてあった拡張ブロックのインストール方法に、

ブロックの場合:
左サイドバーにある「機能を追加」をクリック。
新しく追加したブロックが表示されているのはずなので「インストール」をクリック

とあるのですが、左サイドバーが見当たりません。
「機能追加」ボタンもみつけられなかったのですが、どうすればできますか?
 

Re: Re: H1として背景に画像をおき、その上に文字をのせたい

2013年5月9日 at 10:57
あっ、ごめんなさい。
これパッケージじゃないんです。
お使いのconcrete5のバージョンは何でしょうか?
ご説明します。
 

Re: Re: Re: H1として背景に画像をおき、その上に文字をのせたい

2013年5月9日 at 11:07
すみません。
concrete5.6.0.2.ja
であってますか?
 

Re: Re: H1として背景に画像をおき、その上に文字をのせたい

2013年5月9日 at 12:07
concrete5 の バージョンの確認方法は
上部メニューの管理画面にマウス合わせると出てくるメニューで
[システムと設定]から[環境設定]をクリックしてください。
一番上に書かれているものがconcrete5 の バージョンです。
これからもフォーラムで必要になるので覚えておられたほうがいいですよ。

さて、ブロックの件ですが、
packages フォルダではなく blocksフォルダに入れます。
(作り方が悪くてすみません、、、、パッケージ化してくださる方、募集中です。)

[管理画面]→[ブロックタイプ] から[ブロックを追加]します。

キャッシュクリアを行います。(HP作成時はキャッシュ設定をオフにすることをお勧めします。)

あとはページにブロックを追加して、ブロックのデザインメニューで背景を指定します。

使い方に不明点がありましたら、書き込みお願いします。
なんせ、作り方が悪いので申し訳ないです。。。。
 

Re: Re: Re: H1として背景に画像をおき、その上に文字をのせたい

2013年5月9日 at 13:35
headline_block-master

解凍した上記フォルダをブロックフォルダに入れれば大丈夫ですか?
どうしても「ブロックの追加」がでてきません…。
何度もすみません。
 

Re: Re: Re: Re: H1として背景に画像をおき、その上に文字をのせたい

2013年5月9日 at 13:52
headline_block-master直下の
kansaiug_headline フォルダ を blocksに入れてください。
 

Re: Re: Re: Re: Re: H1として背景に画像をおき、その上に文字をのせたい

2013年5月9日 at 14:27
警告:[ function.requireワンスする ]:ストリームをオープンに失敗しました:そのようなファイルやディレクトリはありません

という文章がでました。
FTPソフトを使ってアップしていることが原因なのでしょうか?
 

Re: H1として背景に画像をおき、その上に文字をのせたい

2013年5月9日 at 16:09
そうですか。。。。
キャッシュをクリアしても状況変わりませんか?
 

Re: H1として背景に画像をおき、その上に文字をのせたい

2013年5月11日 at 11:11
お返事がおそくなりました。
キャッシュをクリアしたら、ブロックの追加がでてきました!
ありがとうございます!

背景に画像をいれて、文字が入りました!!
細かい設定はcssでかえるんですよね?
頑張ってやってみます
いろいろとありがとうございました
 

Re: H1として背景に画像をおき、その上に文字をのせたい

2013年5月7日 at 21:22
H1をページロゴとして使うだけならスタイルシートで設定するのが簡単です。背景にしたい画像をテーマの画像フォルダに置き、テーマのスタイルシートでH1にパスを設定します。スタイルシートをお調べになりたい場合は、(css 背景画像)とかで検索すればいっぱい出てきます。concrete5のスタックにsite nameというものがあるはずです。ここで文字を入力してお使いのテーマのスタイルシート(通常はstyle.css)のh1に背景を設定します。
 

Re: Re: H1として背景に画像をおき、その上に文字をのせたい

2013年5月9日 at 10:32
ありがとうございます。
やはりcssはちょっと難しいですね…。いろいろ調べてやってみます