タグ別アーカイブ: 画像

以前「ECCUBEのお問い合わせフォームの複製/別作成 増やし方」で紹介もしましたが。

WordPressも実装しているのであればコチラのContactform7を入れたいくらいです。
主な機能は下記。
基本的なお問い合わせフォーム機能はもちろんのこと。
メール形式チェック
入力必須項目の実装
CAPTCHA(画像認証)
ファイル添付機能
などなど、カスタマイズ性には特化しているかと思います。

なのですが・・・ファーストサーバーで文字化けする・・・orz

続きを読む


サイドバーに物件を表示させようと「トップ物件表示」を弄っていましたが挫折。
面倒なので以前使っていたポストタイプを指定して表示させるコードを改変。
色んな所からコードを寄せ集め直して作りましたとさ。。。
(まぁ不動産系に係らずサイドバーに新着表示させられるんだけどねw)

<div class="newentry">
<?php $loop = new WP_Query( array( 'post_type' => 'fudo', 'posts_per_page' => 1 ) ); ?>
<?php query_posts( array( 'post_type' => 'fudo', 'posts_per_page' => 1 ) ); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
	<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
		<?php the_post_thumbnail(array(180,180), array('class' => 'left')); ?>
    </a>
	<div class="title">
		<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
			<?php echo mb_substr(get_the_title(),0, 1); ?>
        	</a><br />
		<?php echo mb_substr(get_the_excerpt(),0, 50); ?><br />
		<a href="<?php the_permalink();?>">
        …続きを読む
        </a>
	</div>
<?php endwhile; wp_reset_query();?>
<?php endif; wp_reset_query();?>
</div>

以下備忘録。

続きを読む


smartRollover


09  December  2011

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


#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; }
 

まず管理画面にログインして、デザイン管理>PC>レイアウト設定 から、ページを新規入力します。
URLは review_list.php として、以下のコードを貼り付けて保存します。

次に、html/user_data/review_list.php を開いて、次のように修正します。

data/Smarty/templates/default/user_data/review_list.tpl を以下のように変更します。

以上。

ブロック化は以下。

デザイン管理>PC>ブロックの設定新規ブロックで下記を作成。
ブロック名:お客様の声一覧
ファイル名:review_list_bloc

トップページのブロックで表示する場合、html直下のindex.php下記のような感じで書き換え。

基本的には同じ作業。
画像とかは適当にかえましょう。
(レビュー自体未投稿だと空欄なので適当に用意しておきましょう。)


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

templates/default/products/details.tpl

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

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

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

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

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

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


ヘッダーにカテゴリを表示します。
CSSハックでドロップダウンメニューにも対応。
一応管理画面からだけで設定可能なシンプル版です。 続きを読む