2014　1231.....2017　0323更新
シリウスはてなカスタマイズテーマ　画像の上に記事　文字を配置

 

シリウスのサポートフォームに

 

サイト内に画像を配置して、その上に記事を書くにはどうすれば良いのですか
..との質問が寄せられました

 

画像の上に記事などかけるのか？と　ネット上で調べてみても画像の上に
文字を書く情報が見当たらない...

 

画像編集ソフトを使用すれば可能であることは理解するも作業は面倒...

 

記事作成しながら素早く書くことはできないか？.....ですね

 

ま、サイト作成者とはいろんなやりたいことが人それぞれで.....何ともね,,
楽しいものです

 

 

趣旨は、記事内容に画像を置いてその上に記事（フォント）を置くですね

 

では、進みましょう

 

以下をよく見てくださいね

 

 

 

MOJIKAKI

 

画像の上に記事はかけるか？ですが

 

なぜか書けます　　

 

画像上に文字が見えますね

 

 

 

といっても直接画像上に書くのではなく画像の上の階層に記事を
通常作業で書いているのです

 

画像はdiv要素で囲っているので、記事が表示される下に
位置指定しているのですね

 

記事の階層、画像の階層と二つあるとご認識ください

 

簡単にいえば、フォト画像の上にフォトを書き込んだ透明フィルター素材
（ガラス板）置いて上から見ている状態でしょうか？

 

ですので記事を画像上からずらすことも可能です

 

どのようにするかですが

 

別にむずかしくもないんで　やり方だけ説明しますので後はご自分で
おすすめください

 

上記は画像の上階層に記事を書いてます

 

画像に記事を書いていないので調整は自由です

 

以下コードをそのままコピーして記事欄に張り付け

 

ご自分の画像コードに入れ替えてくださいね

 

位置調整は、50pxの数値を変えたりして調整してください

 

 

コピーコード

 

<div style="height:50px;">
<div >画像コードは記事幅に合わせます</div>
</div>

 

記述コードを張り付けたら、その下あたりで記事を書いてみましょう

 

 

調整は、記事と画像の距離を離してみるとか？
試行錯誤するほどのことはないので試してみましょう

 

スポンサーリンク

 

 

 

シリウスに配置した画像の上に記事を書くカスタマイズ
シリウスの番外編カスタム＆はてな？と思うご利用方法