Post
You can embed your own posts or unique posts by others in your blog.
And please see the terms and conditions below.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
}
.loox-post {
border: 1px solid #ddd;
border-radius: 10px; /* 角を丸くする */
padding: 16px;
max-width: 500px;
margin: 20px auto;
font-family: Arial, sans-serif;
position: relative; /* 相対位置指定 */
background-color: #fff; /* 背景色を白に設定 */
}
.loox-logo {
position: absolute; /* 絶対位置指定 */
top: 5px; /* 上からの位置 */
right: 5px; /* 右からの位置 */
width: 54px; /* ロゴの幅 */
height: 54px; /* ロゴの高さ */
}
.loox-post-header {
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 10px;
}
.loox-post-avatar {
width: 40px; /* アイコンの幅を調整 */
height: 40px; /* アイコンの高さを調整 */
border-radius: 50%;
margin-right: 10px;
cursor: pointer;
}
.loox-post-username {
font-weight: bold;
font-size: 1em; /* フォントサイズを少し小さく */
cursor: pointer;
text-decoration: none;
color: inherit;
display: flex; /* フレックスボックスに変更して横並びに表示 */
align-items: center; /* 垂直方向の中央揃え */
margin-bottom: 2px; /* ユーザー名と@メンションの間隔を設定 */
}
.loox-checkmark {
width: 15px; /* チェックマークの幅を調整 */
height: 15px; /* チェックマークの高さを調整 */
margin-left: 5px; /* ユーザー名とチェックマークの間隔を設定 */
}
.loox-logo-small {
width: 15px; /* ロゴの幅を調整 */
height: 15px; /* ロゴの高さを調整 */
margin-left: 5px; /* チェックマークとロゴの間隔を設定 */
}
.loox-post-mention {
font-size: 0.8em; /* @メンションのサイズを小さくする */
color: #888; /* @メンションの色を灰色にする */
margin-left: 5px; /* @メンションとFollowボタンの間隔を設定 */
}
.loox-post-content {
font-size: 1.1em;
line-height: 1.5;
text-align: left;
margin-bottom: 10px; /* ポストテキストとボタンの間の距離を設定 */
cursor: pointer;
text-decoration: none; /* 下線を削除 */
color: inherit; /* テキストの色を継承 */
}
.loox-post-actions {
display: flex;
align-items: center;
justify-content: flex-start; /* 左寄せに修正 */
margin-top: 10px;
}
.loox-post-action {
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none; /* 下線を削除 */
color: inherit; /* テキストの色を継承 */
margin-right: 20px; /* ボタン間の距離を設定 */
}
.loox-post-action-icon {
width: 25px; /* アイコンのサイズを指定 */
height: 25px;
margin-right: 5px;
}
.loox-post-action-icon-like {
background-image: url('https://img.icons8.com/ios-filled/50/FF0000/like.png'); /* いいねボタンのアイコンのURL */
background-size: cover;
}
.loox-post-action-icon-reply {
background-image: url('https://img.icons8.com/ios-filled/50/000000/speech-bubble-with-dots.png'); /* 返信ボタンのアイコンのURL */
background-size: cover;
}
</style>
</head>
<body>
<div class="loox-post">
<a href="https://looxteam.wixsite.com/loox/home/status/" target="_blank" class="loox-logo">
<img src="https://static.wixstatic.com/media/b3eff1_7780fba1f31944fbab571083fb273b35~mv2.png/v1/fill/w_54,h_54,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/b3eff1_7780fba1f31944fbab571083fb273b35~mv2.png" alt="LOOX Logo">
</a>
<div class="loox-post-header">
<a href="https://looxteam.wixsite.com/loox/ac/loox/user" target="_blank">
<img class="loox-post-avatar" src="https://static.wixstatic.com/media/1bf8c6_a2fd1a3accb74a03bce162aee239e3f5%7Emv2.png/v1/fill/w_206,h_206,al_c,lg_1,q_85,enc_auto/1bf8c6_a2fd1a3accb74a03bce162aee239e3f5%257Emv2.png" alt="User Avatar">
</a>
<div>
<a href="https://looxteam.wixsite.com/loox/ac/loox/user" target="_blank" class="loox-post-username">
LOOX
<img class="loox-checkmark" src="https://static.wixstatic.com/media/b3eff1_056ae929ff264778bad3c5ef53dedd09~mv2.png/v1/fill/w_479,h_479,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/b3eff1_056ae929ff264778bad3c5ef53dedd09~mv2.png" alt="Gold Check Mark">
</a>
<span class="loox-post-mention">@LOOX</span>
</div>
</div>
<a href="https://looxteam.wixsite.com/loox/home/status/" target="_blank" class="loox-post-content">Get what's happening now at LOOX!</a>
<div class="loox-post-actions">
<a href="https://looxteam.wixsite.com/loox/home/status/" target="_blank" class="loox-post-action">
<span class="loox-post-action-icon loox-post-action-icon-like"></span> Like
</a>
<a href="https://looxteam.wixsite.com/loox/home/status/" target="_blank" class="loox-post-action">
<span class="loox-post-action-icon loox-post-action-icon-reply"></span> Reply
</a>
</div>
</div>
</body>
</html>
Step 1
Copy code
Step 2
Read the description on the left side of the code
Change all the green codes.
rules
This code is not open source.Please do not use this code outside of LOOX!