86日目 割烹芸人の実装7
単品テンプレその2です。
引き続き単品ですね。
次はカードデザインです。
色々とパラメータを選べて、みてみん画像リンクを付けるとこんな感じに表示してくれます。
一応リンクも付けられるようになってます。
パラメータを変えるとこんな感じになります。
リンクを付ける場合はなろうCSSを使うののでプレビューではあんまりうまく表示されません。
ちょっと注意が必要ですね。
<section class="sample-img">
<p>サンプル</p>
<div id="output-img"><img id="card-img"><div id="card-content"><h3 id="card-header"></h3><p id="card-text"></p></div></div>
</section>
コードはこんな感じですね。
サンプルイメージのところに画像、タイトル、テキストを追加して、Javascriptでリアルタイムプレビューさせてます。
さて、あとはランキング風デザインです。
ランキング風デザイン作成くん……なんと安直なネーミングなのだろうか。
特に説明不要ですね。
こんなお遊びができます。
リンクも付けられるようにしようかと思ったんですけど、分岐とか考えるのがめんｄ……面倒になったので付けてません。
リンク付けられるようになったたほうがよかったら付けますけど、どうなんでしょうね。
もし必要だったら感想でもなんでも言ってくだされば実装します。
あ、ちなみになろうCSSをこっそりと使っていまして、スマホの閲覧画面では開閉ボタンがついてきます。あらすじに書いた文を開閉できます。(PCやタブレットでは対応するなろうCSSがなかったので開閉ボタンはつきません。)
初期値を閉じた状態にすることもできますが、プレビューでは要素が消えたままになるのでやってません。（プレビューでは開閉ボタンが使えないけど消すことはできるので中身がきちんと確認できないのですよねぇ……）
はい、ということで単品メニューもできましたね。
残りも頑張って作っていきますよ！
予定していたことは大体できそうですね。
