PC,Adroid,自転車,津軽三味線などについてのブログです

2011年10月5日水曜日

HTML 見出し・リスト・リンクの基礎

■見出・リスト・リンク

    ★見出し <h1> ... <h6>

見出しは <h1>から<h6>までの6階層出指示します。アウトラインヘッダーとは違います。

    ★リスト 箇条書き <ul> と番号付きリスト <ol>

箇条書きと番号リストの2つがあります。以下に例を出します。
  • <ul>の例 (unorderd list)
  • 要素として <li>を並べていきます
  • 下の赤いHTMLが箇条書きのソースです

<ul>
<li>&lt;ul&gt;の例 (unorderd list)</li>
<li>要素として &lt;li&gt;を並べていきます</li>
<li>下の赤いHTMLが箇条書きのソースです</li>
</ul>
  1. <ol>の例 (orderd list)
  2. <ol>の要素として <li>を並べていきます
  3. 下の赤いHTMLが番号付きリストのソースです

<ol>
<li>&lt;ol&gt;の例 (orderd list)</li>
<li>&lt;ol&gt;の要素として &lt;li&gt;を並べていきます</li>
<li>下の赤いHTMLが番号付きリストのソースです</li>
</ol>


    ★リンク <a>リンク先の内容の説明</a>

    知人のブログへのリンクです

<a href="http://eggtart.blogspot.com"  target="_blank">知人のブログ</a>へのリンクです
( target="_blnak"は別窓で開かせるための指示です)
( href="URL"は ハイパーリンク先の指定です)

はじめてのjava script 「初心者は使うな! Google blogger」トホホ

bloggeの記事ではじめてjava scriptに挑戦です。この記事を閲覧した時のブラウザを表示させてみます。次の行でjava scriptを使って使用中のブラウザ名を取得表示させています。記事もHTMLで初めて書いて見ました。

今、あなたは でこの記事を閲覧してますね!

未知の世界への第一歩でした・・・・面白いなあ

今回はじめて、HTMLで書いて見ました。wisywigからは程遠いけれど, そこは工夫と慣れでやってみましょうかああ

今回は <p>と<div>を使い分けて見ました。

投稿後に、bloggerでHTMLをwisywigで表示させてからHTMLを表示させると、勝手に、<p>が削除されますね
これが原因だったか!勝手に改行がきえたり見栄えが変わってしまう原因の1つだったようです。「初心者は使うな! Google blogger!」)という感じです。

bloggerのwisywig編集は、その動作をしっかり把握してないと危険極まりない。見栄えがかわっちゃいます・・
(ちなみに、<p>と<div>では行間が違いますね。後者が広く文章が間延びして見えます。ここはUAの問題なのかな)

2011年10月4日火曜日

bloggerのwisywig編集は当てにならない:空白と改行の変化について

追記です。HTMLのことをまるで知らずに「表示が崩れる、先頭の空白が消えてしまう、空白行が勝手になくなってしまう」と、まずは症状の把握からはじめた記事です。その後、HTMLを少し勉強して、また、bloggerの動作パターンがわかったので追記しました。


★ bloggerの場合、Wisywigeエディターは、入力された行には、単に <br/>を付加するだけです。<div>や<p>で囲まれません。
★ Tabはエディター上からはキー入力できません。
★ 空白については、半角空白は &nbsp; として入力されるので心配ありません。

★ 問題は全角空白です。

空白が削除されないケース
  • Wisiwigエディターで書いた後・投稿  (問題なし)
  • HTMLエディターに切り替えて・編集して投稿」 (問題なし)

空白が削除されてしまうケース
  • HTMLエディターからWisywigエディターに切り替えた途端に
  • 記事投稿後に「編集」で読みだした際、Wisysigエディタで表示させると
    要するに、
    Wisywigで再表示、再編集すると、前白空白は消えてしまう

  空白(全角空白)を使って、見やすく構造化しても、Wisywigで再表示させた途端、全てきえて、「完全左詰め」状態になります。

  日本語文章を「段落先頭は一文字あけて」で書く場合、HTML表示→Wisywig表示にかえた瞬間、全て先頭の空白はきえてしまうわけです。投稿後の編集でも見た瞬間に消えてしまいます。これは、困ります。

  「日本語使わず、英語を使え!]:
  「HTMLでちゃんと仕上げてから投稿しなさい!」

といわれてるようなものです。

で・・

「はーい、HTML、勉強始めましたー」
「うーん・・日本語文章をちゃんとHTML変換してくれるエディター使いまーす」

でございました。ちなみに、ココログやyahooつかってたころは、問題なかったので、勉強もしませんでした。

皮肉ですが・・・・・・・・ bloggerのおかげで嫌ってたHTMLやjava(script)の勉強を始めることが出来ました。

これはまじですが・・・、「不満だらけの世界から研究と創造が!」
マジ皮肉半々ですが・・ありがとうGoogleさん



ふー・・ここまで調べるので、疲れました・・・

以下の記事も、当初は、文章に即した空白があったのですが、この追記記事をWisywigで書こうとした途端!・・・消えました・・完全左詰めになってしまっています。

以下の記事でも書いてますが、Android用のBloggerツールではこのような不都合は発生しません。

あ・空白行も勝手に削除されてしまう問題もありましたね・・そっちは、まだ詳しく調べてません、というか、どういう症状だったか忘れてしまって・・・<p></p>がらみだったか・・まあ、そのうち、また追記します。

以下、元記事


■ 実験によるとライフノートからのメール投稿とBlogger for Androidからの投稿は、行頭の空白と文中の改行が正しくひょじされる
ーーーーーーーーーーーーーーーーーー
先頭から
先頭に空白3つ
先頭に空白3つ
直下に先頭から
一行あけて先頭から
二行あけて先頭から
さあ、どうなるか?f
ーーーーーーーーーーーーーーーーーー
■ しかし、ダッシュボードから投稿すると、改行は反映するものの行頭の空白が消えてしまう。(信じられない設計だ!)
ーーーーーーーーーーーーーーーーーー
先頭から
先頭に空白3つ
先頭に空白3つ
直下に先頭から
一行あけて先頭から
二行あけて先頭から
さあ、どうなるか?
ーーーーーーーーーーーーーーーーーー
■ さらに困ったことにダッシュボードで一度編集して再投稿すると、
両方ともきえてしまうこと。
ーーーーーーーーーーーーーーーーーー
先頭から
先頭に空白3つ
先頭に空白3つ
直下に先頭から
一行あけて先頭から
二行あけて先頭から
さあ、どうなるか?
ーーーーーーーーーーーーーーーーーー
■ Blogger for Androidで再編集すると、問題がない
ーーーーーーーーーーーーーーーーーー
先頭から
先頭に空白3つ
先頭に空白3つ
直下に先頭から
一行あけて先頭から
二行あけて先頭から
さあ、どうなるか?
ーーーーーーーーーーーーーーーーーー
Blogger for Androidで再編集してみる
ーーーーーーーーーーーーーーーーーー
以上の結果から、再編集は Blogger for Androidでやればよさそうなものだが、そうもいかない。2つの理由がある。
1:Blogger for Android以外から投稿した記事は閲覧・編集できない
(なんともいえないアホーな設計だ)
2:Blogger for Androidからはリンクがはれない。さらに映像も<img>扱いで
<a href>は使われない。
このあまりにひどいwisywig環境・投稿編集環境はどこも同じようなものなのだろうか?
HTMLで直接きちっと指示しなさいと、いわんばかりの状態だ。
まさか、そんなことあるとは思わず、いままでいったいなんど同じ記事を再修正したことか! ココログやfc2でもこういうこと起きるのだろうか?
HTMLで<br />タグや <p>タグで明示すれば避けられるんだろうが、wisywig編集が機能しないのでは困る。
from ライフノート

2011年10月3日月曜日

津軽三味線 曲弾き合奏(三段)

mp3BLESTARなどのFlashプレーヤーを用いずに、シンプルにリンクを使ってみました。

津軽三味線の曲弾き合奏です。



2011年10月2日日曜日

遂にHTMLの勉強を始めました+HTMLの基本構造

HTML言語じゃなくてHTML文書というらしいです。

ここ」で勉強を開始。30分でわかるに惹かれて・・・

なによりも「小手先のトリッキーなテクニックや裏技」など無視して、基本構造を重視するという方針に惹かれて・・・

30分版をやってから「ちょっと詳しい版」「もっと詳しい版」があるようです。
ありがたいですね。

「HTMLはhead要素とbody要素からなる」
「HTMLは要素を組み合わせてページを構成していく」

おおお!そうだったんですか・・・
うーん、それに加えて、

「HTML上の記述は、テキスト部分と要素部分からなる」
としえるのか? 疑問です・・ブログの記事のHTMLをみると、そう思えます。

さし当たり、テキストと要素の2つの構成因子とみなしていこうかな。
さて、お勉強の要約です

■ HTML文書の基本構造と要素

★ ある記述がテキストではなくて要素であることを明示するためにタグを用いる

★ テキストを"<"と">”で囲むこと(=タグ表現)によって、それは要素となる。

例:
1: head これはただのテキスト
2: <head> これはタグ表現されているので要素

★ ある要素に始まりとお終いがある場合は開始タグと終了タグで明示する  

開始タグは <text>
終了タグは </text>

と表現する。

例:<head>要素の全体(=開始タグ+内容+終わりタグ)

< head>ヘッドの具体的な内容を記述</head>

★ タグ表現で文書を記述することをマークアップするという

例:HTML文書の基本構造をマークアップする(=文書構造をタグで表現する)

.    <html_1 付加情報>
.        <head>
.            ヘッドの内容を記述
.        </head>
.        <body>
.            ボディーの内容を記述
.        </body>
.    </html_1>

★ HTML文書はフリーフォーマット!

上の例のように、要素表現では改行・半角スペースを挿入して「見やすさ」をあげることができる。
HTML文書をブラウザーなどが「翻訳して表示する時」には、余分な改行や半角スペースは無視される。ありがたいことです・・(タブはどうなんだ?たぶん、大丈夫大じゃない?予想)

★ 文書のタイトル(件名)は<head>要素である

タイトルは<title>要素でマークアップする

例:

<title>公園でかわいい子猫をみました</title>

文書のタイトルはWEB検索の対象になるそうで、みなさんが検索しやすいタイトルにする方がよろしいそうです。(本文までは検索されないのかな? されるとみなしていたけど・・・ )

例:文書のタイトルを記述したマークアップ表現(HTML表現)の構造

.    <html_1 付加情報>
.        <head>
.            <tiltle>公園でかわいい子猫をみました</title>
.            その他のヘッドの記述
.        </head>
.        <body>
.            ボディーの記述
.        </body>
.    </html_1>

★ 要素は入れ子構造にできる。親要素と子要素、孫要素に曾孫に・・いくらでも

(実際は制限あると思うけど・・たとえば256階層まで・・とか・・メモリーつきるまでとか・・ま、実際上は「いくらでも」でいけるんでしょうね。通常は・・再帰かけるとかそういうとき以外は。再帰など意味あるのか?わかりませんが・・)

上の例では、

<html_1>がルート要素、その子要素が<head>と<body>
<head>と<title>の関係は、<head>が親要素、<title>が子要素

さて、以上で、おおまかなHTML文書の基本構造と要素の勉強はお終いです。
いやー、そうだったんですねー

さて、次の勉強は <body>要素=本文についてのお勉強です。それは稿を変えてっと・・。

お疲れさまでした(自分と、読んでいただいたかたに・・)

ブログが”バグ”だらけになってしまいました

途方に暮れる一時・・・

HTML言語とjava scriptをいっさい勉強もせずにソースの様子と勘でいじり倒していたら・・
ブログの表示のおかしさが「モグラたたき」状態になってしまいました。

  それに現在使っているテンプレートデザインも、そこそこ気に入ってるスペシャルバージョンですが、問題は「二度と再現できない」こと・・・

うーん、どこをどうしてこうなったかわからず、どこをどう直せばいいのかわからない・・・

  昔々、プログラム言語を扱いだした頃、ソフト(アプリ)を作っていって、機能変更・拡張を繰り返すうちに、なにがなんだかわからなくなって、遂にきちんと構造化記述をしようと全面書き換えを決意した思い出がよぎります。それ以来、「見てわかりやすく、見て美しい記述」の信者でございます。

だいたい、HTMLのソースは汚いのが多いのです!
注釈も少ないし、だらだら続けてかかれているし、「動けばいい」とでもいわれてるような感じです。アプリは動けいいもんじゃない、安全に直しやい記述があったうえでの機能性でございます。

ソースをきれいに記述することは、まずもって「修正・変更」をしやすくするためですし、バグがあると思われる場合、それを発見しやすくするためです。そして、なによりも「なにをどこでどうしている?」という機能構造を概観しえるためです。

思うに、テンプレートやHTML生成機能を作ってる方々の「本物のソース」はたぶん、見やすさバリバリではないかと思うのですが、公開の段階で、「短縮された醜いソース」にされているのではないかなあ。ロード時間の短縮などの理由でかなあ。

私も昔のインタープリター言語の公開バージョン(市販バージョン・昔はフリーソフトなんぞほとんどなかった・・作っては売ってまして)では、「本物のソース」から注釈やらカットできるものはカットしてソースを最小に縮め、「読みにくいけれど動きます」版をつけてましたし。

憤懣はこれくらいにして、そろそろ、まじめにHTMLとjava scriptの基本を勉強しないとスパゲッティー状態ががひどくなるばかりのようです。

「場合によっては、基本テンプレートを再設定してゼロから作り直しかなあ」
「さらには、そもそも完全オリジナルテンプレート(HTMLを可能な限り駆逐したい・見にくいから)をつくることになるのかなあ・・」
「さらには無料ブログサービスを離れてサーバー上にゼロから作る方がいいかなあ」

という予感が・・・モチベーションと技能の関数で・・そこはどうなることやら
でも・・・ブログづくりって・・ボケ防止にはいいですね・・うふ 

2011年10月1日土曜日

心不全の人には電動アシスト自転車

先日、約10km先の相模川と国道246号(ユーミンですね)が交わるあたりの公園に行ってきました。


行きは概ね下りで、途中1,2カ所ほどけっこうな上り坂があった程度です。1カ所だけ電源を入れて、あとは電源オフでタラタラと走っていきました。

現地に到着しても疲労もなく快調。タイヤとホイールを変えてから電源オフでの走行がとても楽になりました。軽く漕いで前に進むようになりました。ほかの方もレビューしてますが、自転車ってタイヤとホイールでとても特性がかわりますね。

さて、帰りです。往路でちょっと自信をつけたので帰りも電源オフに挑戦。行きと違ったコース(裏道コース)をナビに選ばせると、これが・・谷底の大通りを通らずに峠を越えるようなコース。

帰りはただでさえ概ね登りなのにこれはきつい。電源を入れてもきついような劇坂が1カ所・・それでさっさと「楽々コース」をナビで再探索させました。でも、往路で使った道は離れすぎたようです。でも楽な道にはなりました。でも基本的には登りです。

電源オフで長い坂をローギアーでタラタラと登っていくと、突然のように心臓がヒヤリと冷たく感じ「あ、これはやばいぞ・・」と坂の途中で運転中止をして道ばたで休憩。しばらく動けませんでした。

20分ほど休んで気持ちを引き締めて、電源入れて、パワーモードにして・・・おお!
スルスルとペダルに足の重さを載せる程度で坂を上っていきます。改めて電動アシスト自転車に感謝(それを作ってくれた人、認可した行政・・に感謝)

「らくちんだー、これなら帰れそうだなあ」

途中、こんな坂道がありました。歩道橋のような坂道ですね。米軍座間キャンプの近くです。


スルスルと登れました。ありがとうパワーモード。

見た目にはほんのわずかな登り坂でも心臓への負担はかなりあるようです。若い頃は心臓よりも先に脚が参ってしまいましたが、今は逆な私です

心肺機能がかんばしくないかたには電動アシスト自転車はおすすめです。
無理せずに下り以外では電源ONにして走りましょう。

ちなみに自転車に乗り出してから道の微妙な傾斜がわかるようになりました。見えるんです。うん十年、オートバイや車にのってるあいだに、微妙な傾斜など気にしませんから、傾斜も目にも映らなくなってたんだなあと思いました。

;現在の愛車です(パナソニック・ハリヤ改)


2011年9月29日木曜日

ブログ改造:関連記事のWidgetを使う

これから書きまーす  
関連記事のサイト

ブログ改造:Slimbox2で写真を表示させる

赤は追記です
 改造を終えて、記事も書き終えた後、写真の表示方法をblogger標準に戻してしまいました。理由は、写真が表示されるまでの時間が長くなった為です。
お払い箱になった改造ですが、やりたい方もいると思うので参考に残しておきます。
もっとも、私はほとんど全部、他の方の知恵を借りただけなんですが。

今回のブログ改造は、記事の中にある写真をクリックした時の動作の改造です。

bloggerの場合、記事の中の写真をクリックすると同じ窓(タブ)に写真が表示されます。
これfだと間違ってタブを消してしまうと元の記事に戻れなくなる公算が大です。そこで、写真の下に「戻る」ボタンがあればわかりやすいかと。

ブログに詳しい人に言わせると、Lightboxスタイルの表示方法でいいのかな・・
つまり・・・

1:記事内の写真をクリックすると同じ窓に写真が表示されるが、
2:記事に戻るときは写真の下にある「戻る」ボタンをおすようにする


要するに、こんな感じにしたかったのです。下の写真をクリックすると、右下に
"Close"と出るので、それをクリックすると記事に戻ってきますし、写真の外側の暗い部分をクリックしても戻ってきます。(既にできなくしてあります!

早速、いろいろ調べてると、Slimbox2というものを使えばできることがわかりました。

このブログには既に、Slimbox2を導入済みなので、上の写真をクリックすると Closeが表示されたわけです。インストールが終わると基本的には既存の記事中の写真にもSlimbox2は機能するようです。過去記事に対しては完全とはいいがたいらしいですが、そこまではまだよくわかりません。

さて、方法です。bloggerにどうやればいのか?さがしてみると、いいサイトを見つけました。(ここです) 記事に従って改造した所すんなりと目的が達成されました。slimbox2の作者さん、紹介してくれた作者さん(名前わかりませんでした)ありがとうございます。

簡単にまとめると

1:jQueryをblogger上で使用可能にしておく
2:Slimbox2をbloggerに設定する
3:目安として横1024ドット以上の大きな写真ファイルは1024以下のものに差し替える
(この理由は次に述べます)

の2(または3)段階となります。詳しくは下のサイトを御覧ください。

       BloggerにLightbox風エフェクトを導入して幸せになる・簡単導入編 


さて、上のサイトでも触れられてますが、Smilebox2には1つ困った点があります。
巨大な写真がアップされてる場合、Closeボタンが画面からはみ出し、スクロールバーを操作しても現れない点です。記事に戻るには、Ctlr-Cをおすしかありません。言われなければわからないかも・・・私は言われるまでわかりませんでした。

それで対策。
1:写真ファイルの表示の大きさをウインドーに自動的にあわせる(お・・スマート)
2:十分ちいさな写真ファイルに差し替える(う・・原始的)

今回は 1:を実現する技術がないので、2:にしました・・・ぐあああ

私はこれから小さなサイズにファイルを差し替える作業を始めます。・・では、ごきげんよう

追記:ファイルの差し替え作業を手動で終えました。でも、写真の表示方式を標準にもどしたのでファイルの差し替えは無駄に終わりました。まあ、勉強‥実験にはつきものです。


2011年9月28日水曜日

ブログ改造:リンク先を別窓で開く

今回のブログの改造は、「リンク先を別窓で開く」です。

bloggerの場合、写真を貼るとき、多のサイトなどへのリンクを貼るとき、「同じ窓で開くか別窓で開くか」を選択できません。必ず同じ窓で開かれてしまいますが、別窓で開いてほしいときもあります。(追記:新しいdynamic viewテンプレートでは別窓で開きました)

そこで、別窓で開く方法ですが、HTMLを直接編集する方法しかわかってません。ハイパーリンク(?)をフックして操作・・とか・・うーん・全然わからないので・・今回は、HTML
を毎回!編集する!という原始的な方法を述べてみます。
(記事のHTMLを表示‥編集する方法は「ここ」を参照ください)

記事をHTMLで表示させて調べてみると、写真も記事リンクも基本的には同じでした。HTML表現上は共に以下の構文から始まっています。

<a href="http://URL"

URLの部分は、具体的な例としては、
写真なら、       <a href="http://www.myspace.com/pic/tatami.jpg"
リンク先サイトなら  <a href="http://tatami2002.blogspot.com"
とか記述されているわけです。

それぞれ、URLのあとに、表示色だとか、いろんなオプションが続いているわけですが、
別窓で開きたい場合はURL以後は知らんぷり、そのままでいいので、ここでは無視します。

さて、方法ですが、URLの後に
target='_blank'
を挿入してやればそれでおしまいです。
<a href="http://URL" target='_blank' .......続きはそのまま手を付けない
となります。

上の例で言えば、
<a href="http://www.myspace.com/pic/tatami.jpg" target='_blank' ....続きはそのまま 
<a href="http://tatami2002.blogspot.com" target='_blank' .....続きはそのまま


となります。要するに、target='_blank' を挿入するだけです。(ちなみにHTMLではダブルクオテーション(")、シングルクオテーション(')、どっち使ってもいいみたいです。)

以下の写真とリンクは上を適用して別窓で開くサンプルです。
   




「要するにどうすればいいか? target='_blank'<a href="http://URL"の後に挿入すれば良い」


とわかったわけですが、それをどう実現するか?その具体的方法は様々だと思います。

知恵があれば、知識と技術があれば、処理したい全対象にたいして自動変換させられると思いますが、私はそういう知識と技術がないので・・原始的に1つ1つ指定、修正です・・シクシク(そのうち、事前指定、一括修正できるようになる日も来るでしょう)


では、例によって、これから過去記事のリンクを別窓で開く作業に入ります。
ごきげんよう