特殊タグを使用したデザインの紹介 作：SunGenuin(佐藤)
「特殊タグを使用したデザインの紹介その1」でTwitter風画面のタグが見づらかった場合はこちらを御覧ください。
プロフィール画面もツイート画面も大枠にboxタグを使用しています。
boxの背景色は指定しなくても問題はありません。
ですが、例えば掲示板タグと一緒に利用するときに、掲示板の背景色を設定している場合は、Twitterに使用しているboxタグに背景色を設定しないと、掲示板と同化してしまうのでご注意ください。
今回Twitter画面を再現するために、有志の方が作成してくださっているこちらのフォントを使用しています。
ここにプロフィールを書く
0 フォロー中 | 0 フォロワー |
| ツイート | ツイートと返信 | メディア | いいね |
↓のアイコンと名前、ID部分はtableタグを使用しています。
tableタグとboxタグは併用可能なので、今回はboxタグで四角を作りました。
《 box : w10%,bg#1e90ff,p1.5》《 / box》
wide を10%くらいで、padding を 1.5くらいで設定すると良い感じの四角になります。
bg で指定している色を変えればいろんなアイコンができますし、例えば
《 box:w9%,bg#ffa500,p1》☀《 /box》
wide を9%に落として、paddingも1.5から1に変更。
表示するテキストのサイズを2に設定すると、下記のようなアイコンになります。
スマホで表示するときは「w18%」の方がキレイに見えるみたいです。
プロフなどのアイコンに使用する際は、wide を100％にするとキレイに表示されますよ。
☀ | 山田太郎 @testtesttest |
ここにプロフィールを書く
0 フォロー中 | 0 フォロワー |
| ツイート | ツイートと返信 | メディア | いいね |
アイコンの中に文字の入っていない、柄なしのアイコンの場合はwideはしっかり設定しましょう。
《 box:w10%,bg#1e90ff,p1.5》《 /box》
山田太郎 @testtesttest |
ここにツイートの内容
| こ | り | い | き |
下記のようにboxを続けて書くことでツイートをつなげることができます。
山田太郎 @testtesttest |
ここにツイートの内容
| こ | り | い | き |
山田太郎 @testtesttest |
ここにツイートの内容
| こ | り | い | き |
ref(参照機能)を使用してリプを表現しても面白いかもしれません。
構成としては、
《 ref:《 font:u58》こ《 /font》》
《 box:w100%,bg#ffffff,bo#ff69b4,p0.5》
《 table:#ffffff》
[[《 box:w10%,bg#ff69b4,p1.5》《 /box》[《 left》山田花子《 /left》
《 left》《 color:#808080》@testtesttest《 /color》 《 color:#808080》@replytest《 /color》《 /left》《 /table》
ここに返信の内容
《 table:#ffffff》
[[ [ [ [ [[《 font:u58》こ《 /font》[《 font:u58》り《 /font》[《 font:u58》い《 /font》[《 font:u58》き《 /font》《 /table》
《 /box》
《 /ref》
《 ref:》の「：」から「》」の間にリンク部分を置きます。
上記でいうところの「《 font:u58》こ《 /font》」ですね。
正常に表示される場合は「こ」こうなります。
これにカーソルを合わせたり、スマホ版だとタップしたりする際に参照機能が動作します。
参照したい中身は、
《 ref:》《 /ref》の「》」と「《」の間に置いてください。
この場合はツイート内容ですね。
ref機能を使用した例が下記です。
refで参照するものは、あとがきの部分に自動追加される仕組みです。
山田花子 @testtesttest @replytest |
ここに返信の内容
| こ | り | い | き |
山田花子 @testtesttest @replytest |
ここに返信の内容
| こ | り | い | き |