ここに本文が表示されます。
※以下、テンプレートの説明
《スクリーンショット》
PC:
![](//static.nanos.jp/upload/i/import/blog/32/1/20140228213851_th.jpg)
スマートフォン:
![](//static.nanos.jp/upload/i/import/blog/32/1/20140228204557_th.jpg)
フィーチャーフォン:
![](//static.nanos.jp/upload/i/import/blog/32/1/20140228212647_th.jpg)
《リンク色》
未訪問リンク色→
#666666/訪問済リンク色→
#888888PC・スマートフォンフォーカス時:文字色→
#bfa46f、背景色→なし
フィーチャーフォン:
◇auフォーカス時:文字色→制御不能(背景色反転)、背景色→未訪問/訪問済リンク色
◇docomoフォーカス時:文字色→白#ffffff、背景色→未訪問/訪問済リンク色
◇SBフォーカス時:文字色→常に白、背景色→
#666666《使用上の注意》
投稿の手間をなるべく減らすため、記事内に独自タグをはらなくても、記事ごとに最初に投稿した画像が自動でサムネイルと元画像として表示されるよう設定しています。
自動で表示されるのは『#img1#』の独自タグが付いた画像です。
表示される画像を変更する場合は新たに画像を追加するのではなく、『#img1#』の画像を編集して新しいものと入れ替えるか、#img1#の画像を削除後に新たに画像をアップロードして下さい。
メールで投稿される場合は、基本設定→メール投稿時の添付画像独自タグは『付けない』に設定して下さい。
《一覧画面レイアウト》
▼フィーチャーフォン
フィーチャーフォンのみテーブル要素使用。
圧縮後のサムネイル(#timg1#)の右にタイトルリンクで1セット。
サムネイルは縦横50px固定。縦横比は保たれません。
画像とタイトルの間に区切りがあります(区切り線は非表示)。
なので、タイトルが長くなっても画像の下にタイトルが流れ込みません(スクショ参照)。
縦の位置は、画像の部分は上付き、タイトルの部分は中央に配置しています。
▼スマートフォン・PC共通
元画像をサイズ調整したサムネイル(#img1#)と下に小フォントサイズのタイトルが表示されるリンクボックス。ボックス内のどの場所を押しても記事へリンクが飛びます。
長いタイトルは枠からはみ出す場合には途中から【…】と省略されます。
どれを選択しているか分かりやすいよう、マウスオンやクリック、タップ時にはリンクボックスに灰色の枠がつきます。
▼スマートフォン限定
サムネイルは縦横80px固定。縦横比は保たれません。
右に回り込めるだけの横幅がある機種は、2・3列と横に増えます。常に中央寄せ。
▼PC限定
枠横幅650px固定。
サムネイルは縦横100px固定。縦横比は保たれません。6列横並び、溢れたら下の段に移ります。左寄せ。
《記事画面レイアウト》
上からタイトル、画像、元画像表示リンク、本文、追記リンク(使用時)、日付、コメントリンク、戻る進むリンク。
日付は無駄にイギリス式表記なので、好きなように編集して変えてください。
※元画像表示リンクについて
この部分があるのは、PC/スマートフォンにて、画像の横幅が大きい場合にPC枠内/画面サイズ内に自動縮小されるよう設定しているからです。縦幅は横幅にあわせて可変します。スマートフォンでの横スクロール発生回避策です。
ただ元サイズの大きい画像を見たい場合もあるかと思ったので、このリンクを押すことでサイズ調整なしの元画像を見ることができるようにしました。
《コメントページ》
記事内ではなく専用のページに飛びます。
お名前はピンク、コメント本文の左と下にタイトルと同じ色のドット罫線が表示されます。
CSS3に対応しているPC、スマートフォンでは名前にテキストシャドウがかかっています。
項目はメールアドレス入力欄以外すべて表示していますので、不要な部分の設定と独自タグを編集して下さい。
《追記画面:各レイアウト》
追記本文と戻る・進むリンクのみ設定。自由に使っていただければと思います。
なお、記事画面と同様、大きい画像は枠内/画面内に収まるよう縮小されます。
*続きを開く