2008年9月アーカイブ

こんにちは！さいとうです
今日は寒いですねみなさん風邪をひいたりしていませんか？？
寒いのは苦手なんですが、買ったばかりのジャケットが着れるので、ちょっとうれしいです

それではlivedoorの公式テンプレートからコピーしてきたソースをベースにして、自分のオリジナルのテンプレートを作っていきます
今回は簡単にCSSだけを編集して、デザインをかえてみましょう

記事の文字を小さくしてみましょう。

記事の本文を表示させるタグは<$ArticleBody$>です。このタグを囲っているclass".article-body-inner"のfont-sizeを12pxに変更してみましょう
現在のCSSにはarticle-body-innerというクラス名は存在しないので、
.article-body-inner { font-size:12px; }
をCSSに追加してみてください。

追加したら再構築します。どうですか？文字が小さくなりましたよね？？

livedoorのプラグインは
第９回　ブログのコーディング（４）livedoorについて
でお話ししたように

<div class="sidetitlebody">
<div class="sidetitle">～～</div>
</div>
<div class="sidetop">～～</div>
<div class="side">
<div class="sidebody">～～</div>
</div>
<div class="sidebottom">～～</div>

このような構造になっています。ここのスタイルシートを変更して、背景をつけます
ちょっと長くなったので、次回に続きます

次回はプラグインのタイトルに背景を表示させる方法の、続きです！
更新は１０月６日（月）の予定です。お楽しみに

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

こんにちは！さいとうです
だんだんと涼しくなってきてますね・・・
みなさん、もう秋服の準備はしましたか？？
私は先日、ジャケットを購入しました
これでいつ寒くなっても大丈夫です

それでは今回はlivedoor Blogを例にして、ＣＳＳをちょっとだけ変更して、カスタマイズしていこうと思います

今回ベースにするテンプレートは「デフォルト2008（桃,2カラム）」にしました。ベースにするテンプレートはシンプルな方が作りやすいと思いますよ

まずは、ベースにするHTMLと CSSのソースを用意しましょう

CSSは「カスタマイズ/管理 」＞「デザインのカスタマイズ」ページからコピーしてきます。

HTML は独自タグが使われているため、実際にどのように反映されるのかローカルでは確認しづらくなっています
確認用として、ベースとしたテンプレートを反映させた実際のブログからソースをコピーしてきましょう。トップページ、個別記事ページ、カテゴリアーカイブ、月別アーカイブの４つを用意してください。

カテゴリ分けをした記事を投稿していないとトップページ以外は表示されないので、まだ記事が投稿されてない場合には適当にテストページを投稿してからコピーしてください

今回はCSSだけを編集していくので、確認用のHTMLだけあれば良いのですが、HTMLも編集していく場合には、「カスタマイズ/管理」＞「デザインのカスタマイズ」から、HTML４種類（トップーページ、個別記事ページ、カテゴリアーカイブ、月別アーカイブ）もコピーしてきましょう

CSS１つとHTML４つが用意できたでしょうか？
準備が整ったら、次回はいよいよCSSを編集していきます

更新は９月２９日（月）の予定です。お楽しみに

新作テンプレートが追加されました！ブログ用テンプレートのサイトです↓↓↓↓↓↓↓↓↓全部無料で使えますょ

こんにちは！さいとうです
私はこの３連休で北海道にいってきましたー
天気がとってもよくて最高でした
北海道は半そでだと寒いかな？？と思ってたんですが、
ちょっと暑いぐらいでしたよ

それでは今回はFC2用テンプレートについて書きます

• 独自タグ

  livedoorと同様に、FC2にも独自タグがあります。

  詳しくはこちらに書いてあります →テンプレート中に使える変数一覧

• プラグインの表示

  FC2の場合は
  <!--plugin_first(second,third)-->～<!--/plugin_first(second,third)-->
  がプラグインを表示させるタグです。
  この中に
  <%plugin_first(second,third)_title>
  <plugin_first(second,third)_content>
  などを入れこんで、プラグインのタイトルやコンテンツを表示させます

  <%plugin_first(second,third)_title>
  <plugin_first(second,third)_content>
  などのクラス名をlivedoorの
  .sidetitlebody ／ .sidetitle ／ .sidetop ／ .side ／ .sidebody ／ .sidebottom
  と同じものにすれば、livedoor用につくったメニュー部分のCSSをFC2でもそのまま使えますよ

• 広告の表示

  広告を表示させるタグ
  <%ad> <%ad2>
  がテンプレート中に含まれていないとテンプレートを更新することができません 必ず記述してください

次回はlivedoorのテンプレートをちょっとだけ変更してみましょう
更新は９月２２日（月）の予定です。お楽しみに

新作テンプレートが追加されました！ブログ用テンプレートのサイトです↓↓↓↓↓↓↓↓↓全部無料で使えますょ

こんにちは！さいとうです
みなさん！今週末は３連休ですよ
暑さもちょっと和らいだこの時期は、お出かけするのにちょうどいい時期ですね
ちなみに私は北海道に行く予定です

それでは今回は、livedoor用テンプレートについて書いていきます。

必須タグ

livedoor Blogには必須タグがあります。
$BlogHeader$, $Advertise$, $LDServices$ の３つです。

詳しくはこちらに書いてあります → DesignTemplate/Tag/必須タグ

独自タグ
TrackBackForm ／ TrackBacksList ／ CommentForm ／ CommentsList

これらのタグを使用するとコメント、トラックバックの機能を簡単に埋め込むことができます
CommentAuthor : コメント記入者名
CommentEmail : コメント記入者のメールアドレス
など、細かく指定できるタグもありますが、技術に自信のない人やそこまでこだわらない人にはこのタグを使うと良いでしょう

詳しくはこちらに書いてあります → カスタマイズのまとめWiki

プラグインの表示

PluginList_A :「A」設定のプグイン表示
PluginList_B :「B」設定のプグイン表示

この二つのタグを使用するとプラグインが表示され、HTMLでは以下のように書き出されます。

<div class="sidetitlebody">
<div class="sidetitle">～～</div>
</div>
<div class="sidetop">～～</div>
<div class="side">
<div class="sidebody">～～</div>
</div>
<div class="sidebottom">～～</div>

.sidetitlebody, .sidetitle, .sidetop, .side, .sidebody, .sidebottom
この６つのclass名は変更することができません。
どのクラスの背景を繰り返しにして、どのクラスの背景にボックスの上部と下部の画像を表示させたらいいのか考えながらコーディングする必要があります

HTML

livedoorのHTMLは４種類用意する必要があります

• トップページ： 最新の記事がいくつか表示されます。表示される記事の数は、設定によって変わります。
• 個別記事ページ：１つの記事とコメント欄、トラックバック欄が表示されます。コメントとトラックバックを禁止にしている場合には、記入フォームは表示されません。
• カテゴリアーカイブ：あるカテゴリーの記事のみが表示されます。
• 月別アーカイブ：ある月の記事のみが表示されます。

一つのページでしか使われないCSSセレクタもあるので、それも忘れずに設定してくださいね

javascript

個別記事ページだけに使用されているjavascriptがあります。<title>～</title>の下に記述されている２行のところです。

<script type="text/javascript" src="http://parts.blog.livedoor.jp/js/emoji.js"><script>
<script type="text/javascript" src="http://parts.blog.livedoor.jp/js/misc.js"></script>

このスクリプトを削除してしまうと、絵文字とトラックバックが使えなくなってしまうので気をつけてください

次回はFC2用テンプレートについて書きます
更新は９月１６日（火）の予定です。お楽しみに

新作テンプレートが追加されました！ブログ用テンプレートのサイトです↓↓↓↓↓↓↓↓↓全部無料で使えますょ

こんにちは！さいとうです
ここのところほんとに雨ばかりです・・・
そして雷もよくなりますね
特に先週の雷は、家が震えるぐらい凄まじいものでした

それでは今回は、FC2とlivedoor用テンプレートについて書いていきます

FCとlivedoorは、アメブロとは異なり、HTMLとCSSの両方を自由に編集することができます

自由度が高いので、HTML&CSSのスキルに自信のある人は１から自分で作っていくことが可能です。自信がない人はシンプルな公式テンプレートをベースとして編集していくと良いでしょう。

そしてこの２つはほぼ同じCSSを使うことができます。どちらかのサービス用のCSSを作成すれば、ほとんど修正することなく、そのままもう片方のサービスに適用させることができるのです
それではポイントを少しだけ

FC2とlivedoorには独自タグというものがあります
独自タグはHTMLソース中で使用するもので、記事内容や投稿されたコメントの数などを表示させるものです。そして独自タグはFC2とlivedoorで異なります。
例えば本文を表示させる独自タグは、livedoorでは<$ArticleBody$>、FC2では<%topentry_body>となります。
HTMLを組んでから、それぞれの独自タグを入れていけば、livedoorとFC2テンプレート用のHTMLがすぐできちゃうのです

livedoor Blogには特殊タグというものがあります。
特殊タグを使用すると、予め組まれたHTMLのセットが出力されます。
例えば、<$PluginList_A$>と記述した場合、ブログのHTMLでは
<div class="sidetitlebody">
<div class="sidetitle"> プラグインのタイトル < /div>
</div>
<div class="sidetop"> < /div>
<div class="side">
<div class="sidebody"> プラグインの内容 < /div>
</div>
<div class="sidebottom"> < /div>
と書き出されます。

特殊タグの内容は変更することができないので、FC2のHTMLをlivedoorに合わせて組んでいけば、ほとんど同じＣＳＳを使うことができるのです

次回はlivedoor用テンプレートについて書きます
更新は９月８日（月）の予定です。お楽しみに

新作テンプレートが追加されました！ブログ用テンプレートのサイトです↓↓↓↓↓↓↓↓↓全部無料です