記事一覧

記事部分に貼られる分類リンク

「親分類::子分類」 を 「親分類>子分類」 に

lib > webliberty > App > Diary.pm
$field_ins->set_string("$1::$2");
 ↓
$field_ins->set_string("$1>$2");

本文の文字色

本文の文字色選択機能をOFFにしたときの本文の文字色

lib > webliberty > App > Board.pm

if (!$color_ins->get_string) {
 $color_ins->set_string('#000000');
}

Mac IE 文字化け対策 (html・プログラムファイル)

Mac IE + UTF-8 で起こるフォーム部分の文字化け(もしくは表示されない)。
Mac IE 文字化け対策 (CSS) はこちら。

select部分の中身が表示されてません。
アップロードファイル 13-1.jpg

<select name="work">

この<select>に言語指定をします。

<select name="work" lang="ja" >

Web Diary Professional Ver4 は XHTML1.0 なので xml:lang="ja" も指定します。

<select name="work" xml:lang="ja" lang="ja" >

アップロードファイル 13-2.jpg

Mac IE 文字化け対策 (CSS)

Mac IE + UTF-8 で起こるフォーム部分の文字化け(もしくは表示されない)。
Mac IE 文字化け対策 (html・プログラムファイル) はこちら。

左:Mac IE / 右:Mac Firefox
アップロードファイル 11-1.jpg アップロードファイル 11-2.jpg

簡単に言うと、CSSで日本語フォントを指定しないと文字化けします、です。

簡単に解決するのなら...

textarea, select, input {
 font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku GothicPro", "Osaka", "Verdana", "MS Pゴシック", sans-serif;
}

左:Mac IE / 右:Mac Firefox
アップロードファイル 11-3.jpg アップロードファイル 11-4.jpg

Mac IE の文字化けは治ったけど、Mac Firefox の文字の位置が気になります。
Mac Firefox の文字列のベースラインを他のと揃えるために、頭に Verdana を持ってきたいのですが、MacIE のためには日本語のフォントを先に・・・・。

こんな感じに↓

body {
 font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku GothicPro", "Osaka", "MS Pゴシック", sans-serif;
}

@media screen {
 textarea, select, input {
  font-family: Verdana, Arial, sans-serif;
 }
}

body や 全称セレクタ「*」で 先に Verdana を指定している場合は以下のようにするといいかもしれません。

body {
 font-family:  "Verdana", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku GothicPro", "Osaka", "MS Pゴシック", sans-serif;
}

textarea, select, input {
 font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku GothicPro", "Osaka", sans-serif;
}

@media screen {
 textarea, select, input {
  font-family: "Verdana", "Arial", "MS Pゴシック", sans-serif;
 }
}

左:Mac IE / 右:Mac Firefox
アップロードファイル 11-5.jpg アップロードファイル 11-6.jpg

Mac IE 文字化け対策 (ブラウザ)

文字コード UTF-8を採用しているサイトを閲覧した時に文字化けが起こる(画像が表示されなかったりもする)場合、サイト(ブログ)側でなくブラウザで解決できたりします。
解決方法は次の画像を参照して、ユニバーサル文字(UTF-8)を選択します。
アップロードファイル 10-1.jpg

文字セットを選択することで、このようにちゃんと表示させる事が出来ます。
アップロードファイル 10-2.jpg

秀丸での文字コード変換

"動的パレット" を導入する時に palette.js の文字コードを UTF-8N に変換するのだけど、秀丸の場合は palette.js を開いてから「ファイル」→「エンコードの種類」を選択して、Unicode(UTF-8)を選択してから 「内容を維持したまま適用」 を押すと変換できます。

プロフィール欄への画像表示

プロフィールページへ画像を表示させる

CSSファイルに次を追加
(配布スキンではCSS内の最下部に以下の記述をしてある場合があります)

.imgl {
 float: left;
}
.imgr {
 float: right;
}
.imgclear {
 clear: both;
}

プロフィール設定画面での記述例

<img src="http://~~/tast.gif" alt="プロフィール画像" width="180" height="144" class="imgl" />H N : Uzu
好き : ロック・小説・動物・トマト
嫌い : 辛いもの
JORGEN らぶヽ(○´3`)ノ<br class="imgclear" />ここでfloatを解除。 

Mac IE ではこのように見えています。
アップロードファイル 8-1.jpg アップロードファイル 8-2.jpg

ナビゲーション部分へ画像を表示させる

CSSファイルに次を追加
div#informationdiv#navigation かはスキンによって違うので注意です。

div#information .prof {
 text-align: center;
}

skinフォルダ > navigation.html
<!--SKIN_PROFILE_HEAD_START--><!--SKIN_PROFILE_HEAD_END--> の間を以下のようにします。

 <!--SKIN_PROFILE_HEAD_START-->
  <div class="block">
   <h2>プロフィール</h2>
   <p class="prof"><img src="http://~~/tast.gif" alt="プロフィール画像" width="120" height="106" /></p>
  <ul>
 <!--SKIN_PROFILE_HEAD_END-->

リンクのアンダーダイン(画像)

画像をアップロードして($FILE1$FILE2 を使って)リンクが貼られたときに出るアンダーラインを消したい

CSSファイルに以下を追加すれば消えるかもしれません。

div#diary a.top:link,
div#diary a.top:visited,
div#diary a.top:active,
div#diary a.top:hover {
 border: 0px;
}

アフェリエイト時など、アップロード機能を使わずショッピングサイトで用意されている画像を使用する場合などは、CSSファイルに以下を追加します

div#diary a.image:link,
div#diary a.image:visited,
div#diary a.image:active,
div#diary a.image:hover {
 border: 0px;
}

記事を投稿する時のタグに class="image" を追加して投稿します
アマゾンならこんな感じです↓

<a href="http://アソシエイトサイトURL/exec/obidos/ASIN/商品番号/ご自分のID/ref=nosim/" class="image">
<img src="http://アソシエイトサイトURL/images/画像.jpg" alt="商品名" /></a>

Osaka-等幅、ヒラギノ角ゴ Pro

Osaka-等幅、ヒラギノ角ゴ Pro を Safari に反映させる

CSS で font-family に Osaka-等幅、ヒラギノ角ゴ Pro W3 を指定しても Mac Safari では指定通りに表示されないのですが、これは Safari が漢字の入ったフォントファミリー名を認識しないからなので、きちんと指定通りに表示させるためには英語表記、またはポストスクリプト名で指定します。が、Mac の他のブラウザ(FirefoxやOpera)は、もとからある Osaka や MS UI Gothic など以外の英語表記(ポストスクリプト名)には反応しないので注意です。

ファミリー名 と 英語表記・ポストスクリプト名
Osaka-等幅 > Osaka-Mono
ヒラギノ角ゴ Pro > Hiragino Kaku Gothic Pro
ヒラギノ角ゴ Pro W3 > HiraKakuPro-W3
ヒラギノ角ゴ Pro W6 > HiraKakuPro-W6
ヒラギノ角ゴ Std > Hiragino Kaku Gothic Std
ヒラギノ角ゴ Std W8 > HiraKakuStd-W8
ヒラギノ丸ゴ Pro > Hiragino Maru Gothic Pro
ヒラギノ丸ゴ Pro W4 > HiraMaruPro-W4


指定の仕方

body {
font-family: "ヒラギノ角ゴ Pro W3", "HiraKakuPro-W3";
}

HiraKakuPro-W3 は Mac Safari 用
ヒラギノ角ゴ Pro W3 は Mac Firefox や Mac Opera 用

Win用フォントと generic family も加えてみます。

body {
font-family: "ヒラギノ角ゴ Pro W3", "HiraKakuPro-W3", "MS Pゴシック", sans-serif;
}

ちなみに、Safari 用の HiraKakuPro-W3 には font-weight: bold; は効かないようなので、font-weight: bold; を指定することがあるようなら、というか、HiraKakuPro-W3 を使うなら Hiragino Kaku Gothic Pro を使うといいかもしれません。
っていうか、HiraKakuPro-W3 の W3 は font-weight のことなんじゃないっけ・・・?

ってことで、これで。

body {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", "Osaka", sans-serif;
}

MS Pゴシック は Win用
ヒラギノ角ゴ Pro W3 は Mac Firefox、Mac Opera用
Hiragino Kaku Gothic Pro は Mac Safari用
Osaka は とりあえず。

なぜ Osaka を入れるかっていうと、ヒラギノは Mac OS X ではデフォで入っているけど わりと新しいフォントのようなので入っていない Mac OS のために入れたほうがいいのかな、なんて。 この辺はよく分からないので "とりあえず入れとく" 感じです。

ついでに言うと、Osaka-等幅 の - は - ではありません。全角の - なので注意です。
Osaka-Mono の - は - ではありません。半角の - なので注意です。

更についでに言うと、フォーム部分の指定で Verdana や Lucida Grande を頭にもってくると Mac IE で文字化けの原因になるのでフォーム部分では頭に Osaka とか入れたほうがいいです。っても、そうすると Mac firefox で文字位置が上にずれるので、対策としては Mac IE にフォント指定を読み込ませないように @media を使うか、親要素で Verdana や Lucida Grande を指定しておいてフォーム部分で Osaka なり MS Pゴシック なりを指定とか。
まぁ面倒くさいので @media でその場所だけの指定で回避するのが楽かも。

こんな感じ

form input, form select {
 font-size: 12px;
 line-height: 1.2;
}
@media screen {
 form input, form select {
  font-family: Verdana, Arial, sans-serif;
 }
}

コメント一覧

Donald Newman Eメール URL (07/03 11:22) 編集・削除

[url=http://gd6hb1fuxhtw9gdl.com/]5gy8rvbj6affd42q[/url]
[link=http://mn3p0iswj15eua68.com/]d7pu70dbvg3df222[/link]
<a href=http://wjoc417o3o4ri3ly.com/>vqkm8a76p2os98bg</a>
http://gfidponvyw1qcqnx.com/

備忘録

Cathie Carter Eメール URL (07/08 06:30) 編集・削除

[url=http://gd6hb1fuxhtw9gdl.com/]5gy8rvbj6affd42q[/url]
[link=http://mn3p0iswj15eua68.com/]d7pu70dbvg3df222[/link]
<a href=http://wjoc417o3o4ri3ly.com/>vqkm8a76p2os98bg</a>
http://gfidponvyw1qcqnx.com/

備忘録

Teri Alvarez Eメール URL (07/18 17:40) 編集・削除

[url=http://gd6hb1fuxhtw9gdl.com/]5gy8rvbj6affd42q[/url]
[link=http://mn3p0iswj15eua68.com/]d7pu70dbvg3df222[/link]
<a href=http://wjoc417o3o4ri3ly.com/>vqkm8a76p2os98bg</a>
http://gfidponvyw1qcqnx.com/

備忘録

Lola Hooper Eメール URL (07/23 13:27) 編集・削除

[url=http://gd6hb1fuxhtw9gdl.com/]5gy8rvbj6affd42q[/url]
[link=http://mn3p0iswj15eua68.com/]d7pu70dbvg3df222[/link]
<a href=http://wjoc417o3o4ri3ly.com/>vqkm8a76p2os98bg</a>
http://gfidponvyw1qcqnx.com/

備忘録

Jaime Pruitt Eメール URL (08/15 19:54) 編集・削除

[url=http://gd6hb1fuxhtw9gdl.com/]5gy8rvbj6affd42q[/url]
[link=http://mn3p0iswj15eua68.com/]d7pu70dbvg3df222[/link]
<a href=http://wjoc417o3o4ri3ly.com/>vqkm8a76p2os98bg</a>
http://gfidponvyw1qcqnx.com/

備忘録

アップロードファイルを追加

修正ファイル webliberty > App > Diary.pm

$form_file$checkdelfile$article_file をそれぞれ検索して6つ目を追加。

修正ファイル webliberty > App > Admin.pm

#アップロードファイル保存 と ### プレビュー表示 部分
foreach (1 .. 5) {foreach (1 .. 6) { に変更。
FORM_EXT を検索して6つ目を追加。

修正ファイル skin > admin_form.html

<legend>投稿フォーム</legend>FORM_FILE_START 部分に6つめを追加

ページ移動