HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

リアルタイムHTMLエディタ

スポンサーリンク

HTMLエディタをブラウザで作ろうとおもうと、どうしてもほしくなるのがリアルタイムプレビュー。
どう書けばいいか?

改行処理部は、単純に br を入れてるだけなので本チャンでは工夫が必要になる。
もっとも、べたのHTMLをかけば・・・ってことならテキスト内にユーザーが br を
入れるべきってことになるので、あまりかんがえずに javascript で リプレースかけずに投げ込めば済む。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>プレビュー</title>
<body>
----- このスクリプトで入力された内容を入れ替える -----
<script>
function ModyStyle()
{
    document.getElementById("style").innerHTML = '<style>'+document.getElementById("styleBOX").value+'</style>';
}
function ModyBody()
{
    var buff;
    buff = document.getElementById("bodyBOX").value;
    // 1行ごとに改行を入れている(プレーンのHTMLを入力させるということなら
    // document.getElementById("htmlbody").innerHTML = buff;
    // でOK
    document.getElementById("htmlbody").innerHTML = buff.replace( /\n/g , "<br />\n" ) ;
}
</script>
--------------------------------------------------
<div id="style">
</div>
<br />
----- 入力欄 -------------------------------------
<form>
<div class="titlebox titleboxS">
<textarea OnChange="ModyStyle();" OnKeyUp="ModyStyle();"id="styleBOX" cols="80" rows="8">
#htmlbody{
font-size:12px;
}
</textarea>
</div>
<div class="titlebox titleboxB">
<textarea OnChange="ModyBody();" OnKeyUp="ModyBody();"id="bodyBOX" cols="80" rows="8">
<strong>TEST</strong>
リアルタイムHTML
ここにデータを書き込むと
HTMLBODY にデータ内容が表示されるよ。

スタイルは、上の STYLE で指定できるよ。

</textarea>
</div>
</form>
--------------------------------------------------

----- 全体のデザイン用 style ----------------------
<style>
.titlebox {
border: 1px solid #0A77B7;
border-radius: 4px;
margin: 0.5em 0;
padding: 0.5em;
position: relative;
}
.titleboxhtmlbody {
border: 1px solid #333333;
border-radius: 4px;
margin: 0.5em 0;
padding: 0.5em;
position: relative;
}
.titleboxS::before {
background-color: #fff;
color: #0A77B7;
content: "STYLE";
font-weight: bold;
left: 1em;
padding: 0 .5em;
position: absolute;
top: -1em;
}
.titleboxB::before {
background-color: #fff;
color: #0A77B7;
content: "BODY";
font-weight: bold;
left: 1em;
padding: 0 .5em;
position: absolute;
top: -1em;
}
.titleboxHTMLBODY::before {
background-color: #fff;
color: #0A77B7;
content: "HTMLBODY";
font-weight: bold;
left: 1em;
padding: 0 .5em;
position: absolute;
top: -1em;
}
</style>
--------------------------------------------------

----- 表示エリア ----------------------------------
<div id="htmlbody" class="titleboxhtmlbody titleboxHTMLBODY">
<strong>TEST</strong><br />
リアルタイムHTML<br />
ここにデータを書き込むと<br />
HTMLBODY にデータ内容が表示されるよ。<br />
<br />
スタイルは、上の STYLE で指定できるよ。<br />
<br />
</div>
--------------------------------------------------
</body>
</html>

スポンサーリンク

スポンサーリンク

よく使うタグ

・float クリア
<br clear="all"><div style="clear:both;" class="clearfix"></div>
・角丸め
round-radius
border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px;
・div box
overflow:scroll;min-width:300px;max-width:300px;min-height:300px;max-height:300px;
・TEXTAREAリサイズ
resize: vertical;
・サイトURL
home_url() // http://…
if(site_url()==home_url){
$shorturl_yuzu_path = substr(ABSPATH,0,strpos( ABSPATH, substr(site_url(),strlen(home_url()) ) ) ).’/’;
}else{
$shorturl_yuzu_path = ABSPATH.’/’;
}
// /var/…
・WP HOME URL
site_url() // http://…/wp
ABSPATH // /var/…/wp
・プラグイン(自分のDIR追加必要)
plugins_url() // http://…/plugins
WP_PLUGIN_URL // http://…/plugins
WP_PLUGIN_DIR // /var/…/plugins
・使用中のテーマ
get_template_directory_uri() // http://…/theme/xx
get_template_directory() // /var/…/theme/xx
・wp-content
content_url() // http://…/wp-content
WP_CONTENT_DIR // /var/…/wp-content
・画像URLからDIR変換
$pctdir=str_replace(content_url(), WP_CONTENT_DIR,$pcturl);
・パス名分解
$pathData = pathinfo($file);
echo $pathData["dirname"]; // /var/~
echo $pathData["filename"]; // xxx
echo $pathData["extension"]; // txt
echo $pathData["basename"]; // xxx.txt
・画像サイズ
list($width,$height) = getimagesize($url);
if(has_post_thumbnail()){
$thumbnail_id = get_post_thumbnail_id();
$thumbnail_img = wp_get_attachment_image_src( $thumbnail_id , ‘full’ );
$src = $image[0]; //url
$width = $image[1]; //横幅
$height = $image[2]; //高さ
・画像サイズ比率
list($src_w,$src_h) = getimagesize($file);
$dst_w = 600;$dst_h = 0;
$dst_h = ($dst_w!=0)?(intval(($src_h*$dst_w)/$src_w )):(($dst_h!=0)?(intval(($src_w*$dst_h)/$src_h)):0);
・疑似要素順
link visited hover active


特殊文字
シングルクォート : &#39;
ダブルクォート : &quot;
WP設定内表示前処理(htmlタグ許可項目)
$str = str_replace(‘<','&lt;' ,$str);
$str = str_replace(‘>’,’&gt;’ ,$str);
$str = str_replace(‘\”‘,’&quot;’,$str);
$str = str_replace(“\'”,’&#39;’ ,$str);
WO設定項目表示前処理(htmlタグ許可項目)
$str = str_replace(‘\”‘,'”‘,$str);
$str = str_replace(“\'”,”‘”,$str);
・テーマ
get_theme_root_uri()
get_theme_root()
・WP 情報
get_bloginfo( $show )
・Wp config FTP 情報 設置
define( ‘FTP_HOST’, ‘host’ );
define( ‘FTP_USER’, ‘id’ );
define( ‘FTP_PASS’, ‘pw’ );
define( ‘FTP_SSL’, false );
弾に使う
placeholder:ユーザー入力補助

カテゴリー

FB 広告 最適化~グーグルアナリティクスとサーチコンソールの連動のさせかた(必要な分だけ)

FB 広告 最適化~グーグルアナリティクスとサーチコンソールの連動のさせかた(必要な分だけ) FB 広告 最適化にあたって必要になってくるツールがグーグルアナリティクスとサーチコンソール。別にグーグルのアナリティクス、サーチコンソールでなくてもアクセス解析はできるんだけど、グーグルはユーザー囲

FB 広告 最適化~グーグルアナリティクスの使い方(必要な分だけ)

FB 広告 最適化~グーグルアナリティクスの使い方(必要な分だけ) FB 広告 最適化にあたって必要になってくるツールがグーグルアナリティクス。別にグーグルのアナリティクスでなくてもアクセス解析はできるんだけど、グーグルはユーザー囲い込みの為他のアクセス解析では見せな

FB 広告 最適化~グーグルサーチコンソールの使い方(必要な分だけ)

FB 広告 最適化~グーグルサーチコンソールの使い方(必要な分だけ) FB 広告 最適化にあたって必要になってくるツールがグーグルサーチコンソール。別にグーグルのサーチコンソールでなくてもいいんだけど、グーグルはユーザー囲い込みの為他のアクセス解析では見せなくしたキーワ

FB 広告 最適化~グーグルのアクセス解析の基本

FB 広告 最適化~グーグルのアクセス解析の基本 FB広告を最適化するためには、アクセス解析が重要なカギを握ります。FB広告から当該ページに飛んでくるときURLにオプションを付けることができます。このURLにつけたオプションを使ってどの広告から、どん

jQuery ボタンを押しても反応しない

jQuery ボタンを押しても反応しない jQuery の click イベントを使ってボタンを押したら alert を表示する簡単な仕様なのになにも反応しない。一瞬はまってしまうことって・・・ありますよね?例えば、こう書きます。popup.

WP パーマリンク リダイレクト インターナルサーバーエラー

WP パーマリンク リダイレクト インターナルサーバーエラー WP パーマリンクのリダイレクトがインターナルサーバーエラーを起こすようになった。ユーザーさんのサイトなので「なにをしたか」わからない。WP パーマリンク リダイレクト インターナルサーバーエラーのい