Category ホームページ作成(CSS勉強中)

カルサイトcalcite フラワーアレンジメント ホームページ作成

講習時間
10時~15時(土曜日・日曜日)
お返事は20時以降にさせて頂きます
壁掛けやお祝い事などのプレゼントも作ります
値段等ご相談ください

フラワーアレンジメントって
気軽に楽しんでできます
簡単で覚えやすい
ちょっと違う自分を見つけることができます
優しい気持ちになれます
材料も身近なものを使えます
コストがあまりかかりません

料 金
10名以上の申込で一人500円
9名以下の申込で一人1000円
※別途材料費がかかります
※材料費は講習で使う物によって変わります
定員は20名までです
お気軽にご相談ください

カルサイトcalcite フラワーアレンジメント

2010/05/28 ホームページ振り分けPHP

simplemobile_ver2_2からsimplemobile_ver3_1に変更しました
対応してるもの
★パソコン
★携帯電話:docomo(i-mode)
★携帯電話:au(EZ-web)
★携帯電話:SoftBank(Disney mobileを含む)
★携帯電話:WILLCOM(携帯サイト用ブラウザ利用時)
★携帯電話:イー・モバイル(携帯サイト用ブラウザ利用時)
★スマートフォン:iPhone(iPodtouchとiPadを含む)標準ブラウザ(Safari)/その他のブラウザ
★スマートフォン:GooglePhone 標準ブラウザ(Chrome)/その他のブラウザ
★スマートフォン:WindowsPhone 標準ブラウザ(IE)/その他のブラウザ
★その他の端末
今あるものに対応しているので助かりますね

xoopsにはあまり関係ないですけどね
フリーソフトってほんと助かりますね

2009/12/04 ulとliの中央揃えCSS

新しくホームページの注文が入りました
画像の変更は終わって現在ホームページの型枠作りです
メニュー項目が
少ないのでどうしようか考え中です
左にメニューを置けばいいのか?中央に置けばいいのか悩み中です
犬の画像を小さく中央に15個並べるのに
ulとliを使おうとしていますが
ulをページの中央に持ってくるのが難しい
ただ、単に中央に揃えて下に並べるのは簡単ですが
liをfloatを使って横並びにしてそれを中央に揃えるのは難しい
ul liの中央揃えのCSS
今回は一般的な方法を記述します
html

<div id="menu">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
<li>777</li>
</ul>
</div>

CSS

<style type="text/css">
<!--
.#menu {
position: relative;
}
#menu ul {
list-style-type: none;
position: relative;
left: 50%;
display: inline;
float: left;
}
#menu li {
display: inline;
float: left;
margin-right: 5px;
margin-left: 5px;
position: relative;
left: -50%;
}
-->
</style>

サンプル

ここで必要なこと
ul
ポジション(位置)を相対的に指定すること
位置を50%で指定すること
li
ポジション(位置)を相対的に指定すること
位置を-50%で指定すること
ulをページの中央から初めてliをページの左端に設定することで
相殺して中央揃えになるという不思議なcssの設定です
他にもulの幅を指定して中央に揃える方法もあります
これだけではなく他にもいろいろと方法があるので
試してみてはどうでしょうか?
※備考
リストのスタイルはなし
liのマージンを5ピクセルとってます

2009/10/14 500円ホームページ(更新について)

ワンコインホームページの更新について
9月末までの3ヶ月無料期間が終了しました
継続の方も多数あり本当にありがとうございました
今回更新されなかった方もいました
もっとホームページ作成の技術向上させていただきたいと思います
10月14日を持ちまして更新されなかったページを削除させていただきました

今回の3ヶ月無料でいろいろわかった事がありますので、今後の運営の参考にさせていただきます

無料期間は終了しましたが、500円ホームページは続けますので、自分の会社やお店のホームページを持ちたい方はどんどんご相談ください

2009/09/04 無料期間の3ヶ月が過ぎました

500円ホームページで申し込んでいただいた方の無料期間が8月末で終わりました
9月2日(水)に請求書を郵送しました
さて、どれだけの方が引き続きホームページを続けるのでしょうか?
期待と不安で9月末日まで待ってみます

2009/07/06 適切なメタデータ (descriptions)作成

[ホームページ作成] ブログ村キーワード
同じような内容のページがなかなかインデックスされない原因
ウエブマスターツールでも重複するメタデータ(descriptions)としてありました
適切なメタデータ (descriptions)の作成を試みます
googleで調べると文章でなくて構造化データで構わないと書かれていました
ページに同じメタデータを入れていましたがすべて変更いけないのか?
現状

<meta name="Description" content="まぁくんの店で取り扱ってい
る黒檀一覧です" />

変更後

<meta name="Description" content="制作: まぁくんの店, 場所: 
四條畷, 分類: 黒檀, 内容: 一覧, 価格: 500 円, 種類:さ行" />

さ行をそれぞれ変更しました
これで少し様子をみてインデックスされるようなら
すべてのページのメタデータを変更します

2009/07/01 lightboxによる画像拡大表示

[フリーソフト] ブログ村キーワード
[年賀状] ブログ村キーワード
lightbox2.04ダウンロード先
lightbox2.04を使ったページ
年賀状一覧ページ
今回は拡大表示をしてから次の画像に移動できるようにしています
設定内容
ダウンロードしてきたlightbox2.04を解凍して
JSフォルダーとCSSフォルダーを表示したいページのフォルダーに置きます

<head>~</head>

の中に以下を追加します

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js?load=effects">
</script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/builder.js"></script>
<script type="text/javascript" src="js/scriptaculous.js">
</script>
<link rel="stylesheet" type="text/css" href="css/lightbox.css">

画像の設定は
設定1

<a href="jpeg_big/c003.jpg" rel="lightbox" title="カラー
003"><img src="jpeg_small/c003.jpg" alt="年賀状デザイン2010" /></a>

設定2

<a href="jpeg_big/c003.jpg" rel="lightbox[年賀状]" 
title="カラー003">
<img src="jpeg_small/c003.jpg" alt="年賀状デザイン2010" /></a>

設定1、2共通説明
rel=”lightbox”をつける事によって拡大表示してくれます
設定1、2の違い
lightbox[年賀状]にすることによって『年賀状』というグループにできます
グループにすると拡大表示した時に画像にマウスを持って行くと
『NEXT(次に)』と『PREV(戻る)』が表示されそれぞれの画像に移動する
ことが出来ます
今回はすべての画像を『年賀状』のグループにしました
備考
title=”カラー003はつけてもつけなくてもいいですが
つけた方がいいと思います

2009/06/29 xoops(2.0)設定

[振り分け] ブログ村キーワード
今日は明日が休みなので一日で終わる仕事にしました
PCを1台設定と平行してxoopsの設定をしていました
いままではhttp://www.makun.jp/にアクセスすると
PCはPC用のページに
携帯は携帯用のページに移動していました
しかし、リダイレクトしてしまって相互リンクを断られたり
特殊なサイトになっていました
そこでindex.phpを変更することにしました
変更内容はPCはそのままxoopsを表示
携帯は携帯用ページに移動するようにしました
これでリダイレクトはしていますがPCはリダイレクトしなくて済みます
なかなか簡単そうで難しかったです
結局一日かかりました
ソフトバンクの携帯は確認済みですが他の携帯は試していません
と言うか他の携帯を持っていないので試せません
う~~ん
index.phpに下記を追加しました
$i=$_SERVER[‘HTTP_USER_AGENT’];

if (preg_match(“/DoCoMo\//”,$i) ||
preg_match(“/UP.Browser/”,$i) ||
preg_match(“/\AVodafone/”,$i) ||
preg_match(“/\ASoftBank/”,$i) ||
preg_match(“/\AMOT-/”,$i) ||
preg_match(“/DDIPOCKET;/”,$i) ||
preg_match(“/WILLCOM;/”,$i) ||
preg_match(“/L-mode\/\//”,$i)) {
header(“Location: http://www.makun.jp/indexmobile.html”);
exit();
}
// $Id: index.php,v 1.3 2006/07/27 00:17:17 onokazu Exp $
以下省略

xoopsのモジュールmobileを入れていますが今は使われていないんでしょうね
どのサイトを見ても知りたいことが無かったです

上記の振り分けはPHPの一番上に入れると大体のPHPで振り分けができると思います
ただし、保証はしませんのでバックアップをしてからお使い下さい

リダイレクトとは:
プログラムの入力元や出力先を通常とは違うものに変更すること
簡単に言うとページを移動してしまうことです
ふ~~~
閉店時間までに終了しました!!

2009/06/27 ロールオーバーの仕方

[ロールオーバー] ブログ村キーワード
rollover.jsを使ったロールオーバー
特に設置が難しくなくソースもきれいです
まずrollover.jsをダウンロードしてきてサイトのjsフォルダーに保存します
ロールオーバーしたいページの

<head></head>

の間に

<script type="text/javascript" src="js/rollover.js"></script>

を足します
ロールオーバーしたい画像(123.gif)のクラスをimgoverにして下さい

<img src="123.gif" alt="" width="137" height="44" class="imgover" />

ロールオーバーですのでリンク先を設定しなくてはなりません
他にページがない場合は#を指定します
#(ヌルリンク)はジャンプはしないけどページの先頭に飛びます
リンク先に#を使うのはjavascriptを試す時に良く使われます
今回は

<a href="#"><img src="123.gif" alt="" width="137" 
height="44" class="imgover" /></a>

です
クラスが複数ある場合は半角スペースを入れます
後はロールオーバー後の画像名を123_o.gif”
(_oはアンダーバー小文字のオーです
ゼロではないので気をつけてください)
にするとマウスを画像に持っていくとロールオーバーします
備考
ヌルとは(コンピュータ)(null) 、 (架空の生物) です
hrefとはHyper REFerenceの略です
「Hypertextとは他のページなどにジャンプできるテキスト
REFerenceとは参照(すること), 照合, 参考

さらに付けたし
mailtoで題名や本文を最初に入れておきた場合の記述

<a href="mailto:メールアドレス?
subject=件名&body=本文">メールアドレス表示用</a>

ちなみにモバイルサイトで

<a href="電話番号(ハイフンなしです">電話番号表示用</a>

はクリックすると電話をかけることができます

2009/06/03 対策室にページを追加しました

HP対策室にフリー画像
名刺対策室に肩書き英語表記
贈答品対策室にメッセージ英語 日本語訳付き
HP対策室にサイトマップ

英語表記等は前回ブログに書いた内容をキレイに整理整頓しました
見やすくなったかどうか???

フリー画像はこれからいっぱい増やしていくつもりです!!
サイトマップに関してはいろいろ勉強してインデックスされやすページがどんなものか調べて行きたいと思います

2009/05/31 茶道日記 整理整頓

茶道日記
今日は一日がかりで整理整頓しました
疲れた~~~~~~

2009/05/27 yahoo モバイルお店PRに登録してみました

yahoo モバイルお店PR
ネットサーフィンしていたら
うむ?今もネットサーフィンって言うのか???
あはは

yahoo(ヤフー〕でお店の紹介ができるモバイルページ(携帯サイト)がありました
モバイル用(携帯サイト)です
早速登録してみました

登録の仕方はいたって簡単です
yahooモバイルお店PRに携帯でアクセスします。
お店情報を登録します
ページの編集を選択するとメールが開きます。
トップの編集とクーポンはタイトルを入力し画像を添付し本文に説明を書書く
写真の追加はタイトルと画像だけ
これでお店の紹介ページが出来上がり!!
近所のお店に教えてあげました
大変喜んでくれました