Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views :
img
Home / LIFE / BOMmERのサイト構築中、画像の横に文字並べたいのに苦戦したわ

BOMmERのサイト構築中、画像の横に文字並べたいのに苦戦したわ

/
436 Views

943318_516937421707140_1191408015_n.jpg

最近仕事から帰ってきてはシコシコとBOMmERのサイトを構築中なのですが、その中にギャラリーページというものを設けまして
要は僕らのCD紹介ページです。

右往左往しながら作ってます。
多分コードは汚いので虐めないでください。

んで、構成としては簡単な感じだけどこんな感じに仕上げたいわけですよ。

スクリーンショット 2014 03 15 15 38 41
▲こんな感じ

だのに
何か苦戦してしまったよ、ていう話

とりあえず、うりゃああ!って作ったら…

スクリーンショット 2014 03 11 22 42 17

▲ちがうちがう
そうじゃない

なんで重なるんですか
で、この時点で使ってたのは回り込むための<br clear=”all”>なんかを駆使してなんとかしようとしてたけど、どうやら違う

参考:<br clear=”属性”> 画像の下から文書を始める -HTMLタグ辞典

そこで、ようやく気付いたのが

「tableで作成してそこに埋め込む形にすればいいんじゃね」

てこと
つまりイメージとしては

スクリーンショット 2014 03 15 15 15 55

こんな感じでテーブル(Excelでいうとこのセルかな)つくってそこに画像なり文字を埋め込んでいけばいいんじゃねってこと。

スクリーンショット 2014 03 15 15 48 10
▲こんな風に

じゃあ、あとは簡単じゃーん
って思ったけど改善されず

なぜだ

スクリーンショット 2014 03 11 22 53 08

▲テーブルの大きさの設定してるし、画像はその半分使ってるから文字は勝手に残り半分使うんじゃないの?
って思ったけど、これが違う
テーブルの大きさの設定はよかったんだけど、「画像のサイズ設定=セルの大きさ設定」ではなかった。

  1. テーブルの大きさ設定
  2. セルの大きさ設定
  3. 入れたい情報を各セルに入れる

これだわ
この手順だわ

スクリーンショット 2014 03 11 22 57 48

▲これなら大丈夫だろ
わくわく♪

スクリーンショット 2014 03 11 22 57 55

▲…ちがう

曲名がど真ん中に鎮座してしまった
なぜ言うことを聞いてくれない

と思ったら、セル内での曲名配置設定してなかったくさい。

参考:ホームページ作成 – セル内の文字位置を調整する

スクリーンショット 2014 03 11 23 02 49

これでどうだ!!

スクリーンショット 2014 03 11 23 04 36

▲できたあああああああああ!!!!!
これだよー
これがやりたかったんだよー

  • Facebook
  • Twitter
  • Google+
  • Linkedin
  • Pinterest
  • Buffer
It is main inner container footer text
%d人のブロガーが「いいね」をつけました。