■HTMLソースのコメントを見つけ易くする小技■

  • 2017.08.29 Tuesday
  • 21:42

HTMLソースを書いていて、

(HTMLに限らず、CSSでも他の言語でも同じ要領ですが)

あとで解り易いようにコメントを入れる事がありますが、

探している箇所をスクロールさせながら見て行っても、見落としてしまったり見辛い事があります。

そういう事を軽減する小技があります。

 

単純に「■」「★」「〓」「▼」「▲」などの塗りつぶしの多い記号を入れておくという方法です。

例えば、

 

<!-- ここから始まる -->

<p>本文</p>

<!-- ここで終わり -->

 

と書くよりも、

 

<!-- ■ここから始まる〓 -->

<p>本文</p>

<!-- 〓ここで終わり■ -->

 

と書いた方が、膨大な記述の中からコメントを見つけ易いという事です。

また、組み合わせを考える事によって

ひと目で、始まりと終わりを見分けられるようにもできますから、

コメント自体を読まなくても大まかな構造の切り替わる位置を把握する事もできます。

 

入れ子になっている場合は、同じ文字を続けて「■■■」などとしておくと、

そこは「三階層目」なのだと解ります。

 

 

余談になりますが、

「■」は「しかく」、

「★」は「ほし」、

「〓」は「げた」、

「▼」「▲」は「さんかく」で大抵は変換できるはずです。

また、自分がよく使うマークが変換で出て来ないのであれば、

IME(日本語変換機能など)のユーザ辞書に登録しておくと便利です。

 

JUGEMテーマ:WEBデザイン:ホームページ制作

 


お気に召しましたら、一票(ワンクリック)下さい。ランキングに参加しておりますゆえ。


人気ブログランキング

ウェブデザインランキング

[このブログの「selected entries」「categories」へジャンプする]

HTMLソースのコメントを
より見易くする

  • 2017.08.30 Wednesday
  • 09:33

HTMLソースを書いていて、

(HTMLに限らず、CSSでも他の言語でも同じ要領ですが)

あとで解り易いようにコメントを入れる事がありますが、

探している箇所をスクロールさせながら見て行っても、見落としてしまったり見辛い事があります。

そういう事を軽減する小技があります。

 

例えば、HTMLソースの場合のコメントタグは

<!-- コメント -->

ですが、この「<!--」と「-->」の間には、空白、タブスペース、改行などが入っても構わないのです。

つまり、

 

<!-- 〓〓〓〓〓〓〓〓〓〓〓〓

   ここから始まる物語

     〓〓〓〓〓〓〓〓〓〓〓〓 --!>

 

などとすれば、記述全体からその部分が目立つので目に入り易く、見易くなります。

(但し、JUGEMのエディターなどでは、空白、タブスペースが勝手に詰まって消えてしまう仕様になっている)

 

また、「空白の美学」という考え方があって、

適度に空白を入れると、全体が美しく見えるというものですが、

敢えて空白行を1〜3行程度入れると全体が見易くなります。

細かい区切りでは、1行空白。

大きな区切りでは、2行まとめて空白行。

特別な区切りでは、3行まとめて空白行。などと意味を持たせるとより解りやすくなります。

(但し、JUGEMのエディターなどでは、空白行が勝手に詰まって消えてしまう仕様になっている)

 

CSSの場合は、「/*」と「*/」の間がコメントですね。

 

/*  〓〓〓〓〓〓〓〓〓〓〓〓

   今回はこの辺で。

    〓〓〓〓〓〓〓〓〓〓〓〓 */

 

JUGEMテーマ:WEBデザイン:ホームページ制作

 


お気に召しましたら、一票(ワンクリック)下さい。ランキングに参加しておりますゆえ。


人気ブログランキング

ウェブデザインランキング

[このブログの「selected entries」「categories」へジャンプする]

バイト容量単位変換計算器『BUC』をお披露目◆2017.10.08加筆

  • 2017.10.08 Sunday
  • 10:30

スペシャルサンクス:星野亜加里さん(ID:kiki_mimiyさん) at Yahoo!知恵袋

 

バイト容量単位変換計算器
Byte capacity Unit conversion Calculator

略して『BUC』をお披露目します。

   …まだ、βバージョンですけど。Σ(◉◇◉∪)汗

 

この計算器は、IT関連でよく使われる容量の単位の「バイト」に関する単位を変換するものです。

そもそも、私がこういうものを使いたくて少し探したのですが、

「TB」⇔「GB」とか、

「TiB」⇔「GiB」とかの変換は幾つも見つかったのですが、

「TB」⇔「TiB」の変換をしてくれるものが見当たらなかったので、

だったら、「Do It Yourself!」と言わんばかりに自分で作ってしまいました。

 

一応、これで完成だと思ってはいますが、

計算結果など、間違いや訂正箇所等があれば、ページ下部よりコメント下さい。

と、いう状態なので、まだ「βバージョン」と位置づけております。

 

しばらく運用して、問題ないようなら晴れてロールアウトという事で、

他の方のページに埋め込んでの使用を許可したいと思いますので、

今はまだ、無断でのインライン使用はお断りさせて頂きます。

このブログページへの直リンクは無断で自由にして頂いて構いません。

(要は、試運転中だという事を明瞭にしたい)

 

<現行で対応している単位の一覧>

略式表記 英語表記 片仮名表記 一つ下の単位での表記
b bit ビット
B Byte バイト 8bit
KB kilobyte キロバイト 1,000Byte
KiB kibibyte キビバイト 1,024Byte
MB megabyte メガバイト 1,000KB
MiB mebibyte メビバイト 1,024KiB
GB gigabyte ギガバイト 1,000MB
GiB gibibyte ギビバイト 1,024MiB
TB terabyte テラバイト 1,000GB
TiB tebibyte テビバイト 1,024GiB
PB petabyte ペタバイト 1,000TB
PiB pebibyte ペビバイト 1,024TiB

 

 

JUGEMテーマ:ITメモ

 


お気に召しましたら、一票(ワンクリック)下さい。ランキングに参加しておりますゆえ。


人気ブログランキング

インターネット・コンピュータランキング

[このブログの「selected entries」「categories」へジャンプする]

『池袋歌劇団』を有名にする方法について

  • 2017.10.09 Monday
  • 00:17

先日、『池袋歌劇団』という新しい歌劇団のネットライブ放送を見ました。

なかなか興味深いトークショーでした。

私としては、歌と劇を期待していたんですがー( º言º)

寸劇くらいやって欲しかったなー

生放送中に、コメントを送れるシステムになってて、リアルタイムに出演者のリアクションとか見れて楽しかったです。

私の声かけや、リクエストにも反応して下さって楽しかったですよ。

CONECT - SHOWROOM(ショールーム)

次回は、10月21日(土)の予定らしいです。時刻は同じ18:00からかしら?

オープニングムービーをインラインしておきます。

 

さて、このトークショーの中で

「私達の歌劇団を世の中に広めて行くにはどうすればいいか?」というような話があったと思いますが、

視聴者のアイデアも含めて五つくらいの案が挙りました。

その中で私が提案したアイデアを、ここでもう少し詳しく説明したいと思います。

 

そもそも、これは私のアイデアと言うより、古くから多くの人が実践して来た手法であり、他の事にも応用が利くと思います。

名称は解りませんが、要領を短く言うと

「連想ゲーム的に『○○繋がり』というキーワード的なものを利用して、既存の他の話題に乗っかって、誘導・宣伝する」という事です。

所謂、『口コミ』もこれに準ずる話だと思います。

 

もう少し具体的に説明します。

どれも、手間隙を掛けた活動になりますが、古来より地道な活動が実を結ぶ例は少なくありません。

例1:

『池袋』繋がりで、池袋の賑わっている話題を見つけてそこに行き(ネット上で可)、
相手の話題を見聞きする振りをしてさりげなく、
「私達もこの街(池袋)で歌劇団始めたんですよー」的な誘導から「良かったら見に来て下さいねー」という風に持って行くという事です。

例2:

『歌劇団』繋がりで、既存の有名な歌劇団を取り上げているブログ等に行き、

コメント欄に「私達もあんな風になりたいです!」とかいう具合にさりげなく誘導URLを貼り逃げする。

あっちこっち多数覗いて、投稿できる場所をひとつでも多く探す。

例えば、私のこのブログのこの今日のページがその一例になる。

(有名な歌劇団を取り上げてはいないが、『池袋歌劇団』を直球で取り上げている)

どうぞ、コメント欄に誘導・宣伝の投稿をしてやって下さい。

…まだ零細ブログだけどねっ。( ̄◇ ̄;)

例3:

『歌』繋がりを若干アレンジして、巷で話題の『アニソン』に関わるちょっとした企画をまずやる。

例えば、例のライブトークショーで「イントロクイズ」的な物をやる。

但し、『歌劇団』らしく答えなければ駄目。とかにルールを定める。

イントロを聞いて、早押しで回答者が答えるのだが、その時

(最初の8小節とか16小節とか予め決めておき)歌詞を間違えずにアカペラで歌えたら得点1ポイント。

サビまで歌い続けられたら2ポイント。

息也、二番以降の歌詞を間違えずに歌えたら3ポイント。

とかにして、何回戦か実施しその合計点で順位を競う。とか。

勿論、企画側が予め問題と回答の仕込みをしておかなくてはならない。

そしてこの企画を宣伝するのだが、

『アニソン』に関わるわけだから、Twitterのハッシュタグ「#アニソン」でツイートなどができる。

例4:

『劇』繋がりで、上記の例3を応用して、

例えば、例のライブトークショーで「イントロクイズ」的な物をやる。

但し、『ソロ寸劇』として答えなくてはならない。とかにルールを定める。

主題歌や挿入歌、エンディング曲のイントロを聞いて、早押しで回答者が答えるのだが、その時

回答者は、その物語の中からなるべく有名なワンシーンを選び、ソロで身振り手振り台詞を織り交ぜて『寸劇』をやる。

これを視聴者が評価し、「いいね」とか「ぱちぱち」とかのコメントを貰う。

その人数をポイントとして順位を競う。

視聴者全員にスルーされたら罰ゲームとかを用意しておく。

注意しなくてはならないのは、視聴者が解らないような問題やネタは敬遠した方が良いと言う事である。

そしてこの企画を宣伝するのだが、

『昼ドラ』に関わるなら、Twitterのハッシュタグ「#昼ドラ」でツイートなどができる。

『韓ドラ』に関わるなら、Twitterのハッシュタグ「#韓ドラ」でツイートなどができる。

という具合だ。

ジャンルを絞るのも興味深い。

例えば、『SF』『ファンタジー』『恋愛ドラマ』『洋画』『医療もの』など、流行りを追いかける。

『ハリーポッターシリーズ』『ディズニーもの』等とテーマをかなり絞るのもまた一興。

視聴者にその場でリアルタイムにテーマを貰うのも企画としては興味深いが、今日のお題目的には

事前に誘導が難しいので避けた方がいいかもしれない。

例5:

新興の歌劇団であれば当然、予算も限られているだろうから、

衣装やセット等の大道具、小道具などは、外注に出せずに自分達の手作りであろう。

であるならば、ここぞと言わんばかりに最近流行のDo It Yourself!『DIY』として、

あちこちで触れ回れば良い。

私のブログにも『DIY』に関わるページが幾つかあるので、

ページの内容に近しい話題の振りから入れるのであれば、その全てに誘導・宣伝の投稿をしてやって下さい。

単に、宣伝だけを投稿するのはNG。これはネチケットのひとつである。

その他:

「歌劇」とはちょっと遠くなるが、「他の事にも応用が利くと思います。」と謳っている記事なので

私が実践している物をあと三つほど紹介する。

  • 商品レビューのブログページを書いて、
    その概略をショップやメーカーのレビューに投稿して、自分のブログへ誘導する。
    実例:
    キッチン用アルコール除菌スプレー 400mL」商品レビュー
    この投稿者「傍観者A」というHNは、このブログ筆者と同一人物である。
    こういう誘導は、削除されてしまう事も多いのだが、
    これは上手く残っている一例。
  • 知恵袋などの相互コミュニティサイトに質問や回答を書き込み、無理無く自然に誘導する。
    実例:
    ほぼ完成しました。更に改善したいのでお願いします。
    この質問者「ID非公開さん」は文中で名乗っている通り、このブログ筆者そのものである。
  • Twitterアカウントを使い、フォロワーを増やしつつ、ブログ更新や概要のツイートをする。
    場合によってはbot(無人自動ツイートのシステムなど)も利用する。
    実例:
    ブリトンA
    このアカウントのプロフィールから直接リンクされてもいるが、このブログ筆者と同一人物である。
    なお、フォロワーを増やすのもまた、地道な活動が必要だが、
    例えば、他の人のツイートに関心を見せて「いいね」をしたり、リツイートや返信をする。
    「フォロー外からだから」などあまり気にしなくてもいい。
    いちいち挨拶からかしこまって入らないといけないような人は、そもそもお呼びではない。
    無節操に構ってもストーカーみたいになるので「加減」を考えながら「押し引き」をする。
    なお、100回構って、一人フォロワーになってくれれば良い率だと考えていた方が良い。
    ちょっとでも関心が持てるアカウントには、自分からフォローもどんどんして行くようにする。
    こちらは10人フォローすれば、二〜三人ほどはフォローバックしてフォロワーになってくれると思うが、
    そのうちの90%以上はbotや無意味な相互フォローな事が多いので、
    フォロワーの人数を額面通りに考えてはいけない。

 

他にも幾つも考えつくでしょうけど、

最も注意しなくてはならないのは、宣伝が前に出過ぎたり、宣伝だけをしていると

『スパム』と見られてしまうという事です。

あくまで、相手の話題や場のお題目に乗っかるのが先で、誘導・宣伝はあとがき程度にそっと「添える」だけの付け合わせになるようにするという事です。

良い例が、このブログのページでしょう。(と自負しているが)

一見、『池袋歌劇団』の話題を取り上げているが、

その実、本ブログの誘導・宣伝に繋がっているのです。

そして、僅かでも鋭い人は既にお気付きのように、私のこのブログは自己表現という側面だけではなく、

「広告収入を期待している」ものだという事です。

 

さてさて、

他にも、この『池袋歌劇団』を有名にする方法についてアイデアがある方は、メンバーに教えてあげて下さい。

 

 

敢えて、私は記事内に連絡先は書きませんから、

関係者、特にメンバーの方々は全員が連絡先とTwitterのアカウントなどを

ページ下部のコメント欄に書き逃げして行く事!!

(電話番号とか居所とかいう個人情報は避けて下さいね)

 

…ところで、「歌劇」と「ミュージカル」って違いはあるんでしょうか?

あるならその特徴は?

誰か教えて下さい。

はい!ちゃんと話も振っておきましたからねー!!

 

 

JUGEMテーマ:ミュージカル鑑賞

 


お気に召しましたら、一票(ワンクリック)下さい。ランキングに参加しておりますゆえ。


人気ブログランキング

[このブログの「selected entries」「categories」へジャンプする]

インラインフレーム内のコンテンツを縮小表示する

  • 2017.11.09 Thursday
  • 23:58

htmlを書いていて思うことがあります。

インラインフレーム内に入れ子にしたコンテンツを

「縮小してサムネイルのようにしたい」と。

 

ところが、これは一筋縄では行かなくて、

なかなか苦戦します。

デスクトップだけではなく、iPhoneなどのスマホにも対応しようと思うと大変。

そんな中、試行錯誤の末、

ひとつの着地点を見出したのでメモ。が今回のお題目。

 

<まえおき>

例によって例のごとく、筆者は何の責任も負わないのでそのつもりで。

 

<結果>

上のようになりました。

このインライン部分のソースの記述は、下のようになっています。

<div style="width:100%;overflow:scroll;-webkit-overflow-scrolling:touch;border:solid 1px;">
  <iframe height="600" name="sample" src="https://docs.google.com/spreadsheets/d/1GvSM8GOd1eFs6wXN2pzfF4k9v3Esxr5NILFkhEJBNcA/edit?usp=sharing" style="transform:scale(0.5);-moz-transform:scale(0.5);-webkit-transform:scale(0.5);-o-transform:scale(0.5);-ms-transform:scale(0.5);transform-origin:0 0;-moz-transform-origin:0 0;-webkit-transform-origin:0 0;-o-transform-origin:0 0;-ms-transform-origin:0 0;border:solid 1px;margin-bottom:-300px;margin-right:-100%;width:200%;">この部分はインラインフレームを使用しています。
  </iframe>
</div>

肝心なのは、

  • 紫色の文字:ググると多く散見される部分で、インラインフレーム内を「0.5」に縮小(つまり50%)し、起点を左上にする。iPhoneなども含めた多くのブラウザに対応するために各記述を並べる。
  • 緑色の文字:iPhoneなどでスクロールを可能にする。
  • iframeタグをdivタグで囲ってやる。
  • 赤色の文字:囲んだdivタグで、横幅を100%にしてやらないと、入れ子にするコンテンツが表示領域の横幅をはみ出る場合、右側に余白が生まれて意味のない横スクロールが発生する。
  • 青色の文字:iframeタグで縦を指定した数値の半分を、下部のマージンでマイナスしてやる事によって、余計な余白を消す。
  • 橙色の太文字:入れ子のコンテンツは元の50%に縮小しているので、元の倍の「200%」にしてやる事によって、内容は縮小されたまま表示領域の横幅一杯に表示される。そして、横幅「100%」を、右側のマージンでマイナスしてやる事によって、無駄な余白を消す。

という内容なのだけれど、

面倒ならコピペして変えたい部分だけ弄って理解すればよろし。

入れ子のコンテンツのURLは何でもいいので、見やすくグレーアウト。

他の要素は、見やすくするための隠し味。

 

以上。

お役に立てましたら、このページへチップをスローにて投げ銭をば。

最低金額は「10円」からできるようです。

 

 

 


お気に召しましたら、一票(ワンクリック)下さい。ランキングに参加しておりますゆえ。


人気ブログランキング

ウェブデザインランキング

[このブログの「selected entries」「categories」へジャンプする]

『DIY』のウェブリングを立ち上げた◆2018.01.20加筆

  • 2018.01.15 Monday
  • 19:09

先日、「ウェブリング」というものを利用して、

『DIYフリークの集い』というリングを立ち上げてみました。

 

このウェブリングというのは、

リンク集や相互リンクみたいなものですけど、

単純なリストではなくて、「輪」状になっているんですね。

どういう事なのかというと、

「前へ」「次へ」などというボタンがあり、

「次へ」をクリックすると、

登録の順番に次のサイトが開くシステムになっているのですが、

一番最後の登録サイトから「次へ」をクリックすると

一番先頭の登録サイトが開くようになっているんです。

「前へ」も同様に。

つまり、順番に見ていくと、ぐるっと一周して終わりがない「繋がり」なのです。

 

「前へ」「次へ」などというボタンは、

サイトオーナーが自作して設置するのですが、

私は、『DIYフリークの集い』向けにサンプルコードを幾つか用意しました。

あと、よくありそうな問答も合わせて、専用のページを用意しました。

ウェブリング『DIYフリークの集い』のQ&A

詳しくは、これ↑に書いてあります。

 

「前へ」「次へ」などというボタンは、

「ナビゲーション」と呼ばれるボタン群の一部です。

「ナビゲーション」の一例を下記に掲載します。

 

【ナビゲーション】


DIYフリークの集い
(ウェブリング)

前へ
アトリエ・トリガ
次へ
ランダムに飛ぶ
リンク一覧
参加を希望する
Q&A

↑こういう感じのものです。

これは、私が急ぎで作ったため、見た目は簡素ですが、

画力のある人が居れば、もっと見栄えのするボタンにしてくれてもいいのです。

そして、その画像とサンプルコードを

無料で開放して頂ければ、とてもありがたいです。

 

私は、ボタンの見栄えよりも、

静的な存在でしかないボタン群がイマイチ、訪問者の目を惹かないと思いましたので、

なんとか動的に、登録サイトの中からランダムで紹介できるようにしようと思い、

試行錯誤の上、なんとか作り上げたのが、

紹介する「インラインフレーム」と

紹介する「サムネール」です。

もうそれこそ「Do It Yourself !」の精神ですよ。

 

前出の「ウェブリング『DIYフリークの集い』のQ&A」に

一通り掲載してありますが、その中からここにも一つずつ貼っておきます。

 

【縮小してランダムで紹介するインラインフレーム1】


ウェブリング『DIYフリークの集い』の中から、ランダムでひとつ紹介します(ここと同じサイトが偶然表示される可能性もあります)。

※右クリックで「このフレームを新規ウインドウで開く」を選択すると、原寸大の表示になります。


↑縮小表示されて、登録サイトから一つランダムに表示されている筈です。

これを、ナビゲーションと並べて設置して頂くと、

そのサイトに訪れた人の目に、他のサイトが留まりやすくなると思います。

ただ、このインラインフレーム版は、

インラインフレームの中でそのサイトがそのまま機能しているので、

スクロールもリンクも動画も全て反映されているのですよ。

なので、中に開いたサイトによっては、ちょっと全体が重くなるんですね。

しかも、その中のサイトが更に、このインラインフレーム版を設置していると、

その中に入れ子になってしまうので、かなり重くなってしまいます。

 

そこで、慌てて「サムネール」方式の紹介ツールも作ったわけです。

それがこれ。

 

【ナビゲーション/縦長型1+サムネール190 ver2】


DIYフリークの集い
(ウェブリング)

前へ
このサイト名欄
次へ
ランダムに飛ぶ
リンク一覧
参加を希望する
Q&A

ランダムでサイトをひとつ紹介します。


こちらのサムネール版は、

登録サイトのスナップショットを表示しているだけなので、

比較的軽く済むのです。

ただ、そのサムネールを作成するために、外部ツールを使っています。

そのリクエストの一覧を私のjsファイル内に持っていて、

リングに本登録された事を確認したら、これを私が手動で更新します。

つまり、サムネールリンク(ナビゲーション)を設置して直ぐは、

貴方のサイトはサムネールに表示されない筈です。

それと、過去に表示されたことがないサイトが初めて表示されると、

サムネールが作られていないため(最初のリクエストがあって、それから作成される)、

正しく表示されません。

「Now Capturing」というメッセージの画像が出る筈です。

この画像が出ても、クリックして貴方のサイトが開かれるのであれば、

私のjsファイル内のリストには載っています。

サムネール画像が作成されるのにしばらく時間が掛かる事もあるようですから、

少し時間を空けてからもう一度ページのリロードを試してみて下さい。

一度正しく表示されれば、

二度目からは、キャッシュされているので直ぐに表示されると思います。

こちらのサムネール版は、

単なる画像なので、その中ではリンクやスクロールなどは機能しません。

が、サムネール画像をクリックすると、そのサイトが開くようになっています。

 

現在、登録サイトを大募集中なので、

審査が甘い内にどんどん申請してくれると嬉しいのですけど。(^_^;)ゞ

詳しくは、

前出のナビゲーションのボタンをクリックしてみて下さい。

 

 

 


お気に召しましたら、一票(ワンクリック)下さい。ランキングに参加しておりますゆえ。


人気ブログランキング

ウェブデザインランキング

 

[このブログの「selected entries」「categories」へジャンプする]

calendar

S M T W T F S
1234567
891011121314
15161718192021
22232425262728
2930     
<< April 2018 >>

カウンターなど


[このブログの「selected entries」「categories」へジャンプする]


[✓]

ユグドア」(YggDore)に登録済みです。
カンパやチップを大歓迎します!
要望等も受け付けてます。
(できる範囲が狭いが)

このページへチップを贈る



DIYフリークの集い
(ウェブリング)

前へ
このサイト名欄
次へ
ランダムに飛ぶ
リンク一覧
参加を希望する
Q&A

ランダムでサイトをひとつ紹介します。



Twitterも↓やってます

お勧めソフト、サービスなど

私がよく使うショップ

  ヨドバシ.com/ヨドバシカメラ  

  モノタロウ  

  Amazon.com  

  西友-SEIYUドットコム  

イオンショップ

私も「ビッグローブ光」に乗り換えました。↓


私も「mineo」に乗り換えました。
満足度調査でトップクラスらしい。↓



私も「Norton Internet Security」使ってます。↓

シマンテックストア




楽天モーションウィジェット
A8.net版

(あなたのご利用傾向から)





利用しているアフィリエイト


機能的かも↓


「西友 SEIYUドットコム」のアフィリエイトならここ↓


記事が少なくても審査に通りました。↓

リンクシェア アフィリエイト紹介プログラム

「住信SBIネット銀行」のアフィリエイトならここ↓

アフィリエイトのアクセストレード

誰もが知る楽天市場↓


なんでもござれのAmazon↓





試用スペース

試しに貼ってみた

↓ローテーションバナー(無作為)






ここまで試用スペース



selected entries

categories

archives

recent comment

recommend

links

profile

search this site.

others

mobile

qrcode

powered

無料ブログ作成サービス JUGEM