ブログに吹き出し会話を入れてみました|ブログ|きまぐれ猫遊び

きまぐれ猫遊び

3Dソフト初心者がBlenderでキャラ制作を頑張ってみるブログでございます。

ブログに吹き出し会話を入れてみました

まいど( ̄ー ̄)ゞ

記事の中に吹き出し会話を導入。
キャラがやりとりしてる感じにするのです。


そんな感じの事を少し取り入れてみたいのです。
記事の中でそんな感じのものがあったら面白そうじゃないですかね?
面白そうじゃなくとも、そういう場面の方が書きやすい事もありそうですしね。
そんな感じでいざ挑戦でございますよ。

それで調べてみたら、どうもCSSをいじって使っていけばできるみたいですね。
そういった知識はあまり詳しくないので、ほぼコピペだけでできる方法でやってみようと思います。
参考にしたのはこちらのサイト様です。
参考というよりか、そのままのやり方なんですけどね(笑

まずはbloggerの編集の方での保険行動でございますよ。
ブログそのもののHTMLを全てコピペしてメモなどに取っておきます。
CSSをいじるから思わぬ形でデザイン壊すかもしれないので・・・。
次に参考サイト様の所に飛んで、CSSのコードをそのままコピーさせていただきます。
準備はこれだけで、後の作業はbloggerの方の設定ですね。

bloggerの管理画面を開いて【テーマ】→【カスタマイズ】をクリックします。


新しい画面が開きましたら【上級者向け】をクリックします。
下の方にスクロールしていって【CSSを追加】をクリックします。
右側に空欄が出てくるので、そこに参考サイト様でコピーしたコードを貼り付けます。

次に張り付けたコードの一番下までスクロールしていって、コードを少し書き換えてみましょう。
【クラス名】を分かりやすい適当な名前に書き換えます。(半角英数字で)
【画像のURL】もアイコン化したい画像のURLに書き換えます。
書き換えたら、右上の方にある【ブログに適用】をクリックします。
これでCSSいじりは完了です。
修正したい場合やアイコンを追加したい場合は、ここで編集できるようですね。


では記事に書き込む時の作業ですよ。
HTMLモードで書きます。
pタグを貼り付けます。
pタグは何処かにあらかじめ取っておいて、使う時にそこからコピペしていけばいいですね。
【クラス名】をCSSで付けた名前に書き換えます。
【テキスト】には適当なセリフに書き換えです。
これで完成ですよ!

そうするとこんな感じの記事に変わりますね。
おー。まさにこんな感じのやりたかったのです。
これはなかなか面白い感じですねぇ。


こっちの方のブログでは、まだ使うかどうか決めていませんが覚えておくといいかもしれませんね。

 

スポンサードリンク



拍手[0回]