WIXブログでのHTML利用

2018/09/30

今回は、WIXブログでのHTML利用について書いてみたいと思います。

2018年6月11日の記事では、WIXブログはHTML利用不可と書きましたが、その後利用可能となったようです。

WIXブログでのHTML利用

新ブログを利用している場合には、下図のアイコンからHTMLを利用することができます。
(新ブログと旧ブログの見分け方についてはこちらの記事をご覧ください)

HTMLアイコンをクリックすると、HTMLコンテンツ領域(赤い四角)が追加され、この範囲で自由にHTMLが入力できるようになります。また、コンテンツ領域の幅・高さも指定できるようになっています。

中身のHTMLコンテンツが、指定した幅・高さからはみ出した場合はスクロールバーが表示されます。

このような場合は、コンテンツ領域の幅・高さを中身よりも大きく指定することで、スクロールバーを消すことができます。

HTMLを利用した写真の挿入

HTMLを利用すると、コンテンツ領域内の好きな位置に写真を入れることができます。

写真を入れるためには、まず入れたい写真があるページにアクセスし、写真の上で右クリックして写真のURLを取得する必要があります。
(下図はGoogle Chromeの場合)

取得したURLを利用してimgタグを挿入すると、下図のように記事に写真を入れることができます。

※当記事ではHTML自体の書き方は扱いません。HTMLの書き方は、今後当ブログでも扱っていく予定です。

参考までに、今回のテスト記事で利用したHTMLコードを下記に掲載しておきます。

<style>
p{
margin: 0;
padding: 0;
}
img{
max-width: 90%;
}
.main{
width: 400px;
float: left;
border-collapse: collapse;
}
.main th{
padding: 8px;
background: #f60;
border: solid 1px #ccc;
}
.main td{
padding: 8px;
color: #fff;
border: solid 1px #ccc;
}
.main_div{
width: 280px;
padding: 8px;
float: right;
color: #fff;
border: solid 2px #f60;
}
p.image{
margin-top: 20px;
text-align: center;
}
</style>
<table class="main">
<tr><th>屋号</th><td>アフェティリア</td></tr>
<tr><th>代表者名</th><td>朝原直人</td></tr>
<tr><th>所在地</th><td>東京都中央区日本橋3-2-14<br />KNビル4F</td></tr>
<tr><th>事業内容</th><td>ホームページセミナー<br />ホームページ制作</td></tr>
<tr><th>URL</th><td>https://www.afetiria.net</td></tr>
</table>
<div class="main_div">
<p>アフェティリアでは、毎月3回のWIX基本操作講習会、個別レッスンおよび制作代行を行っております。<br />お気軽にお問い合わせください。</p>
<p class="image"><img src="https://static.wixstatic.com/media/9cc22d8b8d5244aba9ed73fb1783fc26.jpg" alt="" /></p>
</div>
 
 
ブログ一覧に戻る

日程を表示する

詳細を表示する

WIXでホームページ作成を進める上で、

  • レイアウト崩れがどうしても直せない
  • ネットショップ、予約システムなどの作り方がわからない
  • ページの見た目を良くしたいけど、どうすればいいかわからない

などでお悩みの方は、是非ご活用ください。

詳細はこちら

支援中のプロジェクト

たいとう占い・ヒーリング倶楽部

リンク集