WordPressなどでテーマを自作しない場合は、デフォルトのものを使ったり、新たにインストールしたりする。 大抵の場合、気に入ったテーマをダウンロードして、使いたいプラグインを探して入れたりすｒわけですが、どうしてもデザイン的に変えたい部分が出てきます。 そうなるとスタイルシートをいじる事になるのですが、やっぱり他人の作ったものなので面倒くさかったりします。 特にWordPressのテーマをインストールする場合、作者は日本人でないことが多いのでフォントの種類も日本語には合わないものが設定されてたりするのでどうしても変更したくなります。 そして、今回他のブログで使ってるテーマなんですが、タイトルにアルファベットの小文字を使うとサイト表示の際、大文字で表示されています。 英語のブログでは、大文字、小文字に揃えたい部分にCSSで揃えるようにしてる場合がたまにあります。 text-transform: uppercase; 今回はこの部分を削除することで解決。 uppercase がすべて大文字にするという意味。 他にも１文字目を大文字にするcapitalize 、すべて小文字にするlowercaseがあります。
タグ: css, HTML, text-transform, WordPress, インストール, カスタマイズ, スタイルシート, テーマ, フォント, プラグイン, 大文字, 小文字
more... »
木, 10月 28 2010 » HTMLについて, スタイルシートについて, ホームページ制作 » No Comments
使ってるサーバー「エックスサーバー」には自動インストール機能がついていて、クリックするだけで様々なプログラムのインストールが簡単にできるようになっている。 自動インストールできるものは、Movable Type Open Source、Xoops Cube、osCommerce、ZenCart、WordPress、PukiWiki、MovableType 4、EC-CUBEとなっています。 このサイトや他のサイトでもWord Pressは使っているのですが、他の自動インストールは使っていなかったので今回XOOPS Cubeをインストールしてみました。 今回は、インストールだけで終了です。
タグ: EC-CUBE, Movable Type, Movable Type 4, osCommerce, PukiWiki, Word Press, XOOPS Cube, Zen Cart, エックスサーバー, ムーバブルタイプ
more... »
木, 10月 28 2010 » HTMLについて, ホームページ制作 » No Comments
ホームページを作成していると、メニューリンクやヘッダー、フッターといった箇所を各ページで共通して使う場合が多い。そして、ホームページを制作後に、ページの追加やページタイトルの変更等が生じると全てのページのニューを変更しなければならないという面倒くさい作業をしなければならない。 数ページならまだいいが、これが数十ページ、もしくはそれ以上となるとこれは膨大な作業量となる。 そういった後工程を考えるとホームページの各共通部分はできれば一回修正すれば、前ページが修正されるような仕組みにしたい。 方法としては、まずブログ形式のものを使う。 無料ブログや、オープンソースであるWordPress（ワードプレス）、Movable Type（ムーバブルタイプ）を使えば、ブログ形式なので、メニュー修正は１回で済む。 また、違う方法としては、DreamWeaverなどホームページ制作ソフトを使っている場合はテンプレート機能があるのでテンプレートを作っておけば、複数ページにそのテンプレートをいっぺんに適応させられる。 そして、ホームページを一からつくり、ソフトのテンプレート機能も使わない場合、phpで共通部分を呼び出す方法があり比較的簡単にできる。 その場合、共通部分を呼び出して文字化けする事があった。 自分は、DreamWeaverで作成していたのだが、エンコードの初期設定のせいだった。 UTFでつくったファイルにshift_jisを読み込んでいた。 以前、モバイルサイトを作っていたときに初期設定をshift_jisにしていたのを忘れていた。 両方のファイルを同じようにエンコードして無事文字化けは解消した。
タグ: DreamWeaver, Movable Type, PHP, shift_jis, WordPress, エンコード, ドリームウィーバー, ホームページ作成, ムーバブルタイプ, ワードプレス, 文字化け
more... »
水, 10月 27 2010 » HTMLについて, ホームページ制作, モバイルサイト作成 » No Comments
marquee（マーキー）タグを使い、モバイルサイト上を文字が流れるのをよくトップページでみかけます。 HTML 4.01の時だと <marquee bgcolor=”#FF0000″><font size=”2″ color=”#FFFFFF”>ああああ</font></marquee> こんな感じで、背景が赤色、文字サイズ2、文字色は白色のマーキーになります。 ただ、xhtmlの場合、このままだとダメなので以下のようにします。 <div style=”display:-wap-marquee; background-color:#FF0000; font-size:xx-small; color:#FFFFFF;”>ああああ</div> ちなみに、フォントサイズはピクセル指定でもいいのですが、ここでは、最小サイズで表示されるxx-smallにしています。
タグ: HTML, marquee, XHTML, フォントサイズ, マーキー, モバイルサイト
more... »
土, 10月 23 2010 » HTMLについて, ホームページ制作, モバイルサイト作成 » No Comments
モバイルサイトでPHPを使用したい場合が結構あります。 だけど、拡張子は「.php」じゃなくて「.html」のままにして使いたい。 まず、.htaccessを編集。 自分の場合「AddHandler x-httpd-php .php .htm .html .xml .class」と記述。 これは、phpを以下の拡張子で使いますよってこと。 今回では「.php .htm .html .xml .class」がそれにあたる。 「.html」も記述してるので、拡張子.htmlでphpが使えることになる。 だけど、モバイルサイト制作だと、まだ問題がでてくる。 サイトのデザイン上、xhtmlで制作したい場合、このままだとうまくxhtmlで表示してくれない。 通常、携帯サイトの場合ヘッダー部分に 「<meta http-equiv=”Content-Type” content=”application/xhtml+xml; charset=Shift_JIS” />」 なんて入れてる。 「application/xhtml+xml」の部分が重要で、こうしないとxhtmlとして表示されない場合がある。 普通は、この記述だけでオーケイだが、PHPを使う場合は、もう一行記述しなければいけない。 htmlファイルの一番先頭に記述する（ドキュ宣言より上） <?php header(‘Content-Type: application/xhtml+xml; charset=Shift_JIS); ?> これで、xhtmlとしてデザインを表示できる。
タグ: .htaccess, HTML, PHP, XHTML, モバイルサイト, 拡張子
more... »
金, 10月 22 2010 » HTMLについて, ホームページ制作, モバイルサイト作成 » No Comments
xhtmlでモバイルサイトを制作する場合、PCのサイトと違い気をつけないとうまく表示されない部分が結構ある。 PCサイトでもIEに代表されるようにブラウザ間の表示の違いを意識しなければならないがモバイルサイトになるとさらに独特な注意がいる。 問題の一つにリンクの下線の色が、思ったような色にならないことがある。 とりあえず、まずはリンクの色の指定方法。 たとえば、リンクの色を赤色、訪問済みリンクも赤色にしてみる。 <head>~</head>の間に下記のように記述する。 <style type=”text/css”> <![CDATA[ a:link{color:#FF0000;} a:visited{color:#FF0000;} ]]> </style> これで、リンク色が赤色になる。 基本的に、この指定をすればリンクは赤色、リンクの下線も赤色になる。 ただ、デザイン上、部分的にリンクの色を他の色にしたい場合がある。 その場合は、 <a href=””●●●●”><span style=”color:#000000;”>あああああ</span></a> これで、リンク色は黒色になる。 しかしこれだと、リンクの下線は赤色のまま。 ここは、黒色リンクにあわせて、下線も黒にしたい。 そこで、先ほどのヘッド部分の記述に少し手を加える。 <style type=”text/css”> <![CDATA[ a:link{color:#FF0000;} a:visited{color:#FF0000;} a.kuro:link {color:#000000;} a.kuro:visited {color:#000000;} ]]> </style> そして、リンク部分は <a href=”●●●●” class=”kuro”><span style=”color:#000000;”>あああああ</span></a> とclassを付ける。 これで、下線も黒色になる。 一見、classだけ付ければspan styleでの色指定は要らないように感じますが、多くの機種に対応 させるには必要となってきます。モバイルサイトではキャリアごとに通用する、しないが変わってくるし、機種ごとにも違ったりするので面倒ですがこんな書き方になってしまいます。 とりあえず、この方法で、リンク下線の色が変えれました。 （iモードブラウザ1.0だと下線の色が変わりません・・・。）
タグ: iモード, XHTML, モバイルサイト制作, リンク, 下線
more... »
木, 10月 21 2010 » HTMLについて, ホームページ制作, モバイルサイト作成 » No Comments
マイクロソフトが無料で配布しているExpression Web SuperPreview 。 IE6~8でのホームページの表示確認ができます。 窓の杜からもダウンロードできます。 Expression Web SuperPreview（窓の杜）
タグ: Expression Web SuperPreview, IE6, IE7, IE8, ダウンロード, ホームページ, マイクロソフト, 窓の杜
more... »
水, 10月 20 2010 » HTMLについて, スタイルシートについて, ホームページ制作 » No Comments
img（画像）の上に隙間ができてしまい、デザインがおかしくなってしまう時があります。 そんなときは、画像にCSSで「vertical-align: bottom」を指定すると隙間がなくなる場合が多いです。
タグ: css, HTML, img, vertical-align, デザイン, 隙間
more... »
水, 10月 20 2010 » HTMLについて, スタイルシートについて, ホームページ制作 » No Comments
以下のような記述で縦書きの文章になります。 「テキストを入れる」の部分に文章を入れると実際には縦書き表示されます。 スタイルシートで縦書きを実現していますので古いバージョンのブラウザだと縦書きにはなりません。 <spanstyle=”direction: rtl; writing-mode: tb-rl”> テキストを入れる</span>
タグ: css, スタイルシート, ブラウザ, ホームページ, 縦書き
more... »
水, 10月 6 2010 » HTMLについて, スタイルシートについて, ホームページ制作 » No Comments
ホームページ作成にDreamWeaver CS3を使用している。 以前、DreamWeaver MXを使用していたのだが、HTML自体よく理解していない頃で本を読みながらさわっていたのだが、途中で訳がわからず断念してしまった。 ホームページ自体は一応作れても、HTMLを理解していなかったので、一度レイアウトが崩れると迷宮入りとなってしまったり、無駄にタグがふえてしまったり・・。 その後、HTMLのタグを覚え、DreamWeaver CS3を使う事になりました。 そこでやっとホームページ作成ソフトの良さがわかったように思います。 以前はホームページ作成ソフトといえばHTMLなどの知識がなくても簡単にホームページが作れるものという考えをもっていました。ある意味、それはそれで間違ってはいないのですが、ホームページ作成ソフトの本来の能力が発揮されるのはHTMLを覚えてからだと思いました。
タグ: css, DreamWeaver, HTML, ホームページ作成
more... »
水, 10月 6 2010 » HTMLについて, スタイルシートについて, ホームページ制作 » No Comments