はじめてのブログデザイン

ホームページ制作の経験を活かしてブログテンプレートのデザインに挑戦!

スポンサーサイト

--/--/-- -- [Edit]

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

写真・画像を格好良く見せる JavaScript

2007/05/27 Sun [Edit]

人様のブログをウロウロしている最中、写真・画像のサムネイルをクリックした後、ブラウザのウィンドウが暗くなり格好良く大きい写真・画像が登場するのを見かけたことはありませんか?

今回はその格好良く写真・画像を見せつける JavaScript(ジャバスクリプト)をFC2ブログで使用する方法のご紹介です。

なるべく多くの方が使用できるように、できるかぎり細かく説明いたしますので、かなりの長文になると思います。ゆっくりしていってください( ^-^)_旦~

まずは JavaScript のサンプルページをご覧下さい。

いかがでしたでしょうか?
格好良く写真・画像が表示された方は続きを読むからお進みください。

もしもサンプルページで、写真・画像をクリックしても何も起こらなかった方は、ブラウザの JavaScript の設定をご確認ください。確認のしかたはブラウザやバージョンで異なりますので、「 JavaScript 設定 ● ● ●」などの検索ワードで Google や Yahoo! などで検索し、JavaScriptON にしてから、もう1度サンプルページの写真・画像をクリックしてみてください。

● ● ●にはお使いのブラウザの名前・バージョン・OSなどを入れると欲しい情報に辿り着けると思います。

JavaScript の設定が ON なのに正しく動作されない方は、お使いのブラウザには非対応なのだと思います。新しい OS や他のブラウザに乗り換えた時に、また遊びに来てください(*´∇`)ノシ マタネ~♪
※新しいブラウザでも Netscape だと正しく表示されませんでした。LunascapeFirefox など他のブラウザでお試しください。

問題無く表示された方は続きをどうぞ☆

スポンサーサイト

続きを読む ≫

コメントの修正&削除ができない

2007/05/26 Sat [Edit]

hajime004-oto456のデザインブログテンプレートで、コメントの修正&削除ができない不具合がありました。

■原因
HTMLソース内のコメント修正部分である edit_area の input 要素の name 属性や value 属性などに、通常のコメント時の変数名が書かれていた為。
■解決方法
edit_area 内の変数名を正しいものにする。
※もしも HTML をカスタマイズされていて、再度設定しなおすのが大変な方は、ブログテンプレートを再度ダウンロードして頂き、そのブログテンプレートHTML ソースの186行目<!--edit_area-->から、214行目<!--/edit_area-->までをコピーし、そのコピーしたソースを使用中のブログテンプレートの<!--edit_area-->から<!--/edit_area-->までに上書きでも直せます。
■備考
こう言ったボンミスがあると、自分で自分が嫌いになりそうになります。 なので、もの凄いハッカーが私のコンピューターに潜入し、ブログテンプレートを作成中に書き換えられたと思うことにします(涙目)

タロさんご報告感謝です!
ご迷惑おかけしてすいませんでした。宜しかったら、再度ダウンロードして使って頂けると嬉しいです。ありがとうございました!

CSSの基礎知識

2007/05/25 Fri [Edit]

このページではFC2ブログ運営者の方で、尚かつ前回のエントリーHTML の基礎知識をご覧頂き HTML の基礎知識をご理解した方を想定して CSS の基礎知識について説明しています。

CSS(シー・エス・エス)とは Cascading Style Sheets(カスケーディング・スタイル・シート)のことで、頭文字を取り CSS と表記されています。

Web ページの制作現場ではスタイルシートと言えば CSS のことを指していると思って頂いて問題ないと思います。
※厳密に言うと CSS はスタイルシートの1つだと解釈しておくのがベストです。

それでは CSS とは何をする為のもので、何ができるのか1つ1つ理解していきましょう!

続きを読む ≫

HTMLの基礎知識

2007/05/22 Tue [Edit]

FC2ブログ運営者の方を対象に、ブログテンプレートのカスタマイズに必要な HTML(エイチ・ティー・エム・エル)の基礎知識をご紹介いたします。
本当に基礎の基礎と言いますか、ブログをご自分でカスタマイズする際に最低限必要な知識ですので、もっと詳しく知りたいと思われた方は、おのおの HTML の入門サイトや専門書籍をご覧頂きお勉強してください。

それでは1つ1つ HTML の基礎知識を理解して行きましょう!

続きを読む ≫

IEでレイアウトが崩れる(カラム落ち)

2007/05/19 Sat [Edit]

hajime004-oto456 テンプレートをお使いの方から、コメント画面を表示した際に IE でレイアウトが崩れる(カラム落ち)不具合報告頂きました。

■原因
コメント投稿フォーム内のレイアウトに使用していた table の width に CSS100% を指定していた為。
■解決方法
width を実数値 510px と指定する。
■備考
他のブラウザではレイアウトが崩れなかったので IE のバグになるのでしょうか? %(パーセント)で指定する際は注意するように・・・と言うか2年くらい前にも仕事で同じ問題であたふたしたような・・・
変わらないな~(笑顔)

豆吉さんご報告ありがとうございました!

祝!2つ目のブログテンプレート承認!

2007/05/18 Fri [Edit]

2つ目のブログテンプレートが無事承認されました!

ダウンロードしてくれた方、コメントを残して頂いた方、ありがとうございます!ほんと励みになります!
もし下の名前のブログテンプレートで不具合を発見された方は、この記事のコメントからご報告して頂けると大変助かります。

hajime004-oto456

3つ目のデザインはどんなのにしようかな~?

SafariとOperaのCSSハック

2007/05/16 Wed [Edit]

覚え書きです。

仕事でボックスに overflow-y 属性を指定してある Web サイトの HTML を修正中に見つけた CSS ハックです。
今回、Mac の純正ブラウザ SafariWindowsOperaoverflow-y では overflow-y 属性を指定出来きず意図したデザインに出来なかったので、overflow にて別途指定しました。

どうやら overflow-yIE 独自の属性のようです。 ちなみに FirefoxMac も Windows も問題なく指定した通り表示されました。

ちなみに意図したデザインとはインラインフレーム(iframe)の変わりに div 要素で同じ見た目にする。でした。


div#hajime {
	width : 200px;
	height : 200px;
	overflow-y : scroll; /* IE独自の属性 */
}

html:first-child div#hajime { /* SafariとOpera用 */
	width : 200px;
	height : 200px;
	overflow : scroll;
}

■結論
Firefox はえらい!ルーールルルルルル♪

■追記(07/05/19)
Netscape(ネットスケープ)を完全に忘れてしまっていました・・・ 結局 IE 独自の属性 overflow-y は使わない事に。

■さらに追記(07/05/21)

overflow : auto;

で、全てが丸く収まりました。

CSSハック一覧表作りました。

ブログテンプレート一覧表

2007/05/13 Sun [Edit]

当ブログ「はじめてのブログデザイン」で配布中のデザインブログテンプレートの一覧表です。
サムネイルをクリックするとデザインを確認できます。気になるテンプレートを検索する際にご使用頂くテンプレート名をコピーしやすいようにしてありますので、宜しければ FC2ブログテンプレート検索ページでご利用ください。

緑のブログテンプレート

ブログテンプレート

テンプレート確認用パラメータ
使用中の FC2 ブログURL の後ろに下記のパラメータを付け足すと、ご自身のブログで見栄えを確認できます。

ブログテンプレートの特徴
春を感じさせるような緑を基調にシンプルかつオーソドックスな感じでテンプレートを制作しました。プラグイン対応。2カラム。1つ目のデザインブログテンプレートです。

ピンクのブログテンプレート

ブログテンプレート

テンプレート確認用パラメータ
使用中の FC2 ブログURL の後ろに下記のパラメータを付け足すと、ご自身のブログで見栄えを確認できます。

ブログテンプレートの特徴
桜の花びらを意識したピンクを基調にシンプルかつオーソドックスな感じでテンプレートを制作しました。プラグイン対応。2カラム。1つ目のデザインブログテンプレートの色違いです。

ライトブルー(水色)のブログテンプレート

ブログテンプレート

テンプレート確認用パラメータ
使用中の FC2 ブログURL の後ろに下記のパラメータを付け足すと、ご自身のブログで見栄えを確認できます。

ブログテンプレートの特徴
夏を涼しく過ごすための必須アイテム「ガリガリ君」のようなブルーを基調にシンプルかつオーソドックスな感じでテンプレートを制作しました。プラグイン対応。2カラム。1つ目のデザインブログテンプレートの色違いです。

テキストサイズ変更型のブログテンプレート

ブログテンプレート

テンプレート確認用パラメータ
使用中の FC2 ブログURL の後ろに下記のパラメータを付け足すと、ご自身のブログで見栄えを確認できます。

ブログテンプレートの特徴
アナログな感じを意識しつつ季節関係なく使えるようにテンプレートを制作しました。テキストサイズ大きめ。テキストサイズ変更ボタン装備。Cookie によりテキストサイズ記憶。プラグイン対応。2カラム。2つ目のデザインブログテンプレートです。

オレンジのブログテンプレート

ブログテンプレート

テンプレート確認用パラメータ
使用中の FC2 ブログURL の後ろに下記のパラメータを付け足すと、ご自身のブログで見栄えを確認できます。

ブログテンプレートの特徴
真夏の果実を彷彿とさせるようなオレンジを基調にシンプルかつオーソドックスな感じでテンプレートを制作しました。プラグイン対応。2カラム。1つ目のデザインブログテンプレートの色違いです。

リンクカラーがアクセントのブログテンプレート

ブログテンプレート

テンプレート確認用パラメータ
使用中の FC2 ブログURL の後ろに下記のパラメータを付け足すと、ご自身のブログで見栄えを確認できます。

ブログテンプレートの特徴
リンクカラーをアクセントカラーとし初心者にもなるべく簡単にカスタマイズを楽しんで頂けるように制作しました。文字サイズ変更ボタン装備。Cookie によりテキストサイズ記憶。プラグイン対応。2カラム。3つ目のデザインブログテンプレートです。

3カラムのブログテンプレート

ブログテンプレート

テンプレート確認用パラメータ
使用中の FC2 ブログURL の後ろに下記のパラメータを付け足すと、ご自身のブログで見栄えを確認できます。

ブログテンプレートの特徴
ユーザー(閲覧者)の「使いやすさ」を考慮し、サイドバーのメニューをクリックしやすいように制作。目に優しげな色でまとめてみました。プラグイン対応。3カラム。4つ目のデザインブログテンプレートです。

※当ブログテンプレートのご利用にはFC2ブログへ入会して頂き、メンバー専用のログイン画面から「テンプレート設定」→「共有テンプレート追加」→上記したブログテンプレート名、もしくは作者名「hajime」で検索して頂くと簡単に見つかると思います。
ご意見ご指摘、ご質問などありましたらお気軽にコメントください。

祝!2つ目の FC2 ブログテンプレート完成!

2007/05/10 Thu [Edit]

2つ目のデザインブログテンプレート

文字サイズ変更型のデザインブログテンプレート完成!
1つ目のブログテンプレートではテキストのサイズを px で指定していたのですが、今回完成した2つ目のデザインブログテンプレートでは での相対的な指定で制作してみました。お年頃の方、普段からモニターを長時間眺め疲れ目な方にお使い頂きたいブログテンプレートです。季節関係なくお使い頂けるような雰囲気とアナログな感じを意識してみました。

機能的なことを聞かれもしないのに少し説明させて頂くと JavaScript を使用し、テキストのサイズをユーザーが大きくしたり小さくしたりと簡単に変更出来るようにしたので、ユーザーの環境に適したテキストサイズでブログのを閲覧して頂けると思います。また、Cookie によりテキストサイズを記憶するので1度読みやすい大きさのテキストを決めると、次回の訪問時には前回のテキストサイズのまま閲覧できます。

今回はテキストを相対的な指定で制作し色々と勉強になりました。閲覧するブラウザによってテキストのサイズが変わるので、デザイン的な妥協点を見つける難しさや Web デザインの奥の深さを実感です。クロスブラウザなんて言うのかも知れません。

只今、承認中です。

豆吉さんへ
「お年頃デザイン」お待たせしました。もし、お気に召したらご使用ください。
FC2ブログには沢山の素敵なテンプレートがありますので、私へのお気遣いなくご使用頂けたらと思います。勿論、お使い頂かないのも自由です。 また何かありましたらお気軽にコメント頂けると嬉しいです!

Safari の CSS ハック

2007/05/10 Thu [Edit]

覚え書きです。

Mac の純正ブラウザ Safari 用の CSS ハックです。なるべく IE6 用の CSS ハックを利用して制作を心がけているのですが Safari のみに適用させる CSS ハックを見つけたのでφ(・ω・ )かきかき


html[xmlns*=""] body:last-child div.hajime { /*Safari用のハック*/
	font-weight : normal;
}

●課題
CSS ハックにおんぶにだっこで大丈夫?

CSS ハック一覧表を作りました。

Top
はじめてのブログデザイン

はじめに・・・

hajime

Author:hajime
はじめまして!齢32を迎えたおっさんです。
当ブログではホームページ制作の経験を活かして、日々ブログテンプレートのデザインを勉強しています。ご意見ご質問アドバイスなどありましたら、お気軽にコメントください!

ブログテンプレートのご使用についてをご覧頂けると注意点などをご確認いただけます。

ブログテンプレート一覧表では、今迄当ブログで制作してきたテンプレートをご覧頂けます。

はじめてのブログデザイン記事一覧で、気になる記事を探してみませんか?

はじめてのブログはFC2ブログで良いと思うに一票。

Mail Address

Google AdSense

RSSフィード

便利なブックマーク

リンク

ロックオン


ドメインが増えてきたので引っ越し検討中のレンタルサーバー。

カテゴリー

タグクラウド

検索フォーム

最近の記事

最近のコメント

最近のトラックバック

お気に入り

EIZOダイレクト
私の中で出ている1つの答え。それは液晶モニターに関しては今も昔もこれからも EIZO(ナナオ)。

ドメイン検索
a
.com .net .info .mobi

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。