sever http://sever.blog.shinobi.jp/ 2007/08/17 Wed, 04 May 2011 01:41:51 GMT ja © Ninja Tools Inc. 無題 ]]> カスタマイズ http://sever.blog.shinobi.jp/%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA/%E7%84%A1%E9%A1%8C_53 Sun, 24 Apr 2011 06:33:00 GMT sever.blog.shinobi.jp://entry/53 無題 clearoneSever.png
]]> カスタマイズ http://sever.blog.shinobi.jp/%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA/%E7%84%A1%E9%A1%8C_52 Sun, 24 Apr 2011 06:18:49 GMT sever.blog.shinobi.jp://entry/52 سال نو مبارک こんな記事タイトルを付けられるブログは少ない。
FC2 や jugem は EUC-JP であるし、yaplog は Shift_JIS であり、無料ブログ・サービスで文字コードが UTF-8 なのはこの忍者と Ameblo くらいか。

とは言えど、イーラーンではまだ旧年の 1388 年だから。

イーラーンの新年は NoRuz, Persian New Year にカウントダウンが載っているように 3 月 21 日午前 3 時 32 分に始まる。

NoRuz CountDown

【緑・白・赤】の色はイーラーンの国旗を模している。「日の丸」はこういう用途には使えないなぁ。

因みに 19 時にキャプチャしたもの。

タイトルのペルシア文字は sale no mobarak サーレ・ノ・モバーラクと読みます。

ラジオ「サヘル・ガーデン」の受け売りを含めました。

]]> 諸々 http://sever.blog.shinobi.jp/%E8%AB%B8%E3%80%85/%D8%B3%D8%A7%D9%84%20%D9%86%D9%88%20%D9%85%D8%A8%D8%A7%D8%B1%DA%A9 Sun, 03 Jan 2010 10:42:55 GMT sever.blog.shinobi.jp://entry/44 CurvyCorners (2) 普段は殆ど Ubuntu で作業しますが、さっき windows に行って、このブログを見ると、角丸は描画されてはいるが、予期せぬカタチになっていて驚いた。

問題のブラウザは Safari 4.04 と Google Chrome 3.0.195.38 のいずれも Webkit エンジンのブラウザだった。

何じゃ、この黒いのは！

は再起動時に消えていたので問題ナシとし、 の Webkit エンジンでも正常だった。

よ～く見りゃ、背景画像や背景色の指定のある他の部分には問題が無い。

CSS を振り返ると、ナルホド。
.EntryInnerBlock には背景色の指定が無かった。

これは盲点だったわい。
案の定、背景色「シロ」を加えると、他のブラウザと揃った。

ということで、CurvyCorners を用いたページを で見たとき、閲覧者に妙な思いをされなくて済みます。

]]> カスタマイズ http://sever.blog.shinobi.jp/%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA/curvycorners%20-2- Sat, 02 Jan 2010 07:13:13 GMT sever.blog.shinobi.jp://entry/43 CurvyCorners 「角丸枠線」については CSS3 でサポート（border-radius）されているものの、使用者の多い Microsoft Internet Explorer が対応していなかったりでいくつかの javascript が公開されています。

ここでは CurvyCorners を使っています。

ところが、他の無料ブログ・サービスでは「システムエラー」でブログ自体が表示され無かったり、javascript が機能せず、Unvalid な CSS ハックを書いたりしていました。

この忍者ブログと FC2 ブログは javascript ファイルのアップロードが可能なので、Unvalid な CSS ハックを書いたりせずとも、バッチリ決めることができました。

適用方法

上記リンクから curvycorners-2.0.4.zip をダウンロード。

展開したフォルダから curvycorners.js を「ファイルのアップロード」からアップロード

テンプレート編集画面上部の </head> 直前に

<script type="text/javascript" src="http://file.sever.blog.shinobi.jp/curvycorners.js"></script>

のように記述。

CSS は適用させたい部分に「枠線」指定をしておきます。
背景色若しくは背景画像の指定も忘れずに。

/*記事表示部分の背景や余白等の設定*/
.EntryInnerBlock {
    padding: 10px;
    background-color: #ffffff;
    text-align: left;
    margin-bottom: 30px;
    border: 2px solid #92dc00;
    border-top: 2px solid #92dc00;
    border-right: 2px solid #92dc00;
    border-bottom: 2px solid #92dc00;
    border-left: 2px solid #92dc00;
}

反転された一括表示を用いると、上手く適用されないことがありますから、枠線指定は個別に指定します。

「背景色若しくは背景画像」を指定しておいかないと、 Safari で上辺と下辺がマックロになったりします。

次に角丸の設定をしますが、html 末尾の </body> の直前に置くのがポイントです。

<script type="text/javascript">
//<![CDATA[
addEvent(window, 'load', initCorners);
  function initCorners() {
    var settings = {
    tl: { radius: 20 }, // 左上の角丸
    tr: { radius: 20 }, // 右上の角丸
    bl: { radius: 20 }, // 左下の角丸
    br: { radius: 20 }, // 右下の角丸
    antiAlias: true // コンマが無いことに注意
    }
    curvyCorners(settings, ".prof"); // プロフィールに適用
    curvyCorners(settings, ".cat"); // カテゴリに適用
    curvyCorners(settings, ".EntryInnerBlock"); // 記事部分に適用
  }
//]]>
</script>

適用箇所の名前は CSS のセレクタ名と同一にします。
即ち id 名なら "#TopTitle" のようにして引用符で囲みます。

使用可能ブラウザ

Mac 環境はありませんが、次のようなブラウザで動作が確認済みです。

WindowsUbuntu
Internet Explorer 6.0 / 7.0 / 8.0
Firefox 3.0 / 3.5 Firefox 3.0 / 3.5
Flock 2.5.2 Flock 2.5.2
Opera 10.10 Opera 10.10
Safari 4.04 Konqueror 4.3.2
Google Chrome 3.0.195.38 Google Chrome 4.0.266.0
Lunascape 6.0.1
Sleipnir 2.9.2

Ubuntu の Dooble 0.07 では角丸が描画されませんでした。

]]> カスタマイズ http://sever.blog.shinobi.jp/%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA/curvycorners Sat, 02 Jan 2010 02:47:20 GMT sever.blog.shinobi.jp://entry/42 広告消し更新 とりあえず長期未更新による広告を表示しないように。

]]> 諸々 http://sever.blog.shinobi.jp/%E8%AB%B8%E3%80%85/%E5%BA%83%E5%91%8A%E6%B6%88%E3%81%97%E6%9B%B4%E6%96%B0 Sat, 19 Dec 2009 03:35:51 GMT sever.blog.shinobi.jp://entry/41 往生した ・・・ テンプレートを変更したものの html 4.01 → xhtml 1.0 に換えるのにすごく往生した。

最初から xhtml CSS Valid なテンプレートを選択した方が好かったのかも知れない。

internet explorer 6.0 なら、それなりに表示されるが、xhtml 標準モードで Firefox 3.0.7 でとなると、テンプレート作者を補いながらと言うことになる。

.EntryTitle {
    text-align: left;
    font-size: 18px;
    font-weight: bold;
    padding: 30px 0 10px 40px;
    background: url(省略.gif) no-repeat center top;
}

「単位を付けろよ」と言うのもいくつかあり、元々のテンプレートは padding-left: 40; とかであった。

最も原因の発見に時間を要したのはサイドバー部分だった。アーカイブなどが団子状態になっていて、いくら margin などを調整しても変わってくれなかった。

結果的には html が大文字の class 名なのに対して、「プラグインの設定」部分ではそれが小文字だったこと。こんなとこに隠遁していたのか ！


つづきはこちら]]> カスタマイズ http://sever.blog.shinobi.jp/%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA/%E5%BE%80%E7%94%9F%E3%81%97%E3%81%9F%20%E3%83%BB%E3%83%BB%E3%83%BB Tue, 17 Mar 2009 13:52:44 GMT sever.blog.shinobi.jp://entry/40 テンプレート変更 諸々の実験のためテンプレートを変更し html 4.01 互換モードから xhtml 1.0 標準モードに書き替えます。
古い記事は折を見てと言うことになるでしょう。

]]> 諸々 http://sever.blog.shinobi.jp/%E8%AB%B8%E3%80%85/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E5%A4%89%E6%9B%B4 Tue, 17 Mar 2009 01:33:14 GMT sever.blog.shinobi.jp://entry/39 album1 ]]> カスタマイズ http://sever.blog.shinobi.jp/%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA/album1 Fri, 27 Feb 2009 12:57:59 GMT sever.blog.shinobi.jp://entry/46 jugem・flat 風のテンプレート 忍者では特に基本構造が <div> と言うスタイルなので、プラグインブロックに枠画像を付けても、それが記事部分より短い時には途中で切れてしまう。

<table> 構造だと長短に関係なく、枠画像は表示されるが、表示範囲よりも「大きな」ものを記事部分に入れたりすれば、枠画像がずれてくる。

<table> 構造のものは忍者には極めて少なく、カスタマイズするにしても知識が必要。

<div> 構造で「２コラム左メニュー」でブログタイトルが記事の上にあるものをいくつか拾ってみた。

<table> 構造のテンプレート

]]> カスタマイズ http://sever.blog.shinobi.jp/%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA/jugem%E3%83%BBflat%20%E9%A2%A8%E3%81%AE%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88 Tue, 17 Jun 2008 10:03:18 GMT sever.blog.shinobi.jp://entry/38