本文の文字数が多い時にだけ「続きを読む」を挿入する方法－MovableType | バシャログ。
MovableTypeで記事本文のトリム処理をする際に、いろいろやってみたので備忘録としてエントリ。 やりたいコトは以下の通りです。 ・アーカイブページで、個別記事本文のアタマから指定文字数分だけを表示させる ・指定文字数を超えていたら「…続きを見る」を表示 ・「…続きを見る」にはパーマリンクを張る ・エントリ画面の本文入力フォーマットはリッチテキスト その1 Javascriptでやってみる まずはJSで。 <p> <$MTEntryBody remove_html="0" trim_to="100"$> <script type="text/javascript"> var charaNum = <$MTEntryBody count_characters="1"$>; if(charaNum >= 100){ var url = "<a href='…<$MTEntryPermali
【CSS】ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。
こんばんは、ishidaです。 CSS2.1 で定義されている displayプロパティの値、inline-blockの使いどころを探してみたところ、ページ送りにかなり使えそうです。 まずは以下のサンプルをご覧下さい。Yahoo 検索結果のページ送りデザインをまねています。 ページ送りのサンプル 1 2 3 4 5 6 7 8 9 10 次へ> XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li><strong>1</strong></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">
CSS Sprites風なことをインライン画像でやってみた | バシャログ。
こんばんは、お弁当に入っている梅干しは最後に食べるishidaです。 暑い時期になるといつもは全然飲まないのに、やたら炭酸飲料が飲みたくなります。 特に好きなのがスプライト。ブランド名の語源は、英語のSpirit（元気の意）とSprite（妖精）に由来しているみたいです。 といった感じで無理やり話題につなごうとしていますが…スプライトと言えばCSS Sprites。 背景画像としてCSS Spritesを使うパターンは多いと思いますが、背景じゃなく通常の画像でも CSS Spritesみたいなことができないかな？と思ったので、今回はそれをご紹介。 画像を用意 まずは、以下のような画像を作ります。 sprite_icon.gif 画像のサイズはきりがイイほうが設定しやすいので 90x90 としています。 1つのアイコンが 30x30 ってことです。 サンプル 以下がサンプルです。 サンプル0
【CSS】Safari4 でも効く CSS ハック | バシャログ。
自宅用に新しく購入したパソコンに早速 iTunes をインストールして手持ちの CD をインポートしたところ、想像以上に取り込みスピードが速くて感激しきりの sakai です。 週末は 1 日中 CD をインポートして過ごしてしまいました。 今回は Safari 用の CSS ハックについてです。 ハックを使わないのがベストだと思いつつも、どうしても Safari 用に CSS ハックをする必要がありました。 使用した Safari3 のハックは以下です。 html[xmlns*=""] body:last-child セレクタ { } 有名です。Safari 用のハックを使う時はいつもこれを使っていました。 しかし、このハックが Safari4 では効かず、ついでに同じ WebKit 系の Chrome2 でも効かなくてほとほと困ってしまいました。 そして、Web で検索して見つけました
MacからWindowsをいじくってみた、NTFS-3Gで。 | バシャログ。
BootCamp（あるいは外付けハードディスク）なんかを使っていて、Mac/Winの両方からいじりたいファイルがある場合、その壁になるのはファイルシステムです。 OS Xからは、NTFSでフォーマットされたディスク上のファイルは参照しかできません。上書きすることができません。 FATなら問題なく読み書きできるのですが、今度は4GBの壁がわずらわしいです。dvデータなどの大きいファイルをいちいち分割するなんてゴメンナサイやなこったです。 そこで、 NTFS-3Gを使ってみました。 手順は下記の通り。 1. 公式サイトからダウンロード→インストール 2. 再起動 はい、以上です。 なんの設定もしていませんが、Windowsパーティションに書き込めるようになっていました。 Terminalも使っていません。ちょっと怖いぐらいです。 MacFUSEはインストーラに同梱されています。 環境設定画面は
Fireworks と Photoshop 、gif の書き出しっぷりを比べてみた | バシャログ。
お盆時期を終えて、電車の中がいつも通りの混雑具合になってきました。 まだ夏休み取ってない toyama です。 サイトに使う画像パーツを書き出すときは、スピードと扱いやすさで Fireworks を主に使用しているのですが、どうしてもきれいに書き出せないパーツがありました。jpg で書き出すとサイズの割りに容量が多くなるし、gif ファイルで書き出してもなんだか荒れた感じ。 グラデーションを使ったパーツなんかによくあります。 そこでふと、同じファイルを Photoshop で書き出すとどうなるだろう？と思いついてやってみました。 結論から言うと Photoshop の方がキレイです。 比べてみる 作ったオレンジのグラデーションを使ったボタンっぽいものを Fireworks と Photoshop で 書き出します。 結果は以下です。 Fireworks で書き出したものは横に入って欲しくな
【CSS】CSSで簡単にぶら下げインデントをする方法 | バシャログ。
自宅用に新しいパソコンを買った sakai です。 スペック重視とお店で伝えたら「ちょっと値が張りますよ～」と店員に言われたのでドキドキしていたのですが、CPU が Core i7、メモリが 6GB、ハードディスクが 1TB、ディスプレイや OS も付属して 13 万円くらいでした。前回パソコンを買ったときの感覚では 30 万円くらいなのかと思ってました。安くなりましたね… 今回は小ネタで失礼します。 Web ページ中の注意書きなどでよく使用される手法で、「※」マークを使って文字をぶら下げる方法をご紹介します。 このように表示されます。 XHTML ソースは以下です。 <p>※ここに注意書き。<br /> 改行しても見栄えがいいです。</p> CSS のソースは以下です。 p { margin-left: 1em; /* ブロック全体を 1em 右に */ text-indent: -1e
【Fireworks】トリミングした画像をたくさん書き出したいときに思い出してください2 | バシャログ。
こんにちは、シーブレインの toyama です。蒸し暑いよ！ サムネイル用の画像を大量に書き出す必要に迫られたときの記事を書かせていただきました。が、「他にも方法あるよ！」とおハガキいただきましたので、ご紹介させていただきます。 1.書き出したいサムネイルのサイズにキャンバスサイズを設定します。 2.サムネイル化したい画像をざくざく読み込んで（画像をすべて選択して「フレームに配分」を使うと簡単です）、1 フレーム 1 画像を配置します。 3.スライスをひとつ作成。スライスに名前をつけておきます。ここでは「test」としました。 4.画像を書き出すための「最適化」を設定したあと、「ファイル」→「HTMLの設定」→「ドキュメントの詳細」から、画像を書き出す際の命名規則を設定します。サムネイルは連番で書き出したりすることが多いと思われるので、以下のようにしました。 5.書き出しのダイヤログが出て
【Fireworks】トリミングした画像をたくさん書き出したいときに思い出してください | バシャログ。
こんにちは、シーブレインの toyama です。梅雨入りです。 サムネイル用の画像など、一定の大きさにそろえた画像を大量に書き出さないといけないときが、長い人生に一度や二度はあると思います。 私にも以前そんな瞬間があったのですが、その頃にこの技知ってればー！という技を今更知ったのでここに記しておくことにします。 1.書き出したいサムネイルのサイズにキャンバスサイズを設定します。 2.サムネイル化したい画像をざくざく読み込んで、適当に（いい意味で）画像を配置します。 3.「コマンド」→「ドキュメント」→「レイヤーに配分」。すると、適当に読み込んだ画像が一枚づつレイヤーに格納されます。 4.画像を書き出すための「最適化」を設定したあと、「書き出し」ます。 5.書き出しのダイヤログが出てきます。「書き出し」のプルダウンメニューから「レイヤーをファイルに変換」を選択します。3.で画像をレイヤーに分
【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。
ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。 ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかりです！ IE6 でも min-height を使う 例えば、異なる高さのブロックを float しつつ底辺のラインを揃えたい時などに、「IE6 が min-height に対応していたら楽なのに！」と思うことがありますが、以下のテクニックを使えば IE6 でも min-height（相当）の適用が可能になります。 [CREAMU]CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 IE6 に mi
【CSS】CSSで実装するちょっと凝ったパンくずリスト | バシャログ。
地味なパーツながら実は便利。そのためコーディングをする機会も多いと思われるのが「パンくずリスト」です。 シンプルなコーディングでちょっと気の利いた「パンくずリスト」を実現する方法をご紹介します。 パンくずリストの XHTML のサンプルは以下です。とてもシンプルです。 <ol id="topicPath"> <li class="home"><a href="hoge">ホーム</a></li> <li><a href="hoge">アニメ</a></li> <li><a href="hoge">ガンバの冒険</a></li> <li><em>ボーボ</em></li> </ol> サンプル1 とてもシンプルなパンくずリスト とてもシンプルなパンくずリストのサンプルです。 ホーム アニメ ガンバの冒険 ボーボ CSS はこちら ol#topicPath { margin: 20px 0;
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
