これはかなり便利そうなプロパティを発見！高さの異なる要素の「行の高さ」をそろえることができます。今まで知らなかったー！
書籍などに紹介されていない display : inline-block について
floatを使って高さの異なるブロック要素を折り返して2段、3段と並べていくと、それぞれの高さが異なる場合、引っかかって上手く並びませんが、
このプロパティを使うと …全て読む
新しいサイトのテンプレートを作りました！
ヘッダーのイメージ画像は今迄で一番納得のでき。サイトのタイトルの「ステラ＝星」→星空としてデザインに落とし込むことを目指しました。
細かい部分ももっと作りこみたいし、若干レイアウトが崩れてしまっている部分もあるのでちょっとづずバージョンアップしていきたいです。
久しぶりにMySQLの勉強していたら、以前も苦労した文字化けにまたまた遭遇。
以下の内容をmy.iniに以下の記述したらとりあえず文字化けが解消。内容を理解しているとはいえませんが、とりあえずメモ。(ちなみに文字コートはUTF-8を使ってます。)
…全て読む
IEのバージョンの違いによる見栄えの違いは厄介な問題ですが、バージョンアップすると古いバージョンでの確認ができなくなり、スタンドアロンのIEをインストールしたりする必要がありましたが、マイクロソフトから便利そうなフリーソフトが出ているのを見つけました。「Microsoft Expression Web SuperPreview」です。マイクロソフトのダウンロードセンターからダウンロードできます。
htmlやcssのソースコードをかんたんに整形して表示することができるWordPressプラグイン、SyntaxHighlighter Evolvedを導入してみました。こんな感じ↓に表示されます。
…全て読む
WordPress3.0以前には無かった機能「カスタムメニュー」について調べてみました。カテゴリや独立ページを組み合わせてリスト表示できる機能です。
使い方としては、ヘッダーの中に、独立ページとカテゴリを組み合わせてグローバルナビを表示させたいなどのときに、ダッシュボードから設定するだけで設置可能。変更もしやすいのでかなり使いやすいと思います。
この機能を使うにはテーマをカスタムメニューに対応したWP3.0用のソースコードに書き換える必要があるようですが、とりあえず簡単に使用可能にする手段を見つけたのでメモします。
1：functions.phpの中に、以下のコードを追記する。(functions.phpが無ければ作成する)
add_theme_support( 'menus' );
2：テーマの中でカスタムメニューを表示させたい位置に、以下のテンプレートタグを記入する。
<?php wp_nav_menu(); ?>
これでダッシュボードの外観>メニューから設定が可能になります。
設定の仕方は直感でなんとなくできそうな感じですが、Lovelog+*さんに設定方法が詳しく解説されています。
このカスタムメニューはとても便利だなーと思います。ちょうど今新しいテーマを作成中で、グローバルナビを作ろうとしていたので良いタイミングでこの機能を知ることができてとてもラッキー。あわせてWP3.0からの標準テーマ「Twenty Ten」には新しい機能が実装されているそうなので、これを勉強するといろいろ解りそうです。
web製作環境をパワーアップさせるべくAptana Studioをインストールしてみました。
ダウンロード、インストールの手順は以下エントリを参考に行いました。
AptanaでWebページ作成はここまでできる！（1/3） － ＠IT
デフォルトの状態だとメニュー等が日本語ではないので、まずは日本語にカスタマイズ。
やり方は以下のエントリーを参考にしました。ver2.0でも上手くいきました。ありがとうございました。
Aptana Studio 1.1の日本語化 | あいしん スタッフぶろぐ
Aptanaはhtmlやcssをコーディングするだけでなく、プラグインを追加することによりRuby on Railsなどの開発も行える多機能なオーサリングツールとのことです。(そういえば、Zen-Codingが使えるんだっけ！)
テキストエディタはez-HTMLを愛用し、htmlコーディングだけならこれで十分満足なのですが、更なるスキルアップを目指すために開発環境構築をはじめました。
まぁ、どの程度使いこなせるかはまったくの未知数なのですが。あとAptanaはマシンパワーをそれなりに食うようなので、自分の非力なPCでどの程度動くかも様子をみなくてはいけません。
ちょこちょこやってみようと思います。
以下のような状態が起きて、解決したのでメモ。
floatで回り込ませた画像とテキストを含んだli要素でリストを作ったところ、li要素が他のli要素に食い込んでしまいレイアウトが崩れる。それを回避するのにli自体に対してfloatを使ったところ、食い込みは防げたがliの上下のmarginが相殺されず、意図したレイアウトにならない(上下左右で均等にpaddingを付けたい)。
調べてみると、要素をfloatさせるとmarginが相殺されなくなるのは仕様らしいです(←今さら知った)。今回はliに対してfloatは使えないって事で、別の方法を試してみたのが「overflow:hidden」。このプロパティを使うと要素の高さを確保してくれるとのことなのでなんかよさげ。とりあえず使ってみると画像は食い込まず、意図したレイアウトになりました。画像をfloatしたことにより無視さるはずのliの高さがoverflow:hiddenによって確保されたという感じでしょうか。
overflowはあまり使ったことが無く、調べてみると奥が深そう。きちんと意味を理解して矛盾の無いように使いたいものです。
overflow:hiddenでfloatをclear – とその理由 | Takazudo Clipping*
定番テキストエディタ「秀丸」を試してみました。
htmlコーディング用のマクロはCompleteXとそのプラグインであるCompleteTag + CompleteCSSがよさげ。タグをショートカットから補完入力できるようになりました。これはなかなか強力かも。
いずれにせよ開発効率はソフトウェアの熟練度に大きく左右されると思うので、ガシガシ使って使い慣れるのが先決ですね。
ez-HTMLと秀丸、そしてもうひとつ気になっているEmEditor、エディタ選びは楽しい悩みです！
StellaGrafica
