吹き出しの会話形式、HTMLタグを辞書登録することで簡単にしてみた。
どうも〜、HTMLやCSSは極力コピペで済ませるトリプロデューサーです。
タグ覚えられないし、半角英数に切り替えるの面倒だし。
でも、そんなトリプロデューサーみたいなタイプの人にこそ、今日の記事をオススメしたい。
- 過去記事で紹介している方法を、自分なりに使いやすくする。
- HTMLを直接編集しやすくするための辞書登録をしよう。
- アイキャッチに使った吹き出しを、例にして説明してみる。
- 最後にトリプロデューサーから一言。
過去記事で紹介している方法を、自分なりに使いやすくする。
今日のアイキャッチ画像も、吹き出しの会話形式で作ったものを、そのまま使ってますが。
この吹き出しのやり方の基になってる記事が、こちら。
こちらに書かれているコードを、まるまる使わせていただいてます。
ありがとうございます。
HTMLを直接編集しやすくするための辞書登録をしよう。
この記事の中で「クラス名」についての記述があるのですが。
「クラス名」には分かりやすく覚えやすい名前を付けて下さい。
クラス名で使用できる文字は、半角の英数字、ハイフン（ - ）、アンダーバー（ _ ）です。アルファベットで始めなければなりません。（数字や記号で始めてはならない）
固有名詞をアルファベットで書くのがおすすめかな。他とかぶらないから。
まあ、吹き出しで使うキャラごとに、「クラス名」を設定する必要があるんですね。
そして、吹き出しの位置が右か左かを、その都度入力する必要があるんですが。
こっちが l-fuki
こっちが r-fuki
これが、毎回どっちがどっちだかわからなくなるものでw
あれ？l-fukiは、キャラが左だっけ？吹き出しが左だっけ？みたいな感じで。
さらに、吹き出しが右か左かって、キャラが向いてる方向にだいたい付けるんですよね。
だったら、キャラごとに吹き出しが右か左かを固定させてしまって、HTMLタグを辞書登録してしまおうという魂胆です。
アイキャッチに使った吹き出しを、例にして説明してみる。
えっ？こんな吹き出し作るのって
辞書登録すると簡単にできちゃうの？
この会話は、HTML編集画面だと、このようになっています。
<p class="l-fuki niku">えっ？こんな吹き出し作るのって</p>
<p class="r-fuki anma">辞書登録すると簡単にできちゃうの？</p>
肉マンに「niku」というクラス名、あんマンに「anma」というクラス名を付けています。
そして、肉マンの吹き出しは常に左側、あんマンの吹き出しは常に右側に固定させています。
肉マンの吹き出しを作るHTMLタグ
<p class="l-fuki niku"></p>
これを「にく」で辞書登録。
あんマンの吹き出しを作るHTMLタグ
<p class="r-fuki anma"></p>
これを「あん」で辞書登録。
こんな感じで設定して、タグの間の部分にセリフを入れるようにします。
最後にトリプロデューサーから一言。
ほら、かな入力でブログ書いてると、タグ入れるたびに半角英数に切り替えるのが面倒じゃん。辞書登録にしちゃいなよ。
ちなみにトリプロデューサーの吹き出しは、「とり」で辞書登録しています。
