Simplicityの特徴 › フォーラム › Simplicityについての質問 › サイドバーのメニューに枠を付けたい
- このトピックには3件の返信、1人の参加者があり、最後に
みきにより9年、 7ヶ月前に更新されました。
-
投稿者投稿
-
-
2016年10月11日 12:35 PM #46021
みぞた
ゲストSimplicity2バージョン2.3.3を利用しています。
カスタムメニューをサイドバーに表示しているのですが、
当サイトのサイドバーにある
(Simplicityのダウンロード)ボタンの様な
枠を付けたいと思います。よろしくお願いします。
-
2016年10月11日 1:12 PM #46023
hidekichi
ゲスト公式のボタン周りは普通にcssでborder入れてborder-radiusで角丸にしてあるだけですが、質問のカスタムメニューがどのような感じかがポイントかも知れません。
メニューがulやolで書かれているのか、dlとか、あるいはdivかで、単純にメニューにpaddingを入れるべきかどうか等などです。
最悪、単純にborderを入れられない状況であればjQueryでdiv等をラップすることができますのでそこにborderを入れることもできます。
もしカスタムメニューがテキストウィジェットに入っていたり、あるいはウィジェットそのものであれば、ウィジェットにボーダーを入れれば同じようなことができますが、言われているのが、例えばカスタムメニューのそのリストアイテムをボタン風にしたいと言うのであればまた少しやり方は異なりますが、いずれにしてもそのメニューのhtmlがどうのような構造になっているかがわからないと、こうすればできると言う答えはしにくいです。
例えば、
<div class="custom_menu"> <ul> <li>リストアイテム</li> <li>リストアイテム</li> <li>リストアイテム</li> </ul> </div>このような構造で、メニュー全体にボーダーを入れるなら、
#sidebar .custom_menu { border: 1px solid 任意の色; border-radius: 5px; /*任意の角丸径*/ }リストアイテムにボーダーを入れるなら、
#sidebar .custom_menu ul { margin: 0; padding: 0 } #sidebar .custom_menu li { border: 1px solid 任意の色; border-radius: 5px; padding: 任意; }こんな感じになります。何にするにしてもhtmlの構造がどうなっていて、ボーダーを入れたいのはどの部分かと、最終的にどうしたいかのイメージがわからないと具体的なサンプルはかけないので、これらを参考にデベロッパーツール等でhtmlの構造を調べて、そのセレクタをcssでスタイルしていくと言う感じになるかと思います。
-
2016年10月11日 3:10 PM #46024
みき
ゲスト簡単にできるShortcodes Ultimateというプラグインがあります
使い方
Shortcodes Ultimateをインストールして有効化します
管理画面>外観>ウィジェット>サイドバーウィジェットにShortcodes Ultimateを追加します
ショートコードを挿入を押します>ボタンを選択します>設定をします
サイズ,リンク先,色など
以下サンプルです
サンプル
いろいろなことができるプラグインなのでおすすめです!
他の使い方 -
2016年10月11日 3:12 PM #46025
みき
ゲスト枠だけではないですがボタンごと追加するにはおすすめです
-
-
投稿者投稿
- フォーラム「Simplicityについての質問」には新規投稿および返信を追加できません。