スタイルシート H1、P タグの後、改行させない css html

H1などのHタグや、Pタグの後、改行させないようにするには、inline を使いインライン要素にします。

.ex

 ↓
タイトル Hタグの後でも、 Pタグの後でも、改行されない。

商品一覧を3列のカラム(column)表示 / 横型商品一覧の導入

user_date/packages/default/css/common.css内の記述を変更
(contents.cssの可能性あり)

↓に変更。

下記はカラムへの回り込み禁則処理
(商品が1つの場合や価格順・新着順のソートバー回り込み禁則)

common.cssの中(100行目あたり)に追記

下層コンテンツあたりに追記

多分以上で出来るが、商品名や文字のボリュームで個々のheightがバラバラになることがあります。
なので、「heightLine.js」jQuery等でそろえること。
(面倒であればCSSでdiv.list_areaとdiv.list_area h3 の heightを強制固定)

買い物かごの表記は下記ファイルの200行目前後。
今回は消去しました。
template/default/products/list.php

2012年1月24日 加筆

商品一覧ブロックを作る 2.11.X

html/frontparts/bloc/product_list.php を新規作成

data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Product_List_Ex.php を新規作成

[php]
<?php

// {{{ requires
require_once(CLASS_EX_REALDIR . "page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Product_List_Ex.php");

// }}}
// {{{ generate page

$objPage = new LC_Page_FrontParts_Bloc_Product_List_Ex();
register_shutdown_function(array($objPage, "destroy"));
$objPage->init();
$objPage->process();

?>
[/php]

data/class/pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Product_List.php を新規作成

[php highlight=”44″]
<?php

// {{{ requires
require_once CLASS_REALDIR . ‘pages/frontparts/bloc/LC_Page_FrontParts_Bloc.php’;

/**
* Product_List のページクラス.
*
* @package Page
*/
class LC_Page_FrontParts_Bloc_Product_List extends LC_Page_FrontParts_Bloc {

// }}}
// {{{ functions

/**
* Page を初期化する.
*
* @return void
*/
function init() {
parent::init();
$bloc_file = ‘product_list.tpl’;
$this->setTplMainpage($bloc_file);
}

/**
* Page のプロセス.
*
* @return void
*/
function process() {
if (defined("MOBILE_SITE") && MOBILE_SITE) {
$objView = new SC_MobileView();
} else {
$objView = new SC_SiteView();
}

$objQuery = new SC_Query_Ex();
$objProduct = new SC_Product_Ex();

//$objQuery->setLimitOffset(10);
//$objQuery->setOrder("update_date desc");
$this->arrProducts = $objProduct->lists($objQuery);

$objView->assignobj($this);
$objView->display($this->tpl_mainpage);
}

/**
* デストラクタ.
*
* @return void
*/
function destroy() {
parent::destroy();
}
}

?>
[/php]

$this->arrProducts = $objProduct->lists(&$objQuery);の44行目で過去のバージョン2.11辺りのQueryだとlists(&$objQuery);の表記でしたが&無しで記述。 $this->arrProducts = $objProduct->lists($objQuery); data/Smarty/templates/default/frontparts/bloc/product_list.tpl を新規作成

[php]
<!–{if count($arrProducts) > 0}–>
<div class="bloc_outer clearfix">
<div id="productlist_area">
<h2>商品一覧リスト</h2>
<div class="bloc_body clearfix">
<!–{foreach from=$arrProducts item=arrProduct}–>
<div class="product_item clearfix">
<div class="productImage">
<a href="<!–{$smarty.const.P_DETAIL_URLPATH}–><!–{$arrProduct.product_id|u}–>"><img src="<!–{$smarty.const.ROOT_URLPATH}–>resize_image.php?image=<!–{$arrProduct.main_list_image|sfNoImageMainList|h}–>&width=40&height=40" alt="<!–{$arrProduct.name|h}–>" /></a>
</div>
<div class="productContents">
<h3>
<a href="<!–{$smarty.const.P_DETAIL_URLPATH}–><!–{$arrProduct.product_id|u}–>"><!–{$arrProduct.name|h}–></a>
</h3>
<p class="sale_price">
<span class="price"><!–{$arrProduct.price02_min|sfCalcIncTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}–> 円</span>
</p>
</div>
</div>
</dl>
<div class="clear"></div>
<!–{/foreach}–>
</div>
</div>
</div>
<!–{/if}–>
[/php]

スタイルシート追記

[css]
<style type="text/css">
div#productlist_area h2 {
background-color:#de5e17;
text-align:center;
color:#fff;
padding:7px 0 7px 0;
}
div#productlist_area div.productImage {
float:left;
width:40px;
padding:0 8px 0 0;
}
div#productlist_area div.productContents {
float:left;
width:100px;
}
div#productlist_area div.product_item {
padding:5px 0 5px 5px;
}
</style>
[/css]

データベースに新規ブロック情報を登録

[php]
insert into dtb_bloc values(10,10,’product_list’,’product_list.tpl’,’product_list’,now(),now(),’frontparts/bloc/product_list.php’,0);
[/php]

Warningが表示されたので掲示板等参考に下記を実行。

[php highlight=”7″]
<?php

// {{{ requires
require_once CLASS_REALDIR . ‘pages/frontparts/bloc/LC_Page_FrontParts_Bloc.php’;
////中略////

$this->arrProducts = $objProduct->lists(&$objQuery);

$objView->assignobj($this);
$objView->display($this->tpl_mainpage);
}

/**
* デストラクタ.
*
* @return void
*/
function destroy() {
parent::destroy();
}
}

?>
[/php]

data/class/pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Product_List.phpの部分で、本文44行目(上記7行目) $this->arrProducts = $objProduct->lists(&$objQuery); $this->arrProducts = $objProduct->lists($objQuery);

としたら表示が消えました。

smartRollover

スマートロールオーバーのご紹介。 同じフォルダに画像を二つ用意します。 1つはマウスホバーの画像{XXX_on.jpg}と通常時の{XXX_off.jpg} 後は下記をJSとしてヘッドなり外部JSとしてと見込ませればオンオフの切り替えが出来ます。

CSSでメニューボタンの画像をホバーさせる

[php]
#globalnavi {
margin: 0;
padding: 0;
list-style-type: none; /* リストマークの削除 */
width: 172px;
padding: 145px 0px 0px 0px;
}

#globalnavi li {
width: 172px;
height: 32px;
margin: 0;
padding: 0;
display: inline;
}

#globalnavi a {
text-indent: -9999px; /* テキストを隠す */
text-decoration: none;
display: block;
width: 172px;
height: 32px; /* リンク領域を広げる */
background-image: url(images/menu.gif);
background-repeat: no-repeat;
}

#menu1 a { background-position: 0 0; } /* 表示画像の位置を指定 */
#menu2 a { background-position: 0 -29px; }
#menu3 a { background-position: 0 -58px; }
#menu4 a { background-position: 0 -86px; }
#menu5 a { background-position: 0 -116px; }
#menu6 a { background-position: 0 -145px; }
#menu7 a { background-position: 0 -174px; }
#menu8 a { background-position: 0 -200px; }
#menu9 a { background-position: 0 -230px; }
#menu10 a { background-position: 0 -258px; }
#menu11 a { background-position: 0 -288px; }
#menu12 a { background-position: 0 -317px; }
#menu13 a { background-position: 0 -348px; }

#globalnavi a:hover {
text-decoration: none;
background-image: url(images/menu.gif);
background-repeat: no-repeat;
}

/* 入れ替え画像の位置を指定 */
#menu1 a:hover { background-position: -172px 0; }
#menu2 a:hover { background-position: -172px -29px; }
#menu3 a:hover { background-position: -172px -54px; }
#menu4 a:hover{ background-position: -172px -83px; }
#menu5 a:hover{ background-position: -172px -114px; }
#menu6 a:hover{ background-position: -172px -145px; }
#menu7 a:hover{ background-position: -172px -174px; }
#menu8 a:hover{ background-position: -172px -200px; }
#menu9 a:hover{ background-position: -172px -230px; }
#menu10 a:hover{ background-position: -172px -259px; }
#menu11 a:hover{ background-position: -172px -288px; }
#menu12 a:hover{ background-position: -172px -317px; }
#menu13 a:hover{ background-position: -172px -348px; }

[/php]

WordPress 管理画面のレイアウト崩れ

管理画面のレイアウト崩れが。。

define( ‘CONCATENATE_SCRIPTS’, false );
ただしこれは根本的な解決策ではありません。

define( ‘CONCATENATE_SCRIPTS’, false ); というコードを wp-config.php の最初に追加する。
WordPress のスピードは遅くなるので、数日後に削除してまたテストしてみること。
(これを行うことで古いネットワークキャッシュを削除できます)

ということなので、一定期間経過後コードを削除してレイアウトの状態を見てみることにしました。
が、1週間強経過しているにもかかわらず、状態は変わらずです。
もうしばらく様子を見ようとも思ったのですが、原因が分からないのも気持ちが悪いので、
再度ぐーぐる先生に聞いてみました。

WordPressをCORESERVERに設置する|pc.casey.jp

今まで色々いじくっているので、.htaccessの内容がおかしくなっていることでしょう。
まずはこちらの記事の「.htaccessファイルを設置」する項目を実践しました。

WordPressルートフォルダの.htaccessには


AddHandler application/x-httpd-phpcgi .php

wp-contentフォルダの.htaccessには


AddHandler application/x-httpd-phpcgi .php

wp-adminフォルダの.htaccessには


AddHandler application/x-httpd-phpcgi .php


AddHandler application/x-httpd-phpcgi .php


AddHandler application/x-httpd-phpcgi .php


AddHandler application/x-httpd-phpcgi .php


AddHandler application/x-httpd-phpcgi .php


AddHandler application/x-httpd-phpcgi .php


AddHandler application/x-httpd-phpcgi .php


AddHandler application/x-httpd-phpcgi .php

それから「管理画面のレイアウトが崩れる=CSSが読み込まれていない」ということで、
納得のいく説明をされていた以下のブログも参考にさせてもらいました。

WordPress 2.9.1 自動アップデート後に管理画面表示がおかしくなった時の対処法|guttyo blog

上記ブログの管理者さんが調べたことによると、原因はこういうことらしい。

この現象の原因は下記のような.htaccessファイルでPHPをCGIモードで動かしているときに、
load-style.phpが吐き出す content-type=text/htmlだからだそうだ。
text/cssではないのでFirefoxではcssと認識しないということらしい。


AddHandler application/x-httpd-php5cgi .php

なるほど、text/cssになればいいって訳なのね。
でも、部分的にCGIとして動かしてはいてもPHP全体をCGIとして動かしてはいないし、
やっぱ、なんかおかしくなってるのかなぁ?

まぁ、要はこれが重要な訳で。

# こいつだけモジュール版で動作させる


AddHandler application/x-httpd-php .php

このコードをwp-adminファイルの.htaccessに記載すると、
今まで悩んでいたレイアウト崩れは嘘のように解決しました。

define( ‘CONCATENATE_SCRIPTS’, false );
ともおさらばしました。

EC-CUBE テンプレートのファイル構成

テンプレートをパッケージングしながら作成中です。
テンプレ用に格納場所と概要を寄せ集めてみました。
デフォルトの状態では、下記に格納されています。

[html gutter=”false” highlight=”1,2″]
root/data/Smarty/templates/default
root/user_data/default
[/html]

以下フォルダ構成
“EC-CUBE テンプレートのファイル構成” の続きを読む

コメントなしでもサブ画像のみ表示する方法(PC/スマフォ兼用)ver2.11

コメントなしでもサブ画像のみ表示する方法
商品詳細のページでサブ画像だけ増やしたいときにこれを使用。
最終的には縦並びになるのでCSSで横に並ぶようにしました。

templates/default/products/details.tpl

下記コードのサブタイトルとサブ画像を切り離します。

上記コードを下記に丸ごと書き換え。

多分コレで出来るはず。
(スマフォ版もコレで行けました。)

ただ縦に並ぶだけなので、CSSのdiv.subphotoimgを下記コードに書き換え。

ちなみにfloat:right;なので右揃え。
通常はleftでもいいかと思います。
なので、コメント欄の後ろのほうに登録した写真が左に来て、上位のコメントにつけた画像が右に来る可能性あり。

あと表示位置をメイン写真の真下に持ってこれれば最高、しかもクリックしたらそれもLightBox風にできぬだろうか・・・