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

メインコンテンツにかっけーランキングパーツを作りたい。その2

スポンサーリンク

とりあえず、原型はできたわけ。⇒前回記事

原型

なんちゃらかんちゃら商品名
説明文がはいるよていでごわす

  んで、作業に先立ち、サンプル商品の画像  

画像+説明文って感じにしてみる

なんちゃらかんちゃら商品名
説明文がはいるよていでごわす

案の定・・・ ただ並べたらこうなるね?   ブロックを作る・・・左寄せ、で、画像と説明文の間に縦の点線をいれたい。  

画像+説明文、それぞれブロックにする

なんちゃらかんちゃら商品名
説明文がはいるよていでごわす。

ブロックにしてしまうと高さがなくなるので、こうなるね。どうも、高さがなくなるってのが困るな。  

画像+説明文、それぞれブロックにする ul を使って見る

なんちゃらかんちゃら商品名
  • 説明文がはいるよていでごわす。

なんでulを使ってるんだろうと思ってたので、ULを使って見た。 たかさがなくなることに違いはなかった。 じゃあ、なんでグローバルナビとかって ul なんだろう? div の横並びでもいいやん・・って思った。   さて、高さか・・・ まぁ、商品画像のブロックに高さをくれてやればいいんだけど、なんかその、高さ固定とかってやりたくないんだよね。融通が利かなくなるのが嫌いなんだ。とりあえず、一応の完成形を作るという意味で高さを与えてみる。  

商品画像ブロックに高さを与える

なんちゃらかんちゃら商品名
  • 説明文がはいるよていでごわす。

あら?ブロックに与えないとだめか?  

商品画像+説明のブロックを ul から div にしてみる

なんちゃらかんちゃら商品名
説明文がはいるよていでごわす。

高さは解決するけど、右側のマージンはなんだ?  

左マージンの正体は?考えながら縦線をさらっと入れ、左右の幅があってないところも直す。

なんちゃらかんちゃら商品名
説明文がはいるよていでごわす。

あれ?ヒントつかんだ。 商品名のDIVの後ろに改行いれたらこうなった。  

クラウン+商品名のブロックの後ろに br を入れてみた。

なんちゃらかんちゃら商品名
説明文がはいるよていでごわす。

つーことはだ・・・そか、クラウン+商品名の・・・ なにが効いてたってことか。その何かが不明。ブロック内の float が外にも影響する?CSSって、この辺りのスコープがわかりにくい。スコープって概念はないってことだべな。明示的にクリアしてやらないと、発見したらそれがそれ以降も続くと。 ま、とりあえず、早々に、画像の方にマージンをつける。  

商品名のDIVの後ろに br を入れてみた。

なんちゃらかんちゃら商品名
説明文がはいるよていでごわす。

てーとだ・・・ 気が付いた。クラウン+商品名のボックスと商品画像+商品説明のブロックの行間が空いた・・(--; これは、改行ピッチなわけだから、このブロック全体の改行ピッチを狭くしてやる・・・てーと説明文の改行ピッチが狭くなりすぎるので、説明文のブロックの改行ピッチをスタンダードにする。。。か。   こんな感じか?  

上下二つのブロックの行間ピッチを狭くする (line-height)

なんちゃらかんちゃら商品名
説明文がはいるよていでごわす。ごわごわごわす。

変化なし・・・ 改行ではなくて、float をクリアしてみた。  

フロートのクリアで改行させてみる

なんちゃらかんちゃら商品名
説明文がはいるよていでごわす。ごわごわごわす。

状況はもっと悪くなった(笑)   ちなみに、 line-heightで何かうまくいった試しが一度もないことを付け加えておく。line-heightの使い方がいまいち不明。 なんとか行間を詰めたい。位置指定で動かしたくない。さて、行間を詰める方法は?・・・   ここまでの状況を図解してみる。 解説 2015y01m12d_195616977   そういえば・・・  

style でクリアしてみる

なんちゃらかんちゃら商品名
説明文がはいるよていでごわす。ごわごわごわす。

だめか・・・ ブロック抜けるときに style で clear:both; を入れてみたんだけどね。 う~ん、br だとピッチが広い。 clear は効かない。 line-heightは問題外。さてっと・・・ ん? p タグ?  

pタグ でクリアしてみる

なんちゃらかんちゃら商品名

説明文がはいるよていでごわす。ごわごわごわす。

効かない・・・ あらためていう。 line-heightで解決した問題など一つもない!・・・ %じゃだめなのかな?<まだ期待してる

pタグ でクリアしてみる

なんちゃらかんちゃら商品名
説明文がはいるよていでごわす。ごわごわごわす。

あ~~~、期待した自分が情けない! 全然だめ効いてない。 説明文の方は効いてるみたいだけど、肝心のブロック間の改行ピッチをかえられない・・・ブロック全体にもう一度かけてみよう。  

ブロック全体の改行ピッチを変えてみる(line-height)

なんちゃらかんちゃら商品名
説明文がはいるよていでごわす。ごわごわごわす。

あら? いい感じ。 初めて line-height でうまくいくものが出そうな気配。  

全体ブロックの下パディングを入れる/商品名の上パディングを入れる(改行ピッチ調整分、位置が上がってしまったので)

なんちゃらかんちゃら商品名
説明文がはいるよていでごわす。ごわごわごわす。

あ・・・実はだめじゃん。商品画像がみぎによった。 なんで? う~ん・・・  

ここまでの完成形

なんちゃらかんちゃら商品名
説明文がはいるよていでごわす。ごわごわごわす。

<div style="margin:30px 0 0 0;background-color:#ffffcc;padding:2px 10px 20px 10px;border:solid 2px #D48D00;border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px; line-height:-50%;">
 <div>
  <div style="float:left;position:relative;top:-30px;bottom:-30px;"><img src="<?php echo home_url(); ?>/img/clown_01.png"></div>
  <div style="float:left;font-size:24px;text-decoration:bold;position:relative;top:10px;padding:10px 0 0 0;">
   <div>なんちゃらかんちゃら商品名</div>
  </div>
 </div>
<br />
 <div style="margin:40px 10px 0px 10px;padding:20px 0px 20px 0px;background-color:#ffffff;height:157px;border:solid 1px #D48D00;border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px;">
  <div style="margin:0 0 0 20px;float:left;border-right:dashed 1px #ccc;"><a href="http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2252541&pid=883222491" target="_blank" ><img src="http://tecinfo.yuzumaru.co.jp/wp/wp-content/uploads/2015/01/2108576.gif" style="padding: 0 20px 10px 0;"></a></div>
  <div style="float:left;">説明文がはいるよていでごわす。<br />ごわごわごわす。</div>
 </div>
 <br clear="all"><div style="clear:both;"></div>
</div>
次へ(3/3)

スポンサーリンク

関連記事

スポンサーリンク

よく使うタグ

・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 広告 最適化にあたって必要になってくるツールがグーグルアナリティクス。別にグーグルのアナリティクスでなくてもアクセス解析はできるんだけど、グーグルはユーザー囲い込みの為他のアクセス解析では見せな