ページソースの見方って?

 先日TeraPadをネタにしましたのでついでにもうひとつ。

 アフィリエイトしている方、よく言われませんか?
 「上位表示ページのソースを分析しろ」と。
 あれ何か悪いことしてるみたいでドキドキしますよねーv
 スケベな私はCSSまで開きます(笑)

 で、肝心のソースの表示、できますか?
 ソースを見たい画面の上で右クリックすると
 メニューが開きますので、そこから
 「ソースの表示」っての開けばテキスト形式で表示されます。

 試しにここのソース開いてみてください。
 これがウチのHTMLソースです。いやんv

 ですがなかなか生意気なページがあるのです。
 このリンク、別窓で開きますのでちょっと開いてください。
 そんでソースを表示してみてください。
 文字化けてると思います。

 これはエンコードの具合なのですが、FC2は基本的に
 EUCコードを使うんです。
 これだとメモ帳では日本語部分が文字化けしちゃうんですよ。
 ちなみにこのSeesaaはShift-JISです。
 はっきり言ってハタ迷惑なEUCですが、ブログって
 意外とEUCのところが多いんですよ〜。

 さて、ここでTeraPadの出番です。
 ただ、TeraPadだけではソースは見られませんので
 ソフトをダウンロードします。
 AddReg Ver.1.3(無料)

 ちなみにTeraPadのダウンロードはこちら。

 私が説明するよりReadme.txtを見たほうが安全ですので
 インストールについては割愛しますが
 これを使うとTeraPadでソースが開けるようになります。
 そうすると、あらら素敵v
 EUCだろうがJISだろうがUTFだろうが
 ちゃんと文字化けせずに表示されるようになります。

 まあ、同人サイト運営にはあんまり関係ないですがね。

 ついでにひとつ覚えておいて欲しいのですが
 ページソースをそのままコピーして自分のサイトで使うのは
 小説やイラストを盗作しているのと同じです。
 一応これにも著作権があるらしいです。お気を付けを。
 もちろんテンプレートなど配布しているものは大丈夫です。

olタグ

 前回、TeraPadで目次を作る作業をしたわけですが
 本当にすみません。
 書いている途中で「あっ!」と思ったのですが
 なにせテーマをTeraPadの矩形選択にしてしまったので
 そのまんま貫いてしまいました(笑)
 あれ、タグでもっと簡単にできます。

 リストタグというと一般的なのは
 <ul><li></li></ul>

 これなんですが、このタグを使うと行頭に「・」が付きます。

  • 烈火

  • 金剛

  • 水滸

  • 天空

  • 光輪


 こんな具合ですね。
ソース:

<ul><li>烈火</li>
<li>金剛</li>
<li>水滸</li>
<li>天空</li>
<li>光輪</li></ul>

 この<ul></ul>部分を
 <ol></ol>
 に替えると、頭の部分が数字になります。

  1. 烈火

  2. 金剛

  3. 水滸

  4. 天空

  5. 光輪


ソース:

<ol><li>烈火</li>
<li>金剛</li>
<li>水滸</li>
<li>天空</li>
<li>光輪</li></ol>


 だからつまりね、あんなややこしいことしなくても
 このタグを使って書き足したい部分を容赦なく付け足して
 <li></li>でくくってあげりゃよかったのです。
 あー、バカだー。今まで何を苦労していたんだ私ゃ。

 というわけで携帯サイトの表作りに苦労していたかた
 お試しくださいませ。

 まあ、これだと「p1」「1ページ」とかにはできないので
 親切にしたい人は前回のTeraPadの記事をご参考に。

 ただ、個人的な考えでは、携帯ブラウザは横幅が非常に狭いので
 できるだけ文字数は少なくしておいた方が
 体裁よく表示されるんじゃないかななどと思ってみたり。

TeraPad

 便利便利と聞きつつ、いまひとつ使いこなせませんTeraPad。
 Helpなんかもものすごく親切に書いてくれているんですが…
 おそらくメモ帳に慣れすぎたのでしょうね。
 ダウンロードしたままずっと放置してました;
 今からサイトを作ろうと言う方で、ビルダーなどの
 HP作成ソフトを使わず、無料でやるのでしたら
 とにかく一番にダウンロードして
 TeraPadで慣れた方がいいです。絶対。

 TeraPadダウンロードページ(無料)

 使いこなせない私はいたずらに開いては首を傾げる日々ですが
 今日は珍しく「テラちゃんえらい〜!」と感激したので
 ちょっとネタにしてみました☆


 いつだかのチャットログ編集と同様、普通そんなことしないだろ
 と言われそうなネタなんですが・・・

 私は携帯サイトも持っているんですが、携帯ブラウザって
 基本的に表タグが使えないんです。
<table><tr><td></td></tr></table>というようなやつですね。
 改行とTabで表現しないといけないのです。
 あ、ちなみにサイトはforestで作っています。

 目次が必要なページがあるのですが
 ユーザリビティの関係上、毎回項目を全てずらして作るのです。

 p1 機動戦士真田
 p2 ポケットの中の征士
 p3 第08MS秀ちゃん
 p4 0083 STARDUST TOUMA

     ↓
 p1 逆襲の毛利
 p2 機動戦士真田
 p3 ポケットの中の征士
 p4 第08MS秀ちゃん
 p5 0083 STARDUST TOUMA


 こんな具合ですね。タイトルは気にしてはいけません。

 あっ、今ものすごくイヤなことに気が付いた。
 タグを知っている方は「こいつバカだ」と
 思っているに違いありません。
 まあいいや。それは次に書きます。

 話を戻しますと、例では5項目だけですから
 ひとつずつ数字を書き直しても大して苦労はありません。
 が、ウチの場合これが50項目あるのです。
 それで今まではエクセルを使ってセルを挿入して
 作品名部分をずらすという戦法を使っていたのです。
 この記事の応用です。

 ですがエクセルって何ですのアレ。
 サイズはでかいし開くのに時間は掛かるしすぐ固まるし
 あんまり好きじゃないんですよねぇ。
 こういう表をいっぱい抱えているので、エクセル重い重い。

 そこにようやく今回の主役の出番です。

 まあとりあえずこのリストはできているものとして
 さっそく編集してみます。

 まずはTeraPadにこのリストをペーストします。
s-tera1.jpg
 その後、[Alt]キーを押しながら、作品部分だけを
 縦(というか斜め下?)に向かってドラッグします。
 するとおおお!p1,p2…というのを無視して
 縦方向に選択できちゃっているのです。すごーい!

 選択したら切り取りして、一段ずらしたところで貼り付け。
 これまたエクセルでセルを挿入したように
 p1,p2…を崩すことなく貼り付けられるのです。すごーい!
 あとは空いたところに新しい作品名を挿入し、一番下に
 新ページ数を入れれば終わりです。楽ちーん!

 使わないようでいて意外と使うんじゃないか
 とか思うのは私だけー?

 しかし書きながら思いましたが、この作業に限ってだけ言えば
 タグでもっと簡単にできます;
 これも普通にタグ打つかたには関係ない話ですが
 私みたいな人がいると可哀想なので次回に書きます(笑)

 エクセル重い重いと叫びましたが、これだったらわざわざ
 保存なんかしなくても、編集のときに直接ブラウザ画面から
 コピペしてTeraPadに落とせばいいわけですし
 一応のために保存したとしてもめちゃめちゃ軽いです。

 エクセル  ⇒32.0KB
 txtファイル ⇒787バイト

 桁違い(笑)

 メモ帳形式で保存したとしても、ショートカットに
 ファイルアイコンをぶち込めばTeraPadで開きますので大丈夫♪

 あー、Tera、使いこなせたら便利なんだろうなぁ。

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。