ホームページ制作に役立つ無料素材やWEBデザイン等のメモ帳|FROGs note

ホームページ制作に役立つ無料素材やWEBデザインに関する自分のためのメモ帳です。

  • ホームページ制作に役立つ無料素材やWEBデザイン等のメモ帳|Frogs note
  • ホームページ制作に役立つ無料素材やWEBデザイン等のメモ帳|素材
  • ホームページ制作に役立つ無料素材やWEBデザイン等のメモ帳|本の紹介

 | HOME | 

divコーディングのとき画像周辺の隙間を解消(IEバグ)

divコーディングのとき画像に対して出来る隙間を解消する(IEバグ)

★CSS

img {
vertical-align:bottom;
}
スポンサーサイト



上付き文字の指定

■上付文字の指定(html)

<sup>この部分が上付文字になります</sup>

■下付文字の指定

<sub>この部分が下付文字になります</sub>


/*上付き文字設定*/(CSS)

.up_txt {
vertical-align: super ;
}

テーブルのボーダーの二重書きを防ぐCSS

★CSS

table {
border-collapse: collapse; /* 枠線の表示方法 */
}

画像リンクのボーダーを消去するCSS

a img {
border-width: 0px;
border-style: none;
border-color: #fff;
background: transparent; /* 背景色を透過させる指定 */
}

画像を一度に変換するフリーソフト

■バッチグー

http://www.vector.co.jp/soft/dl/win95/art/se200307.html

大量の画像を一度に縮小したいときに便利なフリーツールです。

拡大画像切替のスクリプトとソース

★スクリプトソース

function changeImg(pic,src){
document.getElementById(pic).src = src;
}


★htmlソース
■大きいほう
<img src="img/single/pic01.jpg" name="pic01" width="300" height="225"
id="pic01">


■小さいほう
<a href="javascript:changeImg('pic01','img/single/pic02.jpg');"><img
src="img/single/pic02.jpg" width="200" height="150"></a>

トップページのおすすめ商品に画像を掲載

携帯用のトップページにある、おすすめ商品に画像を表示させるようにカスタマイズしました。
しかし、表示される画像が画面いっぱい横に伸びてしまい、正しく表示されません。

以下のソースを入れる


<img src="<!--{$smarty.const.IMAGE_SAVE_URL|sfTrimURL}-->/<!--{$arrProduct.main_list_image}-->" alt="<!--{$arrProduct.name|escape}-->" height="40" width="40"/>

モバイルからの購入時にメールタイトルを変える

モバイルからの購入時にメールタイトルを【モバイルショップ】と変える方法

/data/class/helper/SC_Helper_Mail.php の98行目付近に以下のソースを書き加える。

----------------------------------------------------------

if ( $template_id == 2) $tmp_subject = "モバイルショップ".$tmp_subject;

----------------------------------------------------------

記入例
//受注情報の取得の前に記述する
----------------------------------------------------------

if ( $template_id == 2) $tmp_subject = "モバイルショップ".$tmp_subject;

// 受注情報の取得
$where = "order_id = ?";
$arrRet = $objQuery->select("*", "dtb_order", $where, array($order_id));
$arrOrder = $arrRet[0];
$arrOrderDetail = $objQuery->select("*", "dtb_order_detail", $where, array($order_id));

----------------------------------------------------------

フラッシュにリピートボタンをつける方法

ボタン画像をムービークリップでシンボル化してアクションスクリプトに以下を書き込む


this.onRelease = function(){
_parent.gotoAndPlay(2);
}

.htacessのリダイレクトの描き方

秀丸やテラパッドなどのテキストエディタで.htacessを作成します。
ファイルを開いたら以下のソースを書き込む。


.htacessの記述
***************

Redirect permanent (半角スペース) 転送前URL (半角スペース) 転送先URL

***************


/mobile/index.htmlにアクセスしたユーザーは、
http://frogsnote.blog.fc2.com/list.htmlに転送されます。

Redirect permanent /mobile/index.html http://frogsnote.blog.fc2.com/list.html


/mobileディレクトリ以下のページにアクセスした場合、
http://frogsnote.blog.fc2.com/以下の同じファイル名に転送します。

Redirect permanent /mobile http://frogsnote.blog.fc2.com/

SEOに役立つサイトのメモ

私が普段から利用させてもらっているとってもありがたいサイトです。
SEOなどに役立つ無料のWEBツールやサイトをご紹介します。

続きを読む>>

地図素材が欲しいときの便利なサイト

■白地図専門店

http://www.freemap.jp/

白地図、世界地図、日本地図が無料です。


■CraftMAP

http://www.craftmap.box-i.net/ken.php

都道府県別の白地図です。
ほんとにすばらしい!


■商用利用可のWEB素材が無料な素材屋

http://ec-sozai.net/ecaljp01.html

ECサイトの時とかに重宝しそうですね。

商用可の画像素材サイト集

■2000ピクセル以上のフリー写真素材集

http://sozai-free.com/
その名の通り大きい素材がただで使わせてもらえます。
利用連絡・著作表示は不要です 。


■ソザイング

http://sozaing.com/

素材ファイルは無料でダウンロードできます。


■Free Stock Photos

http://free-stock-photos.org/

テクスチャ等の写真素材を無料でダウンロード、利用可能なサイトです。商用利用もOK!


■フリーフォトボックス

http://www.freephotobox.com/index.html

高解像度の無料写真素材集です。

メールアドレスのエンコード

マナーとしてホームページやブログに掲載するメールアドレスを巡回型アドレス収集ロボットに拾われないように、数値文字[&#123;]にエンコーディングする必要があります。

そんなときにお世話になっているのがこちら↓

▼文字列をエンコード化
http://www.kyoutoku.co.jp/encode.htm

商用可のイラスト素材サイト5

▼ハンコでアソブ
http://hankodeasobu.com
かわいいハンコ素材がうれしい


▼Frames Design
http://frames-design.com
ほんとに美しいフレームがたくさん


▼SILHOUETTE DESIGN
http://kage-design.com/
シルエットのデザインがたくさん


▼ガーリー素材
http://girlysozai.com/
カワイイ系のイラスト素材


▼styraise
http://www.styraise.com/material
ありがたやって感じです。

 | HOME |