ブログ編集記

２４．エキサイト・ブログの「投稿」画面の表示の高速化 その２

「ブログtoメディア」ボタンの６個の画像も、不要であれば消してしまいましょう。
「エモーティコン」ボタンについては、前項２３で記述しましたが、同様のやり方です。　
１－１．前記２３項の「フリ－ソフトIE7pro ２．４」をダウンロードし、インストールします。
１－２．ブロックの設定
（１）前記２３項の１－４．ブロックの設定で（１）、（２）、（３）と進めます。
（２）前記２３項の１－４．の（４）と同様に、
　　　「ルール：」の入力欄に「id="media_ct"」と全て半角で入力し、
　　　「種類：」の入力欄には、「DIVフィルタ」を選びます。
　　　　次に、「更新」をクリックし、「OK」をクリックします。
（３）これで、「ブログtoメディア」ボタンの画像がブロックされます。

２３．エキサイト・ブログの「投稿」画面の表示の高速化 その１

「エモーティコン」ボタンが追加されてから、「投稿」画面を開くのが遅くなり、編集が終わり、送信ボタンを押しても送信できずにエラーになってしまいます。最悪は投稿のために編集した内容が全て消えてしまうことです。イライラするし、ムカつきますよね。
この原因は、「エモーティコン」の絵文字ボタンが７２個もあり、画像をダウンロードするための時間が大幅に増えたからです。をクリックすると・・・「エモーティコン」の要否を設定できないのですから、これを使わない人にとっては、大きな迷惑ですね。
そこで、フリーソフトを使って、画像を表示させなくする方法を紹介します。
これで、投稿画面の表示が早くなり、投稿がスムーズになります。
１．「エモーティコン」ボタンを全く使わない場合。
１－１．フリーソフトのダウンロード（詳細は３．ダウンロードを参照してください）
　　　　「http://cowscorpion.com/Browser/IE7pro.html」のサイトから
　「フリ－ソフトIE7pro ２．４」をダウンロードします。　
保存をクリックし、デスクトップに保存してください。
１－２．ウイルスチェック
ダウンロードが完了すると、デスクトップに下記のようなアイコンが形成されます。
ウイルスチェックソフトがパソコンに入っている場合は、インストールの前にダウンロードソフトのアイコンを右クリックし、「ウイルス検査」を左クリックしてウイルスチェックをしてください。１－３．インストール（詳細は４．インストールを参照してください）
IE7proSetup 2.4exeのアイコンをダブルクリックします。
さらに実行をクリックし、「セットアップウィザード」にしたがって、インストールします。
インストール先を選ぶ画面では、普通はそのまま「次へ」をクリックします。
後は指示の通りに進めて完了します。
完了すると、デスクトップの右下にIE7Proの小さなアイコン（下図）が表示されます。また画面上のメニューバーの中の「ツール」に「IE7 Preferences」が追加されていますので、右クリックして確認してください。１－４．ブロックの設定
（１）「IE7 Preferences」を開く。
　　　デスクトップ右下のアイコン をダブルクリックする。
　　　あるいは、メニューバーの中の「ツール」にある「IE7 Preferences」をクリックする。
　　　下のような「IE7Pro-V2.4のトップ画面」が開きます。（２）左メニューの「広告ブロック」をクリックする。
下のような「広告ブロック」画面が出る。（３）ここで、「広告ブロックを有効」にチェックマークを付け、
「Flashブロックを有効」と「標準のフィルタを有効」のチェックマークをはずします。
（４）下の「ルール：」の入力欄に「id=”emoticonicons”」（emoticonsではない）と全て半角で入力し、「種類：」の入力欄には、「DIVフィルタ」を選びます。
　　　　　　　次に、「更新」をクリックし、「OK」をクリックします。
（５）これで、「エモーティコン」ボタンの画像がブロックされます。上記画像のフラグは「S」をクリックしたときだけ表示されます。
これも消したい場合は、前記（４）項と同様に、「id="skypeEmoticon"」「DIVフィルタ」を追加してください。

＊＊下記は参考です。読まなくてかまいません。＊＊
２．このソフトの概要です。
３．ダウンロードの詳細
　上記１－１から「フリ－ソフトIE7pro ２．４」をダウンロードします。　[DOWNLOAD]をクリックすると

ここで、「IE7proSetup 2.4exe」をクリックれば、すぐにダウンロード初期画面が出ます。
保存をクリックし、後は指示にしたがってダウンロードしてください。
ダウンロードの場所はデスクトップがいいでしょう。
４．ソフトのインストール
IE7proSetup 2.4exeのアイコンをダブルクリックします。「実行」をクリックすると、セットアップウィザードが出ます。「次へ」をクリックします。「同意する」をクリックします。普通はそのまま「次へ」をクリックします。
後は指示の通りに進めて完了します。
５．画像を一つひとつ選んで設定する方法。
上記と同じフリーソフトをダウンロードして使います。
これは、かなり手間がかかります。詳細は下記サイトをごらんください。
参考サイト：「駅風呂カスタマイズ本舗」の“「投稿」画面の表示を速くする”
　　　　　　　http://sumiblog3.exblog.jp/7925590/

２２．アクセスカウンター設置法

＜ＳＣＲＩＰＴ＞タグを使ったアクセスカウンターは、
エキサイトのブログではこのタグが禁止されていますので使えません。
XREA.COMで提供しているカウンターは禁止タグを使っていませんので簡単です。

カウンター設置の際に必要な情報は下記の４つです。あらかじめ準備してください。
★メールアドレス(Mail)・・・記入したアドレスにID・パスワード・サンプルタグが送られます。
★サイトのURL(URL)・・・ブログのURLを記入
★サイト名(SiteName)・・・ブログの題名
★希望ID(小文字で3～12文字)・・・任意の英数字を記入します。

１．XREA (エクスリア)の登録画面にアクセスします。
　　　http://ct.xrea.com/
登録画面が開いたら、次の２～４は必要ありませんので、５．に飛んでください。
このＵＲＬでアクセスできない場合は、２．に進んでください。
２．先ず、XREA (エクスリア)の下記アドレスにアクセスします。
　　　http://www.xrea.com/
３．アクセスすると、トップページが開きますので、右上の「サービス」をクリックします。
４．「その他のサービス画面」に変わる。→「COUNTER@XREA (無料カウンター)」をクリックすると、無料高速カウンターの登録画面が出ます。
５．情報を入力して『お申し込み』ボタンを押すと、登録したアドレスに、すぐメールが送られてきます。
６．メール内にある『サンプルタグ』を、設置したい場所に貼り付ければ設置完了です。
★サンプルタグ★
＜A HREF="http://ct1.xrea.com/cgi-bin/link.cgi?site=あなたのID"＞
＜IMG SRC="http://ct1.xrea.com/cgi-bin/count.fcg?site=あなたのID&img
=00000&ovlp=0&max=6&day=0&tp=0&pic=0" BORDER="0"＞＜/A＞
６．上記の赤字部分を変える事で、自分好みにカスタマイズできます。
★img=00000・・・カウンター画像の変更が出来ます。
登録画面の中の「サンプルはコチラ」をクリックしてください。
★ovlp=0・・・重複カウントの設定が出来ます。
　　　（0：重複あり　１：３時間以内の重複無し　２：一切カウント無し）
　　　設定を1にすると良いでしょう。
★max=6・・・桁数を変更できます。
★day=0・・・通常は変更しないで「0」のままにします。
★tp=0・・・透過処理の有無を変更できます。
　　　（0もしくは指定無し：透過処理無し　1：透過処理有り)
★pic=0・・・画像種類の変更。ココは特に変更しないで「0」のままにします。
７．詳細は、登録画面内の下記説明を参照してください。

８．設置する場所
中途半端なところでなければ、どこでも貼り付けられると思います。
例えば①～⑦印や●印のところなどです。
設定→スキン編集→編集→HTML編集
と進んで、適当なところに挿入（コピー＆ペースト）してください。
例えば①②はブログタイトルの左、③は右、③＜br＞タイトルの下などです。
いろいろ試してみてください。

①＜DIV CLASS=HEADER＞②＜$header$＞③
＜SPAN CLASS=URL＞④＜$blogurl$＞⑤＜/SPAN＞⑥
＜/DIV＞⑦

●＜DIV CLASS=USERMENU＞●＜$adminmenu type=1$＞●・・・・●＜/DIV＞●

●＜DIV CLASS=PROFILE_TOP＞●・・・・●＜/DIV＞●
●＜DIV CLASS=PROFILE_BODY＞●
●＜DIV CLASS=PROFILE＞●＜$nick$＞●＜/DIV＞●
＜CENTER＞●＜$logoimage type=1$＞●＜/CENTER＞●
●＜$description$＞●＜/DIV＞●
＜DIV CLASS=PROFILE_BOTTOM＞●＜/DIV＞●
●＜$calendar type=1$＞●
●＜$menuleft$＞●
●＜$banner type=1$＞●
●＜$xml$＞●

２１．リンクを張る

「リンクを張る」
"ある所"から"別の所"を参照したい場合に、"ある所"を「リンク元」、"別の所"を「リンク先」として指定することを、"リンクを張る"といいます。
リンクを張るには、「リンク元」や「リンク先」に印を付ける"タグ"を使います。"タグ"とは「< >」を付けた英文字列のことです。

（１）　同一ページ内にリンクを張る
この例文の中で、"＊文頭に戻る＊"をクリックしたら、"ジュズダマ(数珠玉)"にジャンプさせます。短い文章なので実感はわきませんが…。
下記の赤字のように、リンク先、リンク元の文字列にタグを付けます。ここで、< >を含めて、タグはすべて半角です。<x id, <a href の間は半角スペースです。
id="ABC"のABCは任意の文字です。全角の英数字や漢字、仮名も使えます。
＜a href="#ABC"＞＊文頭に戻る＊＜/a＞　は"＊文頭に戻る＊"をクリックしたら、"id=ABC"にジャンプしろという意味になります。

（２）別のページにリンクを張る
基本的には、同一のページにリンクを張るのと同様です。
異なるのは、青字の"リンク先のページのURL"を"リンク元のタグの中の#の前に追加"することだけです。ここで、target="_blank"は別ページを別ウィンドーで開く目的で追記しています。これがないと、現在のページのウィンドー表示が消えて、リンク先のページのみが開きます。
target のt の前は半角スペースです。


注意１
リンク先に、既に別のタグが付いている場合、そのタグを利用することができます。
例えば、文字を太字にするタグ＜b＞ジュズダマ(数珠玉)＜/b＞が付いていたら、
＜b　id="ABC"＞ジュズダマ(数珠玉)＜/b＞のように、開始タグ＜b＞の中にid="ABC"を挿入します。
注意２
リンク元に、既に別のタグが付いている場合、リンク元の文字列のみにタグを追加します。
例えば、文字に色を付けるタグ＜span＞＊文頭に戻る＊＜/span＞が付いていたら、
＜span＞＜a　href="http://borancha.exblog.jp/12345/#ABC"＞＊文頭に戻る＊＜/a＞＜/span＞
注意３
注意１、注意２にかかわらず、リンク先の＜b＞ジュズダマ(数珠玉)＜/b＞を一つの文字列とみなして、
＜x　id="ABC"＞＜b＞ジュズダマ(数珠玉)＜/b＞＜/x＞
としてもかまいません。
また＜b＞＜x　id="ABC"＞ジュズダマ(数珠玉)＜/x＞＜/b＞でもかまいません。つまり、異なるタグを組み合わせることができます。
注意４
リンク元についても注意３の考え方を適用できます。
＜span＞＜a　href="http://borancha.exblog.jp/12345/#ABC"＞＊文頭に戻る＊＜/a＞＜/span＞を、
＜a　href="http://borancha.exblog.jp/12345/#ABC"＞＜span＞＊文頭に戻る＊＜/span＞＜/a＞
に変えてもかまいません。
　　　　　　　　　　　　　　　　　　この方法で文頭に戻るようにしています。→　　文頭に戻る

２０．ブログの保存方法

エキサイトにはブログ保存サービスが無い。
エキサイトのサーバーの故障や、エキサイトのブログサービスの中止などの場合
苦労して作った自分のブログが無くなってゼロになってしまう恐れがある。
そこで、ブログを定期的に保存しなければならないことになる。

方法１
エキサイトにはブログのＰＤＦ作成を外部業者と提携して無料サービスしている。
（ログイン後、「設定画面→マイブログを製本」から・・・）
しかし、投稿の写真配列が変わってしまったり、途中で改行されたり満足できるものではない。

方法２
単に保存を目的とするならば、もっと簡単で一般的な方法がある。
つまり、インターネット・エクスプローラー（ＩＥ）などブラウザーの保存機能を利用するのである。
ブラウザーの「ファイル→名前をつけて保存」を使えばよい。

「名前をつけて保存」をクリックする。
Webページの保存画面が出るので、
ファイルの種類で、「Web アーカイブ、単一のファイル(*.mht)」を選択する。
ファイル名を書き込んで、保存をクリックすれば保存される。

指定したフォルダに下図のようなアイコンで保存されます。

これをクリックすれば、保存したブログがブラウザに表示されます。
ただし、写真などの画像はブログを見たままの大きさで保存されます。
画像をクリックしても大きくなりません。
ファイルの種類で、「Web ページ、完全(*.htm;*html)」を選択してもエキサイトは保存できません。

追記：
投稿１件ずつ別々に保存するのが面倒な場合は次のようにします。
ログイン後、設定→環境設定の画面で、
「メインページの記事数」を３０に設定すれば、３０件を１回で保存できる。
３０件を超える件数は設定できない。

１９．コメントの「鍵マーク」や「コメントマーク」を消す、大きくする方法

例えば、コメントの「 」や「 」のマーク画像がうるさいと感じる場合に隠す方法です。

div.COMMENT_TAIL IMG{height:0px; width:0px; }

をCSSに追加するだけです。
どこに追加してもかまいません。
一番下に追加すると分かりやすいでしょう。

これは＜DIV COMMENT_TAIL＞○　△　◇＜/DIV＞のように囲まれた「○　△　◇」の中の画像を見えなくすることができます。画像がいくつもある場合には、すべての画像に適用されます。

height、 width のサイズを適当に指定すれば、大きくしたり小さくしたりすることもできます。

１８．投稿画像サイズの設定

デジカメで撮影した画像は普通は1600x1200、1280x960、1024x768などで4：3になっています。ブログに載せる場合は、これを640x480以下に縮小して使います。撮影の目的がブログに載せることだけであれば、デジカメの設定を640x480に設定しておくと良いでしょう。

画像を中央配置で一枚ずつ載せる場合はこれで何の問題もありません。
しかし、画像を左右に並べたい場合は、二枚が整然と並ぶように、編集画面でサイズを変更しなければなりません。
この場合は、二枚とも左配置で640x480ならば、例えば220x165に変更します。
通常左画像と右画像の両方とも左配置を指定します。
また、左画像を左配置に、右画像を右配置に指定してもかまいません。
大きいサイズを小さく圧縮していますので、ブログの画像をクリックすると、元の画像サイズまで拡大して、別ウィンドウで表示されます。

これでも良い訳ですが、いちいち640x480を220x165にサイズ変更するのは面倒ですね。
以下のようにすれば、いちいちサイズ変更しなくても自動的に圧縮されます。

１．設定→スキン変更→編集→（スキン編集が初めての場合は「スキン編集を始めます」）と順次クリックします。・・・要するにスキン編集の画面にする訳です。
２．スキン編集の■各部分別横幅：本文450・・・・
　　この数字をメモするか、覚えておいてください。
　　・・・・使っているスキンによって数字が異なります。
　　（例）紅葉：400px、ダイアリー：450px、ナチュラル：500px、ノートパッド：550px
３．ＣＳＳ編集を見て、下記のようなソースコードを探してください。
　　＜スキンによっては、IMG.IMAGE_RIGHT{}がＣＳＳに欠落している場合があります。
　　　　この場合、下記のIMG.IMAGE_RIGHT{}をコピーして、
　　　　IMG.IMAGE_LEFT{}の下に追加してください。＞

　　　IMG.IMAGE_LEFT{
　　　　　　　　　　　　　　　　　MARGIN-RIGHT: 15PX;
　　　　　　　　　　　　　　　　　MARGIN-BOTTOM: 15PX;
　　　　　　　　　　　　　　　　　}
　　　IMG.IMAGE_RIGHT{
　　　　　　　　　　　　　　　　　MARGIN-LEFT: 15PX;
　　　　　　　　　　　　　　　　　MARGIN-BOTTOM: 15PX;
　　　　　　　　　　　　　　　　　}
４．赤字のように変更、追加してください。
　　　IMG.IMAGE_LEFT{
　　　　　　　　　　　　　　　　　MARGIN-RIGHT: 15PX; ・・・・・・・・・(1)
　　　　　　　　　　　　　　　　　MARGIN-BOTTOM: 15PX;
　　　　　　　　　　　　　　　　　width: 210px; height: auto; ・・・(2)
　　　　　　　　　　　　　　　　　}
　　　IMG.IMAGE_RIGHT{
　　　　　　　　　　　　　　　　　MARGIN-LEFT: 15PX; ・・・・・・・・・・・(3)
　　　　　　　　　　　　　　　　　MARGIN-BOTTOM: 15PX;
　　　　　　　　　　　　　　　　　width: 210px; height: auto; ・・・(4)
　　　　　　　　　　　　　　　　　}
ここで下記のようになることを確認してください。（本文横幅＝450pxの場合）
(1)+(2)+(3)+(4)=15+15+210+210=450
この450が、さっきメモした450と同じか、小さくなるように、widthの数字を設定してください。
もし、本文横幅が400pxならば、(400-15-15)/2=185 すなわち、width は 185px です。

　　MARGIN-RIGHT　・・・画像の右側の余裕サイズ・・・お好みで調整可
　　MARGIN-LEFT　　・・・画像の左側の余裕サイズ・・・お好みで調整可
　　width　　・・・・・・・・・・・画像の横幅
　　height: auto　　・・・・画像の高さを横幅に合わせて自動調整
　　　　　　　　　　　　　　　　　　（サイズが決まっている場合は数字で指定しても可）
　　width height auto px は半角大文字でも可
　　width:∇210px;などのスペース（∇の部分）は無くても可

追加：
画像を２枚横に並べた場合は、２枚目の最後に必ず<br clear=all> タグを入れてください。

動作確認したブラウザはInternet Explorer 6.0/7.0 および　Firefox 2.0です。
なお、適用は自己責任でお願いします。

１７．投稿記事の文字サイズを大きくする

デフォルトの文字は小さくて、老眼の私には辛い！
そこで文字のサイズを少し大きくすることにしました。

CSS編集から下記を探します。スキンによって内容は多少違うかもしれません。

DIV.POST_BODY { line-height: 150%;
margin-bottom: 20px; padding-left: 20px;
width: 480px; overflow: hidden;
font-size:10.5pt; font-family:sans-serif; }

赤字の部分を追加します。
私の場合は、10pt ではちょっと小さくて、11pt だとちょっと大きかったので10.5pt にしました。好みのサイズに設定してください。

フォントの種類も変えたい場合には青字部分を追加します。
" sans-serif " はデフォルトで設定されている幾つかの書体のうち、ゴシック体のようなヒゲ無し文字で表示されます。
希望する特定のフォント（書体）名を"sans-serif"のところに置き換えます。

１６．リンクに背景色を表示する

投稿記事のなかでリンクを設定しても、閲覧者が見て、リンクの有無が分かりにくい。
そこで、リンクした文字列の背景に色をつけることにしました。

１．リンク設定のHTMLのなかに赤字のようにCSSを直接埋め込みます。

<a href="リンク先URL" style="background-color:pink;">リンクの背景</a>

２．上のように一つ一つ背景色を設定するのは面倒ですね。
投稿記事の中のリンクは全て同色の背景色が付くようにします。
CSS編集にして、下記を追加します。

DIV.POST_BODY a{background-color: pink; } /*リンク背景をピンク*/

ただし記事最下部のタグ（Tags:の右側部）にも背景色がつきます。

１５．ブログタイトルの文字書体を変えてみる

デフォルトの文字フォントは無味無臭で面白くない。
そこで好きなフォントに変えてみた。

★CSS編集にして、下記を探し、赤字部分を追加するだけです。
必ず TAHOMA の前に追加してください。
フォントの種類は好みで変更してください。
フォントの大きさは、"14PT"の数字を変えます。
引用符" "は基本的に不要です。（あっても良い）
ただし「ＭＳ 明朝」のように半角スペースがある場合は" "が必要です。

DIV.HEADER {
FONT : BOLD 14PT "HG行書体",TAHOMA;
MARGIN-TOP : 19PX;
}

★使用スキンによっては下記のようなものもあります。
DIV.HEADER {
FONT-FAMILY : "HG行書体",TAHOMA,;
FONT-SIZE : 30PT;
FONT-WEIGHT : BOLD;
MARGIN : 20PX 0PX 10PX 40PX;
LINE-HEIGHT : 100%;
}

★文字の色を変えるには、下記の "COLOR: #000"のカラーコードを変更します。
DIV.HEADER A:LINK {COLOR: #000; TEXT-DECORATION: NONE}

★書体の例・・・ほんの一部です。ワードやエクセルで調べてください。
パソコンにインストールされていないと表示されません。
そのときはデフォルトの標準書体で表示されます。

書体名の漢字は全角、英字は基本的に半角だが全角もある。

「HG行書体」「HGP行書体」「HGS行書体」（英字は半角。違いは？・・・）

「HGP創英角ﾎﾟｯﾌﾟ体」(HGPは半角、ﾎﾟｯﾌﾟも半角)

「CRＣ＆Ｇ流麗行書体」(CRは半角、Ｃ＆Ｇは全角)

「CRバジョカ廉書体」(CRバジョカ廉書体。CRは半角、バジョカは全角)

「MS 明朝」(ＭＳは全角、明朝との間は半角スペース)