インターネットの話」カテゴリーアーカイブ

WindowsパソコンでAndroidアプリを動作させるソフト NoxPlayer

2017年6月10日

「きまっし金沢の雑記帖」のユーザーから情報提供いただいたのですが、WindowsパソコンでAndroidアプリを動作させるソフト NoxPlayer が便利そうです。

Windowsパソコンに仮想Android端末を構築して、Androidアプリを動作させるというもので、1台のパソコンでWindowsのソフトとAndroidアプリを同時に動作させることができます。

中国製のソフトですが、日本語に対応しています。
インストールが簡単で、設定もほとんど必要がありません。
Googleストアも使用できます。

Androidでしか動作しないRaziko(全国のラジオ番組が聞ける)やスマートフォンでしか使えないメルカリがパソコンで使えます。

2017年6月12日

NoxPlayerはパソコンによっては動作しない事があります。

グラフィックのドライバが古いとダメなようです。

ホームページもモバイルフレンドリーに

2017年5月5日

Googleから、モバイル端末に優しくないサイトと指摘されて久しいのですが、Wordpressを使っている「きまっし金沢の雑記帖」やMovableTypeを使っている各ブログについて、モバイルフレンドリーなサイトへの対応をしたので、ホームページの改造も着手しました。

受験勉強もしないといけないし時間に余裕がないので、とりあえず「きまっし金沢」のトップページだけ改造しました。
随分苦労しました。ソフトを入手すれば、簡単に変換できるのかなと思っていたのですが、モバイルフレンドリーに対応したソフトというのは、ほとんどがテンプレートを利用してホームページを作るといった感じで、今までのホームページをモバイルフレンドリーにするというようなソフトは見当たりませんでした。

ネットも随分探したのですが、対策方法を簡単に理解できるサイトが見つかりません。

レスポンシブデザインに対応するためには、メディアクエリとビューポートという設定が必須となるとの事ですが説明を読んでも何が何だか分かりません。

なんとか苦労して対応に参考になるサイトを見つけました。
http://www.webcreatorbox.com/tech/flexbox-layout/

flexbox というコマンドを使用すると良いようです。
おかげで無事、モバイルフレンドリーなページになりました。

現在使っているホームページビルダー16では改造した内容を確認しながら編集する事ができないのでホームページビルダー21を買おうかなと思います。あんまり役に立ちそうも無いのに勿体ないです。
まあ3台のパソコンにインストールできて8000円くらいなのでいいかな。

2017年5月6日

「俊の玉手箱」と「福井観光web」のトップページを改造しました。
「きまっし金沢」は3段のメニューを2段に変更してから、モバイルフレンドリーなページに変換しましたが、「俊の玉手箱」と「福井観光web」は3段のままでトップページを改造しました。かなり苦労しましたが、満足なものになりました。
特にページを左右の中央に表示するのにてこずりました。

http://shared-blog.kddi-web.com/webinfo/169

根本的な事が判っていなくて、試行錯誤で改造したのですが、これからが思いやられます。

基本的に表を多用した昔ながらのホームページの成型方法を用いているのですが、モバイルフレンドリーにするにはwidh での幅を指定はやめて、その幅の画像(高さ1ピクセル)を埋め込んだ場合のほうが綺麗になります。
widh で指定するとモバイルだと、その指示が反映されて、均等に縮尺しませんが、画像を入れておくと適度に縮尺してくれるんです。幅の画像(高さ1ピクセル)を使うのは最低限に抑えたほうが良いのは言うまでもありません。
幅の指定を全く無くしても、それなりに見える場合は、そのほうが良いです。

2017年5月7日

ホームページビルダー21が届きました。地図製作ソフトが意外と使えそうな感じです。

編集時のプレビュー画面が、体験版と違って、flexboxが反映されません。つまり改造した内容を確認しながら編集する事ができないのです。これでは購入した意味が無いので、メーカー(ジャストシステム)に問いあわせしました。

ジャストシステムへメールしたら、ピント外れな返答が来て、サポートは電話でして下さいということでした。
ジャストシステムのサポートは東京と大阪への固定電話しか無いようです。しかも購入して2回までは無料ですが、それ以上は有料です。めっちゃくちゃ不便です。

一応、該当のhtmファイルをメールで送っておきました。

サポート時間の18:00を過ぎていたので、自分でいろいろ調べたのですが、プレビューのブラウザがInternet Explore 7になっていたようです。Internet Explore 10に変更したら正常に表示するようになりました。

2017年5月11日

ジャストシステムから返事が来ました。
編集画面では1列表示ですがプレビューで3列表示されることを確認しているとの事でした。

2017年5月13日

きまっし金沢の全ページにおいて size=”-1″ を削除しました。Dreamweaverでは指定したフォルダ内の一括置換が可能なので変換はあっという間です。
Dreamweaverが無くても、フリーソフトGrepReplace!でも一括変換ができます。
「46198個が1170個のドキュメント内で置き換えられました。」との表示がありました。

Googleの広告をレスポンシブ型に一括変換しました。

「927個が1170個のドキュメント内で置き換えられました。」との表示がありました。

デザイン的には変になった部分も多いとは思うので、少しずつ確認しながらアップロードしていこうと思います。

当面はwith を削除して、必要であれば幅の画像(高さ1ピクセル)を何種類か作成して挿入することが必要だと思います。

2017年5月14日

一括変換をしたので、作業の手間は随分減っていると思います。

大きな地図(gifファイル)のあるページのモバイルフレンドリー対策をしてみました。
with を削除してモバイリフレンドリーテストでチェックしてみました。

「ビューポートが設定されていません」「テキストが小さすぎて読めません」「クリック可能な要素同士が近すぎます」「コンテンツの幅が画面の幅を超えています」

との解析結果が出ました。

</STYLE>の下で</HEAD>の上に
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
を挿入しました。

すると、「ビューポートが設定されていません」「テキストが小さすぎて読めません」は解決しました。

「コンテンツの幅が画面の幅を超えています」の原因は地図の画像です。
地図はgifファイルなのですが、全く縮小されないで表示されています。

リンクの相互間の間隔を少し(全角のスペース3個分)あけたら「クリック可能な要素同士が近すぎます」は解決しました。

きまっし金沢の全ページにおいて
</STYLE>の下で</HEAD>の上に
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
を一括挿入しました。

何故かレスポンシブ型に入れ替えたGoogleの広告が表示されません。

Googleに問い合わせしました。

2017年5月17日

Googleから返答が来ました。
「現在のレスポンシブ広告コードではご希望どおりの広告ユニットを作成できていない場合は、レスポンシブ サイトの要件を満たすように広告コードを修正してください。」
ということでした。

https://support.google.com/adsense/answer/6307124?hl=ja#exact
スタルシートの設定の部分

<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>

は</HEAD>より上部に挿入しなければいけません。
黄色の部分は自分に合った名前をつけます
説明通りに広告コードを書き換えて、スタイルシートの要素を加えたら正常に動作しました。
全ページを一括で変換しました。

上記をそのままCOPY&PASTすると、「”」が全角にPASTされるようです。PASTする際には半角に戻してからにして下さい。

広告コードの書き換えは927個、スタイルシートの追加は1101個でした。ちなみにドキュメント数は1170個でした。

つまりページは全部で1170、Googleの広告を入れたページは927個、スタイルシートの設定をしているページが1101個ということです。
「きまっし金沢」だけでの数字です。他にもサイトがあるので総ページは1500程度はあると思います。

2017年6月7日

次は画像のモバイルフレンドリー対策です。
画像が1列に配置している場合のモバイルフレンドリー対策は比較的簡単です。

<style type=”text/css”>
p.resizeimage { max-width: ***px; }
p.resizeimage img { width: 100%; }
</style>

を</HEAD>より上に配置します。
最大の大きさ(デスクトップ環境での大きさ)を***pxに設定してモバイル環境では縮小させます。
<p class=”resizeimage”>
<img src=”aaa.jpg”>
</p>

画像のファイル名がaaa.jpgの場合の記述です。

https://allabout.co.jp/gm/gc/400630/ を参考にしました。

2017年6月9日

俊の運営しているサイトではテーブルを使って幅720pxの画像の下の行に幅240pxとの画像を3列並べているページが多いので、スタイルシートを記入するところ(</HEAD>より上)に

<style type=”text/css”>
<!–
p.resizeimage1 img{
width: 100%;
}

p.resizeimage2{
max-width: 240px;
}
p.resizeimage2 img{
width: 100%;
}

p.resizeimage3{
max-width: 720px;
}
p.resizeimage3 img{
width: 100%;
}
–>
</style>

を配置しました。
望み通りのページになりましたが、ページを編集するモードで画像が全く見えなくなりました。プレビューモードにすると、ちゃんと表示されるのですが編集がしにくいです。

編集する時には上記の記述を削除して編集が終わると戻してアップロードする事にしました。

関連ページへのメニューは「クリック可能な要素同士が近すぎます」と指摘されているので、画像からのリンクから文字からのリンクに変更しました。

モバイルフレンドリーテストすると合格しました。これで、ほとんどのページのモバイルフレンドリー化のメドがたちました。

2017年6月10日

サイトのモバイルフリー化について全ページ一括変換する項目をまとめてみました。

size=”-1″ を削除しました。size=1も削除しました

Googleの広告をレスポンシブ型に一括変換しました。

<style>
<!–
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }

p.resizeimage { max-width: ***px; }
p.resizeimage img { width: 100%; }

p.resizeimage1 img{
width: 100%;
}

p.resizeimage2{
max-width: 240px;
}
p.resizeimage2 img{
width: 100%;
}

p.resizeimage3{
max-width: 720px;
}
p.resizeimage3 img{
width: 100%;
}
–>
</style>
<meta name=”viewport” content=”width=device-width,initial-scale=1″>

を</HEAD>より上部に一括挿入しました。
黄色の部分は自分に合った名前をつけます

240×180PXの画像と720×540PXの画像が圧倒的に多いので、

width=”240″ height=”180″ と width=”720″ height=”540″ を一括削除しました。

このページのコマンドをそのままCOPY&PASTすると、「”」が全角にPASTされるようです。PASTする際には半角に戻してからにして下さい。
エデイターを利用して自分で打ち込むことをお奨めします。

おのおののページで

画像の最大の大きさ(デスクトップ環境での大きさ)を***pxに設定してモバイル環境では縮小させるため720pxの画像には

<p class=”resizeimage3″>
<img src=”aaa.jpg”>
</p>

240pxの画像には

<p class=”resizeimage2″>
<img src=”aaa.jpg”>
</p>

を挿入します(挿入するのは赤文字の部分です)。

その他、ページ毎のwithコマンドを削除したり、バランスの悪い部分を修正します

きまっし金沢の雑記帖に相談フォーラムを設置

独学で宅地建物取引士やファイナンシャルプランナーの資格をとったのですが、何かに使わないともったいないので、きまっし金沢の雑記帖に相談フォーラムを設置しました。
とりあえず「石川県と金沢の観光についての相談」と「金沢での生活についての相談」を設置しました。

WordPressのでbbPress というプラグインを利用しました。

名前とメールアドレスを登録しないといけませんが、利用者が新しいトピックを設置できます。

ついでに、きまっし金沢の雑記帖に「FP俊のお得な話」というカテゴリを設置しました。

 

 

掲示板 yybbs のモバイルフレンドリー化

2017年5月21日

最近、サイトのモバイルフレンドリー化を進めているのですが、今回は掲示板のモバイルフリー化に挑戦してみました。
掲示板はyybbsという日本で一番使われているCGIを利用しているのですが、ネットで探しても、そのような試みをしているという記事は一向に見つかりません。
それでダメ元で挑戦してみました。
完璧では無いですが、なんとかそれらしいところまで頑張れました。
http://kimassi.net/cgi/yybbs11/yybbs.cgi

FP2級の試験1週間前に、こんなことしなくても良いと思いますが、気になると途中でやめられないので仕方ないです。

変更箇所は、試験が終わってから紹介しようと思います。

2017年5月28日

yybbsの改造について1つ1つ進めていくことにします。
なお、yybbsは基本形の物を使っていなくて、スパム対策済みバージョンを使っていますので、標準のyybbsとは多少の違いはあるかもしれません。

ステップ1
まず、アイコンやカウンターの使用をやめます。
yyini.cgiの

# アイコンモード (0=no 1=yes)
$iconMode = 0;
を0にします。

# ミニカウンタの設置
$counter = 0;
を0にします。

# 家アイコンの使用 (0=no 1=yes)
$home_icon = 0;
を0にします。

これらは変更しなくても良い場合がほとんどだと思います。

ステップ2

yyini.cgiの# HTMLヘッダの部分(<head>より上部)に

<meta name=”viewport” content=”width=device-width,initial-scale=1″>

を挿入します。これがモバイルフリレンドリーへの第一歩です。

ステップ3

フォントを大きくするためにyyini.cgiの# HTMLヘッダの部分(<head>より下部)スタイルシート設定部の

body,td,th { font-size:$bSize; font-family:”$bFace”; }

body,td,th { font-family:”$bFace”; }
に変更します。
これで文字が大きくなります。これで基本的な対処は終わりで、後は幅を狭くするための微調整になります。

 

ステップ4

#————————————————-
# 投稿画面
#————————————————-
はかなり変更します

print <<EOM;

<table ><TR><TD>
<table border=0 cellspacing=1>
<tr>
<td><b>お名前</b></td>
<td><input type=text name=$RNDname size=28 value=”$nam” class=f></td>
</tr>
EOM

if ($use_form_email == 1 or $use_form_email == 3) {
my $message = ($use_form_email == 3 ? $dont_use_this_form : “”);
print <<EOM;

EOM

}

print <<EOM;

<tr>
<td><b>タイトル</b></td>
<td>
<input type=text name=$RNDsub size=36 value=”$sub” class=f>
<input type=submit value=”投稿する”><input type=reset value=”リセット”>
</td>
</tr>
<tr>
<td colspan=2>
<b>メッセージ</b><br>
<textarea cols=56 rows=7 name=$RNDcomment wrap=”soft” class=f>$com</textarea>
</td>
</tr>
EOM

if ($use_form_url == 1 or $use_form_url == 3) {
my $message = ($use_form_url == 3 ? $dont_use_this_form : “”);
print <<EOM;
<tr>
<td><b>参照先</b>$message</td>
<td><input type=text size=52 name=$RNDurl value=”$url” class=f style=”ime-mode:inactive”></td>
</tr>
EOM
}

# 管理者アイコンを配列に付加
@ico1 = split(/\s+/, $ico1);
@ico2 = split(/\s+/, $ico2);
if ($my_icon) {
push(@ico1,$my_gif);
push(@ico2,”管理者用”);
}
if ($iconMode) {
print “<tr><td><b>イメージ</b></td>
<td><select name=icon class=f>\n”;
foreach(0 .. $#ico1) {
if ($ico eq $ico1[$_]) {
print “<option value=\”$_\” selected>$ico2[$_]\n”;
} else {
print “<option value=\”$_\”>$ico2[$_]\n”;
}
}
print “</select><font size=\”-1\”>&nbsp;\n”;

# イメージ参照のリンク
if ($ImageView == 1) {
print “[<a href=\”javascript:ImageUp()\”>イメージ参照</a>]”;
} else {
print “[<a href=\”$script?mode=image\” target=\”_blank\”>イメージ参照</a>]”;
}
print “</font></td></tr>\n”;
}

if ($pwd ne “??”) {
print “<tr><td><b>暗証キー</b></td>”;
print “<td><input type=password name=pwd size=8 maxlength=8 value=\”$pwd\” class=f>\n”;
print “<font size=\”-1\”>(英数字で8文字以内)</font></td></tr>\n”;

# 投稿キー
if ($regist_key) {
print “<tr><td><b>投稿キー</b></td>”;
print “<td><input type=text name=regikey size=6 style=\”ime-mode:inactive\” class=f value=\”\”>\n”;
print “<font size=\”-1\”>(投稿時 <img src=\”$registkeycgi?$str_crypt\”> を入力してください)</font></td></tr>\n”;
print “<input type=hidden name=str_crypt value=\”$str_crypt\”>\n”;
}
}
print “<tr><td><b>文字色</b></td><td>”;

# 色情報
@col = split(/\s+/, $color);
if ($col eq “”) { $col = 0; }
foreach (0 .. $#col) {
if ($col eq $col[$_] || $col eq $_) {
print “<input type=radio name=color value=\”$_\” checked>”;
print “<font color=\”$col[$_]\”>■</font>\n”;
} else {
print “<input type=radio name=color value=\”$_\”>”;
print “<font color=\”$col[$_]\”>■</font>\n”;
}
}

print <<EOM;
</td></tr></table></TD><td></TD></tr></table>
EOM
print $antispam->get_post_wait_html(‘wait’, ‘wait_key’);
}

の部分を

print <<EOM;
<table ><TR><TD>
<table border=0 >
<tr>
<td colspan=2><b>お名前 </b><input type=text name=$RNDname value=”$nam” class=f></td>
</tr>
EOM

if ($use_form_email == 1 or $use_form_email == 3) {
my $message = ($use_form_email == 3 ? $dont_use_this_form : “”);
print <<EOM;

EOM

}

print <<EOM;
<tr>
<td colspan=2><b>タイトル</b><BR>
<input type=text name=$RNDsub size=36 value=”$sub” class=f><BR>
<input type=submit value=”投稿する”>
</td>
</tr>
<tr>
<td colspan=2>
<b>メッセージ</b><br>
<textarea cols=”40″ rows=”8″ name=$RNDcomment wrap=”soft” class=f>$com</textarea>
</td>
</tr>
EOM

if ($use_form_url == 1 or $use_form_url == 3) {
my $message = ($use_form_url == 3 ? $dont_use_this_form : “”);
print <<EOM;
<tr>
<td><b>参照先</b>$message</td>
<td><input type=text name=$RNDurl value=”$url” class=f style=”ime-mode:inactive”></td>
</tr>
EOM
}

if ($pwd ne “??”) {
print “<tr><td colspan=2><b>暗証キー </b><input type=password name=pwd size=8 maxlength=8 value=\”$pwd\” class=f>\n”;
print “<font size=\”-1\”>(英数字で8文字以内)</font></td></tr>\n”;

# キー
if ($regist_key) {
print “<tr><td colspan=2><b>投稿キー </b><input type=text name=regikey size=6 style=\”ime-mode:inactive\” class=f value=\”\”>\n”;
print “<font size=\”-1\”>(投稿時 <img src=\”$registkeycgi?$str_crypt\”> を入力してください)</font></td></tr>\n”;
print “<input type=hidden name=str_crypt value=\”$str_crypt\”>\n”;
}
}
print “<tr><td><b></b></td><td>”;
print $antispam->get_post_wait_html(‘wait’, ‘wait_key’);
}

に変更します。入力部分の幅がかなり狭くできました。
これでyyini.cgiの改造は一応終わりです。

ステップ5

次はyybbs.cgiの改造になります。
if (!$re) { print “<b>$nam</b> :$dat “; }
else { print “<b>$nam</b> – $dat “; }

print “<font color=\”$subCol\”>No\.$no</font></td>“;
print “<td valign=top nowrap> &nbsp; $url </td><td valign=top>\n”;

if (!$re) { print “<br><b>$nam</b> :$dat “; }
else { print “<br><b>$nam</b> – $dat “; }

print “<font color=\”$subCol\”><br>No\.$no</font>”;
print ” &nbsp; $url \n”;

に変更します。

ステップ6

最後にyyregi.cgi の改造になります。

# 日時のフォーマット
$date = sprintf(“%04d/%02d/%02d(%s) %02d:%02d”,
$year+1900,$mon+1,$mday,$week[$wday],$hour,$min);
}

# 日時のフォーマット
$date = sprintf(“%04d/%02d/%02d %02d:%02d”,
$year+1900,$mon+1,$mday,$hour,$min);
}

に変更しました。すでに投稿済みの原稿はそのままですが、以後の投稿は曜日を表示しなくなります。

これで随分幅を狭くできました。

番外編

Googleの広告を入れる場合は、

yyini.cgiを修正します。

とりあえず下記のページを参考にします。
https://support.google.com/adsense/answer/6307124?hl=ja#exact

$banner1 = ‘”;の部分に、Googleレスポンシブの公告を挿入します。*****はサイトによって個別の番号・記号を与えらえます。

# タグ広告挿入オプション
# → <!– 上部 –> <!– 下部 –> の代わりに「広告タグ」を挿入
# → 広告タグ以外に、MIDIタグ や LimeCounter等のタグにも使用可能
$banner1 = ‘<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!–******_responsive_1 –>
<ins class=”adsbygoogle ******_responsive_1″
style=”display:inline-block”
data-ad-client=”ca-pub-****************”
data-ad-slot=”*********”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>’;

スタイルシートのコマンドを挿入します。

#————————————————-
# HTMLヘッダ
#————————————————-
の<head>より下のほうに

<STYLE type=”text/css”>
<!–
.******_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .******_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .******_responsive_1 { width: 728px; height: 90px; } }
–>
</STYLE>

これでモバイルフレンドリー対策の広告が表示されます。

上記をそのままCOPY&PASTすると、「”」が全角にPASTされるようです。PASTする際には半角に戻してからにして下さい。

最後にGoogleのモバイルフレンドリーテストをしましたが、無事モバイルフレンドリーなページに認定されました。

2017年5月30日

yybbsのすべてを改造しました。

MovableTypeのブログにサイトマップ

2017年5月23日

最近、ブログをモバイルフレンドリーに改造していたのですが、MovableTypeのブログにもサイトマップを設置しようと思い、ネットを調べたり、いろいろ苦労したのですが、文字化けしたりして、なかなかうまく動作しませんでした。
試行錯誤を続けていたのですが、今日やっとサイトマップの設置に成功しました。
とりあえず「石川の食 美味しいもの食べたい」にサイトマップを設置しました。
サイトマップが無いと、ブログにどんな記事があるか調べるのが不便ですよね。
時間に余裕が出来たら、サイトマップの設置方法を掲載しようと思います。

2017年5月25日

MovableTypeのブログにサイトマップを設置する方法を掲載します。

MovableTypeのユーザーダッシュボード—設定画面のデザイン—テンプレート—アーカイブテンプレート—アーカイブテンプレートの作成—記事リスト
テンプレート名を設定 例えば Sitemap
本文に

<!DOCTYPE html>
<html lang=”<$mt:BlogLanguage$>”>
<head>
<$mt:include module=”HTMLヘッダー”$>
</head>
<META http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS”>
<div class=”search-results-container”>
<h2 class=”search-results-header”>サイトマップ</h2>
<div>
<ul>
<li><a href=”<$MTBlogURL$>” title=”<$MTBlogDescription$>”>トップページ</a>
<MTTopLevelCategories>
<MTSubCatIsFirst>
<ul class=”tree”>
</MTSubCatIsFirst>
<MTIfNonZero tag=”MTCategoryCount”>
<li><a href=”<$MTCategoryArchiveLink$>” title=”<$MTCategoryDescription$>”><MTCategoryLabel></a>
<ul>
<MTEntries>
<li><a href=”<$MTEntryPermalink$>”><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
<MTSubCatsRecurse>
</li>
</MTIfNonZero>
<MTSubCatIsLast>
</ul>
</MTSubCatIsLast>
</MTTopLevelCategories>
<MTIfArchiveTypeEnabled archive_type=”Monthly”>
<ul class=”tree”>
<li>月間アーカイブ
<ul>
<MTArchiveList archive_type=”Monthly”>
<li><a href=”<$MTArchiveLink encode_xml=”1″$>”><$MTArchiveTitle$></a></li>
</MTArchiveList>
</ul>
</li>
</ul>
</MTIfArchiveTypeEnabled>
</li>
</ul>
</div>
</div>
</MTIfArchiveTypeEnabled>

を記入して保存します。
上記をそのままCOPY&PASTしてもダメなようです。そのままCOPY&PASTすると「”」が全角になるようです。エディターで「”」を半角に戻してからPASTしてください。

本文は

http://bluehawk.infinitybird.com/2007/0403045644.html
を参考にして文字化けしないように修正しました。

テンプレートの設定をクリック
新しいアーカイブマッピングを作成
種類でユーザーを選択—追加  パスがauthor/author-basename/index.htmlになっていると思います。
プレビューで動作確認して正常に動作していれば 変更を保存
サイトを再構築
FTPソフトでブログフォルダーのauthorの中を見て、index.htmlが存在するアドレスをメモしておきます。
何故かauthor/author-basename/index.htmlになっている場合とauthor/author1-1/index.htmlになっている場合があります。
そのindex.htmlがサイトマップのページになります。
サイトマップを表示するボタンを挿入したい場所にauthor/author-basename/index.html(もしくはauthor/author1-1/index.html)へのリンクを挿入します。
最後にサイトを再構築して完了です。

ちなみに自分の場合はバナーヘッダーに挿入しましたが、ウィジェットセットのウィジェットテンプレートを作成してリンクを埋め込んでも大丈夫です。