2009年5月31日日曜日

広告の無いホスティング環境が欲しい

先日書いたPHP ページ内画像一括zip圧縮DLで、インラインフレームで埋め込んだページは「land.to」というホスティング(レンタルサーバ)サービスを利用しています。
PHPもCGIもMySQLも使える無料のホスティングサービスであることから、授業でも多用しています。

が、land.toではあくどいほどのドデカイ広告がページ上下に付加されます。
まぁ、無料ホスティングサービスなので当然っちゃ当然なのですが。
去年の夏ぐらいまでは、管理者だけのページに使用可能の広告付加を除外する方法もあったのですが、現在の新規登録者はそれを付加しても効果がありません。
要するに、全ページ広告付きまくり。
これじゃあ、先日のあれみたいな一発モノは全くありがたみが無い状態です。まだ表示が大きいページなら気にはならないのですが。

と言うことで、少し探してみたいと思います。
目標は今後のことも考えて、「無料・広告無し・PHP使用可・CGI使用可・MySQL使用可」を条件とします。
・・・ないかなー、そんなにおいしいホスティングサービス。

スーパーマリオの帽子 届きました

ようやく届きました、半年以上かけての発送です。
企画としてはクラブニンテンドーのものです。
クラブニンテンドーは、任天堂のゲームを買った時に付いているシリアルナンバーを元にポイントを発行し、そのポイントに応じてグッズと交換出来るというシステムです。
「スーパーマリオの帽子」は、貯めたポイントと交換するのではなく、ランクに応じてもらえるグッズです。
ランクとは、定められた年度内に貯めたポイントに沿って「一般」「ゴールド」「プラチナ」と与えられるもので、「スーパーマリオの帽子」は2008年度のプラチナ会員へのプレゼントグッズというわけです。


あまりつらつらと説明してもあれなので、以下に「スーパーマリオの帽子」の画像をば。


届いた箱の中にはきちんとビニールに包まれて入っていました。
いつものよくある添え状も同封です。


帽子の取り扱い注意書も入っていました。
帽子としての実用性はほぼ無いようです。
iPhoneから撮ったのでボケてますね、ピントが合わせられないというかマクロ機能がないので仕方ないです。


取り出して手で持ってみました。
ビニールに包まれている時は「浅い帽子だなぁ」と思いましたが、実際に手に持ってみるとそうでもないです。
でも、被ってみたらやっぱり浅かったです。
頭が大きいからなのか小さめに作ってあるからなのか分かりませんが、頭にぴっちりフィットしますね。


帽子コレクションにかぶせてみました。
やはり一つだけ浮いてます、当然ですが。

実際にかぶる機会は少ないので、ビニールに入れたまま飾っておくことにします。
帽子の材質上、そのままにしておくとホコリが集まりそうですし。

2009年5月29日金曜日

PHP ページ内画像一括zip圧縮DL

お友達の胡瓜メモ帳: phpでURLから画像を一括ダウンロード・改とほぼ同じですが、こちらも授業で作成したのでメモ。
これだけの作業がグッとされると気分が良いですし、まるごとダウンロードって言うのがなかなかおいしい気がします。
まぁ、取るつもりの無かったものまで付加されますが。

作成するにあたっての参考ページは以下です。
PHP で zip 圧縮
ここにあるように、「phpMyAdmin」内のzip圧縮用ライブラリとダウンロードライブラリを使用しています。


こちらが現物です。

IEの場合は自動でテキストボックスまで移動されますが、他のブラウザでは広告が表示されると思います。
そのままどうぞスクロールしてみてください。
画像を一括ダウンロードしたいサイトのアドレスをそのままテキストボックスへ入れて「送信」すると、少しレスポンスは悪いですが「img[年月日_時分秒].zip」がダウンロードできます。
解凍するとサイトにある画像が全部入っているはずです。


以下はソースになりますので、見たい人だけどうぞ。
▼続きを読む/たたむ

2009年5月28日木曜日

IE6以前でのエラー発生 無事解決です

なぜか、と聞かれると正直わかりません。
ただ、何事も無かったかのように正常に使えているので解決メモ。


まず、前回での「Syntax error」が気になったので「showhide.js」を見てみました。
エラーでは8行目と出ていたので参照するとコメント行です。
function showHide(targetID) { //functionの宣言。受けとったIDは変数targetIDに格納。
        if( document.getElementById(targetID)) { //指定のIDのついたオブジェクトがあったら処理する
                //指定されたIDのstyle.displayがnoneなら
                if( document.getElementById(targetID).style.display == "none") {
                    //blockに変更する
                    document.getElementById(targetID).style.display = "block";
                } else { //noneでなければ、つまりblockなら
                    //noneにする
                    document.getElementById(targetID).style.display = "none";
                }
        }
}
JavaScriptではコメントのみの行がダメなのか?と思ったのですが、それならむしろ3行目の時点でエラーが発生しているはずです。 そもそもインラインフレームで呼び出しているものが使用出来ているので、コメントには問題が内容に思えるのですが・・・。 とりあえず怪しげなので、コメント行を全て削除してみました。 するといけたんですね、これが。 うーん、わからない。 もしコメント行手前に全角スペースが入っていたとしたら、インラインフレーム側でもエラーが発生するわけですもんね。 まぁとりあえず、きちんと動作しているようなので良しとします。 このまま使えないのは、学校でも見られないのと同等ですから。

2009年5月27日水曜日

IE6以前でのエラー発生

※追記:無事解決しました。
   →IE6以前でのエラー発生 無事解決です

先日の「続きを読む」風JavaScriptからIE6以前でのエラー発生について未だに解決出来ていませんが、今確認できていることをメモとして。


1, showhide.jsをロードしなければエラーが発生しない。
2, JS自体は使用出来る(インラインフレーム内では使用出来ている点より明らか)。
3, なぜか毎回ページロード時「Syntax error」が発生する。

 →JS呼び出しの記述がおかしい?
 →BloggerではこのJSが、何らかの理由で使用出来ない?

4, 他のJSは使用出来ている(SyntaxHighlighterが使用出来ているので)。
5, Seesaaのファイル置き場が悪いわけではない(3,と同じ+別サーバで試しても無理)。
 →外部サーバに.jsファイルを置いているのは問題ではない。


んー、正直何が何だかわからないです。
一番強い要因としてはやはり「Blogger」だからだとは思うのですが。
あと、一番のヒントは「Syntax error」でしょうね。
僕は「メモ帳」と言う意味で、あまり問題は無いのですが、他人が見る可能性とプログラマであることを含めて考えるとやはり解決しておくべきですし、こういう「エラー対処」も一つの勉強になり得ますので、いずれは解決しようと思います。
でも、あんまり時間をガチガチに使ってもなぁ、と思うので途中で放り投げるかも・・・。

今のところIE7以上では使用出来るので、この問題を解決するまではIE7での閲覧を推奨します。

ちなみに、IEのテストで使用しているのは「IETester」というソフトです。
My DebugBar | IETester / HomePage
ソフトの解説はまた後日。

2009年5月23日土曜日

「続きを読む」タグ生成JavaScript

一つ前の投稿で使えるようにした「続きを読む」を、すぐにブログで使用出来るように簡易リンクタグ生成JavaScriptと同じようにJSを作成しました。
完全に自分用なので、他の人が見ても全く意味が無いかもしれません。

※以前同様、今回もIEでしか使用出来ません(Sleipnirも使用可能)。
以下がソースとなります(実際には1行で処理を行います)。
javascript:
var date=new Date();
window.clipboardData.setData('Text','<a href="#" onclick="showHide(\'sh'+date.getTime()+'\');return false;">&#9660;続きを読む/たたむ</a>\n<div id="sh'+date.getTime()+'" style="display: none"></div>\n');
window.status='◆「続きを読む」をクリップボードへコピーしました。';
void(0);
軽く解説。 「続きを読む」範囲に付けるIDは、ブログページ内で被ってしまうとそこまで処理が通ってしまって困るので、絶対に被らないようにしました。 2行目で「Date」オブジェクトを作り、3行目「date.getTime()」で、被らない数字を生成します。 詳しいことは以下のリファレンスで。 getTime/JavaScriptリファレンス あとはそのままソースを書き上げるだけです。

「続きを読む」風JavaScript

追記:どうもIE6ではJSエラーが発生するようです。
   現在問題調査中。
さらに追記:無事解決しました。
   →IE6以前でのエラー発生 無事解決です

他のブログサイトではよくある「続きを読む」機能。
あまりにも長い記事にはこの機能を用い、ページを無駄に使わない効果がありますが、実はこのBloggerには「続きを読む」機能がありません。
なので、あくまでも「続きを読む」なJavaScriptを作成しました。

今回の処理は、簡単に言えば「消している」だけなので、画面ロード時に全て取得しています。
他のブログのような「続きを読む」機能とは(おそらく)処理が違うことを先に断っておきます。

完成品としては、以下のようになります。


今回参考にさせていただいたサイトはこちらです。
JAVAscriptコレクション・文章を折りたたんだり表示したり

SyntaxHighlighter リンク変更の時と同じように、ほるめすメモ帳inSeesaaにhtmとjsを置いて使用しています。

以下が作成したソースです。 ▼続きを読む/たたむ

Amazonプライム が素晴らしい

Amazon.co.jpは、GIGAZINEと同じように昔っからよく使ってるショッピングサイトです。
本来のサイトとしては、楽天市場などのようなお店の集合体ではなくむしろYahoo!ショッピングのような、ネット上の1店舗の扱いで始まりました。
今は他のショップから流れ込んではきてますけどね。

んで。
1年以上前からAmazonプライムの存在はあったのですが、使用はしてませんでした。
Amazon.co.jp: ヘルプ > 各種サービス > Amazonプライム
どういうものかというと、年会費3,900円を払っておけば、送料(1,500円以上購入でも)無料に加え、「お急ぎ便」が使用出来る様になるというもの。
この「お急ぎ便」というのが素晴らしいということです。

このサービスが始まった時は、まだ関東のみでのことだったので、指を咥えてうらやましがってました。
いつの間にか全国対象になっていて、かつ「初めの1ヶ月は無料体験」であることが試してみるきっかけとなりましたね。
東京ではどうか分かりませんが大阪の場合は、毎日16時までに注文すれば翌々日に到着します(月曜日ならば水曜日)。
しかも朝10時に届きます、佐川さん頑張りすぎです。
今まで3日掛かってたものが1日短縮されるだけでもかなり差がありますからね、これはすごい。

ただ問題としては、それほどAmazonを多用しないという点ですね。
大阪人的な考え方をすると「元が取れるかどうか」。
「お急ぎ便」は1回350円なので、12回使えば元が取れることになります。
結構いいサービスですが、使わなかったら意味ないですよね。

無料体験中に考えておかないと、自動で有料に切り替わるらしいので注意しないと・・・。

2009年5月20日水曜日

PCドライバ バックアップ

いつも最先端の情報を手に入れるっていうのは、生きていく上でとても役立つことだと思ってます。
とりあえず昔(って言っても2年ほど前)からPCを起動した際には、情報収集のために毎日決まって見るサイトがあります。
その一つに「GIGAZINE(ギガジン)」と言うサイトがあります。
いやもう、ホントこのサイトには何度もお世話になってますね。
コンピュータ関連だけでなく、幅広い情報が書かれているのも便利で楽しいです。

今日も眺めてると、いいソフトの紹介があったのでメモ。
Windowsのドライバを全部一気にバックアップできるフリーソフト「Driver Magician Lite」 - GIGAZINE

学生でかつMicrosoftのソフトウェアが好きに使える環境上、OSの再インストールなどは学校だけでなく家でも時々行います。
その時に面倒な事が色々とありますね、自分の好きなように使いこなせるOSになるためには。
 ・ソフト以外のデータのバックアップ
  音楽とか画像とか書類とか・・・
 ・入れてあるソフトウェアのリスト/バックアップ
 ・そのソフトウェアの設定のリスト/バックアップ
 ・入ってるドライバのリスト/バックアップ
 ・OSの細かい設定
などなど、今のPCを使えば使うほど変えたく無くなります。
その1つを解消してくれるのが上記リンクのようなのドライババックアップです。

インストールはGIGAZINEで上がってるのでそのまますればOK。
実際に使ってみましたが、ドライバを丸ごと全て取り出してくれます。
Vistaの場合は、ドライバを当てる際は自動でサブフォルダ内も参照してくれるので、このままで圧縮して置いておけばすぐ使えますね。
XPはサブフォルダを参照出来ないので、名前から判断して当てないといけないですけど。

学校でも結構ドライバ探しで苦労するので、あらかじめマシンから抽出しといたら楽になりますね。
他にもソフトがありますが、「軽い」「シンプル」「無料」という点においてはこのソフト、かなり使えるやつです。

就職活動について

本当は明日にある会社の一次面接が入っていたんですが、以前から少し体調が優れないことと新型インフルエンザの事もあるので、延期させていたく事になりました。

んで。
その一次面接の時に持って行くはずだった成績証明書を、先に送っておいたほうが良いのではという先生からのお達しがあったので書きました。
それを書く時に参考にするものを探していて、良いサイトがあったのでここにメモとして書いておきます。

リアル就職活動

まぁ、就職活動に関して、このサイトが全て真実かと言うとそれは無いと思いますが、一つの考え方というか就職活動を行う上で見ておいて損はしないですね。
特に、モチベーションを保つという点において非常に参考になることが書かれているので、ふと必要になった時に見ると良いと思いますね。

2009年5月19日火曜日

インラインフレームテスト

昨日、Seesaaブログのほうでは使用出来るのを確認しましたが、こっちではまだ確認していないのでテストです。
と言っても、普通のHTMLタグなので普通にいけるとは思うのですが。

ちなみに、以下のサイトで簡単に作る事ができます。
Web便利ツール/インラインフレーム作成ツール - TAG index Webサイト



使用出来ました。

SyntaxHighlighter リンク変更

ふとブログを見返してみると、どう見てもSyntaxHighlighterが効いていないのに気付きました。
びっくりして原因を探ってみると、どうやらホスティング先のサーバが使えないようです。
一時的なものなのか、はたまたもう復活しないのかわからないのですが、そのまま放っておくのも嫌なので、ホスティングをやめてこちらでアップロードしたものを参照するようにしました。

と言っても、Bloggerは画像以外のファイルはアップロード出来ません。
なので、さっき作ったばっかりのSeesaaの領域を借りることにします。
使用していたSyntaxHighlighterのバージョンは「2.0.296」なので、以下から拝借しました。
SyntaxHighlighter for Movable Type

今はまだ必要な分しか入れていないので、必要になり次第随時入れていくようにします。

※追記
変更に伴い、以下のページを書き換えました。
ほるめすメモ帳inBlogger: SyntaxHighlighter 設定資料

※さらに追記
ホスティング先のサーバが復活したようです。

2009年5月18日月曜日

胡瓜メモ帳

1つ前の記事でSeesaaを勧めたお友達のブログです。

胡瓜メモ帳

PCゲーム「東方緋想天」のマッチングサイトを作ったり、他に今までに作ったものを載せていっているようです。
これからの発展もありそうなので、時々見ていきますね。

Seesaaブログ 作ってみました

数年前のブログブーム以来、世界中に数々のブログサービスが作られました。
今までにいくつか作ったことがあります。
このBloggerもその1つで、たまたま作って自分の好きなように書き換えて、好きなように記事を書いています。

んで。
お友達が自分のまとめ用のブログを求めていたのですが、あえてBloggerは勧めずSeesaaを勧めてみました。
理由は多々ありますが、学校の先生も使っていてかつ使いやすい様に改造していることもあるので、将来性があるかなという意味合いで勧めました。

ということで、自分も使用テスト。
こんな感じになります。
ほるめすメモ帳inSeesaa

インラインフレームも使えました。
って、こっちでインラインフレーム試してないなぁ、あとでやってみよう。

平行線がありました

フツーにCSS内で見えないようにされているだけでした。
なので、そのCSSをそのままコメントアウト、その後<hr>挿入。

ね、簡単でしょ? 昨日の平行線作る前に気付けば良かったのになぁ、もう必要無いよあれは。 でも、なんで消されてたんだろうか。 ページ表示に関わるならわかるけど、表示したからってそんなに崩れはしないんだけど。

流行警戒宣言

なんともまぁ、来る時がきてしまいました。
大阪府の「流行警戒宣言」発令につき、大阪府下の中学校及び高校が全て休校です。
それに伴って、うちの専門学校も1週間の休校、嬉しいやら悲しいやら。

だって休校分他の休みが削れる事になるんだもんなぁ、当然。
ついでに1年生はUSJへの遠足も延期だし、踏んだり蹴ったりでしょ。

兵庫県から始まって大阪府まで伸びてきて、その流れ通りにマスクも無くなっているようです。
Amazonでももう少なくなってるんですよね、あと予備が4枚しかないです。
とりあえず、家を出る回数を極力減らすしかないですね。

2009年5月17日日曜日

簡易平行線作成

※この投稿はもう存在する意義を無くしました。
このテンプレートに変えてから<hr>がなぜか使えなかったので、簡易的な平行線を作成しました。
と言っても、<hr>を入れても全く反応が無いので、<div>を使って作ります。
先日の平行線と同じような感じですね。

この1つ前の記事でもテストで差し込みました。
以下のようなものになります。


以下が投稿作成時に差し込むタグです。
<div id="horizon" ></div>

そして、以下がテンプレートに書き加えたCSSです。
/* 水平線 */
#horizon {
  width: 200px;
  height: 2px;
  margin-left: 1em;
  background-color:#204063;
}
本当は記事内中央に置きたかったのですが、それをするには大枠までいじらないといけないので、仕方なく「margin-left: 1em;」で置いています。 「1em」は1文字分という意味です。 水平線挿入用のJavaScriptも作らねば・・・。

GENOウイルスがヤバいらしい

現実世界では、豚から始まる新インフルエンザが広まって、学校閉鎖やマスクの完売などが起こっているみたいですが、電脳世界でもひと味違うウイルスが流行っているようです。
その名も「GENOウイルス」。その他に流れているウイルスとは違い、かなりの厄介者のようです。

詳しくは以下を参照してください。
GENOウイルスまとめ - トップページ
GENOウィルス・何をすれば良いか分からない人のまとめ - トップページ


上記サイトを参考にウイルスチェックを行いました。 このブログ及び僕のPCには感染はしていませんでした。 ただ、上記サイトを見て分かるとおり、感染してしまうとOS再インストールしか手が出せない凶悪なウイルスであるとともに、感染サイトを開くだけで感染してしまうという広域な視野を持つウイルスである以上、あまりに安心しすぎると大変な事になりそうです。 まずは自分のPCからウィルスチェックを。そしてサイトを持っている人はサイトのウイルスチェックを。 学校でも気をつけるように言うべきですね。特に僕らの部屋の授業は、大きなサイト1つが大きく関わっていますから。

2009年5月13日水曜日

Oracle Databaseに無料版があるらしい

ふと学校での他の人の話が聞こえたのを思い出したので検索してみると以下のような記事がありました。
無料で使える「Oracle Database XE」をインストール - builder by ZDNet Japan
「Express Edition」というのがなんか開発用語っぽくておいしい気分になりますが、「勉強に使う」という点ではほぼ問題はなさそうです。

上の記事に沿って進めるだけでVista上でも動きそうなのでインストールしてみます。
むしろ記事ですでにVistaを使ってるんですから、こういった記事を書く人でも「嫌が応でも」使用せざるを得ないんですかね。


僕があまりにも時代について行けていないせいで、世間で言う「Oracle」は圧倒的に11gに変貌していました。
おかげで上記事のようにダウンロードしようとしてもリンクがもう11gのものなので、素直にGoogleで検索した方が速いですね。

この検索結果のトップからダウンロード可能です。
oracle 10g express edition download - Google 検索

追記
インストール完了しました。
PC起動毎に、「OracleServiceXE」「OracleXETNSListener」のサービスが起動するので、要らない場合は手動にするといいでしょう。

2009年5月12日火曜日

VistaでMySQL

追記:「続きを読む」処理をしました。

とりあえず、きちんとインストーラからインストールしてみました。

授業ではもうすでにスキーマを作成したデータを全員で使用したので、
インストールというよりかは「配置した」状態です。が、それをそのままVistaでやろうとするとエラーを吐いた、というわけです。

今回インストールする際には以下のサイトを参考にさせていただきました。正しく言うならば、まるまるこちらと同じ事をしました。
Windows VistaにおけるMySQL

以下、スクリーンショット付インストール手順です。
▼続きを読む/たたむ

2009年5月10日日曜日

簡易リンクタグ生成JavaScript

※このJavaScriptはIEでしか使用出来ません(Sleipnirも使用可能)。

ブログ記事作成する時の機能として「リンクタグを挿入」があります。
ダイアログにアドレスを入れるだけでリンクタグを入れてくれるので便利は便利なのですが、通常でターゲットを指定してくれないので自分で「target="_blank"」と入れるのが面倒です。
なので、JavaScriptで「target="_blank"」を含めたリンクタグを生成するコードを作りました。

実際には、アドレスバーにJavaScriptを打ち込み実行するカタチになります。
以下がそのコードです。
javascript:
window.clipboardData.setData('Text','<a href="'+document.URL+'" target="_blank">'+document.title+'</a>');
window.status='◆リンクタグをクリップボードへコピーしました。';
void(0);
このコードは4行で書かれていますが、アドレスバーに入れて実行するので、改行を除いて1行にする必要があります。 それ以前に、リンクタグを取得するたびにアドレスバーにコードを入れるのは面倒なので、ブラウザの「お気に入り」に登録します。 簡易リンクタグ生成JS IEでは右クリックから「お気に入りに追加」で登録できます。 なお、ページ名に「'」や「"」などが入ると実行出来ない場合があります。あくまでも「簡易」ですので、ご了承下さい。

2009年5月9日土曜日

投稿日付サイズ変更

この間には平行線を綺麗にしましたが、日付が相変わらず小さいままだったのでテンプレート内を検索してサイズ変更しました。

h2.date-header {
  margin: 0;
  padding-top: 0;
  padding-$endSide: 0;
  padding-bottom: 0;
  padding-$startSide: 29px;
  text-transform: uppercase;
  color: $dateHeaderColor;
  background: url(http://www.blogblog.com/thisaway_blue/icon_date.gif) no-repeat 13px 0;
  font-size: 80%;
  font-weight: normal;
}
以下のように書き換えました。
h2.date-header {
  margin: 0;
  padding-top: 0;
  padding-$endSide: 0;
  padding-bottom: 0;
  padding-$startSide: 29px;
  text-transform: uppercase;
  color: $dateHeaderColor;
  background: url(http://www.blogblog.com/thisaway_blue/icon_date.gif) no-repeat 13px 0;
  font-size: 100%;
  font-weight: bold;
}

VistaでPHP - AN HTTPD Server

追記:「続きを読む」処理をしました。

前回はIIS7.0について書いたので、今回はAN HTTPD Server(以下HTTPD)です。
こちらは、去年度の学校の課題でFlexとPHPを触る時に必要だったので、すでに使用済です。
使用するレベルにもよると思いますが動作はしています。

前回はこちら。
ほるめすメモ帳inBlogger: VistaでPHP - IIS7.0

公式のページはこちらです。
AN HTTPD Home Page
なお、使用しているバージョンは最新の「1.42p」です。
PHPはもうインストール済のテイで進めます。

以下、スクリーンショット付設定手順です。
▼続きを読む/たたむ

2009年5月8日金曜日

VistaでPHP - IIS7.0

追記:「続きを読む」処理をしました。

今日の授業の中で、「VistaのIISでPHPが動かない」云々の話がありました。
その過程で以下の内容が生まれたのですが。
Vistaで動く簡単なWEBサーバ - SQLの窓と銀プログラマ

うちもVistaを使っています、もう1年半前からですね。
それ以前はXPを使っていましたし、学校でも使えるので両方ある程度は触れます。

で、本題のPHP。
上記事内ではIIS7.0・AN HTTPD Server共に使えないとありますが、
うちの環境では両方使用出来てます、IISに関してはまだPHPの情報しか覗いていませんが。
とりあえず、以下にIIS7.0でPHPを使用する際の設定方法を記述します。
PHPはもうインストール済のテイで進めます。

なお、OSは【Windows Vista Enterprise】ですので、
他のVistaでは出来ないかも知れません。
少なくとも【Home Basic】は、上記記事内で出来ない事は分かっています。
でも、【Business】は出来るんじゃないかなー。

以下、スクリーンショット付設定手順です。
▼続きを読む/たたむ

2009年5月7日木曜日

テンプレート変更

とりあえずテンプレートを変更してみました。
見てみた感じ一番記事の幅が大きそうに感じたものですね。

依然SyntaxHighlighterの中のソースは折りたたまれていますが、他の部分の長めの文章に関しては、フォントを小さくする事でまだ見やすくなったかと思います。
そもそもリンクが2行に渡って表示されるっていうのが個人的には嫌いな部分があるので、それを解消したかった部分もあります。

記事と記事の境目をもっとわかりやすくしたかったのですが、いかんせん日付が小さくなってしまって・・・
フォントと色は一括で変更できるのですが、日付の大きさまでは個別に変更できないのです。
この点も、テンプレート内書き換えでいけるのかな?

同日に書かれた記事はその日付で括られてしまうので、やはり見にくいです。
間に挿入される平行線が狙い目かと。


というわけで、平行線変更終了。
この線の正体は<hr>でなく<div>のスタイル変更でした。
なので・・・
.post {
  margin-top: 0;
  margin-$endSide: 8px;
  margin-bottom: 14px;
  margin-$startSide: 21px;
  padding: 0;
  border-bottom: 3px solid #d8e7f7;
}
上のように書いてあるソースを以下のように書き換えました。
.post {
  margin-top: 0;
  margin-$endSide: 8px;
  margin-bottom: 14px;
  margin-$startSide: 21px;
  padding-bottom: 10px;
  border-bottom: 3px solid #204063;
}
これで平行線の色を濃く、かつ「カテゴリ」との隙間を空けることで見やすくなりました。 ホントは色ももっと良いのに変えたいけど、生憎センスが無いもので。 あー 明日は記事ずつの日付でも探してみます。

SyntaxHighlighter 設定資料

実際テンプレート内に書き加えたソースは以下の通りです。
<head>

  <!-- ここから書き換え -->
  <script src='http://holmes21.up.seesaa.net/js/showhide.js' type='text/javascript'/>
  <link href='http://holmes21.up.seesaa.net/css/prestyle.css' rel='stylesheet' type='text/css'/>

  <link href='http://holmes21.up.seesaa.net/sh/shCore.css' rel='stylesheet' type='text/css'/>
  <link href='http://holmes21.up.seesaa.net/sh/shThemeDefault.css' rel='stylesheet' type='text/css'/>
  <script src='http://holmes21.up.seesaa.net/sh/shCore.js' type='text/javascript'/>
  <script src='http://holmes21.up.seesaa.net/sh/shLegacy.js' type='text/javascript'/>
  <script src='http://holmes21.up.seesaa.net/sh/shBrushVb.js' type='text/javascript'/>
  <script src='http://holmes21.up.seesaa.net/sh/shBrushCss.js' type='text/javascript'/>
  <script src='http://holmes21.up.seesaa.net/sh/shBrushPhp.js' type='text/javascript'/>
  <script src='http://holmes21.up.seesaa.net/sh/shBrushXml.js' type='text/javascript'/>
  <script src='http://holmes21.up.seesaa.net/sh/shBrushPlain.js' type='text/javascript'/>
  <script src='http://holmes21.up.seesaa.net/sh/shBrushJScript.js' type='text/javascript'/>
  <script src='http://holmes21.up.seesaa.net/sh/shBrushSql.js' type='text/javascript'/>
<script type='text/javascript'>
SyntaxHighlighter.config.clipboardSwf = &#39;http://holmes21.up.seesaa.net/sh/clipboard.swf&#39;;
SyntaxHighlighter.config.strings.copyToClipboardConfirmation = &#39;\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\u3000\u3000\u3000&#39;;
SyntaxHighlighter.defaults[&#39;auto-links&#39;] = false;
</script>

<style type='text/css'>
.syntaxhighlighter div,
.syntaxhighlighter span,
.syntaxhighlighter code {
 font-size:12px!important;
 font-family: &quot;MS Pゴシック&quot;!important;
}
.syntaxhighlighter {
 padding:5px!important;
 background-color:#FFFFFF!important; 
 border-style:solid!important;
 border-color:#808080!important;
 border-width:1px!important;
}
</style>
  <!-- ここまで書き換え -->

・・・・</head>
SyntaxHighlighterを表示するために貼り付けるコードを作成するには、以下から変換ページを参照します。
SyntaxHighlighter2.0用 貼り付けコード作成 - SQLの窓と銀プログラマ

2009年5月6日水曜日

SyntaxHighlighter テストその2

今回は「改行の変換」を「いいえ」でやってみたいと思います。
記事内を<pre>タグで包むと自動整形してくれるようです。

結果的にこういったモノが出れば成功なんですが・・・。
090506_sh_test

この記事を書く際にはこちらを参照しています。
SyntaxHighlighter2.0用 貼り付けコード作成 - SQLの窓と銀プログラマ

以下SyntaxHighlighter挿入。

javascript:window.clipboardData.setData('Text',document.title+'\n'+document.URL);
void(0);

とりあえずテンプレート内に必要なモノ全て入れて試してみました。 やっと動作してくれるようになりましたね! これだけの作業なのに神経使います・・・ ゆっくり考えれば出来ることなのに焦っちゃうっていう。 もっと論理的に考えられるようにしないといけません、精進します。 中に出てくる緑の矢印は改行を表しているんですね、初めて知りました。 というか、このテンプレート本文の幅狭いなー。 今度はこれを解消してみることにします、それか別テンプレートに変更ですね。

2009年5月5日火曜日

JavaScript テスト

今度はボタンを作ってのJavaScriptテストです。


完全に「script」タグを無視してくれます。
やっぱり無理なのかな、ちょっと調べてみます。


とりあえずわかりかけてきました。

ブログ記事のソースを開いてみてみると、
「script」タグ内に<br />が混入しているのが原因のようです。
これは、ブログの「設定」→「フォーマット」の「改行の変換」が「はい」になっているためです。

ブログを書く時には当然見やすさ重視なので、改行を挟みつつ文章を書いていきますが、この設定が「はい」では、自動的に<br />が挿入されるようになっています。
これを「いいえ」にするとJavaScriptは使用出来ましたが、他の記事の改行が崩れてしまうので、「はい」のままで使用します。
対処法としては、「script」の始めから締めまで1行で書ききってしまうのが考えられます。


それでも無理ですね・・・
「改行の変換」が「はい/いいえ」で何か差があるのか見てみることにします。

調べてみた結果ですが、
この記事の中身丸ごと比較対象しても<br />が入っている以外全く差がありませんでした。
ということは、「はい」の状態の時に、何かいらない処理が走ってるって事なのかな-。
案外検索したら出てくるのかも、引き続き調べてみます。

SyntaxHighlighter 実装テスト

SyntaxHighlighterの実装テストです。
ソースは、ブラウザに貼り付けて実行するだけでページ名とアドレスを取得するものです。

javascript:window.clipboardData.setData('Text',document.title+'\n'+document.URL);
void(0);

どうやら使わせてはもらえないようですね。
どうも【script】タグが無効化されている模様。
追記(5/6):使えるようになりました。

2009年5月4日月曜日

おためしテスト

Googleの機能 結構あるんだなーと思いながら見てると
Bloggerというブログページを見つけたので使用テスト

どんなことできるのかねー