メインカラム可変で3カラムレイアウトのWordPressテーマ
wp_13[山吹色]
wp_13[桃色]
wp_13[紺色]
wp_13[水色]
メインカラムが可変可能ですので、ワイドサイズのモニターにも対応できます。私は3カラムのレイアウトはちょっと使いにくいのですが、思いのほか3カラムのレイアウトの需要を感じます。ブログでアフィリエイトをする人には、3カラムのレイアウトが重宝するのかもしれませんね。
テーマはオーソドックスな形ですが、カラーに主張を持たせたデザインにしています。他のカラーに変更したい場合は、スタイルシートでお好きなカラーに変更して頂けます。また、画像を使用しておりませんので、変更時のメンテナンスも簡単です。
Internet Explorer でもOK!!「display: table」
まだスタイルシート（CSS）というものがなかった頃、tableを使ってレイアウトしていた時代がありました。その後CSSが確立されてくると、 “tableを使ってレイアウトするのはよくない!!”というのが当たり前になって、tableという文字を見ると自然と回避してしまっていたところがあ りました。
IEでも思うようなレイアウトで表示できます
サイドバー固定でメインカラム可変のレイアウト、3カラムテンプレートについて、いろいろ試行錯誤していると「display: table」というものが目にとまりました。“table”= “表組み”という頭があったので、はじめは気にもとめていませんでしたが、どうやらこれで「サイドバー固定・メインカラム可変のレイアウト・3カラムテンプレート」は解決できそうです。IEの8でも思うようなレイアウトで表示してくれます。
使い方は「display: box」や「display: flex」と同じです。親要素に「display: table」を指定して横並びにさせたい要素に「display:table-cell」を指定すればOK。スタイルシートもシンプルに仕上がります。
display: boxとdisplay: flex
先々月、サイドバー固定でメインカラムを可変のレイアウトで、３カラムのテンプレートを 作成するとき、「display: box」を使用していました。そこで便利だったのが「box-ordinal-group」というもの。htmlコードに記述した順番に関係なく、表示さ せたい順番をスタイルシートで設定できるという、大変便利なものなのです。今回はそのことについて書こうと思っていたのですが、先日Flexible Boxについての最新の仕様は「display: box」ではなく「display: flex」だということを知りました。ということで「display: box」と「display: flex」について先に書いてみようと思います。ただし「display: flex」は、現在対応しているブラウザはGoogle Chromeのみという心もとない状況です。
では実際の状況はどうなのか、今作成中のテンプレートで試してみることにしました。テンプレートは、サイドバー固定でメインカラムを可変の３カラム レイアウトです。「display: box」の部分を「display: flex」に変更してみました。（テストしたブラウザは全てMac版です。）
Google Chromeは、問題なくＯＫ！
同じwebkit系でもSafariはダメ
Firefoxではメニューも可変に
Operaでは意図したレイアウトにならない
まずは現状で対応できているGoogle Chromeは、問題なくＯＫ！。サイドメニューは固定されたままメインカラムのみ可変になってくれます。同じwebkit系のSafariでも大丈夫か と思いきや、Safariでは全く機能していませんでした。Firefoxでは、サイドメニューもメインカラムと一緒に可変になってしまいます。 Operaでは、意図したレイアウトにはなってくれませんでした。
結局私がやりたかったことは、レスポンシブデザインとかではなく、単にメインカラムを可変の３カラムレイアウトを手軽に作りたかったのですが、中途 半端な知識であたふたしてしまったようです。以前も少し書いたことがありますが、作り手が思っている程、見る側は気にしていないのが現状で、これからも ずっとそうなんだと思います。
どの仕様が最新かということよりも、どうしたら同じように見えるか、それが一番制作者には大事なことで、利用者には当たり前のことですからね。
●今回の記事を書くにあたり下記のサイトを参考にさせて頂きました。
Web.fla
くらげだらけ
HTML5・CSS3で作った3カラムテンプレート、バグあり…修正!!
ホームページのテンプレートやWordPressのテーマを作るとき、心がけているものの中にhtmlの構造があります。単に形を整えるのではなく、構造を記述する順番だったりするのです。SEO対策といったことからも重要なことですよね。
テンプレートなどを作って公開するときには十分テストをしているつもりなのですが、先月HTML5・CSS3で作成した3カラムのテンプレートで、思いがけないバグが見つかりました。バグというより、単なる私のミスなんですが…。
FirefoxやGoogle Chromeでは問題ありません。ミスとはどんなことかというと、IEでのことです。メインカラムがサイドメニューより長いときには問題ないのですが、逆にメインカラムがサイドメニューより短かった場合、フッダー部分がメインカラムの下の位置まで上がってしまうのです。これはメインカラムをサイドメニュー より先に記述していて、３カラムを作るのに「position」を使用していたためでした。htmlの構造的にはその方がいいのですが、思い通りのレイア ウトにならないのは残念です。
実は3カラムのWordPressのテーマを作っていて気がついたんですが、width固定だったり、すべて可変にする場合は３カラムも簡単なんですけど、メインカラムだけ可変ってのは結構難しい…。そうかと言ってFirefoxやGoogle ChromeとIEとで見え方が違うのもおかしいし、結局サイドメニューの一つをメインカラムより先に記述することにしました。HTML5になって、構造 の意味付けがしっかりしているから大丈夫かななんて思います。でもIEはすべて可変です。トホホ…。
CSS3でボックスの順番を付けるのにとても便利な「box-ordinal-group」というのがあるのですが、それはまた後日書くことにします。
不透明度 opacity とカラー指定 rgba
CSS3で新しく加わったプロパティの中に透過があります。以前は透明効果を使う場合は、透過のpng画像を使ったりしていました。
div {opacity:0.8;}
不透明度 opacity とカラー指定 rgba
CSS3では上記のように記述すればdiv要素を80%に透過してくれます。とても便利ですね。
tro-sukeのブログでもopacityを使用していますが、指定が簡単な反面、ちょっと困ったことが発生する場合もあります。というのは、 opacityが指定された要素は、すべてが透明になってしまうということです。文字や写真までもが透明になってしまうのは、ちょっと困りますよね。そう いった場合は、カラー指定を rgba で指定すると回避できます。
rgba(Rの数値, Gの数値, Bの数値, アルファ値)
div {background-color: rgba(255, 255, 255, 0.8);}
例えば上記のように指定すれば、div要素の背景カラーを白色で80%に透過してくれます。この場合は、背景のカラーのみが透過されますので、文字や写真は透明にならずに済みます。
ただ私の場合RGBの数値がどうもピンときませんが、それも慣れれば大丈夫な気がします。
左メニュー2カラムのWordPressテーマ
wp_13[Charcoal Gray]
wp_13[Lamp Black]
wp_13[Midnight Blue]
wp_13[Ivy Gray]
トップページにはアイキャッチのような写真を配置していますが、不要な場合は取り外しも可能です。シングル記事やページには写真が入らない設定になっています。
ヘッダーのタイトル部分は画像にしていますので、タイトル画像が必要になります。タイトルをテキストで入れる場合は、スタイルシートの変更が必要になる場合がございます。
テーマはウィジェットやカスタムメニューに対応した簡単タイプで、設置したらすぐにブログがはじめられます。
HTML5+CSS3で作成していますので、古いブラウザをお使いの場合は、グラデーションや角丸、シャドーといった機能は省かれて表示されます。
横幅可変レイアウトで右メニュー2カラムのWordPressテーマ
テーマ名：wp_13[Antiquewhite]
テーマ名：wp_13[Darkslategray]
テーマ名：wp_13[Rosybrown]
テーマ名：wp_13[Lightslategray]
今回はHTML5・CSS3で作成してみました。テーマはブログらしく、日付表示の部分を凝った作りにしています。他細部などはCSS3の機能を使っていますので、最新のブラウザをご使用になることをお勧めします。IE8やIE9ではレイアウトが崩れないことを重視していますので、CSS3の機能が省かれた状態で表示される部分もあります。
トップの画像はご自身のサイトに合わせて変更してください。画像の加工をしなければ、そのままお使いいただいてもOKです。テーマでのご利用はかまいませんが、他への流用はお断りしています。
テーマのカラーバリエーションは４タイプ揃えています。お好きなカラーをお選びください。
CSS3 だけできれいなボタンを作る
CSS3 だけでボタンを作る
スタイルシートでグラデーションや角丸を機能させるとき、ベンダープレフィックスを付けたりするんですが、CSS3草案のままで表示できるものが多くなってきましたね。
CSS3草案のままで表示できるものは、できるだけ草案のままで書いた方が楽でいいですよね。だっていくつも書くの面倒くさいし…。
そんなことをチェックしながら、CSS3 だけできれいなボタンを作ってみました。
最近よく見かけるのは、美しいグラデーションやボタンが簡単に作れちゃうジェネレーターの紹介だったりしますが、複雑なものでない限り、スタイルシートを直接書いた方がずっと早いと思うのは私だけでしょうか。（自分がジェネレーターを使いこなせていないだけだったりして…。）
でもCSS3だけでボタンを作ったりすると、もう画像で作るのはとても面倒に感じてしまいます。便利になったものですね。とは言うもののIE9以下のバージョンでは……。
ホームページテンプレート100超え
tro-sukeで配布しているホームページテンプレートの数が100を超えています。配布を始めたときに、100個くらいは作ろうというのが当初の目標でしたので、ようやくそれが達成できたということです。
二年前からしばらくホームページの更新もしていなかったのですが、その間も多くの方々からダウンロードのご希望がありました。ありがとうございます。
今度はWordPressのテーマを100個以上作るのをがんばってみよう。
ブログのテーマ変更しました
サイトをリニューアルしたときに、ブログもリニューアルしたのですが、ブログのテーマはこれからもちょくちょく変更していこうと思います。IE9でもあまり変にならないようなデザインにしています。
トップページにスライドショーを配置したテンプレート
トップページにスライドショーを配置したテンプレートを作成しました。他とはちょっと違うサイトを作成したい時、特にイメージ重視のサイトにはぴったりです。企業向けのメニューを入れておりますが、個人サイトやプライベート向けサイトにもおすすめです。
トップページにスライドショーを配置したテンプレート
ベースカラーは写真を映えさせるために、真っ黒に近い色を日本の伝統色の中から選んでみました。どれもきれいな仕上りです。
テンプレートの主な特長は下記の通り
- HTML5＋CSS3で構成されたシンプルな仕上がり
- トップページにスライドショートを配置
- ビジュアル重視のサイトデザイン
- ベースカラーは日本の伝統色よりチョイス
