PCインストラクターの川上です。
このようなご質問がありました↓↓↓
このブログを観て、ヘッダー画像をスライド画像にしてみました。
一様出来たのですが、
タイトルとブログ説明文が表示されません。
どのように修正したらいいか解りません。
一様出来たのですが、
タイトルとブログ説明文が表示されません。
どのように修正したらいいか解りません。
以前、アメブロのヘッダー画像をスライドさせる、という記事を書きました↓↓↓
『アメブロのヘッダー画像をスライドショーに（2013年02月16日）』
多分、この記事を見て、実際にカスタマイズしていただいたのだと思います。
ここでの設定では、あえてタイトルとブログの説明文は表示させないようにしています。
（3枚の画像上に文字を入れて、スライドしています。）
しかし、タイトルとブログの説明文を表示したい、というご要望なのですね。
了解しました！
それでは、さっそくヘッダーのスライド画像上にタイトルとブログの説明文を表示しましょう。
まず、
CSS設定で
.skinBlogHeadingGroupArea {
padding:0px;
height:0px;
text-indent: -9999px;
}ここの
text-indent: -9999px;を削除してあげます。
ですから、新しいCSS設定は
.skinBlogHeadingGroupArea {
padding:0px;
height:0px;
}となります。
次に、CSSソースの一番下に次のソースを追加します。
/*ブログタイトル＆説明文の表示位置調整 */
.skinHeaderArea2 {
padding:0px 0px 0px 40px;/* 上・右・下・左 */
line-height:1.8;
position:absolute;
z-index:2;
}
.skinHeaderArea2 h2 {
padding:100px 0px 0px 0px;/* 上・右・下・左 */
line-height:1.8;
position:absolute;
z-index:3;
}または、ご自分のブログタイトルやブログ説明文にあたるクラスに
position:absolute;
z-index:数値;を追加してください。
例えば↓
.skinTitleArea{
position:absolute;
z-index:2;
}
.skinDescriptionArea{
position:absolute;
z-index:3;
}のように･･･
z-indexの数字が大きければ上側に重なるので、
position:absolute;
z-index:数値;ここでの数値を、大きく設定すればスライド画像の上に、タイトルとブログ説明文が表示されるわけなのです。
ということで、
画像と画像の重なり、画像と文字の重なりは
position → absolute
z-index → 数値
をご利用ください。
あと、画像と文字を重ねないで、ブログタイトルと説明文を表示させたい場合は、配置をずらすなり、top、left、paddingなどで調整されるとよいです。
以上、パソコンワンポイントレッスンでした。
LIDS澄川・ライフデザインスクール
川上 雄大