凍結
0 匿名 iPhone
画像の中にサイトトップのタイトルを入れたいのですが、実際は画像の下にタイトルが出て思うようにいきません。何方か教えていただけると幸いです。
12/16 15:47
返信
コメント投稿 検索
2 匿名 iPhone
1>>

スレ主です。
ご丁寧にありがとうございます。仰るとおり画像の中央にテキストを配置したいと思っています。ALICE+さんにも聞いてみようと思います。重ね重ねありがとうございました。
12/20 07:44
返信
1 しち SOV40
>>0
お作りになろうとしているのはトップページでよろしいでしょうか?
(機能によって編集画面の名称が異なるので……)
とりあえずトップページを作る前提で書きますね。

そういったデザインは、スタイルシートを用います。
なお現状>>0さんがどんなデザインをなさっているか&どんな画像か(寸法とか…)が分からないので、以下はあくまで一例です。
「画像を画面の左右センターに配置し、テキストも同じく左右センターに配置」するときのデザインです。
━━━━━━━━━━

#▼(1)【トップデザイン編集】の、タイトルを表示させたいところに

<div class="TOPtitle_block">##site_title##</div>


#▼(2)【トップページhead間編集】の、〔head間編集〕欄に
<style>

/* サイトタイトルの背景等を表示するスペース */
.TOPtitle_block {
height: ●●px;/* 縦幅(※1) */
background: url(##IMAGE_DATA_数字_URL##) no-repeat center;
background-size: auto 100%;/* ※1の縦幅いっぱいに画像を表示 */
text-align: center;
}

</style>

━━━━━━━━━━
※(2)の『<style>』および『</style>』のタグは、すでにお使いだったら不要です。それらタグを除いた部分(スタイルシート)だけを、お使いの『<style> 〜 </style>』タグ間に入れてください。

>(2)の編集必須箇所は2つです。
*@  height: ●●px;/* 縦幅(※1) */
*A  background: url(##IMAGE_DATA_数字_URL##) no-repeat center;

>>@『●●』のところにお好みの数値を入れる
ここに入れた数値で画像の高さ(縦幅)が決められます。
とりあえず単位を『px』にしていますが、ここもお好きに変えて大丈夫です(単位とかよく分からん!という場合はひとまずそのままで)。

>>A『##IMAGE_DATA_数字_URL##』の部分に、使いたい画像の〔▼画像URL表示〕独自タグを入れる
!注意!:〔▼画像表示〕独自タグじゃなくて、〔 ▼画像URL表示 〕を入れます。タグに「URL」と書いてあるほうです。
もしも【看板画像設定】にアップロードした画像を使いたい場合は……残念ながら無理なので、画像を【画像アップローダー】に上げなおしてください。(看板画像はURL表示の独自タグが無いようなので)


#何度も書きますが、上記はあくまで一例です!
なさりたいデザインによってベストな書き方は変わりますし、
あと何より、「すでにスタイルシートで色々指定してる」とかだと上記の書き方だけでは意図通りのデザインにはならなかったりします。

とりあえずやってみて、ダメだったらHTML(【トップデザイン編集】)・CSS(【CSSファイル編集】または【トップページhead間編集】などのスタイルシート部分)の記入内容を添えて書き込まれたほうが問題解決は早くなろうかと思われます。


*━━━━━その他補足など━━━━━
「画像の上にテキストを表示したい」ときは、大体そのテキストの背景(background)に画像を設定すれば解決します。

上記例だとテキストの配置は『左右センター(text-align:center;)』しか指定していないので、あとは『改行タグ(<br>)』などで微調整してみてください。
(本来はスタイルシートでやれることなのですが、どういうデザインになさりたいか不明なのでひとまずこんな形式にしています)

ただ、「テキストが画像の真ん中に来るようにしたい」など、細かく配置を弄りたいならもうちょっと複雑なHTML・CSSにする必要が出てきたりします。
もしももっとデザインにこだわりたい!ということでしたら、ALICE+さんの「タグ・デザイン掲示板」のほうへ書き込むのがお勧めです〜。
12/20 01:06
返信