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

a0342241_13581461.png

更新情報やお知らせをどこかに表示しておきたい・・・な時に使える、
エキサイトブログスキンでお知らせを表示する方法です。
記事自体を未来の日付にして一番上に上げる方法もあるのですが、ちょっと面倒くさいですよね。

HTMLとCSSで直接いれられるようにしましょう。

スクエアベーシックのブログスキンを編集する

「設定」→「デザインスキン」→「スクエアベーシック2」→「編集」からスキンを編集していきましょう。

a0342241_13545071.png

HTMLをセットする

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

a0342241_14022080.png
<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;
}

年月日とテキストを好きなものに修正して使ってみてくださいね!


[PR]
名前
URL
画像認証
削除用パスワード
by exblog-tips | 2016-01-28 15:50 | 本文周り | Comments(0)

エキサイトブログをとことん使い倒すブログです。こんなことできないかな?をゆるっと募集中!


by エキブ