サイド、フッター部分のウィジェット部分のボーダー線に関して

PR 2015/2/19

このトピックには6件の返信、2人の参加者があり、最後にakiにより11年、 5ヶ月前に更新されました。

6件の返信スレッドを表示中

投稿者

投稿
- 2015年2月18日 3:47 PM #21359
  
  aki
  ゲスト
  
  はじめまして。
  色々テンプレートを探していたらこちらに辿り着きました。
  とても気に入り、ぜひ使用させて頂きたいのですがひとつ質問がございます。
  
  サイドバー（フッター部分も）のウィジェット部分ですが、タイトルとテキスト部分？があると思います。
  各ウィジェット毎にボーダー線で囲みたいのですが（タイトル下にも）、簡単にできますでしょうか？
  
  こんな質問で申し訳ございませんが是非使用させていただきたく思いこちらに投稿してみました。
  お手数ですがお返事頂ければ幸いです。
- 2015年2月18日 7:21 PM #21370
  
  わいひら
  キーマスター
  
  akiさんはじめまして。
  
  こちらのサイドバーのように、ウィジェットをボーダーで囲むイメージでよろしいでしょうか？フッターウィジェットも。
  情熱の彼方熱狂の果て
- 2015年2月19日 11:36 AM #21406
  
  aki
  ゲスト
  
  わいひら様
  
  お返事ありがとうございます。
  まさにその通りです。
  
  参考ＵＲＬのようにタイトル左横のたての線（ちょっと太い線）は無くて大丈夫です。
  タイトル下の線はほしいです。
  
  もし可能でしたら、どちらのファイルの中身をどのように記述し直せば良いのかお教え頂ければ幸いでございます。
  
  お手数をおかけし申し訳ございませんが宜しくお願い致します。
- 2015年2月19日 2:29 PM #21416
  がちょぴん
  ゲスト
  akiさん
  
  タイトル下の線というのは点線で間違いないでしょうか？
  タイトル下の線でしたらCSSファイルに下記のソースがあると思います。
```
#main .entry{
  clear:both;
  margin-bottom:40px;
  margin-right:10px;
}
```
  上記のタグに「border-bottom」入れて、
  下記のようにすると参考ブログのようになります。
  線の太さを細くしたい場合は「4px」を小さい数字に変えて、
  線のスタイルを変更する場合は「dotted」部分を変更してください。
  また、線のスタイルは下記のリファレンスサイトを参考にしてみてください。
  色を変更する場合「#48d1cc」部分を変更して色情報は下記のサイトを参考にしてください。
  URL：http://goo.gl/6NhAE
  URL：http://goo.gl/7YRZ
```
#main .entry{
  clear:both;
  margin-bottom:40px;
  margin-right:10px;
  border-bottom:4px dotted #48d1cc;
}
```
- 2015年2月19日 3:09 PM #21422
  わいひら
  キーマスター
  とりあえず、ウィジェットのボーダーとタイトルしたボーダーはこんな感じです。
  style.cssに貼り付けて調節します。
```
.widget {
    border: 1px solid #ccc;
}

.widget h4 {
    border-bottom: 1px solid #66cccc;
}
```
  フッター部分は、このコードで変更できませんが、次のバージョンまでには、このコードで対応できるように修正しておきます。（フッターしたのウィジェットにはwidgetクラスを入れ忘れていた。）
- 2015年2月19日 3:13 PM #21423
  
  がちょぴん
  ゲスト
  
  「サイドバー」の文言自体見逃して、
  各記事タイトルと勝手に勘違いしてしまい大変申し訳ございません。
- 2015年2月19日 4:24 PM #21432
  
  aki
  ゲスト
  
  わいひら様　がちょぴん様
  
  ご丁寧に教えて頂きありがとうございました。
  お二人とも説明がわかりやすく親切で求めている事ができました。
  ありがとうございます。
  
  また何かございましたら何卒宜しくお願い致します。
  
  本当にありがとうございました。
投稿者

投稿