OpenPNE 技術サポートの豊岡です。
2012年5月24日、新たに追加されたテクニカルガイドをご紹介していきます。
先月4月27日にリリースされました、OpenPNE3.8に関するガイドを追加いたしました。「スマートフォン版のCSSデザイン変更」を追加しました。以下に記事の全文を紹介いたしますので、よろしければご覧ください。
OpenPNE3.8以降のスマートフォン版のCSSを変更したい時は主に、
* web/css/bootstrap.css
* web/css/smt_main.css
のファイルを変更します。
このガイドでは、ナビゲーションバーの色変更や通知センターなどのアイコン画像の差し替え方法を紹介します。
以下は、デフォルトのスクリーンショットです。
* デフォルトログイン画面
* デフォルトホーム画面
* デフォルトナビゲーションメニュー
web/css/bootstrap.css(2342行目あたり)
.navbar-inner {
background-image: -webkit-linear-gradient(top, red, blue);
}
(top, red, blue)この括弧内の値を変更することにより、スマートフォン版のナビゲーションバーのグラデーションを変更することができます。
上記の例では、
* top: グラデーションの開始位置を指定します。この場合はナビゲーションバーの領域の上辺です。
* red: 開始色を指定します。この場合は赤です。
* blue: 終了色を指定します。この場合は青です。
他のbackgound-imageプロパティを変更することにより、PC版のブラウザの表示も各々変更することが可能です。
* 上記コードを適用したナビゲーション
web/css/bootstrap.css(2364行目あたり)
.btn-navbar {
background-color: yellow;
background-image: -webkit-linear-gradient(top, red, blue);
}
background-colorでは、ボタンの枠の色を指定することができます。
また、ナビゲーションボタンの背景色は、ナビゲーションバーと同様に、値を設定することによって変更することができます。
* 上記コードを適用したナビゲーションボタン
また、ナビゲーションボタンを押下した際の、ボタンの下半分の背景色の設定は、
web/css/bootstrap.css(2377行目あたり)
.btn-navbar:hover,
.btn-navbar:active,
.btn-navbar.active,
.btn-navbar.disabled,
.btn-navbar[disabled] {
background-color: yellow;
}
以上のyellowの箇所にお好みの色を指定することで、ボタンの背景色の設定が可能です。
* 上記コードを適用したナビゲーションボタン
web/css/smt_main.css(466行目辺り)
.navbar .nav > li > a:hover,
.navbar .dropdown-menu a:hover {
background-color: blue;
}
以上のblueの箇所にお好みの色を指定することで、ナビゲーションメニューを選択した時の色を変更することが可能です。
* 上記コードを適用したナビゲーションメニューを選択した時の背景色
web/css/smt_main.css(207行目辺り)
.gadget_header {
background: red; /* 背景色 */
color: white; /* 文字色 */
}
以上のredやwhiteになっている部分にお好みの色に指定してください。
* 上記コードを適用したガジェットヘッダー
Homeアイコンにしたい画像を/web/images/以下に配置します。
その際、デフォルトで用意されているHomeIcon.pngの名前を変更して、新たに指定したい画像のファイル名をHomeIcon.pngと変更すると簡単です。
通知センターアイコンやPostアイコンを変更する際も同じ手順です。 通知センター画像を変更したい場合:
Postアイコン画像を変更したい場合:
以上のように行えば、ソースコードの記述を変更することなく、すべての画像を差し替えることが可能です。
* 上記3箇所の画像を差し替えた画像
web/css/smt_main.css(321行目あたり)
input.btn320[type="submit"] {
width: 320px;
background-color: yellow;
background-image: -webkit-linear-gradient(top, red, blue);
}
background-colorでは、ボタンの枠の色を指定することができます。
また、ログインボタンの背景色は、ナビゲーションバーと同様に、値を設定することによって変更することができます。
* 上記コードを適用したログインボタン
web/css/bootstrap.css(103行目あたり)
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 18px;
color: #333333;
background-color: #ede8d8; /* 背景色 */
}
こちらのbodyプロパティ内のbackground-colorにてページ全体の背景色を指定することができます。
* 以上の設定を適用したページの背景
今回新たに追加した記事は、以上です。
お客さまからこれまでいただきましたお問い合わせの中で、特に多く寄せられるお問い合わせや、OpenPNE 開発元ならではの様々なノウハウなどを”ガイド”という形でお客さまにいつでも閲覧いただける目的で作られた、新しいサービスです。
これからも随時テクニカルガイドの更新を行い、更新情報をブログでお知らせしていく予定です。
OpenPNEの専門家があなたのSNSをサポート
