ストークで吹き出しカスタマイズに挑戦

パニック

こんにちは、もじゃおです。

HTML言語、CSS初心者の僕がまたストークのカスタマイズに無謀にも挑戦してみました。

いつものようにストークカスタマイザーの狐火兎さんのサイトを参考にしています。

早速挑戦

/* マイ吹き出し1 */
.voice.l.my1 .voicecomment:before{
    border-right-color: (吹き出しのしっぽ部分の色を入れてね);
}
.voice.l.my1 .voicecomment:after{
    content:none;
}
.voice.my1 .voicecomment{
    background: (吹き出しの背景色を入れてね);
    border-color: (吹き出しの枠の色を入れてね);
    color: (吹き出し内の文字色を入れてね);
}
.voice.r.my1 .voicecomment:before{
    border-left-color: (吹き出しのしっぽ部分の色を入れてね);
}
.voice.r.my1 .voicecomment:after{
    content:none;
}
.voice.icon_my1 .icon img{
    border-color: (アイコン枠の色を入れてね);
}

狐火兎さんのサイトから引用

何から何まで狐火兎さんはカスタマイズの方法を丁寧に書いてくれています。
カラーコードを検索しつつ、()を消して、カラーコードを記入していきました。

 

/* マイ吹き出し1 */
.voice.l.my1 .voicecomment:before{
border-right-color: #ffa500;
}
.voice.l.my1 .voicecomment:after{
content:none;
}
.voice.my1 .voicecomment{
background: #ffa500;
border-color: #ffa500;
color: #ffffff;
}
.voice.r.my1 .voicecomment:before{
border-left-color: #ffa500;
}
.voice.r.my1 .voicecomment:after{
content:none;
}
.voice.icon_my1 .icon img{
border-color: #ffa500;
}

そのまんまです。色をなぜオレンジにしたのかは僕もわかりません。

スタイルシートにコピペ。

投稿画面でドキドキしながらコードを記入。

[voice icon="(画像アドレス)" name="(あなたの名前)" type="l my1 icon_my1"]セリフ[/voice]
()から書き換えてくださいね。

はじめて見るマイ吹き出しをプレビューしてみました。(このあたりのやり方の流れも狐火兎さんのサイトにとっても詳しく書かれています)

はい、できませんでした。
色はデフォルトのままでした。

もじゃお
これがデフォルトです。

今回のチャレンジはコピペさえすればできると思っていたのです。
リロードを何回か繰り返しましたし、目を見開いてコピペに間違いがないかも確認しました。
狐火兎さんのカスタマイズが間違っているのではないかとも疑ってしまい、スペルミスがないかなども確認しました(狐火兎さん疑ってしまいすみません)。

正面から見ても、斜めから見ても間違っているところはないので、、、
またまた狐火兎さんにメールしてしまいました。

狐火兎さんにまたまた頼る

狐火兎さんからのお返事

「設定は間違っていないようです。
キャッシュ系のプラグインは、使用していらっしゃいますか?
古いキャッシュが残っていると、設定が反映されない場合があります。
また、ブラウザのキャッシュが悪さをしている可能性もあるので、
そちらも消去して、再度確認してみて下さいね。」

穏やかな口調で原因を明確に解決してくれていました!

吹き出しカスタマイズ成功

教えてもらったとおりにキャッシュを消すと、できました。

もじゃお
はじめまして
もじゃお
どちらにもなります

右、左の変え方

変え方

以前の見出しのカスタマイズの時はキャッシュクリアをきちんとしたのに、お恥ずかしい。

ストーク(STORK)をカスタマイズ(見出しだけで一苦労)

2017年4月28日

まだまだ初心者からの脱却は難しいです。

コメントを残す

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

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