well > basercms3.0.2 スケルトンのウィジェットエリアのスタイルが @ 2014/4/1 14:02
こんにちは、wellです。昨日、早速アップデートされたbasercms3.0.2をインストールさせていただきました。細かなことで恐縮ですが、テーマをスケルトンに変えたところ、ウィジェットエリアのスタイルが崩れていました（私だけ？）。わかる人が見ればすぐに解決する事だと思いますが、ご確認いただけると幸いです。よろしくお願いします。 ■ BaserCMS：3.0.6.1 ■ サーバー名：CentOS 6.5 on VirtualBox（PHP 5.4.x / MySQL 5.5.x） ■ スマートURL：ON ■ 設置フォルダ：　[ドキュメントルート] ■ PHPスキル：C ■ IDE：NetBeans7.4

well > basercms3.0.2 スケルトンのウィジェットエリアのスタイルが @ 2014/4/1 14:02

こんにちは、wellです。
昨日、早速アップデートされたbasercms3.0.2をインストールさせていただきました。
細かなことで恐縮ですが、
テーマをスケルトンに変えたところ、ウィジェットエリアのスタイルが崩れていました（私だけ？）。
わかる人が見ればすぐに解決する事だと思いますが、ご確認いただけると幸いです。
よろしくお願いします。

■ BaserCMS：3.0.6.1
■ サーバー名：CentOS 6.5 on VirtualBox（PHP 5.4.x / MySQL 5.5.x）
■ スマートURL：ON
■ 設置フォルダ：　[ドキュメントルート]
■ PHPスキル：C
■ IDE：NetBeans7.4

Masamichi > Re: basercms3.0.2 スケルトンのウィジェットエリアのスタイルが @ 2014/4/1 17:22
wellさんこんにちは！早速、ウィジェットエリアを見に行くと… <ul> <li style="width:50%;float:left;text-align:center;"><p><a href="http://basercms.net" target="_blank"><img src="http://basercms.net/img/bnr_basercms.jpg" alt="コーポレートサイトにちょうどいいCMS、baserCMS"></a></p> <p><small>この部分は、ウィジェットエリア管理より編集できます。</small></p></li> <li style="width:50%;float:left;text-align:center;"><a href="http://basercms.net/" ><img src="http://basercms.net/img/what_basercms.gif" alt="コーポレートサイトにちょうどいいCMS　BaserCMS"></a></li> </ul> ↑この様になっているかと思います。リストタグ（li）とフロートタグ（float）が使われていて、標準テーマ（m-single）では、横並びに表示される様に書かれているかと思います。（セットで使うことで横並びになります）一見、表示が崩れている様に見えておりますが、画像の幅がウィジェットエリア幅に適していれば、横並びに収まるかと思います。また、ウィジェットエリアは、テーマを変更しても＊基本的に変わらない部分ですので、使用するテーマに合わせて変更していく必要があるかと思います^^; （＊テーマの初期データを読み込まない限り）説明だけでは分かり難いかと思いましたので、リストタグを取り除いて、シンプルに下記の様に書いてみました。まずは、ウィジェットエリアのタイトル部分（使うかどうかは別として）タイトルに下記を記入 `<center>変更後ウィジェットエリア</center>` 次に、内容部分です。 <p style="text-align:center;"><a href="http://basercms.net" target="_blank"><img src="http://basercms.net/img/bnr_basercms.jpg" alt="コーポレートサイトにちょうどいいCMS、baserCMS"></a></p> <p style="text-align:center;"><small>この部分は、ウィジェットエリア管理より編集できます。</small></p> <p style="text-align:center;"><a href="http://basercms.net/" ><img src="http://basercms.net/img/what_basercms.gif" alt="コーポレートサイトにちょうどいいCMS　BaserCMS"></a></p> ＊リストタグを取り除いて、個別に中央に表示させるようにしました。これで下記の様に表示されると思います。後は、中身を変えて頂くか、ウィジェットパーツを一つ一つ個別に設定すると良いかと思います。 P.S.１ `引用＞ウィジェットエリアのスタイルが崩れていました（私だけ？）。` ↑画像があると判りやすいかと思います^^; P.S.２今回の内容は、一見、表示が崩れている様に見えておりますが、画像の幅が適していれば綺麗に横並びに収まります。（CSSでリストタグの調整が必要）＊少しコードを変更してます。（CSSの調整なし）ソースコードの一例（横幅を加工済み画像の場合） <p style="width:50%;float:left;text-align:center;"><a href="http://basercms.net" target="_blank"><img src="画像のURL" alt="コーポレートサイトにちょうどいいCMS、baserCMS"></a></p> <p style="width:50%;float:left;text-align:center;"><a href="http://basercms.net/" ><img src="画像のURL" alt="コーポレートサイトにちょうどいいCMS　BaserCMS"></a></p> <p style="width:50%;float:left;text-align:center;"><a href="http://basercms.net" target="_blank"><img src="画像のURL" alt="コーポレートサイトにちょうどいいCMS、baserCMS"></a><br>文字列１</p> <p style="width:50%;float:left;text-align:center;"><a href="http://basercms.net/" ><img src="画像のURL" alt="コーポレートサイトにちょうどいいCMS　BaserCMS"></a><br>文字列２</p> <p style="width:50%;float:left;text-align:center;"><a href="http://basercms.net" target="_blank"><img src="画像のURL" alt="コーポレートサイトにちょうどいいCMS、baserCMS"></a><br><br>文字列３</p> <p style="width:50%;float:left;text-align:center;"><a href="http://basercms.net/" ><img src="画像のURL" alt="コーポレートサイトにちょうどいいCMS　BaserCMS"></a><br><br>文字列４</p> 画像の下の文字は少し無理くりですが^^; 少しでも参考になれば幸いです。 m(_ _)m ■ BaserCMS: 3.0.15～4.1.5 ■ サーバー名: mixhost・x-server・さくら・ロリポップ ■ スマートURLの利用: [共に] ■ 設置フォルダ：　[共に］ ■ データーベース MySQL5.6 ■ PHPスキル［C］

Masamichi > Re: basercms3.0.2 スケルトンのウィジェットエリアのスタイルが @ 2014/4/1 17:22

wellさん

こんにちは！

早速、ウィジェットエリアを見に行くと…

<ul>
<li style="width:50%;float:left;text-align:center;"><p><a href="http://basercms.net" target="_blank"><img src="http://basercms.net/img/bnr_basercms.jpg" alt="コーポレートサイトにちょうどいいCMS、baserCMS"></a></p>
<p><small>この部分は、ウィジェットエリア管理より編集できます。</small></p></li>
<li style="width:50%;float:left;text-align:center;"><a href="http://basercms.net/" ><img src="http://basercms.net/img/what_basercms.gif" alt="コーポレートサイトにちょうどいいCMS　BaserCMS"></a></li>
</ul>

↑この様になっているかと思います。

リストタグ（li）とフロートタグ（float）が使われていて、標準テーマ（m-single）では、
横並びに表示される様に書かれているかと思います。
（セットで使うことで横並びになります）

一見、表示が崩れている様に見えておりますが、
画像の幅がウィジェットエリア幅に適していれば、横並びに収まるかと思います。

また、ウィジェットエリアは、テーマを変更しても＊基本的に変わらない部分ですので、
使用するテーマに合わせて変更していく必要があるかと思います^^;
（＊テーマの初期データを読み込まない限り）

説明だけでは分かり難いかと思いましたので、
リストタグを取り除いて、シンプルに下記の様に書いてみました。

まずは、ウィジェットエリアのタイトル部分（使うかどうかは別として）

タイトルに下記を記入

<center>変更後ウィジェットエリア</center>

次に、内容部分です。

<p style="text-align:center;"><a href="http://basercms.net" target="_blank"><img src="http://basercms.net/img/bnr_basercms.jpg" alt="コーポレートサイトにちょうどいいCMS、baserCMS"></a></p>
<p style="text-align:center;"><small>この部分は、ウィジェットエリア管理より編集できます。</small></p>
<p style="text-align:center;"><a href="http://basercms.net/" ><img src="http://basercms.net/img/what_basercms.gif" alt="コーポレートサイトにちょうどいいCMS　BaserCMS"></a></p>

＊リストタグを取り除いて、個別に中央に表示させるようにしました。

これで下記の様に表示されると思います。

後は、中身を変えて頂くか、
ウィジェットパーツを一つ一つ個別に設定すると良いかと思います。

P.S.１

引用
＞ウィジェットエリアのスタイルが崩れていました（私だけ？）。

↑画像があると判りやすいかと思います^^;

P.S.２
今回の内容は、
一見、表示が崩れている様に見えておりますが、
画像の幅が適していれば綺麗に横並びに収まります。
（CSSでリストタグの調整が必要）

＊少しコードを変更してます。（CSSの調整なし）
ソースコードの一例（横幅を加工済み画像の場合）

<p style="width:50%;float:left;text-align:center;"><a href="http://basercms.net" target="_blank"><img src="画像のURL" alt="コーポレートサイトにちょうどいいCMS、baserCMS"></a></p>
<p style="width:50%;float:left;text-align:center;"><a href="http://basercms.net/" ><img src="画像のURL" alt="コーポレートサイトにちょうどいいCMS　BaserCMS"></a></p>
<p style="width:50%;float:left;text-align:center;"><a href="http://basercms.net" target="_blank"><img src="画像のURL" alt="コーポレートサイトにちょうどいいCMS、baserCMS"></a><br>文字列１</p>
<p style="width:50%;float:left;text-align:center;"><a href="http://basercms.net/" ><img src="画像のURL" alt="コーポレートサイトにちょうどいいCMS　BaserCMS"></a><br>文字列２</p>
<p style="width:50%;float:left;text-align:center;"><a href="http://basercms.net" target="_blank"><img src="画像のURL" alt="コーポレートサイトにちょうどいいCMS、baserCMS"></a><br><br>文字列３</p>
<p style="width:50%;float:left;text-align:center;"><a href="http://basercms.net/" ><img src="画像のURL" alt="コーポレートサイトにちょうどいいCMS　BaserCMS"></a><br><br>文字列４</p>

画像の下の文字は少し無理くりですが^^;

少しでも参考になれば幸いです。
m(_ _)m

■ BaserCMS: 3.0.15～4.1.5
■ サーバー名: mixhost・x-server・さくら・ロリポップ
■ スマートURLの利用: [共に]
■ 設置フォルダ：　[共に］
■ データーベース MySQL5.6
■ PHPスキル［C］

well > Re: basercms3.0.2 スケルトンのウィジェットエリアのスタイルが @ 2014/4/1 20:39
Masamichiさん、初めまして。ご丁寧にソースと画像をたくさん載せてご解説いただき誠にありがとうございます。とてもわかりやすかったです。私はまだテーマのヘッダー部分を弄り始めたばかりの新米ですので、引用：また、ウィジェットエリアは、テーマを変更しても＊基本的に変わらない部分ですので、使用するテーマに合わせて変更していく必要があるかと思います^^; （＊テーマの初期データを読み込まない限り）以上のご指摘も初めて知り、勉強になりました。ちなみに、スケルトンには「テーマの初期データ」はないようですね。別のVMのboxで試していたbasercms3.0.1のデフォルトテーマ「nada-icons」の初期データを入れ直して無事作業再開となりました。引用： P.S.１引用＞ウィジェットエリアのスタイルが崩れていました（私だけ？）。 ↑画像があると判りやすいかと思います^^; おっしゃる通りです。誰が見てもすぐにわかるようにすべきですね。初めての質問投稿でしたが、次回からは改めていきたいと思います。それにしても今見返すとまさに初心者の質問で赤面してしまいます。^^; P.S. Masamichiさんが、basercmsのマニュアル編集されたらすごい解り易そ～。^^ ■ BaserCMS：3.0.6.1 ■ サーバー名：CentOS 6.5 on VirtualBox（PHP 5.4.x / MySQL 5.5.x） ■ スマートURL：ON ■ 設置フォルダ：　[ドキュメントルート] ■ PHPスキル：C ■ IDE：NetBeans7.4

well > Re: basercms3.0.2 スケルトンのウィジェットエリアのスタイルが @ 2014/4/1 20:39

Masamichiさん、初めまして。

ご丁寧にソースと画像をたくさん載せてご解説いただき誠にありがとうございます。
とてもわかりやすかったです。
私はまだテーマのヘッダー部分を弄り始めたばかりの新米ですので、

引用：

また、ウィジェットエリアは、テーマを変更しても＊基本的に変わらない部分ですので、
使用するテーマに合わせて変更していく必要があるかと思います^^;
（＊テーマの初期データを読み込まない限り）

以上のご指摘も初めて知り、勉強になりました。
ちなみに、スケルトンには「テーマの初期データ」はないようですね。
別のVMのboxで試していたbasercms3.0.1のデフォルトテーマ「nada-icons」の初期データを入れ直して
無事作業再開となりました。

引用：

P.S.１

引用
＞ウィジェットエリアのスタイルが崩れていました（私だけ？）。

↑画像があると判りやすいかと思います^^;

おっしゃる通りです。
誰が見てもすぐにわかるようにすべきですね。
初めての質問投稿でしたが、次回からは改めていきたいと思います。
それにしても今見返すとまさに初心者の質問で赤面してしまいます。^^;

P.S.
Masamichiさんが、basercmsのマニュアル編集されたらすごい解り易そ～。^^

スレッド表示 | 新しいものから

前のトピック | 次のトピック | トップ

basercms3.0.2 スケルトンのウィジェットエリアのスタイルが

キーワード検索