パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…


テーマ:
こんにちは、パソコンワンポイントレッスン!

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澄川・ライフデザインスクール
川上 雄大
いいね!した人  |  コメント(18)  |  リブログ(0)

川上雄大・パソコンインストラクターさんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります

SNSアカウント