フタハナプロフ芸用タグ

フタハナのプロフをちょっとおしゃれにするタグ。

後半は[result]内の[Run Pen]を押すと表示サンプルが出ます。

基本

一応最新のルール(HTML5)に準拠した表記を併記してますが、フタハナはXHTMLらしいのでどれでも問題ないと思います

文字サイズ

<font size="4">1~7の範囲。+1-1などで相対</font>
<span style="font-size:16pt">120%などで相対的な大きさも</span> ※HTML5準拠

文字色

<font color="#CC00000">文字色変更</font>
<span style="color:#cc0000">文字色変更</span> ※HTML5準拠

#000000 は red など色の名前でも代用可能。
カラーコード で検索してみよう

太字

<b>太字</b> ※html5準拠
<strong>強調表示</strong> ※html5準拠
<span style="font-weight:bold">太字</span> ※HTML5準拠

文字の揃え

<center>中央揃え</center>
<div style="text-align:center">中央揃え</div> ※HTML5準拠
<right>右揃え</right>
<div style="text-align:right">右揃え</div> ※HTML5準拠

折り畳み表示

<details><summary>見出し</summary>隠すテキスト</details>

画像の表示

<img src="URL">
<img src="URL" /> ※XHTML準拠
<img src="URL" alt="画像が表示できない時に出るテキスト"> ※HTML5準拠

応用、入れるだけ版

水平線の真ん中に文字を入れる

<div style="display:flex;width:100%;align-items: center;"><div style="flex-grow:1;height:2px;background:red;"></div><div style="margin:0.6em">おテキスト</div><div style="flex-grow:1;height:2px;background:red;"></div></div>

background:red;を変えると色が変えれます

See the Pen futahana prof header by skrige (@skrige) on CodePen.light

ページ全体に画像をかぶせる(サンプルはノイズ)

<style type="text/css">body{position: relative;}body::after{position:absolute;content:"";background:url(https://krig.jp/img/noise.png);width:auto;height:auto;top:0;bottom:0;right:0;left:0;opacity: 0.6;}</style>

See the Pen futahana prof 0 by skrige (@skrige) on CodePen.light

エンチャントファイア

プロフの一番下に追加するとプロフが燃えます。サンプルはありません。

<canvas width="1035" height="300" id="myCanvas"></canvas><script src="https://code.createjs.com/1.0.0/createjs.min.js"></script><script src="https://cdn.rawgit.com/ics-creative/ParticleJS/release/1.0.0/libs/particlejs.min.js"></script><script src="https://krig.jp/js/flame.js?003"></script><style>canvas#myCanvas{position:absolute;bottom:0;left:0;pointer-events:none;max-width:1035px;width:100%;height:auto;}div#container{position:relative;}</style>

特殊なやつ

外部スタイルシート利用でお手軽おしゃれに
これより下にあるものを利用する場合は必ずこれを設置してください。

<link rel="stylesheet" type="text/css" href="https://krig.jp/css/ft.css?102811">

マウスカーソル乗せるとふわっと出てくる秘密の文章

<div class="hide"><div>ここに文章</div></div>

スマホの場合タップが必要です

See the Pen futahana prof 1 by skrige (@skrige) on CodePen.light

動くノイズエフェクト

<span class="glitch" data-text="ここにテキスト">ここにテキスト</span>

※フタハナのプロフィールページがスマホに最適化されていないので、表示が小さくなります

See the Pen futahana prof 2 by skrige (@skrige) on CodePen.light

砂嵐風ノイズエフェクト

<span class="noisy">ここにテキスト</span>

こちらはコピペで読めます

See the Pen futahana prof 3 by skrige (@skrige) on CodePen.light

吹き出し

<div class="fkds"><img src="アイコンURL"><div>ここにテキスト</div></div>

See the Pen Futahana Fukidashi by skrige (@skrige) on CodePen.light

シャウト風

<div class="BBS_box"><div class="bbs_data"><img src="アイコンURL" alt="bbs_icon" class="bbs_icons"><div class="bbs_text">名前[XXX] 《Channel》<br>メッセージ<br>2020/XX/XX XX:XX:XX</div></div><hr class="line"/>
</div>

ちゃんと動くか不安なので動作保証外。
追加する場合は<div class=”bbs_data”>~<hr class=”line”/>までをコピーしてください。

See the Pen yLJoqbj by skrige (@skrige) on CodePen.light

織田信長

<div class="oda"><ruby>織田信長<rt>おだのぶなが</rt></ruby></div>

See the Pen Futahana Shout Like by skrige (@skrige) on CodePen.light

Office未導入のPCだとフォントが無いので前半後半一緒になります

その他

こういうの出来ますかっていうのとかついったーで聞いてみて。

他に思いついたら書き足す予定だけど、思いつかないとおもうので、期待しないでください。
追加されるようなことがあったらついったーで報告します

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください