fc2ブログ講座(準備中)


テンプレート 記事
htmlとcssについて
背景、文字色
カラム幅
行間
フォント
リンク文字の設定
hrタグの見え方について

記事
コメント
コメント投稿欄
コメント編集欄
[Read More]を変更
[Read More]を画像にする
[Read More]で飛ぶ位置を変更

javaスクリプト その他
プロフィール画像をランダムに変更する
複数選択バージョン
レア度指定バージョン
オンマウスで吹き出しを出す
計算した値を表示
アスキーアートを綺麗に表示する
文字の大きさを細かく設定する
文字に背景色をつける(マーカー)
文字を動かす
html文をそのまま表示
Flash動画の作成


fc2,blog,ブログ,講座,リファレンス,HTML,CSS,テンプレート,コメント,comment,プラグイン,plugin,構造,編集,変更,装飾,説明,解説,java,javascript,script,スクリプト
スポンサーサイト

オンマウスで吹き出しを出す


サンプル
下の画像、文字にマウスをあててみてください。

 説明


まず、以下のコードをどこかに貼り付けます。
※ ブログの場合、テンプレートのHTML内に貼ると、毎回貼らずに済みます。
<script type="text/javascript"><!--
var poptext = "";
var popvisible = 0;
document.write("<div id='PopupText' style='visibility:hidden;'></div>");
window.document.onmousemove = getMouseXY;
//使う範囲を限定したい場合は、この部分を以下のようにしてください。(「ID名」は任意)
//window.document.getElementById("ID名").onmousemove = getMouseXY;
//そして使う時には、以下のように、使用したい部分を囲ってください。
//<div id="ID名">使用したい部分</div>
function getMouseXY(PopEvent){
  Popup=document.getElementById("PopupText");
  if(popvisible == 1){
    if (undefined !== window.ActiveXObject) {//IE
      var __base__scroll__;
      if(document.compatMode=='CSS1Compat') {//IEモード1
        __base__scroll__ = document.documentElement;
        x = __base__scroll__.scrollLeft + event.clientX;
        y = __base__scroll__.scrollTop + event.clientY;
      }
      else {//IEモード2
        x = document.body.scrollLeft + event.clientX;
        y = document.body.scrollTop + event.clientY;
      }
    }
    else{//IE以外
      x = PopEvent.pageX + 0; //ズレる場合は数値を変えてください
      y = PopEvent.pageY + 0;
    }
    Popup=document.getElementById("PopupText");
    Popup.innerHTML = poptext;
    Popup.style.position = "absolute";
    Popup.style.zIndex = 10000;
    Popup.style.margin = 0 + "px";
    //----- 自由に変更(吹き出しデザイン) ここから -----
    //変更したくない部分は、スラッシュ2個(//)でコメントアウトしてください。
    Popup.style.left = x + 10 + "px"; //マウスからの横座標(吹き出し位置)
    Popup.style.top = y + 15 + "px"; //マウスからの縦座標(吹き出し位置)
    Popup.style.maxWidth = 300 + "px"; //横幅の最大値
    Popup.style.border = "solid #bb7f44 2px"; //枠色・太さ
    Popup.style.padding = 3 + "px"; //枠内の余白
    Popup.style.color = "#eeeeaa"; //文字色
    Popup.style.fontSize = 13 + "px"; //文字サイズ
    Popup.style.fontFamily = "Osaka","MS Pゴシック","sans-serif"; //文字種類(左から優先)
    Popup.style.lineHeight = '1.25'; //行と行の間隔
    Popup.style.backgroundColor = "#000000"; //背景色
    //----- 自由に変更(吹き出しデザイン) ここまで -----
    Popup.style.visibility = "visible";
  }
  else{ Popup.style.visibility = "hidden"; }
}
// --></script>
オレンジ部分を書き変えると、吹き出しのデザインを変更できます。
※ 記事内に貼る場合は、「自動改行」ではなく「HTMLタグのみ」にしてください
※ サイトによって、IE以外では少々ズレる場合があります。各々で調節してください。


これで準備完了!


あとは好きなHTMLタグに、以下のコードを追加するだけです。
onMouseover='poptext="吹き出させたい文章";popvisible=1;' onMouseOut='popvisible=0;'

上のサンプルを例にあげると
道士服の画像
<img src="http://blog-imgs-55.fc2.com/k/o/u/kou0120/rotoitem31.png" border="0" width="32" height="32" onMouseover='poptext="古い道士服";popvisible=1;' onMouseOut="popvisible=0;" />
画像横の説明
<font size=5 onMouseover='poptext="これはシーフの防具です。";popvisible=1;' onMouseOut="popvisible=0;">説明</font>
となります。


設定した吹き出しが出れば成功です。

対応ブラウザ:IE、Chrome、firefox、Opera、safari
java,javascript,script,ジャバスクリプト,吹き出し,マウスオン,オンマウス,マウスオーバー,オーバーマウス,ロールオーバー,オーバーロール,かざす,onmouseover,onmousemove,ポップアップ,ツールチップ,tooltip,popup,hukidashi,fukidashi,hukidasi,fukidashi,マウス座標,firefox

アスキーアートを綺麗に表示する


まず、
「ブログ管理画面」 ⇒ 「環境設定:テンプレートの設定」
といくと、下の方に
「○○○のスタイルシート編集」
があるので、その画面までいってください。

このような画面になると思います。
blogaa1.png


この編集欄のどこでもいいので、
以下のソースをコピペします。 (できれば、わかりやすい場所に)
div.AA {
  font-weight:normal;
  font-family: "MS PGothic",sans-serif;
  font-size:12pt; /* 変更OK */
  line-height:100%;
}

コピペしたら、「更新」を押してください。


これで準備は完了です



あとは、AAを打つときに以下のようにします。
<div class="AA">
お好みのアスキーアートを入れてください。
</div>


するとすると?

         ____
        /     \
      /   _ノ '' ⌒\    
    /    (● ) (● ) \
    |    :::::⌒,  ゝ ⌒::::|      
     \      `ー=-'  /   どうだい?
 ⊂⌒ヽ/           ヽ /⌒つ
   \ ヽ  /       ヽ    /
    \_,,ノ        |、_ノ




このようになれば成功です!

SpecialThanks くさーさん
java,javascript,script,スクリプト,ランダム,変数,指定,乱数,確率
今日のこぅくん
テニスと映画とプログラムが好きです
頑張るぞー( ゚∀゚)o彡゜
リンク先の更新!
プロフィール

こぅです(゜∀゚()
REDSTONEの青鯖にいます。
ギルドラオス共和国に所属。

引退してます。

九州住みの大学生です(  ̄^ ̄)ゝ

・Twitter: koukunRS
・Skype: yamadashi_skype
・Discord: kou#9204
・Gmail: koukun0120@...



赤石( ゚∀゚)o彡゜
リンク
いつもより余計に回っております


こっそり