SITE TITLE
※FIRST
TEXT
MEMO
CLAP
RES:
rank
/
rank
/
rank
design/
はくがいがい
--------キリトリ--------
意匠を主張するほどのデザインでもないんですが……。
この写真、実はサイズが600×450pxもあるんです。
つまり大きな写真をどんなスペックの携帯端末で見たときでも横スクロールが出ないように、強制的に幅(width)240pxに縮めています。
ちなみにスマホ(iPhone・Androidとも)の場合、基本的に横幅320pxを超えるページ構成だと横スクロールが出現するらしいです。
というわけなので、変な横スクロールが出ないようこちらのタグにお好きな写真をはめ込んでみてはいかがでしょうか。(ただし写真を縮小したと言っても重さ(バイト数)自体は軽くなりません)
縦の指定はautoになってるので縦長の写真でもいけますよ。
タグ。img src="写真URL"の部分、引用符→""は消しちゃだめです。
<div style="text-align:center;"><br><span style="font-size:30px;">SITE TITLE</span><br><br><a href="URL">※FIRST</a> <a href="URL">TEXT</a> <a href="URL">MEMO</a><br><br><div style="width:240px;margin:0 auto;padding:0;text-align:center;"><img src="写真URL" style="max-width:100%;height:auto;" border="0"><br><br><a href="URL">CLAP</a> <a href="URL">RES:</a><br><br><a href="URL">rank</a>/<a href="URL">rank</a>/<a href="URL">rank</a><br>design/<a href="http://id35.fm-p.jp/291/western442/">はくがいがい</a></div></div>
文字色
■
ブラック(#000000)
リンクの色
■
#ffa705
クリック済みリンクの色
■
#ffa705
クリック中リンクの色
■
#ff392e
背景色
■
ベージュ(#f5f5dc)
↓写真素材(サムネイルです。持って帰ってもいいですが大きいです。600×450px jpg画像)
--------キリトリ--------
SITE TITLE
※FIRST
TEXT
MEMO
CLAP
RES:
rank
/
rank
/
rank
design/
はくがいがい
--------キリトリ--------
こちらは幅300px指定、サイトタイトルを写真の左下に配置。
タグ。
<div style="text-align:center;"><br><div style="position:relative;width:300px;margin:0 auto;text-align:left;"><img src="写真URL" style="max-width:100%;height:auto;" border="0"><div style="position:absolute;bottom:20px;left:20px;color:#ffffff;font-size:30px;">SITE TITLE</div></div><br><a href="URL">※FIRST</a> <a href="URL">TEXT</a> <a href="URL">MEMO</a><br><a href="URL">CLAP</a> <a href="URL">RES:</a><br><br><a href="URL">rank</a>/<a href="URL">rank</a>/<a href="URL">rank</a><br>design/<a href="http://id35.fm-p.jp/291/western442/">はくがいがい</a><br></div>
[
TOPへ
]
[
ｶｽﾀﾏｲｽﾞ
]
©フォレストページ
