2010年06月13日/10:22
HTML+CSS Templating
とっても解りやすい記事。今コーディングを勉強している人は必読です！
・とりあえずリセットする
・まず、エリアを作る。
・中身はモジュールが並ぶだけにする。各モジュールは、それぞれの名前をクラス名として持つ。
・モジュール名のクラス起点で全てのスタイルを書く。全部そうしておけば詳細度がどうとか考えなくていい。
・画像はそのモジュール名のディレクトリに入れる。そうしないと、ある画像がどこで使われてるか分からなくなるので、「一度置いた画像は二度と削除できない」
・モジュール間で共通の画像が現れたら、別のディレクトリにまとめる等して整頓する。
※一部抜粋。元記事を読むとより理解が深まります。
レイアウトを形成するボックス(＝上記で言うエリア)を作ってid名を設定し、そのボックスの中に設置する各要素はレイアウトボックスのid名を基点にしたクラス名を設定するということです。これによりcssの複雑な継承を避けることができる！
コーディングで時間がかかる原因のひとつに、ブラウザによる差異を吸収しようとして細かなスタイルを書き加えていくうちに、あちらが立てばこちらが立たずな状態のループに陥ってしまう場合があると思います(てか自分やりがち汗)。それを防ぐ手段としてcssリセットとモジュール化が挙げられるということですね。
スタイルシートを入れ子で記述する方法を知らなかった頃、自分でもよくわからない複雑なcssをよく書いてました。というか、このブログのcssもまだ修正したいところがたくさんあるのですが、まだ手をつけてないです…
カテゴリー：HTML&CSS |
コメント(0)
2010年06月10日/21:04
q要素とblockquote要素について再確認。どちらも「引用」に関する要素です。
qは、「quotation」の略で、q要素はインライン要素として、引用されたテキストを表します。blockquote要素より短い文章の引用文に使用し、一般的なWebブラウザでは2重引用符で囲まれたブロックとしてレンダリングされます。
インライン要素、テキストのみ内包可能で、ブロックレベル要素を内包したい場合はblockquote要素を使うようにしましょう。
短い引用文をインライン要素として表すq要素
blockquote要素はブロックレベル要素として引用されたテキストを表します。q要素より長い文章を引用したいときに使用し、一般的なWebブラウザでは上下左右のインデントと共にレンダリングされます。
要素の意味合いとしては、引用であることの明示なので、インデントをするためという目的での使用法は推奨できません。
複数行にわたるブロックレベルを引用するblockquote要素
ネタフルさんで引用文の背景画像に”を使用しているのを見かけてなんだろうと思ったことがありましたが、q要素でのレンダリングでは”が付くことが多いようです。
引用を明示することはマナーですし、そのマナーの積み重ねがモラルを作り、巡り巡ってお互いの利益につながると思います。細かいことですが丁寧にコーディングしたいですね。自分も今後はしっかりやっていこうと思います！
q要素(インライン引用)
blockquote要素(ブロックレヴェル引用)
カテゴリー：HTML&CSS |
コメント(0)
2010年05月25日/23:05
自分が使っているテキストエディタはez-HTMLというリンクウェアです。軽くて機能も豊富で使い勝手の良いエディタです。
このエディタを使ってWordPressでテンプレートなどを作っているのですが、ローカルでは問題なかったのに、サーバーにphpファイルをアップロードしてブラウザで表示させると日本語部分が?マークになってしまうと言う不具合に遭遇してしまいました。
最初はFTPソフトが文字コードを変換しているのかと当たりをつけ、いろいろ試しましたがどうやら問題なさそう。あとはテキストエディタで保存する際の文字コード設定しか思いつかなかったので、別のテキストエディタで保存しなおしてアップロードすると文字化けしませんでした。
これで原因はez-HTMLの保存時の文字コードの設定関連に確定。ez-HTMLでファイルを保存する際はUTF-8を指定しているのですが、これを以下の設定を使いUTF-8Nに変更。
・ファイル→文字コードの設定(高度)→UTF-8N(BOM無し)を選択
この指定でファイルを保存しなおすと、無事文字化けが解消しました！
それにしても、UTF-8N(BOM無し)とはなんなのでしょうか。
BOM (Byte Order Mark) バイト・オーダー・マーク をさっと読んだところ、BOM付きはファイルに何らかの文字列が付与されるようで、ようはそれが文字化けの原因になっているということでしょうか。ちょっと難しそうです。
なお、以下の設定もしておいたほうがよさげです。
・表示→詳細設定→ファイルシステム[標準設定]の[その他のシステム設定]の「UTF-8の可能性を考慮」にチェックを入れる
カテゴリー：WordPress |
コメント(0)
2010年05月20日/23:01
我がサイト「Stella Grafica」のオリジナルテーマがようやく完成しました！まぁ、拙いデザインでお目汚し申し訳ないです。本人は楽しんでやってますのでご容赦を(^^;)
とりあえずwin環境でのモダンブラウザで大きなレイアウトの崩れは無い模様で一安心。とはいえ油断禁物、今後ちょっとずつ詳細を調べて参ります。
sidebarウィジェットの対応や、header.php、footer.phpなどの分離etc、まだ煮詰める部分があるのでどしどし手を加えていこうと思います。
そして完成した瞬間にこのデザインに飽きてしまったので、またデザインを作りたいと思います。
もう手順がわかったので、次はもっとましなデザインが作れるはず…？
カテゴリー：WordPress |
コメント(0)
2010年05月19日/23:12
単一記事でコメント欄が表示されないという現象にちょっとハマったのでメモ。
WordPressでパーマリンクをカスタムする場合、%post_id% または %postname% を含むか、年・月・日・時・分・秒のすべてを含めないとユニークなポストとみなされず、コメント欄が表示されない仕様となっているようです。
自分は秒を追加して/%year%/%monthnum%/%day%/%hour%%minute%%second%.htmlという構造にすることによって修正しました。
WordPress › フォーラム » パーマリンク設定によりコメント欄が表示されない
カテゴリー：WordPress |
コメント(0)
/21:32
書店で見かけた「Web Designing」5月号に”書かないAjax”というjQueryの特集が組まれているのを発見し、ちょっとやってみたくて購入しました。
特集の中ではプラグインの導入手順が豊富に解説されていて、手始めに二つ、「Accordion」と「idTabs」を練習がてら試してみました。
思ったより簡単で効果的！というか楽しい！「Accordion」は見出し部分をクリックすると、それに対応するコンテンツがす～っと表示されるもので、この動きがなんか楽しい(笑)「idTabs」はタブをクリックするとそのタブに対応したコンテツンツに切り替えて表示するプラグイン。コンテンツが豊富なサイトだと威力を発揮しそう。使い方をいろいろ考えさせられて、いい刺激になりました。もっとはやくやってみればよかった。
最近webの仕事をする上でどんなスキルを身に付けていけばいいか、いろいろ考えていたところだったので、この体験は大きなヒントになったと思います。
まだまだたくさんサンプルが載っていたので、元を取るまで一通り試そうと思います！
カテゴリー：jQuery |
コメント(0)
2010年04月25日/21:45
WordPressのダッシュボード作業中での出来事です。設定メニューのWordPress のアドレス (URL)とブログのアドレス (URL)を変更しようとしたところ、誤って無効なURLを入力してしまいダッシュボードにアクセスできなくなってしまいました。少しあせりましたが解決方法を発見し復旧できたので、その方法を記録しておきます。
【解決方法】
原因はもちろんURLが無効なのでそれを修正してやればよいのですが、ダッシュボードにはアクセスできません。そのURLはデータベースに記録されているのでデータベースを直接修正する必要があります。
自分はロリポップサーバーを使っているので、ロリポップのユーザー専用ページのメニュー WEBツール>データベース>phpMyAdminiにログインして作業を行ないました。
以下、phpMyAdminでの作業です。
- WordPress用に作成したデータベースにwp_optionsというテーブルがあるのでそれを選択します。
- wp_optionsテーブルの中に、siteurlというフィールドがあるのでその編集ボタン(鉛筆)をクリックします。
- option_valueのテキストエリアに誤ったURLが記載されているので、正しいURLに書き換えて実行ボタンをクリックします。
これでダッシュボードにアクセス可能になります。
カテゴリー：WordPress |
コメント(0)
« 前のページへ
StellaGrafica
