エキサイトブログスキン「スクエアベーシック2」にお知らせを表示する
2016年 01月 28日


更新情報やお知らせをどこかに表示しておきたい・・・な時に使える、
エキサイトブログスキンでお知らせを表示する方法です。
記事自体を未来の日付にして一番上に上げる方法もあるのですが、ちょっと面倒くさいですよね。
HTMLとCSSで直接いれられるようにしましょう。
スクエアベーシックのブログスキンを編集する
「設定」→「デザインスキン」→「スクエアベーシック2」→「編集」からスキンを編集していきましょう。

HTMLをセットする
HTMLのタグの中から<div class="post-contents cf">を探しましょう。そのタグの下に下記のHTMLをコピペして貼りましょう。

<div class="my-info">
<h3 class="my-info-title">おしらせ</h3>
<dl>
<dt>1月30日</dt>
<dd>〜のイベントを開催します!こぞってご参加下さい。</dd>
<dt>2月4日</dt>
<dd>xxxxをスタートしました、お問い合わせは<a href="#">こちら</a></dd>
</dl>
</div>
CSSをセットする
CSSの最後に下記を加えましょう。
.my-info {
background: #fff;
color: #333;
margin-bottom: 30px;
padding: 30px;
}
.my-info dt {
float: left;
}
.my-info dd {
margin-left: 72px;
}
年月日とテキストを好きなものに修正して使ってみてくださいね!