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]
by exblog-tips | 2016-01-28 15:50 | 本文周り
a0342241_14213215.png

エキサイトブログのサイドメニューにある、検索バー。ただそのまま入っている、って感じで結構しょぼいんですよね。
今回はこのパーツをもっと見栄え良くしたいと思います。

ボタンを枠線のみのフラットにする

今回はCSSがわりとややこしいので、CSSのコピペ用コードだけ置いておきます。

a0342241_14510185.png
.menu-body table {    
    width: 100%; 
}    
.menu-body table tbody tr:nth-child(2) td:first-child,
.menu-body table tbody input+tr td:first-child {
    width: 150px !important;
}    
.menu-body table tbody tr:nth-child(2) td:nth-child(2),
.menu-body table tbody input+tr td:nth-child(2) {
    width: 10px !important; 
} 
.menu-body table tbody tr:nth-child(2) td:nth-child(3),
.menu-body table tbody input+tr td:nth-child(3) {      
    width: 20px !important; 
}
.menu-body table input[type="submit"] {  
    background: none;  
    border: none;  
    border: 1px solid #ccc; 
    padding: 4px 5px;
}

ボタンを塗りつぶし

色を変えてカスタマイズ!

a0342241_14582604.png
.menu-body table {    
    width: 100%; 
}    
.menu-body table tbody tr:nth-child(2) td:first-child,
.menu-body table tbody input+tr td:first-child {
    width: 150px !important;
}    
.menu-body table tbody tr:nth-child(2) td:nth-child(2),
.menu-body table tbody input+tr td:nth-child(2) {
    width: 10px !important; 
} 
.menu-body table tbody tr:nth-child(2) td:nth-child(3),
.menu-body table tbody input+tr td:nth-child(3) {      
    width: 20px !important; 
}
.menu-body table input[type="submit"] {  
    display: block;    border: none;    width: 40px;    height: 30px;    background: #666;    border-radius: 4px;    color: #fff;
}

ボタンを画像化

お好きな画像で試してみてください。
画像のサイズ似合わせてbackground-sizeとwidth、heightを変えてあげればいい感じになるやも

a0342241_14510103.png
  .menu-body table {
    width: 100%;
}    
.menu-body table tbody tr:nth-child(2) td:first-child,
.menu-body table tbody input+tr td:first-child { 
    width: 150px !important;
}
.menu-body table tbody tr:nth-child(2) td:nth-child(2),
.menu-body table tbody input+tr td:nth-child(2) {
    width: 10px !important; 
}
.menu-body table tbody tr:nth-child(2) td:nth-child(3),
.menu-body table tbody input+tr td:nth-child(3) {      
    width: 20px !important; 
}
.menu-body table input[type="submit"] {      
    background: url(好きな画像のアドレス) no-repeat;
    background-size: 30px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden; 
    display: block;
    border: none;
    width: 30px;
    height: 30px;
}

[PR]
by exblog-tips | 2016-01-08 15:00 | メニュー周り

このブログでもちょこっと装飾をしているんですが、今回は↓このように本文の画像の装飾をしていきたいと思います。

スクリーンショットだとだいぶ味気ないですが、いい感じの写真だとよりよく見えるような気がしますね。
エキサイトブログでは、画像を貼り付けた時(中央配置の場合)に「.IMAGE_MID」という名前のクラス名が自動で付くようです。
なので、「.IMAGE_MID」にCSSを追加しましょう。

写真風のdesign

まずは定番の写真風。

.IMAGE_MID {    
   box-shadow: rgba(221, 221, 221, 0.9) 5px 5px 12px -2px;
   padding: 10px;
   border: 1px solid #ddd;
}

シンプルボーダーdesign

一番簡単にアクセントがつけられます。好きな色で装飾してみましょう。

.IMAGE_MID {    
   border: 10px solid #eee;
   box-sizing: border-box;
}

斜めストライプのカフェ風のdesign

新しいCSSでは、とうとう斜線も描けるようになったんですね、本当にすごい。
簡単にかけるのでわざわざ画像を作る手間が省けますね。

.IMAGE_MID {    
  -webkit-background-size: 10px 10px;
  background-size: 10px 10px;
  background-color: #fff;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0,
            color-stop(.25, #ddd), color-stop(.25, transparent),
            color-stop(.5, transparent), color-stop(.5, #ddd),
            color-stop(.75, #ddd), color-stop(.75, transparent),
            to(transparent));
  background-image: -webkit-linear-gradient(45deg, #ddd 25%, transparent 25%,
          transparent 50%, #ddd 50%, #ddd 75%,          
          transparent 75%, transparent);
  background-image: linear-gradient(45deg, #ddd 25%, transparent 25%,
          transparent 50%, #ddd 50%, #ddd 75%,
          transparent 75%, transparent);
  padding: 0 10px 10px 0;
}

こんな感じでアレンジは多種多様。様々なパターンを公開しているサイトさんもたくさんあるので探してみてください。

Box Shadowのエフェクトサンプル & 便利な素材まとめ

[PR]
by exblog-tips | 2016-01-07 14:29 | 本文周り

エキサイトブログを書いている時に、よく使う人と使わない人がわかれる[more]機能

a0342241_11260649.png

よく見かける使い方としては、序文であおってから本文にいかせるというパターンでしょうか。
TOPページを見た時に文章が長いとページがすっごく長くなってしまいますよね。
読み込みが重いとユーザーストレスがたまるし、序文だけ書いてきになる人は見てねの方がもしかしていいのかも。。。と今更思ったりします。
公式がめっちゃ宣伝していますがここがわりと分かりやすい例かもしれません。
これもエキサイトブログなんですねー。

Moreのクラスを変更してみる

それでは早速CSSをいじっていきましょう。moreのクラスは一律下記となっています。

class="more-post"

まずは、ボタン自体を右寄せ・中央寄せ

右寄せ

続きを読む
  .more-post {
    float: right;
    font-size: 15px;
  }

中央寄せ

続きを読む
  .more-post {
    font-size: 15px;
    text-align: center;
    display: block;
  }

fontサイズは適宜変更してください。次はもっとボタンぽくしてみましょう。

Moreをボタン化

先ほどのクラスに足して・・・と言いたいところですが、リンクがある場合は、aタグに対して色をつけてあげましょう。

右寄せ+色

続きを読む
  .more-post {
    float: right;
    font-size: 15px;
  }
  .more-post a {
    background:#E15B5F;
    padding: 8px 20px;
    color: #fff;
    border-radius: 3px;
  }

中央寄せ

続きを読む
  .more-post {
    font-size: 15px;
    text-align: center;
    display: block;
  }
  .more-post a {
    background:#E15B5F;
    padding: 8px 20px;
    color: #fff;
    border-radius: 3px;
  }

Hover時の処理

上記までのボタンにカーソルを合わせると、アンダーラインがでてきます。このままでもいいのですが、色が変わったりした方がそれっぽいっですよね。
そんなわけで、もう少しいじってみましょう。

右寄せ+色+hover時色を変更

続きを読む
  .more-post {
    float: right;
    font-size: 15px;
  }
  .more-post a {
    background:#E15B5F;
    padding: 8px 20px;
    color: #fff;
    border-radius: 3px;
    text-decoration: none;
  }
  .more-post a:hover {
    background:#E15B5F;
  }

中央寄せ+色+hover時 透過0.7

続きを読む
  .more-post {
    font-size: 15px;
    text-align: center;
    display: block;
  }
  .more-post a {
    background:#E15B5F;
    padding: 8px 20px;
    color: #fff;
    border-radius: 3px;
    text-decoration: none;
  }
  .more-post a:hover {
    opacity: 0.7;
  }

ボタンデザイン集などもググればあるので、この辺をうまく使ってカスタマイズしてみましょう!

5つの効果で作る、よく使うCSS3ボタンデザインサンプル集
[PR]
by exblog-tips | 2016-01-05 11:34 | 本文周り

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


by エキブ