fontawsomeアイコンを押すと音が流れるようにしたい

PR 2017/7/24

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

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

投稿者

投稿
- 2017年7月20日 11:26 AM #53989
  
  do
  ゲスト
  
  こんにちは、simplicityを使って新しくサイトを作っているのですが、うまくできないところが2か所あるのでアドバイスをもらいたいです。
  
  1、記事内の文章の左側全体に少し余白を取りたいのですが、どんなコードを書けばいいのかわからない
  
  2、辞書サイト「weblio」のクイック再生ボタンのような、押すと音声が出る機能のボタンを作りたいのですが、fontawsomeのコードにリンクをつけても文字化けしてうまく表示されない
  http://netakiri.net/uploader/src/up0276.png
  
  です。どうぞよろしくお願いいたします！
- 2017年7月20日 4:08 PM #53992
  かうたっく
  ゲスト
  1、記事内の文章の左側全体に少し余白を取りたい
  
  書いた文章領域の場合
```
.entry-content {
    padding-left: 15px;
}
```
  記事下SNSを設置時、その領域も含めたいとき
```
#main .post {
    padding-left: 15px;
}
```
  15pxとしましたが、任意の数字で書いてください。反映しないときはキャッシュを削除❦
  
  スマホの場合
```
@media screen and (max-width: 500px) {
//この行を消して上記コードを入れる。余白が不要な場合padding-left: 0;を指定
}
```
- 2017年7月20日 4:51 PM #53993
  
  do
  ゲスト
  
  かうたっくさん、どうもありがとうございます。
  早速試してみたところ、余白はできたのですが想像していたのと違う仕上がりになってしまいました。
  
  記事全体を中央寄せ＋左寄せにしたい場合は、どのようにしたらいいでしょうか。
  重ね重ね質問してしまってすみません。よろしくお願いいたします。
- 2017年7月20日 5:12 PM #53995
  
  かうたっく
  ゲスト
  
  記事全体を中央寄せ＋左寄せにしたい場合
  
  具体的なイメージがわきません＞＜
  
  調べてみました。
  http://taneppa.net/left-center/
  こんな感じでしょうか？？？
- 2017年7月20日 5:21 PM #53996
  
  do
  ゲスト
  
  はい、まさにこのような形です！
  記事を全部その形式にしたいです。
  URL先の方法ですと、毎回全部を記事に貼る形になるでしょうか？
- 2017年7月20日 5:42 PM #53997
  かうたっく
  ゲスト
```
.article {
  margin: 0 auto;
  text-align: center;
}
.entry-content {
  display: inline-block;
  text-align: left;
  padding-left: 15px; /*左のスペース*/
}
```
  左スペースの値は10pxなど適当に変更してください。※不要なら削除。
  
  あまり変わりないと思いますが、これでどうでしょうか？？
  
  記事下（関連記事を置いてる場合はその上の領域）に何を設置している不明なのでわかりませんが、その文字はセンター寄せになります。
- 2017年7月20日 5:55 PM #53999
  かうたっく
  ゲスト
  単に左右にスペースが欲しい状態でしたら、
```
.entry-content {
  padding: 0 15px 60px 15px;
}
```
  15pxは、どちらも10pxなどに変更してください。これで両サイド均等にスペースが空きます。
  コードは記事部分のみ、内側余白　上　右　下　左　と指定。左右の値を同じにすると中央揃えになります。
  
  style.cssに書くと全てに反映しますよっ。
- 2017年7月20日 7:21 PM #54009
  
  わいひら
  キーマスター
  
  URLにショートコードを入れても動作はしないと思います。
  
  URLは、URLを入れる場所なので。
  
  リンククリックで、音を出すには、以下のようにテンプレートをカスタマイズする必要があると思います。
  HTML5のaudioタグでクリックすると音が鳴るボタンを作る方法 | ホームページ制作 SEO対策福岡のアイドットデザイン HTML5のaudio要素で、音楽の再生や効果音を鳴らす方法 [ホームページ作成] All About
- 2017年7月23日 8:42 AM #54104
  
  do
  ゲスト
  
  かうたっくさん、わいひらさん、どうもありがとうございます。
  アドバイスをもらって早速カスタマイズしたところ、どちらも納得いくところまで近づけることができました。
  これから作りこんでいきたいと思います。
  どうもありがとうございます！！
投稿者

投稿