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

カテゴリー:css

flexbox インストールなど面倒なことなしにDIV BOX を横に並べるクラス

flexbox は、div の box を横に並べるためのブラウザに標準装備されてるクラス。 乱暴な言い方すればそういうことです。現場では細かいことはどうでもよくて、とにかく簡単に DIV BOX を横に並べることができればなんでもいい。…

詳細を見る

携帯の時に内容を非表示にする css

携帯の時に内容を非表示にしたい場合、クラスを指定しておいて、@medeia を使用し、クラスを非表示設定にしてしまえばOKです。 具体的には、こんな感じになります。 [linebox lang]   : [/…

詳細を見る

案外忘れるボックス内で位置を調整できるボックスの書き方

背景画像を持ったBOXの上で文字などをいれて、文字の場所を調整することは結構ありますが。 わすれる(笑) 外側の DIV BOX は、 position: relative; height:256px; width…

詳細を見る

css ボタン hover で色を変える

css の単純なボタンが欲しくなることはよくあります。 角の丸い枠の中にテキストを入れるタイプのものです。 例えば、こんなやつ こんなボタン これ、書き方をちょっと間違えるとはまります(笑) HTML側…

詳細を見る

cssで作るシンプルな見出し枠

最近のテーマの見出しって昔みたいに枠付けたりとか華美な枠が付かないものが多くなってきました。 記事メインってことだからそりゃそうだと思うんだけど、それでもシンプルな枠を付けたくなります。 でも、画像使ったりとかせずにちょこちょこっと…

詳細を見る

ボックスの中に帯付テキストを乗せる

ボックスの中に帯付テキストを画像の真ん中のほうに乗せる テキスト [linebox lang] テキスト …

詳細を見る

グローバルメニューのように要素を横に並べる。

最近のグローバルメニューは、横並びが当たり前ですよね? 同じように要素を横に並べたくなることは多々あります。 bootstrap のような表型を実現する css ユニットも出てきていて、かなり便利ですけど、そこまでやらなくてもサ…

詳細を見る

before content で設定したアイコン 文字が化ける

before content で設定したアイコン 文字が化けることって結構あります。 前のところではでていたのになんで? かなりイラつきます。 答えは結構簡単なこと。 before content は効いているの…

詳細を見る

CSSに慣れてくるとわけがわからなくなるセレクタ

CSSになれてくると、結構高度なCSSを読むようになる。 そうなると頭の中でごっちゃになる セレクタ。 つまり、ターゲットにしたい場所を指定する方法だね。 「なんとか」ってタグと同じスタイルにしたいけど、どう書けばいいんだ?と…

詳細を見る

div で綺麗に枠に収めるための display:inline-block

div でくくると文章の塊をはっきりさせることができて便利です。 が、幅が100%。 これ、こまる。 こんな感じになるしぃ  ↓ 横に長~~~いBOX ので、その場合は、 inline-block を使い…

詳細を見る

ol と ul の違い html リスト型表示タグ

html リスト型表示、ol と ul の違い ol は、リストの前に順番の数字がつきます。 ul は、リストの前に黒丸がつきます。 前述のリストを ol で書くと アコーディオンパーツ カテゴリー一覧 特定カテゴリーの…

詳細を見る

textarea のリサイズ

div のボックスや textarea の耳引っ張って大きくしたり小さくしたりできると便利なことがあるね。 まぁ、なくてもいいんだけど。 でもそんな場面にでくわしたら、resize を使えばいいんだ。 [php] <t…

詳細を見る

DIV BOX の高さを合わせたい。min-height,max-height,min-width,max-width

DIV ボックスの高さを合わせたい。 例えば、こういうやつ。 …

詳細を見る

クラス の html タグ (要素) にだけ スタイルを設定したい

クラス の html タグ (要素) にだけ スタイルを設定したい。 これって、結構わすれすので記録しておきます。 つまり、class名 abc と指定した html タグ にだけ影響を及ぼしたい場合だな。 <a hr…

詳細を見る

NEXTPAGE

案外地味な NEXTPAGE。   わかりやすさでいうとどうかな?って気もするけれど、結構素敵なのでやってみた。 【次ページ】【写真】「りんく」 &n…

詳細を見る

スポンサーリンク

よく使うタグ

・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:ユーザー入力補助

カテゴリー

MW WP FORM のフックが効かない。

MW WP FORM のフックが効かない。 MW WP FORM のフックが効かない。MW WP FORM は、各種フックがあってカスタマイズが便利~とか言われているプラグインですが。。。マニュアルにはあるのにフックが効かないフックがかなりある

MW WP FORM のショートコードで出力される内容をカスタマイズする。

MW WP FORM のショートコードで出力される内容をカスタマイズする。 MW WP FORM のショートコードで出力される内容をカスタマイズしたくなりました。非表示フィールド type=”hidden” にデータをためておいて、それをメール送信する

WelCart 買い物かごのカスタマイズ、テンプレートファイルの場所

WelCart 買い物かごのカスタマイズ、テンプレートファイルの場所 WelCart 買い物かごのカスタマイズするとき、毎回テンプレートファイルを探すのでメモしておきます。WelCart 買い物かごのカスタマイズ、テンプレートファイルの場所WelCart 買い物かごのカ

WelCart で投稿ページに商品購入欄を作る

WelCart で投稿ページに商品購入欄を作る WelCart の商品ページは、ご存知んごとくウルトラダサい。これをカスタマイズしないとなんとも素人っぽさの抜けないサイトになってしまう。WelCart で投稿ページに商品購入欄を作るときのモジュール

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

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

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

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