2008年10月アーカイブ

こんにちは！さいとうです
最近は暗くなるのが早いですよねもう17時には暗くなってます
冬が近づいてきている感じがしますね・・・！

さて今回も前回に引き続き、テンプレート作成時の注意点についてです。
実際に私の作ったテンプレートで見つかったバグと、
そのバグをどうやって修正したのかを書きますので、参考にしてください

記事内の画像と動画のサイズ

最近は記事内に動画をいれこむことのできるブログがとても多いですね
携帯カメラの機能も向上して、大きくて鮮明な画像をブログに載せている人もたくさんいます

私自身は画像も動画もブログに載せたことがあまりなかったので、画像・動画のサイズなんて気にしてなかったんです
サイズを気にせずにテンプレートを作っていたら・・・

こんなことになってしまいました
動画が大きくて記事の枠からはみ出し、プラグインが見えなくなってしまってます・・これでは困ります

とりあえずどんなサイズの動画を載せてもプラグインにかぶらないようにするため、記事を囲うdivにoverflow:hidden;を記述してみました。
プラグインはみえるようになりましたが、動画が切れてしまっています・・・

これ以上はどうすることもできないので、「このテンプレートは～px以下の動画に対応しています」と注意書きを付け加え、大きな動画を入れないようにするしかありません

ブロプーでは不具合情報ページに対応している画像・動画の情報を記載しています。

動画を例に挙げて説明しましたが、写真やイラストといった画像でも同じことが言えます。写真やイラスト、動画をたくさん載せるブログを作りたい場合は、２カラムなどにして、記事のボックスの横幅を広くとるデザインにすると良いでしょう

次回もテンプレート作成時の注意点です。更新は１１月４日（火）の予定です。お楽しみに

ブログ用テンプレートのサイトです↓↓↓↓↓↓↓↓↓全部無料で使えますょ

こんにちは！さいとうです
先週ブログで書いたとおり、土日で北陸に行ってきました～
海がキレイで海の幸がおいしくて最高でした～！！

さて今回は、テンプレート作成時の注意点についてです。
実際に私の作ったテンプレートで見つかったバグと、
そのバグをどうやって修正したのかを書きますので、参考にしてください

livedoorブログでは、本文に画像を挿入すると自動でimgタグ内にalign="left"が入るようになっています。これはどういうことかといいますと・・・

こんな風に勝手に文字が回りこみ、画像が左、文字が右になるということです。この回り込みは解除するまでずっと回り込みになります

回り込みを解除しないと下の図のような状態になってしまうことがあります

デザインが崩れていますね・・・ひよこの画像が次の画像にかぶって、しかも外の枠線が切れてしまっています

回り込みを解除するには、記事内の回り込みを解除したいところに<br clear="all" />を記述すればいいのですが、毎回記述するのも面倒ですし、テンプレートを使ってくださる方にHTMLの知識がない場合、この方法は適当とはいえないでしょう

この場合は、記事の次の要素、例えば「続きを読む」や「投稿日時や投稿者が表示される欄」（この図では「さいとう」と書いてある灰色のボックス）のCSSにclear:both;を記述すればです

clear:both;を記述するとこんな感じに・・・

これで<br clear="all" />を記述しなくてもデザインがくずれなくなります

私は「imgタグ内にalign="left"が入る」ということを知らなかったので、テンプレートを作って画像を入れてみたら、デザインが崩れてしまいビックリしました

次回もテンプレート作成時の注意点です。更新は１０月２７日（月）の予定です。お楽しみに

ブログ用テンプレートのサイトです↓↓↓↓↓↓↓↓↓全部無料で使えますょ

こんにちは！さいとうです
３連休が終わってしまいましたね・・・
３連休はどこにも出かけなかった私ですが・・今週末は北陸に旅行にいってきます
北陸初上陸なのでとっても楽しみです

それでは今回は、livedoorテンプレートのカスタマイズ、今度はメインである記事部分のCSSを変えてみましょう

記事部分のHTMLは
<div class="article-outer hentry">～～～<!-- articleOuter End -->
です。この部分と対応するCSSを編集していきます。

これは第１３回　livedoorのテンプレートをカスタマイズ～３と同じような形です。
今回ベースとしたテンプレートには、記事全体を囲うdivが３つ（div.blog-title-outer, div.blog-title-outer-2, div.blog-title-outer-3）あります。この３つを上手くつかって画像を指定しましょう

右の画像のように記事のタイトルの前に、可愛いひよこの画像をつけようと思います

記事のタイトル部分のHTMLは<div class="article-title-outer">～～～</div>です。
.article-title-outerにひよこの画像を表示させて、h2のmarginで文字の位置を整えます。

今回ベースとしたテンプレートのソースには、使われていないdivが沢山含まれています。他の人が書いたソースはわかりづらいですが、がんばりましょう

「なんだかわかりにくいなぁ・・・」「もっと自由にテンプレートを作りたいのに」と思ったら、１から自分でHTMLとCSSを作ってしまうことをオススメしますその方がHTML&CSSの知識がある人には作りやすいと思いますょ。

ちょっと知識に自信がない人は、まずはCSSだけを編集して背景や色、大きさを変えるだけが良いでしょう。そうやって少しずつ勉強していけば、１から作れるようになりますよ

次回は、私が作成したテンプレートに見つかったバグと修正方法をお伝えします。
更新は１０月２１日（火）の予定です。お楽しみに

ブログ用テンプレートのサイトです↓↓↓↓↓↓↓↓↓全部無料で使えますょ

こんにちは！さいとうです
今週末は１ヶ月ぶりの３連休です みなさんはどこか旅行にいかれますか？？
私は、友達と買い物にいって、あとは家でゆっくりと・・・

今回は第１２回の続きです。
それでは、プラグインのタイトルに背景をつけてみましょう

まずはどのようなサイドバーのデザインにするか考えましょうどのようなデザインでも、プラグインの内容によって縦の長さが変わってきます。ですから、第３回　ブログのデザインを考える（３）で書いたように、縦の長さの変化にも耐えられるように作らなければいけません

サイドバーのタイトルは
<div class="sidetitlebody">
<div class="sidetitle">～～</div>
</div>
この部分です。簡単に済ませるなら.sidetitlebodyに背景画像を表示させ、.sidetitleのmarginを指定して文字の位置を整えるだけです。でもこの方法ですと、文字数が多くなったときや文字を拡大したときに画像からはみ出してしまう可能性があります

第３回　ブログのデザインを考える（３）のように画像を３分割にすればいいのですが、プラグインタイトルのセレクタは.sidetitlebodyと.sidetitleの２つしかありません。さてどうしたらいいでしょうか・・・

プラグインのソースにはあと.sidetop, .side, .sidebodyが残っています。この中から.sidetopを使って、.sidetitlebody, .sidetitle, .sidetopの３つをタイトル部分に使ってしまいましょう。

今度はプラグインコンテンツ部分だけに背景画像を表示させます。コンテンツ部分はボックス画像を３つにわけて.sidetop, .side, .sidebodyのそれぞれに背景を表示させるだけなので、わかりやすいですね。

ここまでで、タイトル部分のみ、コンテンツ部分のみ、背景を表示させる方法を説明してきましたが、タイトル部分とコンテンツ部分、それぞれに背景を表示させたい場合はどうしたらいいのでしょうか？

答えは簡単です。上から順に、.sidetitlebody, sidetitle, .sidetopはタイトル部分に使います。そして残りの.side, .sidebody, .sidebottomの３つをコンテンツ部分に使うのです

全体の場合も同じように背景画像を３つにわけます。
.sidetitlebodyまたは.sidetitleに上部の画像、
.sidetop, .side, .sidebodyには真ん中の画像、
.sidebottomには下部の画像を表示させます。

次回もlivedoor用テンプレートのカスタマイズ方法の続きです
更新は１０月１４日（火）の予定です。お楽しみに

ブログ用テンプレートのサイトです↓↓↓↓↓↓↓↓↓全部無料で使えますょ