サンプル画面
これが「究極にシンプルな」書き方だよ！
はい。HTMLの構造を意識することなく、会話の内容に集中できます。
data-iconの番号を変えれば、ちゃんと表情も変わるし、完璧だ！
上のようなチャット画面。bloggerで表示するにはどうすればいいか？
設定画面
テーマをいじります。[テーマ]→[htmlを編集]に進みます。CSSを追加
[htmlを編集]では、ソースコードが表示されます。これのどこかに</b:skin>というタグがあります。そこの</b:skin>の前に下のコードを貼り付けします。
/* VVV チャット風会話（クリーン版）ここから VVV */
.post-body .chat-container {
width: 100%;
max-width: 600px;
margin: 2em auto;
padding: 10px;
background-color: #f0f8ff;
border-radius: 10px;
box-sizing: border-box;
}
.post-body .chat-box {
display: flex;
align-items: flex-start;
margin-bottom: 15px;
}
.post-body .chat-box.right {
flex-direction: row-reverse;
}
.post-body .chat-icon img { /* ← このままでOKです */
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.post-body .chat-content {
flex: 1;
}
.post-body .chat-name {
font-size: 12px;
font-weight: bold;
color: #555;
margin: 0 10px 5px;
}
.post-body .chat-box.right .chat-name {
text-align: right;
}
.post-body .chat-message {
position: relative;
display: inline-block;
padding: 12px;
background-color: #ffffff;
border-radius: 8px;
margin: 0 10px;
max-width: calc(100% - 40px);
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
font-size: 15px;
line-height: 1.6;
}
.post-body .chat-message::before {
content: "";
position: absolute;
top: 15px;
border: 8px solid transparent;
}
.post-body .chat-box.left .chat-message::before {
left: -16px;
border-right: 8px solid #ffffff;
}
.post-body .chat-box.right .chat-message::before {
right: -16px;
border-left: 8px solid #ffffff;
}
/* ^^^ チャット風会話ここまで ^^^ */
CSSの追加は終了です。次に、scriptを書きます。
scriptを追加
下のコードを</head>の前に書きます。ここには設定がありますが、後述します。
表情アイコンの追加
このコードの中で、
// ここに、アイコン画像のURLを設定する場所があります。これは、アイコンを笑顔、泣き顔、など変更できるようにしている箇所です。
const iconImages = {
// --- キャラクターA ---
'1': '【あなたの画像URL 1】',
'2': '【あなたの画像URL 2】',
'3': '【あなたの画像URL 3】',
'4': '【あなたの画像URL 4】',
// --- キャラクターB ---
'11': '【あなたの画像URL 11】',
'12': '【あなたの画像URL 12】',
};
// アイコン画像の設定はここまで
ここにアイコン画像のURLを入れます。
1番は笑顔の画像のURL、2番は怒った顔の画像のURLなど、設定をします。実際に投稿するときは、この設定した番号で呼び出します。
設定終了です。
// ここに、アイコン画像のURLを設定する場所があります。これは、アイコンを笑顔、泣き顔、など変更できるようにしている箇所です。
const iconImages = {
// --- キャラクターA ---
'1': '【あなたの画像URL 1】',
'2': '【あなたの画像URL 2】',
'3': '【あなたの画像URL 3】',
'4': '【あなたの画像URL 4】',
// --- キャラクターB ---
'11': '【あなたの画像URL 11】',
'12': '【あなたの画像URL 12】',
};
// アイコン画像の設定はここまで
ここにアイコン画像のURLを入れます。
1番は笑顔の画像のURL、2番は怒った顔の画像のURLなど、設定をします。実際に投稿するときは、この設定した番号で呼び出します。
設定終了です。
実際に投稿するときのコード
上記サンプルでのコードでは下のような書き方です。
<div class="chat-container">
<div class="chat-box left" data-icon="1" data-name="ふくまろ">
これが「究極にシンプルな」書き方だよ！
</div>
<div class="chat-box right" data-icon="31" data-name="ジェミニ">
はい。HTMLの構造を意識することなく、会話の内容に集中できます。
</div>
<div class="chat-box left" data-icon="2" data-name="ふくまろ">
<code>data-icon</code>の番号を変えれば、ちゃんと表情も変わるし、完璧だ！
</div>
</div>
内容説明
チャット画面の始めるタグ
ここの<div class="chat-container">から</div>までがchat画面です。発言者の設定
左側ならchat-box left、右側ならchat-box rightアイコン変更は、data-icon="1" の番号を変える。
発言者の名前は data-name="ふくまろ"
モバイルの設定
スマホ等で表示したいとき、チャット画面が表示されない、アイコンが表示されない、などの症状がある場合は、bloggerのモバイルテーマを調整します。
[テーマ]-[モバイルの設定]へ移動して、「モバイルの表示の設定」をカスタムに変更してください。
これで表示されます。それでも表示されない場合は、モバイルテーマをデスクトップへ変更してください
[テーマ]-[モバイルの設定]へ移動して、「モバイルの表示の設定」をカスタムに変更してください。
これで表示されます。それでも表示されない場合は、モバイルテーマをデスクトップへ変更してください
0 件のコメント:
コメントを投稿