immovabletype
 

[css] 横スクロール付きテキストボックス

.textbox{
  width: 500px;
  overflow: scroll;
  white-space: nowrap;
  border: solid 1px #000;
}
 

[MT] Dreamweaverを使ってMTのテンプレートを更新する方法

 MTでのサイト制作を今までTeraPadを使ってやってきたのですが、書いたソースをいちいち管理画面のテンプレにコピペする作業が面倒なので、前に聞いたことのあるDreamweaverを使って直接編集するという方法を試してみることにしました。

 twitter上で何人かのWebデザイナーさんに聞いてみたところ、実務上でもテキストエディタからコピペするやり方で編集している人が多かったので、どっちがやりやすいかというのは慣れとか好みによるのかもしれません。以下、やり方。(下記で説明している「ファイルへのリンク」については小粋空間を参考にしました。より詳しい説明が載ってますので、そちらを見られたほうがわかりやすいと思います;)


■1.MTテンプレートの「ファイルへのリンク」に外部ファイルを指定する

linkfile1.gif

続きを読む
 

[MT] カテゴリごとに記事のアイコン画像等を切り替える方法

 twitter上で、記事毎に違うカテゴリアイコンを表示したいけどやり方がわからない旨をボヤいていると、<$MTCategoryLabel$>(カテゴリ名が英数字の場合のみ)や<$MTCategoryDescription$>を使って、カテゴリ別に違う画像を出力できるということを教えてもらいました。

 で、さっそくcssでカテゴリ別の背景画像を出力しようとしたんですが、<$MTCategory$>タグって、そのままじゃテンプレートに書けないんですね......。やり方わかんなくてウワーってなってたら、またしてもデザイナーの方たちが助け船を出してくださって、さらにあの小粋空間@yujiroさんまでもが手を貸してくださって(初めに声をかけてもらったときは思わずユーザーネームを二度見してしまったw)、二日がかりでやっと実装することができました。

 @yujiroさん、@take_it02さん、@rinatsukuさん、@mattari_pandaさん、本当にありがとうございました。

 以下、@yujiroさんに教えていただいたやり方をほぼそのまま掲載します。

続きを読む
 

[MT] htmlだけで実装できるページ送りプラグインPageBute

 MT5は知りませんが、MT4になってもページ送りが実装されてないってどーなのよ? と、怒ってみても仕方がないので、当ブログにもページナビを実装すべくプラグインを検索してみたところ、htmlだけで実装できるPageButeというのを見つけました。

 MTPaginateというのもあるのですが、php環境じゃないと動かない上に、俺自身の能力の問題でソースを読み解けなかったのでorz、こっちを使ってみたところすごく簡単に実装できました。

 以下メモ。(詳細は開発元のスカイアークのページを参照)

続きを読む
 

[css] ロールオーバー(背景画像置換)

(html)
 <li class="rollover01">
  <a href="#"><img src="images/rollover_off.jpg"/></a>
 </div>

(css)
 .rollover01 {
   width:100px;
   height:30px;
   background:url(images/rollover_on.jpg) no-repeat;
 }
 .rollover01 a {
   display:block;
   width:100px;
   height:30px;
   font-size:1px; /* IE対策 */
   line-height:1px;
   outline:none;
 }
 .rollover01 a:hover {
   text-indent:-9999px; /* ロールオーバー時にoff画像を枠外へ飛ばす */
 }

参考:CSSサンプルプログ

 

[css] 三段組みの(可変)背景画像

(html)
<div class="post">
 <div class="body">
    コンテンツ内容
 </div>
 <div class="bottom"> </div>
</div>

(css)
.post {
  padding-top:4px;/* ←top.jpgの高さ*/
  background:url(images/top.jpg) no-repeat left top;
}
.post .body {
  background:url(images/body.jpg) repeat-y left top;
}
.entry3 .bottom {
  height:4px;/* ←bottom.jpgの高さ*/
  background:url(images/bottom.jpg) no-repeat left bottom;
  font-size:1px;
  line-height:1px;
}

参照:CSSサンプルプログ

 

[css] セレクタの記述順序

(html)
<div class="hogehoge"><p>サンプルテキストです</p></div>

のとき、

(css)
 ○ .hogehoge p {}
 × p.hogehoge {}

必ず親となる要素から先に書く。