Developer
Developer
重要なおしらせなどはJavaScriptを使用して受信できるようにしているすべてのページにおしらせを表示できます。専用のフォルダ内のHTMLファイルに追加してください。以下、使い方とコードです。
通常のおしらせの場合
通常のお知らせの時はclassにnews-boxとnews-box-lineのみ与えてください。
classにhomenoneを与えるとトップページで表示されなくなり、newsnoneを与えるとニュースページで表示されないようにできます。
aタグを使用するとリンクに下線が付きます。
通常のおしらせの場合、以下のコードを使用します。
<div class="news-box-line">
<p class="news-box">
<span class="material-icons-size micon">info</span>タイトル</p>
<p>内容</p></div>
重要のおしらせの場合
重要のお知らせの時はclassに先ほどのコードに加えwarning-box-lineとwarning-boxを与えてください。
重要のおしらせの場合、以下のコードを使用します。
<div class="warning-box-line news-box-line">
<p class="warning-box news-box">
<span class="material-icons-size micon">warning</span>タイトル</p>
<p>内容</p></div>
写真をポップアップで表示する場合このような表示になります。サムネイル(？)は16:9の比率が維持されます。それ超えた場合は画像中央が表示されます。
<a class="luminous thumbnail" href="画像のURL" style="background-image: url(画像のURL)"></a>YouTube(使わないと思うがbilibiliも)などのiframe要素を比率保って使用する場合はブロック要素で囲みます。
ニコニコ動画の場合はスマホだと動画画面が小さいですが対応が面倒なんでURLの最後をscript?w=300&h=168.75にし完成としましょう。よく見たければ埋め込み動画右下ボタンでフルスクリーンモードで見るかページに飛んでください。一応iframe版を設置しておきます。(最初の方)埋め込み動画は投稿者とは一切関係ありません。
<div class="youtube">
<iframe src="(省略)"></iframe>
</div>
以下のプレイヤーは各ページにひとつだけ設置できます。2つ以上は設置できません。
Material Components for the web•••全体的なデザインの構成。(Material Design)
Material icons•••一部を除きほぼ使用されているアイコン。
Luminous•••画像ポップアップさせるライブラリ。詳しく事はコードに直接書いてある。
2020年04月17日