1。準備要素
1）フォントJSファイルを交換します
JSコード：
関数com_stewartspeak_replacement（）{/* Stewart Rosenberger http://www.stewartspeak.com/headings/このスクリプトによるダイナミック見出しジェネレーターは、特定または一般的な要素をWebページで検索し、サーバーサイドと組み合わせて動的に生成された画像に置き換えます。 Script。*/fallesElector（ "h1"、 "dynatext/heading.php"、true）; //最初の2つのパラメーターを変更する必要がありますvar testurl = "dynatext/loading.gif"; //対応するイメージパスvar donotprintimages = false; var printercss = "falling-print.csss"; var hideflicker = false; var hideflickercsss = "facterment-screen.css"; var hideflickertimeout = 100; //責任ある変更はここで行うことができます/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- further customize this script's abilities, make sure you're familiar with JavaScript。ソーダか何かをつかみます。 function fultiseSelector（selector、url、wordwrap）{if（typeof items == "undefined"）items = new array（）; items [items.length] = {selector：selector、url：url、wordwrap：wordwrap};} if（hideflicker）{document.write（ '<link id = "hide-flicker" rel = "styleSheet" media = "href ="' + hidflickercss + ' />'）; window.flickercheck = function（）{if（！imageloaded）setStylesheetState（ 'hide-flicker'、false）; }; setimeout（ 'window.flickercheck（）;'、hideflickertimeout）} if（donotprintimages）document.write（ '<link id = "print-text" rel = "styleSheet" media = "print" href = "' + printercss + '" />'）; var test = new image（）; test.onload = function（）{mageLoaded = true; if（documentloaded）facterment（）; }; test.src = testurl + "？date =" +（new date（））。getTime（）; addloadhandler（function（）{documentloaded = true; if（imageloaded）facterment（）;}）; function documentload（）{documentloaded = true; if（imageLoaded）facterment（）;} function facterment（）{for（var i = 0; i <items.length; i ++）{var Elements = getElementsByselector（item [i] .selector）; if（elemention.length> 0）for（var j = 0; j <letenment.length; j ++）{if（！elemention [j]）継続; var text = extracttext（elements [j]）; while（要素[j] .haschildnodes（））要素[j] .removechild（elements [j] .firstchild）; var tokens = items [i] .wordwrap？ text.split（ ''）：[text]; for（var k = 0; k <tokens.length; k ++）{var url = items [i] .url+"？text ="+escase（tokens [k]+''）+"＆selector ="+escase（items [i] .selector）; var image = document.createelement（ "img"）; image.classname = "facterment"; image.alt = tokens [k]; image.src = url;要素[j] .AppendChild（画像）; } if（donotprintimages）{var span = document.createelement（ "span"）; span.style.display = 'none'; span.classname = "print-text"; span.appendChild（document.createTextNode（テキスト））;要素[j] .AppendChild（SPAN）; }}} if（hideflicker）setstylesheetstate（ 'hide-flicker'、false）;} function addloadhandler（handler）{if（window.addeventlistener）{window.addeventlistener（ "load"、handler、false）; } else if（window.attachevent）{window.attachevent（ "onload"、handler）; } else if（window.onload）{var oldhandler = window.onload; window.onload = function piggyback（）{oldhandler（）;ハンドラ（）; }; } else {window.onload = handler; }} function setStylesheetState（id、enabled）{var sheet = document.getElementById（id）; if（sheet）sheet.disabled =（！enabled）;} function抽出物（要素）{if（typeof element == "string"）return element; else if（typeof element == "未定義"）return element; else if（element.innertext）return element.innertext; var text = ""; var kids = element.childnodes; for（var i = 0; i <kids.length; i ++）{if（kids [i] .nodetype == 1）text+= extracttext（kids [i]）; else if（kids [i] .nodetype == 3）text += kids [i] .nodevalue; } return text;} /*特定のCSSセレクタールールに一致する要素をページに検索します。いくつかの複雑なルールは互換性がありません。サイモン・ウィリソンの優れた「GetElementsByselector」機能に基づいています。オリジナルコード（コメントと説明付き）：http：//simon.incutio.com/archive/2003/03/25/getelementsbyselector*/function getelementsByselector（selector）{var tokens = selector.split（ ''）; var currentContext = new Array（document）; for（var i = 0; i <tokens.length; i ++）{token = tokens [i] .replace（/^/s+/、 ''）。置換（// s+$/、 ''）; if（token.indexof（ '＃'）> -1）{var bits = token.split（ '＃'）; var tagname = bits [0]; var id = bits [1]; var element = document.getElementById（ID）; if（tagname && element.nodename.tolowercase（）！= tagname）new array（）; currentContext = new Array（element）;続く; } if（token.indexof（ '。'）> -1）{var bits = token.split（ '。'）; var tagname = bits [0]; var classname = bits [1]; if（！tagname）tagname = '*'; var fund = new Array; var fundCount = 0; for（var h = 0; h <currentContext.length; h ++）{var Elements; if（tagname == '*'）elements = currentContext [h] .all？ currentContext [h] .all：currentContext [h] .getElementsByTagname（ '*'）; else Elements = currentContext [h] .getElementsByTagname（tagname）; for（var j = 0; j <Elements.length; j ++）fund [fundCount ++] = Elements [j]; } currentContext = new Array; var currentContextIndex = 0; for（var k = 0; k <fund.length; k ++）{if（fund [k] .classname && fund [k] .classname.match（new regexp（ '// b'+classname+'// b'）））currentContext [currentContextIndex ++] = [k]; } 続く; } if（token.match（/^（/w*）/[（/w+）（[=〜/|/^/$/*] =？ "？（[^/]）"]*） "？/] $/））{var tagname = regexp。$ 1; var attrname = regexp。 （！tagname = '*'; var h = 0; currentContext [H] found [j] = currentContextIndex = 0; = Atrune break '〜 regexp（ '+astruce+'）; case function（e.getattribute（aTrname）== ：checkfunction（e） Array foundcount = 0; execute codeif（document.createelement && document.getelementsbytagname &&！navigator.useragent.match（/opera //？6/i））com_stewartspeak_replacement（）;2）画像のPHPファイルを生成します
<？PHP/* Stewart Rosenberger by Stewart Rosenberger http://www.stewartspeak.com/headings/このスクリプトによるダイナミック見出しジェネレーターは、指定したフォント/サイズで記述されたテキストのPNG画像を生成します。これらのPNG画像はブラウザに渡されます。オプションで、後で使用するためにキャッシュできます。キャッシュされた画像が見つかった場合、新しい画像は生成されず、既存のコピーがブラウザに送信されます。 PHPの画像処理機能に関する追加のドキュメントは、http：//www.php.net/image/ */$ font_file = 'trebuc.ttf'; //対応するxiuga $ font_size = 23; //対応する修正は$ font_color = '＃000000fff'; ; $ transparent_background = true; $ cache_images = true; $ cache_folder = 'cache';/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ; $ send_buffer_size = 4096; // GD supportif（！function_exists（ 'imagecreate'））datal_error（ 'エラー：サーバーがphpイメージ生成をサポートしない'）; // textif（empty（$ _ get ['text']））datal_error（ 'エラー：テキストなし指定されていない。'）; $ text = $ _get ['text']; if（get_magic_quotes_gpc（））$ text = stripslashes（$ text）; $ text = javascript_to_html（$ text）; //キャッシュされたコピーを探し、$ hash = md5（basename（$ font_file）。$ font_size。$ font_color。$ background_color。$ transparent_background。$ text）; $ cache_filename = $ cache_folder。 '/'。 $ハッシュ。 $ extension; if（$ cache_images &&（$ file = @fopen（$ cache_filename、 'rb'）））{header（ 'content-type：'。$ mime_type）; while（！feof（$ file））print（（$ buffer = fread（$ file、$ send_buffer_size）））; fclose（$ file）; exit;} // font availability $ font_found = is_readable（$ font_file）; if（！$ font_found）{datal_error（ 'エラー：サーバーに指定されたフォントがありません。'）; hex_to_rgb（$ font_color）; $ dip = get_dip（$ font_file、$ font_size）; $ box = @imagettfbbox（$ font_size、0、$ font_file、$ text）; $ image = @imagecreate（$ box [$ box]; ||！$ box）{datal_error（ 'エラー：サーバーはこの見出し画像を作成できませんでした。 ImageColorAllocate（$ image、$ font_rgb ['red']、$ font_rgb ['green']、$ font_rgb ['blue']）; ImageTtftext（$ image、$ font_size、0、$ box [0]、abs（$ box [5] - $ box [3]） - $ box [1]、$ font_color、$ font_file、$ text）; // set transparentif（$ transparent_background）imagecolortransparent（$ image、$ background_color）; Header（ 'content-type：'。$ mime_type）; imagepng（$ mage）; // cacheif（$ cache_images）の画像のコピーを保存する{@imagepng（$ image、$ cache_filename）;} imagedestroy（$ image）;出口 ; /*このサイズのこのフォントの「ディップ」（ベースラインの下にドロップされたピクセル）を決定してみてください。 「abcdefghijklmnopqrstuvwxyz」。 '1234567890 '。 '！ @＃$％^＆*（）/' "///;。、`〜<> [] {} - +_- = '; $ box = @imagettfbbox（$ size、0、$ font、$ test_chars）; return $ box [3];}/*エラーメッセージを含むメッセージを含む画像を含むイメージを作成する場合。代わりに500コードとしてImageColerAllocate（255,255,255） 500コードヘッダー（http/1.0内部サーバーエラー "）; if（$ hex、0,1）$ hex = subst（$ hex）if（$ hex）{$ hex = subst（$ hex、0,1）。 substr（$ hex、2,1）; strlen（$ hex）！= 6） $ rgb ['blue'] = hexdec（$ hex、4,2））; preg_match_all（ '/％u（[0-9a-f] {4}）/i'、$ text、$ matches）; '＆＃'。hexdec（$ matches [1] [$ i]）、$ text;}？>3）必要なフォント
ここでは、必要な自己をJSファイルとPHPファイルと同じディレクトリに配置します（変更することもできますが、対応するファイルも変更する必要があります）
4）PHPのGD2ライブラリ
2。HTMLコードを実装しました
<？php //ポップアップUtilsライブラリをロード// require_once 'include/popup_utils.inc.php';？> <！doctype html public " - // w3c // dtd xhtml 1.1 // en" "http://www.w3.org/tr/xhtml11/dtml11.> xhtml11. <head> <title> phpを使用したプロフェッショナル検索エンジン最適化：目次</title> <script = "text/javascript"言語= "javascript" src = "dynatext/andpactment.js"> </script> </head> <body onload = "window.resizeto（800,600）;" onresize = 'setimeout（ "window.resizeto（800,600）;"、100）'> <h1> PHPを使用したプロフェッショナル検索エンジン最適化：目次</h1> <？php //訪問者がserp // display_navigationから来た場合にのみポップアップナビゲーションを表示// display_popup_navigation（）;あなた：プログラマーおよび検索エンジンマーケティング担当者</li> <li>基本的なSEOのプライマー</li> <li>挑発的なセドリのURLS </li> <li>コンテンツの再配置とHTTPステータスコード</li> <liブックマーク</li> <li>ブラックハットSEO </li> <li>サイトマップ</li> <li>リンクベイト</li> <li> IPクローキング、ジオターゲティング、およびIP配信</li> <li>外国語SEO </li> <li>技術的な問題への対処</li> <li>サイト臨床： weblog？</li> <li>正規表現の紹介</li> </ol> </body> </html>
3。使用前後の比較
使用する前
使用後