2005年12月31日

☆お知らせ☆
ユーザー視点からlivedoor Blogをわかりやすく利用、カスタマイズするのを目的に主に編集画面などの解説、マニュアルを内容として立ち上げたこちらのブログですが、作成した2004年8月当時からみると(2005年11月現在)大分livedoor Blog の編集画面も変っています。
最新の編集画面にあわせた改定をする時間もとれなくなりまして、閉鎖も考慮中なのですがCSSの概念、フリーエリアの応用などビ・みょ〜に参考になりそうな記事もありますので規模を縮小しつつ、まだしばらく表示させておこうかと思います。


はじめていらした方、↑そんな感じのブログなので内容が古いものも多数ありますがご理解下さいませ〜(汗)

マニュアル作り、サポート作業などは個人的に好きなので、また時間が作れた時に新しい形で【助け愛。】を復活できればなぁと思います。

                      2005年11月13日   金白 拝


※ これに伴い同管理人主催の【livedoor Blog サポート同盟 BBS】(http://kin.daa.jp/livedoorblog/doumei/bbs/step.cgi)も運営縮小モードへ移行中です。  

Posted by kindaa2004_ at この記事の単独表示 │カテゴリ:お知らせ

2004年11月21日

初心者向け:カスタマイズトッツキ編とスタイルシート(CSS)入門
最近のブログシステムというのは 単に記事にしたい文章を打ち込めば
記事が反映され、自動的にコメントやトラックバックや月別のアーカイブ
トップページや個別記事、カテゴリー別などのリンクが自動的につく便利さがあると思います。
だからウケたんでしょうねぇ。
しかし、それになれてくると徐々に独自のカスタマイズという
ちょっとめんどくさい事をしたくなるというのも人間のサガのようです。
メンドウをとっぱらってウケたブログシステムなのに(笑)
なにかパソコンの機能の一部を取り出してトッツキを良くしたワープロが
どんどん機能を増してパソコン化した過程を思い出します。
しまいにはワープロは消えてパソコン時代が来たわけですが。

話の道草はこの辺りにしておいて

livedoor Blog のようなブログサービスにおけるカスタマイズは
自分で指定・記述しなければならない部分をわざわざ増やす行為とはいえ
一から自力で記述する事…サーバを取得したりプログラムを組んだり
記述を全部自力でする事に比べればはるかにラクですし、
HTMLやスタイルシートを勉強するのに大変トッツキがいい事だと
金白は思います。
一部をちょっと書き換えるだけで目に見える形で反映されるので
なにか楽しさと具体性があるからです。
外国語を学ぶ時に文法からなにから長文をまるまる理解するところからしようとすると
大変苦労しますし、なかなか楽しく勉強する気にはなれないかと思います。
しかし、流行語や新語などのように一部インパクトのある単語から入ると
わりとすんなり覚えられます。
そして文章とは単語のあつまりです。
文法がよくわからなくても、知っている単語さえ多ければ
案外文章の表現するところの大まかな部分を理解できたりもします。
HTMLやスタイルシートもそういった部分があるかと思うんです。

金白個人の経験と感覚からするとHTMLとスタイルシート、
どちらもまったくわからないっていう段階から勉強する場合、
HTMLから慣れ親しんだほうがよいかと思います。
現状として ネットサービスにおいて、まだまだスタイルシートよりもHTMLタグが使える(応用できる)範囲が多いかと感じるからです。
スタイルシートの記述が反映しない場合も多いですしね。
スタイルシートもHTMLもまったく慣れ親しんでいない方は
人によるかもしれませんが、金白としては
本文やサイドバーのプラグインのフリーエリアを使って
HTMLタグの使用になれてからスタイルシートにチャレンジする方がよいかと思います。

で、スタイルシート(CSS記述)のお話ですがHTMLタグをある程度理解しているという前提でお話したいと思います。

HTMLというのがページを表示する事の基本に対して
その中のスタイルシートというのはデザインに関した表示に的をしぼった形式、
と解釈してよいかと思うんです。
例えば

背景や文字や枠

といった要素の

大きさや色や種類

などを指定します。

文字の大きさや背景の色などはHTMLタグでも指定できます。
しかもスタイルシートの記述ではリンクなどをはることは出来ません。
なのになぜ、HTMLタグの他に更にスタイルシートという記述があるのか、便利なのか?
と、いいますと
例えば

↑こういったデザインのページがあったとします。
そのページを

↑このようにリニューアルしたい、と思ったとします。
この場合、HTMLタグですと
1〜3までの要素と4〜5までの要素のすべて
1なら1、2なら2、3なら3の部分、
一つ一つに色などの指定変更をしなければなりません。
しかしスタイルシートの場合、
あらかじめ1〜3、4〜5に対して「同じ要素である」という
指定をしておけば、記述を一つ書き換えするだけで
同じ要素としてあらかじめ指定した部分が一度に変わります。
記述もラクですし、デザイン上変更指定のし忘れなどもなく
統一したカラーで一気にリニューアルできる訳です。
なのでスタイルシートの記述は1ページの中のHTMLタグに挿入する事も出来ますが
デザインの指定のファイルであるスタイルシート(CSS)のみのものを作る事で
その便利さが発揮されます。
livedoor Blog において、カスタムでスタイルシートの専用編集画面があるのはその為です。
指定の構造としては

↑こんな感じでしょうか。
あらかじめ指定の構造をこんな風にしておけば
外部スタイルシートファイルのAの指定をかえるだけで
1〜3の色やサイズを一度に変更する事が出来ます。


参考・関連記事
http://kin.daa.jp/livedoorblog/html/html1.html

http://kin.daa.jp/livedoorblog/doumei/bbs/step.cgi?mode=view&no=142&key=145  

2004年11月15日

初心者向け:HTMLの構造とブログシステムへの応用
久々の更新です。
今日はブログのデザインや記事を更新する時に応用できる
超初心者向けのHTMLのタグのお話。

まず、タグというのはアナログ感覚でいうと
ネット上、画面を表示させるために記述する為の記述で
簡単な例ですと特定の文字に色をつけたり文字を大きくしたり
太くしたりするのに
その指令をコンピューターに伝えるための記述で
金白なんかは最初、ロープレとかファンタジーなんかの
「呪文」のようなもの、と解釈しておりました。
(もしくは外国語ですね)
で、この呪文というかコンピューター用語、
全部覚えるとなると大変ですし、その分トッツキが悪いので
一部からはじめるといいかと思います。
例えば一部の文字に色をつけるとか
太くしてみるとかですにゃ♪
ロープレなら通常の会話は日本語で、戦闘中に魔法を使うときに呪文。
(外国語なら日本語の文中に英単語をまぜるような具合)


具体例をひとつ


本文編集画面中に

<FONT color="#ff0066">赤い色</FONT>

と記述すると
HP上では

赤い色

といったように表示される訳です。


で、この方法を通常「タグ」を打ち込むとか
その呪文の書き込みが反映されるかどうかをさして
「タグがきく」「タグがきかない」
などといったりします。
掲示板などにはこのタグが有効になるところもあるので
そういった掲示板をレンタルして練習してみるのもよいかと思います。

タグがきく部分ですが、一ページを表示するのに
必要なコンピューター用語の構造を簡単ではありますが
昔つくったので
HTMLの構造をまったく知らないという方は
↓こちらを参照してみてください。
http://kin.daa.jp/livedoorblog/html/html1.html
以前他のサーバでスタイルシート入門のページを作成していた時のページですが
HTMLの大まかな構造が図としてわかりやすいかと思います。

BODYって記述ではさまれている部分に
実際表示される文字だったり、その文字に色をつけたり
大きさをかえたりする呪文記述します。
初心者の方は、このあたりから入られるとHTMLの楽しさに
はいりやすいかと☆
で、そのあたり、livedoor Blog では「本文」の投稿だったり
サイドバーの「フリーエリア」に活用できるわけなのです。
(もちろんカスタム>HTMLテンプレート編集機能 にも応用できます)
livedoor Blog にかぎらず、こういったシステムの一部に
(表示される為のHTMLファイルのBODY部分にあたる部分)
「HTMLタグが使えます」といったサービスは多いので
(ブログとかオンラインHP作成サービスとか掲示板とか)
少しづつ使ってみると結構ハマリますよ♪

人によって感覚は違いますが
金白としては初心者がブログのカスタマイズをしたい、と思ったとき
スタイルシートよりもHTMLに先に親しんだほうが
のちのちスタイルシートの勉強も はいりやすいんではないかと思います。
まずは


()




金白がHTMLの部分参考にさせていただいているサイトさまをまとめたURL
http://kin.daa.jp/livedoorblog/doumei/bbs/step.cgi?mode=view&no=7

タグの練習所紹介したURL
http://kin.daa.jp/livedoorblog/doumei/bbs/step.cgi?mode=view&no=65&key=65

グラテーション文字などのタグを簡単に作成できるフリーソフトなど
http://www.vector.co.jp/vpack/filearea/win95/net/htmledit/color/index.html


以上、そのあたりの簡単な仕組みになれたら
HPビルダーなどのHP作成ソフトで簡単に選択した文字に
カラーパレットから色をつけたり、
ボタンクリックで大きさや太さを変えたりして
ブログ本文などで表現したいものを作った後、
HTMLモードから必要部分をカットして
ブログ編集画面本文部分にはりつけるなどの応用も
理解して便利に出来るかとおもいますよ♪  

2004年09月23日

デザインの設定
ブログのデザインを設定するところ。



.瓮縫紂竺詰廖0豈目を通しましょう
▲妊競ぅ鸚瀋蟾猝椶亡愀犬靴織縫紂璽
テーマ(テンプレート)のジャンル別ページ移動リンク
ぃ達妝咤圍錬諭Т存のデザインではなく
 自分でデザインしたり、ちょっとしたカスタマイズをする時の
 スタイルシート、およびHTMLの編集画面への「入り口」
 画像をクリックします
。(わかりにくい仕様ですが…)
ゥ妊競ぅ鵐謄鵐廛譟璽(テーマ)の一覧。
 画像をクリックすると大体どんなデザインになるかという
 縮小画像がみれます。
 選択が出来たら画像下のテーマ名のチェック部分に
 チェックを入れ、κ儿垢垢襯椒織鵑魏,擦OK。
 デザインは反映されます。
 (独自でスタイルシートを変更した場合は
 別メニューの「再構築」操作が必要ですが
 基本的に既存デザインの選択の場合
 「デザインの選択(チェック)」
 →「変更するボタンをクリック」で
 「再構築」はしなくてもよいようです。  

2004年09月22日

Blogの設定
ブログの基本的な部分や
「新しくBlogを投稿する」時の設定の
デフォルト(初期設定)をきめられます。



.織ぅ肇襦Д屮蹈哀織ぅ肇
▲テゴリー:ブログのカテゴリー
説明:ブログの概要など。ブログタイトルの下にはいる部分です。
ぅ灰瓮鵐/トラックバック受付時のお知らせメール送信先:
 記事にコメントやトラックバックがつくと、こちらに入力したアドレスにお知らせしてくれます。
Weblogs.com Ping送信先:
 自分が気に入ったブログの最新更新をまとめてキャッチする
 サービスへ、自分のブログの最新更新を伝えるための設定。
 自分はつかってなくてもチェックしてくれている人がいる場合があるので
 ワンタッチで設定できる
 「ping.bloggers.jpに通知」「Myblog japanに通知」
 は、クリックして挿入設定しておいたほうが無難です。
Ε肇奪廛據璽犬悗良充─Д肇奪廛據璽犬派充┐垢覽事の数を設定できます。
 「今日」からかぞえて最新何日分、という場合と
 日にちに関係なく「最新の記事」の数で表示する
 2パターンがあります。
日付のフォーマット:記事につく日付の形式。日本語と英語の2種。
─嵜靴靴Blogを投稿する」での設定のデフォルト(初期値)をきめる部分です。
 使いやすいように設定しておきます。
 ただし、「状態」を「下書き」に設定していると
 携帯投稿した場合、「下書き」になって保存されるので
 投稿した後、Blog管理画面に接続し、
 「投稿したBlogを編集する」で「公開」設定にして保存しないと反映されません。  

2004年09月21日

「QRコード」と「モブログ」(プラグイン)
「QRコード」とは
対応した携帯のデジカメで
表示された模様のようなものを撮影すると
該当するURLに変換され、URLの入力のわずらわしさを
ワンタッチで解消するというもの。
とりあえず対応しておいてソンはないかと思います。

「モブログ」
携帯メールで投稿した時に添付した画像が表示される
プラグインです。
※携帯メールでの投稿の設定、および投稿の仕方は
2004年09月12日携帯(メール)投稿の設定と手順
http://blog.livedoor.jp/kindaa2004_/archives/6721296.html
を参照。


「モブログ」の写真配置(レイアウト)については
スタイルシートのサイドバーの指定が採用されるのに対して
「QRコード」の画像は真ん中配置のようです。
なので、レイアウトをサイドバーの枠に対して
右寄せ、または左寄せにしたい場合は
一度表示させた画像をPC内に保存して
ファイルのアップロードをしたのち
フリーエリアでタグの打ち込みによる
表示をするとよいかと思います。  

2004年09月20日

再構築
再構築…それは新たに設定した項目や変更した部分
実際の表示に反映更新させるためのメニューです。



再構築の詳細項目については 編集画面の後半部分の記述説明のとおりなのですが
最初のうちは

再構築に種類とか選択項目がある

という概念がないため、説明書きに目がとまらず、
デフォルトの「トップページ」で再構築して
「スタイルシート(CSS)でカスタマイズしたはずのデザインが変わらない〜」
とかいうのもありがちのようです。

とりあえず初心者は

再構築には種類がある

と、いうのを念頭において、再構築(設定やカスタマイズの変更の更新)です。
そして、初心者として抑えておけばいいポイントは

「トップページ」(プラグインを追加・編集した時など)
「CSS」(デザイン関係をいじったとき)
「全ページ」(どれを再構築すれば変更が更新されるかわからない時)

この3点を抑えておけばよいかと思います。