地方在住徒然日記☆

ゆる~りと趣味や生活のことをかいていきま~す

誰でもコピペで簡単に吹き出しで会話形式のブログが書けるって記事見たので、試してみたら・・・失敗


スポンサードリンク

こんにちはー。ななです。

私は、まるっきり機械音痴です。

ブログ書いてて、悪戦苦闘の毎日。

他の方のブログを見てると、デザインかっこいいいいいい

めっちゃ見やすいいいいい 吹き出しってすげーじゃああああん っていつも思ってます。ほんでもって、自分でできたら最高じゃん。なんて事も、日々思ってます。

て事で、チャレンジしてみます。

まず、参考にさせていただいたのが、

www.notitle-weblog.comここに書かれてる、コードをコピペしてメモ帳に貼り付けます。

www.irasutoya.com

イラストは上記から使用し、先ほどのコードの「クラス名」「画像のURL」を書き換えます。私は、ぞうとうさぎのイラストを使用してるので、

.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}の所を
.osieruzou::after {background-image:url自分の使用したい画像を右クリック画像のURLをコピー);}
.usagi::after {background-image:url(自分の使用したい画像を右クリック画像のURLをコピー);}
にしました。クラス名は自分でわかりやすくしましょう。半角の英数字で書かないといけないみたいです。
変更したコードを改めてメモ帳に貼り付けます。保存しときましょう。
自分のブログページのダッシュボード→デザイン→カスタマイズ(スパナマーク、真ん中)→デザインCSSに先ほどメモ帳にコピーしたコードを貼り付けます。
スマホ版と分けてる人は、スマホのほうも貼り付けておきましょう。

 
 

吹き出しできたかなー?わくわくするぞうー

 

 

見ての通り、ばっちり

 

 

んー、失敗しましたねー。イラストがうまく作動されませんし、吹き出しの形にもなっていません。どこをどう間違えたのかは謎です。

 

 

ohama-style.com先ほどの続きですが、コードに張り付けた後は、ohanaさんのブログでの使い方以降を

参考にさせていただきました。

 

まとめ

参考にさせていただいたブログは、機械音痴の私でも多少は理解できることができました。

ただ残念ながら、うまくできませんでした。どこかが間違ってるのです。ど素人はどこが間違ってるかもわからず、何を質問したらいいのかもわかりません。質問が出来ないので、不安になることが多いです。

ですが、上記の方の参考ブログのおかけで少し1歩を踏み出せたので、もう少し研究したいと思います。

失敗してるのはあまり公開されないので、わからない方の参考になればなーって思います。

一緒に頑張りましょうううう!!!