件名: レスポンシブWebデザインの新テーマ「newspaper」をリリースしました。

投稿日: 03/05/12 04:37 PM JST
投稿者: みるく

新テーマ「newspaper」は、「WAIproCSS Ver2.5.1 for Geeklog1.8.1」をベースにCSS3のMedia Queriesを使用したレスポンシブWebデザインのテーマです。PCは2カラム、iPad&iPod touchは中央ブロック1カラム&左右ブロック2カラムレイアウトになります。 このテーマもMedia Queries以外のCSS3を使用しており「プログレッシブ エンハンスメント」を取り入れてます。 ですので、CSS3に対応していないブラウザでは左右ブロックのリンク部分に付いている三角のアイコンが表示されないという感じになります。ですが、全体的イメージはそんなに変わりませんし、情報は正しく得られます。 また、IE8以下はMedia Queriesをサポートしていないので、対応させたいかたは「css3-mediaqueries-js」などのスクリプトを追加してください。 また、サイトロゴのフォントは、Google Font APIを使って表示してます。 テーマ「newspaper」も「WAIproCSS」と同様、アクセシビリティに配慮して作成しています。 Geeklog 1.8.1日本語パッケージ拡張版に梱包されているプラグインの表示確認はしておりますが、tableで構成されているプラグインの掲示板とカレンダーはテーマ側で横幅を修正出来ない為、iPod touchのサイズには対応していない事ご了承ください。(レイアウトは崩れますが、情報が欠けたり動作しないという事はありません) また、ツールバー部分が入れ子のtableで構成されているアドバンストエディタは、iPod touchのサイズに対応させるのに(どうしても右端が見切れてしまう)CSSの修正では無理だったのでこのテーマはリリースできない…と諦めかけていたところiPhoneのようにフリック操作でスクロールできるjQueryプラグインつくったに辿り着きこちらの「Default」を使用させていただきましてiPod touchのサイズではアドバンストエディタ領域をドラッグとフリック操作でなんとか全部表示させる事が出来ました。 が、静的ページはプラグインなので私が(X)HTMLを修正する事が出来ず非対応になってます。こちらもご了承ください。(iPod touchのサイズではアドバンストエディタ以外の投稿モードで投稿ください) 新テーマ「newspaper」のライセンスは、WAIproCSSのライセンスに準じます。詳しくは、newspaperフォルダの中にある「WAIproCSS」のREADMEご覧ください。 テーマ「newspaper」のダウンロードは、Geeklog Japaneseダウンロードセクションからどうぞ。

書込: レスポンシブWebデザインの新テーマ「newspaper」をリリースしました。

投稿日: 03/05/12 05:39 PM JST
投稿者: Ivy

前回に続き、すばらしいテーマ、ご提供ありがとうございます。 前回同様、記事でもぜひご紹介ください。 このサイトにもインストールしてみたのですが、navmanのプルダウンメニューに 対応させていただけるとうれしいです。

書込: レスポンシブWebデザインの新テーマ「newspaper」をリリースしました。

投稿日: 03/06/12 01:23 PM JST
投稿者: みるく

Quote by: Ivy

前回に続き、すばらしいテーマ、 ご提供ありがとうございます。 前回同様、記事でもぜひご紹介ください。 このサイトにもインストールしてみたのですが、 navmanのプルダウンメニューに 対応させていただけるとうれしいです。

色々ありがとうございます! Ivyさんにそういってもらえるとすごく嬉しいです♪ これから記事書かせてもらいます。 グローバルナビゲーション部分のプルダウンメニュー対応には、 前回WAIproCSSの設定に問題がある事がわかり修正したので いけると思っていたのですが・・・ダメですね(^^; 記事書いた後、問題点見つけ出して(これに時間かかるかもしれませんが)修正します。

書込: レスポンシブWebデザインの新テーマ「newspaper」をリリースしました。

投稿日: 03/10/12 03:02 AM JST
投稿者: みるく

Quote by: Ivy

このサイトにもインストールしてみたのですが、navmanのプルダウンメニューに 対応させていただけるとうれしいです。

修正しデータ差し替えました。 後、このサイトの右サイドにあるnavmanのプルダウンメニュー部分とFacebookのウォール表示部分とTwitterのタイムライン表示部分の幅がpxで固定されている為、比対応のプラグインページではないページでレイアウトが崩れていたので修正を試みました。 navmanのプルダウンメニュー部分は、幅をpxで指定させているだけでなく背景画像の幅が250pxのものだったので横幅が小さくなっても大丈夫なように背景画像作成しCSSを修正しました。(このサイト用) Facebookのウォール表示部分とTwitterのタイムライン表示部分は、Twitterのタイムライン表示部分はCSSで幅変更出来たのですが、Facebookのウォール表示部分の横幅がCSSで変更不可能だったので、Twitter Facebookとも横幅を変更するのはやめました。 という訳で、Facebookのウォール表示部分の横幅が変更出来ればiPhoneサイズまでレイアウト崩れなくトップページが見れたのですがFacebookのウォール表示部分の横幅が変更出来ない為iPadサイズまでになります事ご了承ください。 追伸:このサイトにはスマートフォン用のGeeklogテーマ Touch2がインストールされているので問題ないかと思います。

書込: レスポンシブWebデザインの新テーマ「newspaper」をリリースしました。

投稿日: 03/10/12 10:43 AM JST
投稿者: Ivy

みるくさん、 使い心地のよいテーマ、公開ありがとうございました! コンフィギュレーションの、タブメニューのスタイルはあたっているでしょうか? どうもスタイルがあたらず、リストの表示のままのようなのですが。

書込: レスポンシブWebデザインの新テーマ「newspaper」をリリースしました。

投稿日: 03/10/12 09:33 PM JST
投稿者: みるく

Quote by: Ivy

みるくさん、 使い心地のよいテーマ、公開ありがとうございました! コンフィギュレーションの、タブメニューのスタイルはあたっているでしょうか? どうもスタイルがあたらず、リストの表示のままのようなのですが。

データ等再確認し表示確認を再度したところ、 jquery-1.4.2.min.js と jquery.flickable-1.0b3.js が追加されている事が 原因と思われ(コンフィギュレーションページでこのサイトに入っている他のJavascriptとの関係でJavascriptが読み込めていなかった?) この2つのファイルをこのサイトから削除しました。 (このファイルはiPhoneサイズのアドバンストエディタ用に入れているものなので 現状このサイトには入れなくてもいいので) これでちゃんと表示されました。 尚、自分のテストサイトでは、このテーマのファイルを削除するような事なく(上記のような事をしなくても)コンフィギュレーションの、タブメニューのスタイル 他のテーマと同じようにちゃんと表示されます。

書込: レスポンシブWebデザインの新テーマ「newspaper」をリリースしました。

投稿日: 03/11/12 04:00 AM JST
投稿者: Ivy

みるくさん、 そうでしたか。すみません。 修正していただきありがとうございました!

Geeklog Japan - 掲示板
https://www.geeklog.jp/forum/viewtopic.php?showtopic=17426