掲載:2009年04月30日
090430-02.jpg  そうそう、一つ忘れておりました。本当は、幾つか有るのだが・・・、本日はQRコードの事。作成は、多くのフリーソフトがベクターなどに有るが、このソフトは、真に便利。小さくした時の読み取りが出来る。是は先ず無い。以前、見つけてこのダブログからインポートした記事にも写真は無いが残っている。その記事をそのまま引用。

 是で、QRコードを作成して、HPの表紙の下にでも貼り付けて下さい。小生、未だこのブログの携帯版と言うのは見た事が無いが、もし、その携帯のURLが違うなら、携帯版のURLを貼り付けると良い。どの程度まで小さく・・・、其れもこのソフトで確認するのも良い。是で、一つ必要項目が減る。

----------
090430-03.jpg★ QRコード・エンコード・デコード:
 QRコードをエンコードするプログラムはフリーソフトでも数種ある。しかし、PC上でデコード出来るプログラムはフリーソフトで見つけられ無かった。そんなソフト、本当に無いのか探して見ました。

 有りました。PC上でエンコード・デコードが出来るプログラム、有限会社 サイテックと言うQRコード読み取り装置を販売する会社のフリーソフトで有りました。

 暗号化したQRコードも読み書きもできる。Windows XP・VistaではPsQREdit.zipをダウンロードすれば解凍するだけで使える。

※ QR Code Editor:

 携帯電話の各キャリアが定めるフォーマットに対応したQRコードシンボルを生成するプログラムです。生成されたシンボルはビットマップ、JPEG、TIFF、GIF、PNG形式の画像ファイルとして保存できます。ファイルや画面上のQRコードシンボルを読み取る機能も備えています。

※ 写真は、作成画面。URLをコピペするだけ。因みに、下のQRコードの内容は・・・、こんなのが作れるし、読める。携帯で見た人の販促にも使えるかも知れない。

※ 有限会社 サイテック :http://www.psytec.co.jp/
  QR Code Editor : http://www.psytec.co.jp/freesoft/
※ 以前の同記事:http://m-jun.seesaa.net/article/115816786.html

   (*^‥^*)」 イヨッ
掲載:2009年04月30日


20090430-01.jpg 小生の何時も訪れる旅行先情報を検索していると良く「じゃらん」と言う文字に出会う。是って何語?。実は、是は、インドネシア語かマレー語。

 昔、インドネシアやマレーシアに長期出張を何度かした。その際、その場所の高級レストランや場末のレストランに行くのだが、良く頼みもしないのに女性が附く。鳥の骨を取り、貝の殻を外し、魚の骨を取ってくれる。

 高級レストランでも同じ光景、場末でも同じである。高級レストランでは、やはり其れなりの格好をしている。そして、食事が終わる頃に成ると、決まってこう言う。

 「ジャラン・ジャラン」

 そう、この女性は店から給料は出ていない。ここまで読まれれば、お察しのとうり。だから、小生はこの文字を見れば、其れを思い出して、笑ってしまう。そう、最初は全く意味不明だったのだ。全くこのインドネシア語かマレー語、

 ジャラン: で、「道」と言う意味。複数並べると意味が違ってくる。
 ジャラン・ジャラン: では、「散歩」と成る。そう、散歩しましょうの意味(爆)。

 小生、英語は全くだめ。なので、インドネシア語も全く覚えられ無かった。

 覚えたのは、クンチン(鍵)・123(サツ・ツゥワ・ティガ)・食べましたか?(クタカ)・・・。

 鍵かけとけよ・・・、と指示するので覚えたのが、クンチン。手でキーを回す真似をして、クンチンと言えば意味が通じた(爆)。123は、インドネシアの煙草で一番高級煙草が是、次に高級なのが、今は日本でも買えるウダンガラン。そう、この”ウダンガラン”もインドネシア語、倉庫と言う意味である。なので、ラベルが倉庫。

 食べましたか?は貴方食事しました?、がクタカ。一番初めに覚えた。そう、日本語に一番近い。「お前飯食ったか?」と同じ・・・。

 そう、遠き日の思い出の「じやらん・じゃらん」である(爆)。そうそう、ブンガワンソロと言う歌、実はインドネシアの民謡。ハリマオとは、マレー語で虎の意味である。、

 写真は、一番長くインドネシアに居た時の身分証明。本当は持って帰るのは厳禁。政府の要人に言って記念に持ち帰った。1年後に再び訪れても、このバッチで入れた。PAPA・TANGOと書いた帽子も貰った。是は、インドネシアが好きで、度々訪れる友人に貸したら、帰って来ない。そう、便利に使える・・・。

 悪名高いインドネシアの税関でも、この帽子を被って居たら滅多に変な目には合わない。そう、政府関係者の帽子。必ず聞かれる、「その帽子どうしたの???」、そう問われれば、「友人に貰った・・・」と返事を返すだけ。

 日本に居れば分からない事が一杯有る。TVで報道されるのは本当に1/100にも満たない本の一部。

   (*^‥^*)」 イヨッ
掲載:2009年04月30日

ashi_2.gif


 本件で、器を作られても未だ満足の行かない方も出て来るかも知れません。其処で、カスタマイズの追加と成るかも知れません。小生のこのブログは、実験台の様なブログで、殆どのカスタマイズを他の記事で記載の様に、時間が有ればこのブログを使って、実験しています。

 其処での結論は、日時等の”部分消去”などのカスタマイズを除いて、追加するカスタマイズは多くは有りません。全て、体裁を整えるとのカスタマイズです。

★ 機能を追加する、便利と言われるカスタマイズは、

@ 記事毎のエディターを付ける。(記入者向け。)
A Liteboxの様な同一画面の拡大表示を付ける。(閲覧者向け。)

 の2点では無かろうかと思います。色々と省いてシンプルにした商用HPです。簡単明瞭、軽く作る事が一番です。二番目に何度もリンクを押さないと入れ無い様なページを作らない事が2番目です。

★ エディターに附いては、追加のみで、本ブログにも附加しています。記事下の、

posted by jun | Comment(0) | TrackBack(0) | Blog/HP・PC&SOFT | edit | |

 のeditがそうです。一々、マイ・ブログ画面に入って、記事に入って書き換え・・・との操作が要りません。このリンクを押せば、一発で記事画面に入ります。この機能をHPに附加すれば便利な機能です。クッキーも効くので、一々の認証が不要です。ただ、小生の実験HPでは未だ実装試験をしては居りませんが、カスタマイズ方法は、多くのサイトに同一記事が載って居りますが、例えば、

※ 小粋空間さん: http://www.koikikukan.com/

 カスタマイズ方法は記事コンテンツ内部のHTMLに次の行を追加すれば良いのですが・・・。本HPでは、posted byの行を抹消しているので、入れる場所が有りません。同場所(<div class="posted">〜</div>)の間に入れれば、記事下に何らかの表示が出ます。背景と同じ色にして表面上は隠すと言う方法も有りますが、この要領を考える必要が有ります。
----------
<!-- EDITを追加 -->
| <a href="http://blog.seesaa.jp/pages/my/blog/home/?blog_id=<% blog.id %>&goto=/pages/my/blog/article/edit/input?id=<% article.id %>" >edit</a>
<!-- 追加終了 -->
----------

 Liteboxに附いては、商用クレジットの問題が有りますので、購入される方は別として、暫くお待ち下さい。方法は本シリーズ最終回にで・・・。上手く行くかどうかは不明ですが・・・、上手く行けばの期待で、是からテストします。

★、多くのカスタマイズを実施すれば、相互に影響しあうと言うカスタマイズも存在します。

 多くはJAVAスプリクトを使った物ですが、小生の例は、このeditが消えました(爆)。そんな状態にも成ります。この点注意が必要です。何が一番大事、其れを考え選択の必要性が有ります。ただ、分かった人は、内部命令を書き換える事で対応は可能です。

★ 外観上のカスタマイズの注意点は、UPした画像をダウンロード出来る事を確認して使用する事です。

 先日の朝、友人から電話が有りました。1枚画像が表示されてないよ・・・。急ぎだったので、電話が・・・。有り難い話しです。そう、小生は、画像の交換を行いました。4/5の名前はそのままだったのですが、1枚だけ名称が何故か変更に成っていました。

【初期名称】
<a href="http://○○.up.seesaa.net/image/090428-01.jpg" target="_blank"><img src="http://○○.up.seesaa.net/image/090428-01-thumbnail2.jpg" width="150" height="150" border="0" align="left" alt="090428-01.jpg" /></a>
【画像消去の後再UP品】
<a href="http://○○.up.seesaa.net/image/090428-01-feebd.jpg" target="_blank"><img src="http://○○.up.seesaa.net/image/090428-01-feebd-thumbnail2.jpg" width="150" height="150" border="0" align="left" alt="090428-01.jpg" /></a>

 5枚同時にUPした画像、他の4枚はそのままの名称でUPされました。こんな変更も有ります。2009-04-31.jpg等の日付けで画像をUPした場合も同様です。変更されます。

 背景画像が出ない!、と言われる前に、UPした画像がそのURLでダウンロード出来るか否か、確認してからHPには、記載下さい。あっれー?となら無い為に・・・。

 そう、内部の小さい画像でUPされて居る事に成っていても、容量も0バイトで無く規定容量が出て居る状態でも、画像がダウンロード出来ない時が有ります。ご注意下さい。

★ 画像がUP出来ているのに、ダウンロード出来るのに・・・。表示されない。

 この原因は、小生の様な素人には不明ですが、多くの場合、CSSの表記を替える事で一応の対応可能と思います。例えば、

【画像が出ない時】
 background-image:url(http://○○.up.seesaa.net/blog/bg.png);
【画像の出る書き方】
 background-image:url("http://○○.up.seesaa.net/blog/bg.png");

 そう、昔から良くやられている方法です。””のダブルコーテーションで囲む。ただ、この方法が正しいかどうかは、小生に判別が附きません。小生の実験では、表示された事は確かです。そう、UPしたHPは先ずは上手く全体が表示されてるか、他人に見て貰う、是が一番です。

 カスタマイズ全て、相互干渉が無いか良く確認すること。干渉すれば何れが大事かで判断すること。全て、確認の一言に尽きます。個人のブログやHPでは有りません。お店の一つの顔と成ります。充分に確認して、オープンしましょう!。

※ 一部文字化けを修整・一部加筆:2時32分:

   (*^‥^*)」 イヨッ
掲載:2009年04月29日

ashi_2.gif

 このシリーズ記載のきっかけと成った友人のHPを先般始めて見た。未だ表紙だけの状態だが、職業柄流石。ただ、何処かの外国サイトに似てた(爆)。見たかどうかは知らぬが・・・。未だ公開された居ないのでそ外観はキャプチャーして公開とは行かないが、以下の様な形で有る。似てるのは嫌いからか、2カラムで有った。

@ 基本: メタル
A カラム数:2
B 全幅: 780、左約1/3がカテゴリーリンク幅
B 構成: 此処に同じ
C 様相: 左カテゴリーリンク、下に検索窓、右記事部は此処に同じ。
D 特徴: カテゴリーの字が大きい。30ピクセル程度?。字の間隔も大きい。
     不要物は一切無し。バーナーも無い。文字のみ。壁紙は一面写真で大きい。
E 問題点: 壁紙がどうしても重い・・・。が他のパーツが無いので、一応OK。
      但し、軽量化のため、白黒写真だった。

※ 表示面積が小さくて良いなら、この様な考えも有ると言うお話です。その表紙を半透過にしたいので、色々聞いて来た(爆)。ま、業種によります。ただ、こんなバーナー出来ない?との話しもある・・・。

   (*^‥^*)」 イヨッ
掲載:2009年04月29日
090429-01.jpg  では、本日はカスタマイズの最終段階、カテゴリーリンクのカスタマイズ方法に附いて記載します。このカテゴリーリンクを横一文字に並べるカスタマイズ方法は、此処まで順を追って読まれて来られた方、又は検索でこのカスタマイズをお調べに成られた方は、カテゴリーのHTMLの改行タグ<br />を取れば一応は真一文字に成る事はご存知の筈と思います。

 この事は、友人へのメールO&Aでもお伝えした通りです。また、メール当日の15日に以下のURLの「にぃん」さんが同様記事を発表された事も本ブログに記載したとうりです。

※ にぃんのブログ・カスタマイズ+α:
 http://nin-hobby.seesaa.net/

 しかし、小生の場合、事は単純では有りませんでした。このリンク改造に約半日の間、悩み続けました。そう、タグが効かない・・・。日附け・記事下部の消去に際しても、当初のカスタマイズでは上手く行かない事が・・・。なので、皆さんは下記に示す改造方法を取られる事をお願いします。他の改造方法も可能かも知れませんが、小生のカスタマイズ方法は以下の記載で実現。
----------

★ 概要:

@ 本カテゴリーリンクは、バーナー・フッター部分の上下2箇所に設けています。何れか片方も当然可能です。貴方のデザインに合わせてカスタマイズして下さい。

A 本カテゴリーリンクは、バーナー部は最下端、フッター部は最上段に配置しています。また、最下端のフッターには、店名・住所等の今後の記載での位置移動を考え、別のクラス指定をしています。もし、片側(バーナー部)のみでいいと言われる方、同じ場所の上下でいいと言われる方は、同じクラス指定で、且つCSSの追記も1箇所でOKです。

B このリンクは写真の様にセンタリングしています。カテゴリーを増やしてもセンタリングしますが、余り増やすと2行に成ります(爆)。このHPは、個人商店向けなのでカテゴリー数は余り必要ないと考えこの方法を取っています。

C 昨日の写真と、本日の写真の違いは、このカテゴリーリンクにTOPページへのリンクを附加しました。是は、記事中のTOPへのリンクを外したため対処しました。現状では、タイトル「平々凡々」がTOPページへのリンクと成っていますが、上部バーナー部に店名を記載され、タイトル文字を消されても対処出来る様に考えています。

★ カスタマイズ方法:

☆ 初期のカテゴリーリンクHTML:
----------

<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% loop:list_category -%>
<li /><a href="<% category.page_url %>"><% category.name | tag_break %></a>&nbsp;(<% category.article_count | __or__ | echo("0") %>)<br />
<% /loop -%>
<% content.footer -%>
</div>

----------
@ 先ず、コンテンツ「カテゴリ」のタイトルを”カテゴリ(改造品上・下)”等の名前に変更して下さい。当然、保存釦を押します。

A 次に、上部のリンクのコンテンツHTML編集に入り、初期のHTMLを下記の物と入れ替えて下さい。入れ替えの注意点は、必ず現在のHTMLを完全消去してから貼り付けを行って下さい。
----------

<div class="category_plate_up">
<% content.header -%>
|&nbsp;<a href="<% blog.page_url %>">TOP</a>&nbsp;|&nbsp;<% loop:list_category -%>
<a href="<% category.page_url %>"><% category.name | tag_break %></a>&nbsp;|
<% /loop -%>
<% content.footer -%>
</div>

----------
B 貼り付けが完了すれば、HTMLの下に有る”保存釦”を押して下さい。
C 次に、HTML編集画面の右上、「カテゴリの設定に戻る」のリンクを押して下さい。
D カテゴリの設定画面に戻れば、「表示件数」を貴方の必要な件数を記入して、下の”保存する”の釦を押して下さい。
E カテゴリーリンクを下部にも設けられる方は、冒頭の注意書きを参照の上、以下の物に書き換えを行って下さい。
----------

<div class="category_plate_lo">
<% content.header -%>
|&nbsp;<a href="<% blog.page_url %>">TOP</a>&nbsp;|&nbsp;<% loop:list_category -%>
<a href="<% category.page_url %>"><% category.name | tag_break %></a>&nbsp;|
<% /loop -%>
<% content.footer -%>
</div>

----------
F 書き替えが終了すれば、上部カテゴリーリンクの説明と同様な処置をして、カテゴリーコンテンツを閉じ、ページ下の”設定を反映する”の釦を押して下さい。この設定を反映するの釦は、多分、コンテンツの配置の変更にのみに効くとは思いますが、とりあえず押す。

G 次に、CSS編集を開き、最下端に以下の物を追記して下さい。
----------

/* カテゴリーリンク上追加開始 */

.category_plate_up{
clear: both; /* 回り込み解除 */
color: #FFFFFF;/* 文字分割|色 */
font-size:14px;/* 文字大きさ */
font-weight:bolder;/* 文字太字 */
text-align: center;/* センター配置指示 */
background-color:;/*下のborderを1pxとして此処に色指示すれば背景に色板*/
border: 0px solid #FFFFFF;/* 枠線の太さと色 */
line-height:28px;/* 行間・高さの変更 */
padding: 0px;/* 文字と枠線の間隙 */
}
.category_plate_up a{
color:#68313b;/* 文字色 */
}

/* カテゴリーリンク上追加終了 */
/* カテゴリーリンク下追加開始 */

.category_plate_lo{
clear: both;
color: #FFFFFF;
font-size:14px;
font-weight:bolder;
text-align: center;
background-color:;
border: 0px solid #FFFFFF;
line-height:150%;
padding: 0px;
}
.category_plate_lo a{
color:#68313b;
}

/* カテゴリーリンク下追加終了 */

----------
H 上記の指示は小生のバーナー部高さ140px・フッター部高さ160px(共に背景画像にメタルの背景画像に同様な上下白色マスク部を含む。)とした場合の指示で、バーナー・フッター寸法により上下位置がずれる場合が有ります。その時は、各自調整して下さい。また、文字・分割線|の色調・大きさは各自計画のHPに合わせ変更して下さい。尚、上下の名称の違いは、アッパー・ロアーのcategory_plate_up・category_plate_loの違いのみです。名前は変更が可能ですが、意味の判らない方は、このまま貼り付けて下さい。

I 変更が終われば、保存して終了、カテゴリーリンクが真一文字の直線化された事を確認して下さい。

※ 上手くいかない場合、HTML・CSS共に、設定を初期に戻すの釦で戻す事が出来ます。恐れずにトライして下さい。手順を間違わねば、必ず成功します。如何でしたか?。

★ また、此処でSeesaaのPOWER名板が未だ最下部にくっついて居る方は、コンテンツPowered Byの挿入テキスト(上部/下部)の下部側テキスト記載部分に「<p>&nbsp;</p>」を半角英数文字にて記入、保存釦を押して下さい。

★★★ 以上で完成です。本シリーズ、当編まで皆さんのご要望に答え、連日記載して参りましたが、此処で一応の決着。後の記載に附きましては、未だ頭の中にも完全に未完状態ですので、少々お時間を頂かもしれません。原稿が出来次第、順次UPしますので宜しくお願いします。尚、予定表日附けに有るとうり、5月15日迄には完結の予定です。

 最終編には本HPに更なる(*^‥^*)カスタマイズを紹介します。ご期待下さい。また、此処までで、自己カスタマイズ出来る様に成った方は、どうも閲覧有難うございました。出来上がったHPに、出来れば、リンクなど貼って頂ければ幸いです。

   (*^‥^*)」 イヨッ
掲載:2009年04月28日


   ashi_2.gif 本日、当Seesaaブログのアクセス解析の検索エンジンからの来場を見れば、殆どがDoblogからの移設・・・である。そう、小生もDoblogからの難民である。

 そのDoblog、5月末で閉鎖が決まった。一時は期待を持たせる記述もあったが、今回の結果は恥の上塗り。その小生と同じ様な難民の皆さんが、移転先・方法を探されていると思う。

 小生が移転したのが、此処、Seesaa(シーサー)。今までDoblogでは出来なかったHTML編集なども出来て、一応、昔の姿に近い様相のブログで運用させて貰っている。小生は、旧の自分のブログでカスタマイズをしていた経験も有り、素人でHTMLも分からない人間だが、何とか、昨今の記事に見られる様な遊びをしている。

 さて、本題のダブログからの移設だが、小生の確認した感じでは、何処もデーターンのインポートが出来るので余り変わりは無い。何処かに、小さな画像まで取り込んでくれるとのブログがあったが、是も便利かも知れない。

 ライブドアが全面的に移設協力との記事もあり、是も初心者に便利かも知れない。要確認である。何処もMTタイプの記事は取り込める。取り込みに問題が有るのは、画像データー。是が、上手くUP出来れば・・・との問題。

 2番目の問題は、現在、ほぼ満足の行く状態で表示されてるDoblogだが、トラブルまでの最新1年間のデーターはこのデーターでは供給されない。そう、以前配布の壊れたデーター。小生のこのブログにも一応インポートして有るが、カテゴリー、画像、改行でーたーが無い。小生のカテゴリーの未整理品と成ってるのがそのデーターで有る。

 この1年間のデーターを何とかできないか、今の所から取り出せないか、いろ色と調べて見た。偉い方は居られる様で、以下のサイトを見つけた!。

※ Doblog専用MT形式ログエクスポートv0.x(VBA版):
 http://eurofunda.dtiblog.com/blog-entry-280.html

 ただ、VBAのXMLファイルと言う事はエクセル・・・。小生のこのPCには入ってない・・・。でも、エクセルをお持ちならやってみる価値は有る。小生の悩む殆どが出来ると有る。

 しかし、Doblogの移転先可能リストにこのSeesaaブログは無かった(爆)。ま、嫌がらせでしょう。現に、Doblog・移転の検索を入れれば、小生の記事が上位に有る。知らぬわけが無い。DoblogからSeesaaへの移転は、可能です。何処も上に書いた様に、差異は無い。

 なら、選択は、様は好み。HTMLを触りたければ、FC2か此処Seesaaが一番人気らしい。そして、自分の附けた名前、m-junが前に来る。此処Seesaaは100個のブログが一つのアカウントで出来る。Seesaaの改造は、Doblogの様に使えない改造では無い。其れも、運用を停止せずに行われている。そう、小生は、此処を借用してファイルUP機能が変更されたが、其れが小生のファイルUPと同時だった。1回目と2回目で画面が違った・・・(爆)。その様な状態で運用されている。

 小生が、何故FC2を選択しなかったかは、好み。日本と外国の違いだけです。
 Doblog難民の皆さん、是非、此処Seesaaへ。そう、このSeesaaブログは、グーグルの検索にかかります。そう、内容により、直ぐに上位を確保できる。seesaaに来られたら、またお声かけ下さい。

   (*^‥^*)」 イヨッ
掲載:2009年04月28日
090428-01.jpg  昨日の記事に以下の記載を追記しました。必要な方は対処をお願いします。

★ 2009年04月7日追記: コンテンツ部分に背景画像を入れられる予定の方は、マージンでは無く、パディングで20pxを挿入して下さい。マージンで余白を取れば、780pxの背景画像は入らなく成ります。(例 padding:0px 20px 0px 20px)[追記終了]
※ ブログで個人商店ホームページに挑戦・「1カラムCSSへのカスタマイズA」:
 http://m-jun.seesaa.net/article/117948817.html 

 さて、本日は急遽計画を変更して、記事部分のカスタマイズを行います。小生、先週の週末、記載の本計画を最初からトレースしてHPを完成させました(内容未完)。その結果、一気に作り上げ、最終の確認する方は別として、順次作り上げて行く方は次の順序を守らないとカテゴリーリンクの設定形態が崩れる事が判明しました。

T)1カラムボデーを作る。
U)記事部分HTMLをカスタマイズする。
V)カテゴリリンクをカスタマイズする。
W)他の部分をカスタマイズする。

090428-02.jpg したがって、CSSのカスタマイズが終了した方は、本日の記事部のHTMLカスタマイズを行ってから、カテゴリーリンクスイッチのカスタマイズを行って下さい(説明順)。また、以下のカスタマイズ「「posted by【ネーム】at時間|カテゴリ名」を消去する:」は、他のブログで同部分を消去する同様カスタマイズが載って居りますが、その方式は取らず本方式にてカスタマイズを行って下さい。同部分の上部数行を消去するカスタマイズでは、同様の現象が起こります。

 くれぐれも、1カラムCSS等のカスタマイズが終了してから本作業を行って下さい。また、本シリーズの採用に当たっては、TOPリンクの消去に、簡単だからとの理由で、CSSでのナビ部分消去(.navi { visibility: hidden;)は行わないで下さい。一瞬は上手く行きますが、この命令を読み込んだ時点で、セット命令はリセットされます。

090428-03.jpg また、これ等の表示を残される場合は、当然カスタマイズは不要です。では、カスタマイズ。カスタマイズは以下の3件。
----------
※【カスタマイズ】Seesaaブログをホームページ風にカスタマイズ!:
 http://testhp.seesaa.net/

★コンテンツ「記事」の『コンテンツHTML編集』を編集する。

@ 記事の日時を消去する:
 http://testhp.seesaa.net/article/32719990.html

☆ 消去部分は以下:

 <% if:with_date %><h2 class="date"><% article.createstamp | date_format("%Y年%m月%d日") %></h2><% /if %>

A 「posted by【ネーム】at時間|カテゴリ名」を消去する:
 http://testhp.seesaa.net/article/33291990.html

☆ 消去部分は、<div class="posted">〜</div>の内側全てを削除。<div class="posted"></div>のタグは残す。

B カテゴリーのTOPリンクを外す。

☆ 消去部分は、以下の1行。

<a href="<% blog.page_url %>">TOP</a> / <% category.name %>

 ただ、本件3点のカスタマイズを以前から申し上げてるコメント<!-- -->の方法で消去するのでは無く、HTML自体を消去して下さい。後の部分に<!-- 日時消去部分 -->等を入れる事は可能です。
----------

090428-04.jpg では、本日は、小生が先週末に行った実証テストの結果写真を使って、本日のカスタマイズの結果を御見せしましょう。(以前作って有った背景画像を使用。)

☆ 写真1: 本シリーズの完成状態。内部記事が無いので上下のパディング余白のみを残し、上のバーナー背景画像と下のフッター背景画像が引っ付く。真ん中余白部分に見える部分は、コンテンツ部分背景画像を小生は半透過としたため、ボデー背景画像とした写真が見えています。是は、コンテンツ部分背景画像をGIF画像の網点として実現しています。

☆ 写真2: 内部に記事を入れた表紙部分。表紙は、自由形式に記載のため最初から日時は有りません。
☆ 写真3: 内部に文章を入れた記事部分。前回写真と異なり、日附けが消去されています。また、記事タイトル表示をセンタリングしました。
☆ 写真4: 記事下部消去部分。

 この写真1〜4は、周囲に20pxのパディングを設けて記入してあります。最終的に、本HPは内部記事記載にテーブルタグを用いて内容(記事)を整形記載をする事を目的に作られています。テーブルタグは面倒だ!と考えられ、直接に記事を記載されようとお考えの方は、全幅780pxの80%位までの幅にパディングを設定される方が配置としては綺麗に文字が配置されると思います。

 尚、本試作HPは何れ内容を記入して公開の予定です。タイトルは「仮想空間・平氏そば」。一応、蕎麦屋さんのHPとしての体裁を整えるつもりです。また、本挑戦シリーズの集大成として、全カスタマイズ記事を記載の予定です。

 ただ、時間の関係で・・・。そう、内容記載の文章・整形・パーツを揃えるのに時間が架かります。何度も申しますが、内容の方が器を作るより時間が架かります。でも、一度手順を覚えれば簡単です。是非皆さん、頑張って完成させて下さい。

 必ず、成功します!。自信を持って臨めば何事も・・・。

   (*^‥^*)」 イヨッ
掲載:2009年04月27日
090423-03.jpg 本日は1カラムCSSの小生がお教え出来る最終段階の確認をします。現状の貴方のテストは何処まで進んでいるかのわかりませんが、基本的には本日が1カラム改造の最終です。この確認以降は、今までの小生の記載とリンクさせて頂いて居る皆さんのブログ・HPを参考にご自身で修整下さい。

 貴方のページに記載した仮に書いた日記が780px有る背景の両端まで伸びていれば正解。上の写真の様に伸びていなければ、未だ幅780pxを阻害するマージンかパディングが何処かに潜んでいると言うわけです。今は上下の位置関係は関係有りません。

090427-01.jpg 横幅(背景)がIEの窓のセンターに位置し、テスト投稿した文字が、その背景の両側まで延びていると言う事が重要です。そう、外形枠のマージン・パディングを0として設計したので、その幅まで内部の記載があって当然の話しです。今の基本は、幅は780px、マージンとパディングは0px、その中に記事の部分があります。なので、日記は780px無ければならないはずです。そうなら無い方は、未だ何処かに数値がの残っていると言う事に成ります。


090427-02.jpg 小生の表紙は、記事が入力されて居ますが、是は自由形式のコンテンツに記載されています。是の記事は100%広がっています。では、次に普通の記事部分を見て見ましょう。左は詰まっていますが、右に少し余白が見えます。是は此処の文字部が伸びていないのではなく、何かの文字の空白に過ぎません。(後ほど明快に成ります。)

 一応、このコンテンツ部分は100%幅、つまりこの例なら780pxまで記事が書けるという領域を確保したと言う事に成ります。此処まではOKですか?。

 後は、この780pxの幅を今度は規制に架かります。背景を何も入れられない方はこのまま使われればこの領域幅が確保出来ます。しかし、この例の様に何か背景を入れられる方は、左一杯にくっついた字も見にくい物と成ります。でも、取り敢えずは780pxを全て確保できてからのお話です。他の物が残っていれば、後々あれれ???と言う事に成ります。

090427-03.jpg では、780px幅の領域を確保したブログを今度は記載幅に制限を架けます。この方法は、正直、何を動かしても同様な事が出来ます。例えば、今確保したコンテンツ幅を小さくする方法。コンテンツ部にマージン・パディングを取る方法、記事の外にマージンを取る方法、考えればもっと有るかも知れません。でも、780pxの数値を変えてしまうのは後々の記憶が定まりません。是は何処の???となら無い帳に枠(横幅)はそのままにするのが賢明です。此処で、小生はマージンを使いました。取り敢えずは、センター割りなので、コンテンツ部分に小生は左右20Pxを設けることとしました。

#content {
margin-top:0px;
margin-bottom:30px; ← 下のマージン(必要なら上下関係を見て調整)

/* margin-left:10px;*/← 最初の記載をコメント行で残している

margin-left:20px;  ← 散りあえず左右を開けるため追加。
margin-right:20px

★ 2009年04月7日追記: コンテンツ部分に背景画像を入れられる予定の方は、マージンでは無く、パディングで上記20pxを挿入して下さい。マージンで余白を取れば、780pxの背景画像は入らなく成ります。(例 padding:0px 20px 0px 20px)[追記終了]

 是で、左右20pxの隙間が出来た事に成ります。その写真が、左の写真。今まで左一杯にくっついて居た日付、写真等が20px分内側に入り、右側も同様サイズに開いています。当然、このサイズは任意設定です。これで、記載領域は、780−40pxの幅、つまりこの例なら、740px幅の記載領域が確保出来た事に成ります。

 是は、「メタルのCSS」を使った例で、如何なる物も同様に、変化さす事が可能です。

 では、上下は・・・。是も同様なのですが、是は文字の場所一つひとつ、文字そのもの、例えばバーナーそのものにマージンとパディング設定が有ります。是を一つ一つ紐解かないといけません。この字を小さく・大きく・上に下に・・・、色々なところが関係してきますので、皆さんの計画が定まらないと判らないことです。でも、一つ一つ紐解けば見えてきます。どうぞ、ご自由に配置下さい。

@ 最後に、不必要なCSSが記載されていても、少しは遅くは成るでしょうが、呼び出されない限り、実害はありません。つまり、不要なCSSは消さないでも動くと言う事です。

A CSSは、上部の記載内容からスキャンされて実行されます。が、極論、同じ命令が2つ有っても、後に書いた(下段)命令に従います。実害は・・・?無いと思います。なので、何処かに少々のバグ有っても動きます。が、一つの命令で、白紙しか見えなくなる事も有ります。特に、カンマ・コンマ等の間違い(年配は間違いに気が附かない事が多い。)には注意が必要です。

B ブログCSS上で検索を使いたい場合、画面上でCtrl+Fを押せば、検索窓が現れます。

090427-04.jpg では、最後に、上下関係の余白について少し。5枚目の写真は、コンテンツ部からカテゴリースイッチを排除しました。が、未だ相当の余白が残っています。小生は未だ触っていませんが、この余白は記事部とバーナー部のマージンとパディングによる間隙と思います。貴方が、幾らの上部バーナー画像を確保されるかでも変わってきますので、数値を計画にあわせ調整して下さい。因みに、「メタル」の場合、バーナーの下部パディングは70px有ります。

 後は、不要な物を、線を、背景を消去、準備した背景・記事を入力すればHPは完成します。

   (*^‥^*)」 イヨッ
掲載:2009年04月26日
090423-01.jpg  本日は2カラムのスタイルシートから1カラムへのスタイルシートへの書き換えをしましょう。基本は「メタル・幅780px」で話しを進めますが、何れのスタイルシートを変更されても同じです。2カラムであれば、右にリンクスイッチが有ったか、左に有ったかの違いです。

 昨日、左の不要コンテンツを仮に消去しました。そうすれば、記事が写真の様に左に寄りました。是は左のリンク部分のコンテンツが無くなったからなのですが、未だ記事の左側に余白が有ります。是は、IDのコンテンツ内の余白なのか、記事部のパディングなのかはっきりしません。このブログを読んで毎日すこしずつ進んでいる方と、判れば一気に進んでいる方と居られると思います。

 小生のこの記入は予約投稿ですが、初心者が、仕事が終わって、毎日飽きの来ない90分程度で出来ることで話しを進めています。本日は、1カラムへの変更。結果だけ書けば簡単なのですが、このブログは其れが目的では有りません。ご自分の計画した自由なスタイルと言うのが目的です。其処で、自由に其れを実現する方法を考えました。

★ 「CSSカスタマイズ・1カラム」です。

 ただ、他の皆さんのカスタマイズブログにもお書きの様に、本件を実施されるのは全て自己責任です。小生も素人、間違いも有るかも知れません。

 1カラムブログには、ベースと成る雛形が存在しません。1カラムのHPは一番単純な形をして居ります。其処で1カラムの作り方は一つかと言えば、そうでは有りません。数種類の方法が現にネット上に存在しました。今回は、一番カスタマイズの少ない方法、CSSのみで実現している方法を取ろうと思います。

 なので、今回は、小生が初心者ならこうして作ると言う方法をお教えします。様は、コンテンツはどれも同じな訳ですから、枠だけ1カラムに作って、今有るスタイルシートの部分を入れ替えれば良いのです(爆)。友人にこの方法を教えたら、一気に進んでしましました。手順はこうです。

★★★

@ 以下のカスタマイズのサイトに行き、スタイルシート カスタマイズ:テンプレートの変更方法・スタイルシートの編集方法・ページ全体のデザイン・コンテンツのデザイン・【付録1】基礎知識・【付録2】コマンドリファレンスに判らなくても一応一通り目を通す。

※ Seesaaブログのカスタマイズ:
 http://www.blogcustomize.com/

※ 此処では、枠がどの様に有るのかが判ります。そして、配置なども。他の事も参考に成ります。

A 一通り目を通したら、自分の計画したスタイルの枠だけののスタイルシートをこのサイトのスタイルシート作成ツール:CSS Generatorで作成します。(写真参照)

※ 此処で必要なのは、

△ バーナー部 ; 幅・高さ・背景色・パディング・マージン・背景画像のセット・背景画像のURL・ボーダー(線)・ボーダー色・ボーダー幅です。

△ コンテンツ部: 幅・背景色・パディング・マージン・ボーダー・ボーダー色・ボーダー幅

※ 2カラムをお考えの場合は、右か左の位置も入力します。

△ ボトム(フッター): 幅・高さ・背景色・パディング・マージン・背景画像指示・背景画像URL・ボーダー・ボーダー色・ボーダー幅

 です。さて、背景画像は出来上がっていますか?(爆)。意匠は出来て居ますか?。幅を幾らにしようか?・・・。2カラムならもっと考える事が一杯です。此処で、パディングとは?、マージン)と言われる方はネットでお調べ下さい。一杯出てきます。幅と高さが額縁の内寸方(全紙・半切とかの部分)の縦横幅、マージンは額縁の幅、パディングはマット幅の様なものです。

 バーナー部の幅・高さが此処に入れる背景画像(写真)の寸法と成ります。でも、此処で指示した寸法以上に物を詰め込んだ場合、高さが自動的に変化します。其れは先の話のとうりです。

※ 外から決めれば、其れに対応した文字の大きさを配置する。中から決めれば、其れに見合うバーナー寸法を決めると言う具合です。

B 画像等、全て後から追加できますが。とりあえず、現在のメタルの画像URLを記載して下さい。他の場所も同様です。

C 背景色はもう場所が判っていると言う方はご自分の決めた色を入れて下さい。

D ボーダー色も目立つ色で指示。初めは1Pxに指示して下さい。最後は消します。、その場合は、此処に0Pxを入れます。色の指示が有っても表示されません。
(是はボックスのところでお読み頂いた様に、幅+と成ります。)

 此処で一番肝心な事、「メタル」で1カラムの場合、幅は、780px・マージン・パディングは0Pxと指示して下さい。当然、指示すればそれが出来上がりますが、中に入る物にもパディング・マージンが存在します。このバーナー・コンテント・ボトム(フッタ)が入って居るの枠はコンテナーと言う枠です。マージン・パディングは当初0Pxの方が判りやすいです。

 この3箇所を入力したら、一番下のCSS作成釦を押してCSSを作成して、コピー保管して下さい。是をすると、

/********************/
/* >>>>> 一般 <<<<< */
/********************/

body から始まって、

/********************************/
/* >>>>> サイドコンテンツ <<<<< */
/********************************/

 までの指示が現れます。が良く見て下さい。内容が有るのは「一般」と「全体」しか有りません。外枠を決めただけなので当然なのです。他の場所も有ると思って入れ替えてしまわないために説明しています。

 このCSSジェネレーター全ての項目を入力すれば、貴方の意に沿ったカスタマイズされたSeesaaブログが一応完成します。一度トライして下さい。今度は適当には行きません。外枠ではないので、全ての位置関係が必要です。

 此処で、リンクレフト・ライト部分の指示を見て下さい。 float:left;・float:left;とあるだけ、内容はま、フロートだけに(爆)。内容の有るのは、ボデー・コンテナ・バーナー・フッター。要は、是を今有るスタイルシートのこの部分と交換すれば良いのです。ただ、現状此処には、他の文字の指示なども入った部分が有ります。全て消しての交換(書き換え)とは行きません。注意して作業して下さい。

090423-03.jpg ★ 幅・高さの数値はこの作成したスタイルシートに書き換え、若しくは追加。
★ リンクレフト・ライト部分は1カラムで不要なので、float:left;指示のみ後は消去。
★ CSSの色々なところが、float:left;の指示が有ると思います。これ等の指示の解除は、フッター部分でクリアされています。フッターに有る「clear:left;」が是で、この命令は今後も消してはいけません。

 では、一度実験して下さい。是のCSS部分の書き換え部分を間違わなければ、以前御見せした写真の文字の様な配置になります。(幅指定は、メタルの780pxのままです。カテゴリーリンクも未だ貴方はカスタマイズ前なので、カテゴリーリンクは上下に並んでいます。)

 そう、是で先ずは1カラムの完成。要は何をしたか、左右を無くしただけ(爆)。上手く行っていれば、CSSコピーを取りましょう。今の状態は???。未だ記事の文字は広がらない???(爆)。

ashi_2.gif   (*^‥^*)」 イヨッ
掲載:2009年04月25日
manabe 以前の本シリーズで「使えるフラッシュ素材」と言う中に紹介致しました素材、縦横自由な寸法に可変と記入致しまいた。是は、当該HPにサイズ「任意」との記載が有り、一般的にサイズ任意とは前記の様な表現の物を指すと思い、実験せずに記載致しました。

 昨日、この素材を確認致しましたところ、縦横固定比率のフラッシュ素材である事が判明致しました。小生の確認した状態、固定比率が間違いなければ、他のフラッシュ配布サイトの素材に変わる物では無い、一般的なスライド・フラッシュ素材です。

 此処に連絡とお詫びを申し上げます。

 一般的な素材は、縦横の比率が固定され、この比率で有れば、寸法指示により何れの寸法にも可変可能です。フラッシュ素材には極稀に、完全に縦横寸法自由と言うものが存在します。以前、サイケデリックビビアンで配布されていたPHoliotと言う素材は、この類に属する素材です。

※ ブログで個人商店ホームページに挑戦・「使えるフラッシュ素材」:
 http://m-jun.seesaa.net/article/117252375.html

★ 縦横自由な寸法に可変できる素材。そんなスライド・フラッシュを最近1つだけ見つけた。

※ katsulabo 無料FLASH素材:
 http://www.katsulabo.com/
※ スライドショー:(使えると思うもの)
 http://www.katsulabo.com/material/slideshow01/

★ ↑ このスライドショーです。是は、小生の確認では、縦横比固定サイズのスライドショーです。

   (*^‥^*)」 イヨッ

このブログの人気記事 (直近24時間)
    最 新 記 事