特殊タグを使用したデザインの紹介 作：SunGenuin(佐藤)
某大百科もどきのデザインです。
ここでもboxタグが大活躍。
デザインの都合上、ヘッダー部分をPC版、スマホ版の2パターンにわけています。
そのため、boxにPCのみ表示、スマホのみ表示の設定を加える必要があります。
《 box:w100%,p0.2,inline,pc,bg#ffffff》
inline = 内側の要素。ブラウザサイズに合わせて表示。
pc = PC版のみで表示
もし上記の設定がされたboxタグが使用されている小説をスマホで読もうとしても、スマホ版ではその箇所が無かったことにされ、本来表示される箇所にスマホ版でも表示される部分が繰り上がって表示されます。
《 box:w100%,p0.2,inline,sp,bg#ffffff》
スマホでのみ表示する場合は、pc の部分を sp に変更してください。
この大百科もどきのデザインの場合、PC版とスマホ版で表示するデザインを変更しています。
PC、スマホで切り替えてデザインを確認してみてください。
PC版のタイトルロゴ部分「例：ニヤニヤ大百科」にはルビが振ってありますが、
こちらは少々扱いづらく、従来のルビ振り「文字《 もじ》」ではなく、《 Ruby》を使用しています。
カタカナ部分とルビ部分でフォントが違うためです。
フォントなどの拘りがない方は、こちら「文字《 もじ》」のルビ振りでも対応可能だと思います。
| タイトル | け |
| い88 |
| お114514 |
| い いいね！ |
| お ナニニ優しく応援 |
| す 記事編集 |
| け |
タイトル _単語_
タイトル
いいね(88)
応援(114514pt)
その他
ヘッダー部分と中身のboxタグはわけています。
なのでヘッダー部分での失敗がこちらの中身に反映されてしまうことはありません。
この大百科もどきでは、中身部分のboxタグには特別な設定はなく、wide(横幅)を100%にしているだけです。
各項目の装飾
各項目の冒頭に、idを設定しています。
このidは通常の閲覧では確認することはできません。
これはページ内を移動するために使用しているからです。
《 id:at1》 これはこの行のidが「at1」という設定です。
このidに対して、linkタグを使用するとページ内を移動することができます。
例
《 link:#at1》ここに移動《 /link》
■ 項目名
まるでリンクが張られているかのような見た目
《 blue》《 u》まるでリンクが張られているかのような見た目《 /u》《 /blue》
カラータグと下線タグを併用することで、まるでリンクが張られているかのように演出することができます。
ちょっと某動画サイトの動画っぽい感じ。
| ||
|---|---|---|
さ お こ だ | ||
関連動画のていでこのような演出をするとより大百科っぽくなるかもしれません。
こちらで使用しているフォントも、Twitter再現の時と同じこちらのフォントです。
これはboxタグではなくtableタグを使用しました。
このままコピペして、中の文字を変えるだけですぐ使用できるかと思います。
refタグと併用することで、記事内で別記事から持ってきたような演出をすることも可能です。
よりそれっぽい感じですね。
ほかにもref機能を使ってミニ記事を作って参照、というやり方もできるかな、と思います。
記事の量が膨大になる場合は、下記のように「上に戻る」リンクを置いておくと便利かもしれません。
このリンクも、先に紹介した「id」を利用しています。
《 link:#TOP》上に戻る《 /link》
実は大百科のヘッダー部分に《 id:TOP》というものを作って置いてありました。
ちょっと某動画サイトの動画っぽい感じ。
| ||
|---|---|---|
さ お こ だ | ||