メインコンテンツ

FC2ブログをHTML5で書きたい人へ ver.2.4

(Thu)

Posted in テンプレート

HTML5でFC2ブログのテンプレートを作成したい方の為のベースとなるHTMLファイルを作りました。
HTML5に詳しい方。ソースに関してタグの使い方等の修正点等ありましたらご教授のほどお願いします。

ver.2.3からの変更点
1.アウトラインの調整
2.一部を除き見出しをh1に統一(一部display:none;を指定していますので表示されません)
3.コメントフォームにautocomplete機能を追加
4.コメントフォームにfieldset、legendを追加(display:none;、border:none;を指定していますので表示はされません)
5.トラックバック表示部のバグを修正
6.その他細部を修正

トップ画面アウトライン構成:
1.サイト名
 1.メインコンテンツ(表示されません)
  1.記事タイトル
  2.記事タイトル
  3.記事タイトル
  4.記事タイトル
  5.記事タイトル
 2.プラグイン(表示されません)
  1.プラグインタイトル
  2.プラグインタイトル
  3.プラグインタイトル
  4.プラグインタイトル
  5.プラグインタイトル
 3.メインナビゲーション(表示されません)
 4.リターンナビゲーション(表示されません)

トップ画面アウトライン構成:
1.サイト名
 1.メインコンテンツ(表示されません)
  1.記事タイトル
   1.Comments
    1.コメントタイトル
    2.コメントタイトル
   2.Leave a comment
   3.Trackbacks
    1.トラックバックタイトル
    2.トラックバックタイトル
   4.Trackback URL
 2.プラグイン(表示されません)
  1.プラグインタイトル
  2.プラグインタイトル
  3.プラグインタイトル
  4.プラグインタイトル
  5.プラグインタイトル
 3.メインナビゲーション(表示されません)
 4.リターンナビゲーション(表示されません)

注意点:
1.W3C Markup Validation Serviceでチェックしたところ、エラーはありませんが記事の内容によってはエラーが吐き出される場合があります
2.HTML 5 Outlinerでチェックした所、「Untitled Section」が2カ所出力されますが、これはnav要素に対するものですので問題はありません
3.HTML5ではcharsetの推奨値はUTF-8になりますがFC2ブログの環境上、このベースHTMLのcharsetはeuc-jpになっております
4.HTML5で新規追加されたタグを使っておりますので、ブラウザによってはデザインが崩れる場合があります

Continue Reading »

CSS3で綺麗なボタンを作ってくれるジェネレーター

(Mon)

Posted in デザイン

CSS3で綺麗なボタンを作る為のソースコードを吐き出してくれるジェネレーターです。
CSS3 Button Generator
他の人が作った(?)ボタンデザインを閲覧する事が出来、さらに気に入ったボタンデザインがあればソースコードを入手する事も可能です。
ソースコードが吐き出されるため、設置も簡単です。ボタンタグを任意の位置に挿入しCSSコードをCSSファイルの任意の位置に挿入するだけで簡単に綺麗なボタンを作る事が出来ます。

FC2ブログだとコメントの送信ボタンなどに使う事が出来るでしょう。
ユーザがついつい送信ボタンを押してみたくなるようなデザインを作ってみましょう。

共有テンプレート「html5_common_01」修正

(Mon)

Posted in テンプレート

共有テンプレート「html5_common_01」を修正しました。
html5_common_01.png

サンプル

バグ等があればご連絡ください。技術的に不可能な内容でなければ対処します。

現在以下のブラウザで動作確認を行っております。
Safari5
Google Chrome7
Opera10
FireFox3.6

修正内容
1.フッターにある著作権表示部を囲むタグをsmallタグに変更
2.メタ情報にOperaブラウザのナビゲーションバー用の記述を追加

Mac個人的メモ

(Thu)

Posted in Apple

Mac初心者の私が知らなかった使い方をメモ。
他にも色々あったけど、取り急ぎこれだけあればそれなりに自由に操作出来そう。

control + option + command + 8 = 白黒反転
control + tab = タブ切り替え
control + scroll = ズームイン、ズームアウト
control + space + アプリケーション名 + enter = アプリ起動
command + tab + q = 選択中アプリ終了
command + space = 日本語入力、英語入力切替
command + 非アクティブウィンドウドラッグ = 非アクティブウィンドウ移動
command + i = ファイル情報ウィンドウ
command + option + i = ファイル情報ウィンドウ(別のアイコンを選択すると情報が反映される)
/* 2010/11/01 コメントにより追記 */
command+shift+3 = スクリーンショット
command+shift+4 = 範囲指定スクリーンショット
/* /2010/11/01 コメントにより追記 */
option + shift + k = 
option + shift + 音量調節 = 微細音量調節
範囲選択 + デスクトップにドラッグ = メモ
範囲選択 + Safariアイコンにドラッグ = 検索

漫画、アニメ、ライトノベルのタイトルロゴジェネレーター

(Thu)

Posted in デザイン

もう有名ですが、ライトノベル「とある魔術の禁書目録」と漫画「らき☆すた」のタイトルロゴを生成するジェネレーターです。
こんなのが作れます。
とある櫻花の画像生成で生成出来る画像のサンプル
とある櫻花の画像生成
がぞ☆つく
ブームが終らないうちはサイトのロゴに使っても元ネタが分かってもらえそうですね。

とある櫻花の画像生成、がぞ☆つくはテキストを全て自由に選べる訳ではありません。「とある」と「の」は固定になってしまいます。
がぞ☆つくは間の星が固定になってしまいます。
サイトのタイトルロゴに使用するならば、サイトのタイトルも画像に合わせた名称に変更した方が良いでしょう。
また、生成される画像に透過処理は施されていないため、背景が黒いサイトに使うのならば画像を生成後に透過処理を施す必要があります。

試しに共有テンプレート「html5_common_01」にとある櫻花の画像生成で生成した画像を埋め込んでみましょう。
HTMLに直接imgタグで修正した場合、見た目では問題ありませんがサイトタイトル(h1タグ)を画像にしてしまうのは抵抗がありますのでCSSを使ったテキスト飛ばしでタイトルロゴを埋め込む方法を選択します。

完成図:
とある櫻花の画像生成で生成したタイトルロゴ画像を共有テンプレート「html5_common_01」のヘッダに埋め込んだ完成図です

Continue Reading »

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