- このトピックは空です。
-
投稿
-
ガタガタ様、いつも大変ためになる情報と丁寧な解説をありがとうございます。おかげさまで初心者なりに何とか作成を頑張れております。
初の投稿がすごく初歩的な内容かもしれず申し訳ないのですが…半日どうにもできず途方にくれてしまったので皆様のお知恵を貸して頂けないでしょうか。
てがろぐを導入したいと思い、do様からミニマルスキンをお借りしました。
自サイトで使っているテンプレートと同じデザインにこそできたのですが、２点分からない部分があり、修正ができません。
①プルダウンメニューがPCでは適用中テンプレート通りの装飾になるのですが、スマホではデフォルトの見た目？になってしまう
②つづきをよむボタンの見た目を変えたい、テキストリンクにしたい
ご教授頂けましたら幸いです。よろしくお願い致します。
トピ主です。
①の方は一応の解決(？)となりました。
別件でレスポンシブに対応しようと入れたbox-sizingで、表示がPCスマホ両方とも同じ見た目のプルダウンメニューになりました。同じにできた理由までは理解できていませんが…
②は相変わらず分かっておりません。
申し訳ありませんが、引き続きよろしくお願い致します
nico様、初めまして。
続きを読むボタンの見た目は、tegalog.cssの148行目あたりにある
a.readmorebutton {
margin: 20px auto;
border: 1px solid;
text-decoration: none;
color: #242424;
width: 100%;
text-align: center;
padding: 10px;
border-radius: 3px;
}を編集すると変えられると思います。
「続きを読む」の周囲の枠をなくしたいのであればborder: 1px solid;の記述を削除（あるいは、border: none;に変更。枠をなくすのであればborder-radius: 3px;も不要だと思います）。width: 100%;を削除（あるいは、width: auto;に変更）すると、「続きを読む」がコンパクトに左寄せになります。余白が気になる場合はpaddingやmarginを調整してみてください。
ごちゃごちゃ書いてしまいましたが、
a.readmorebutton {
margin: 20px auto;
text-decoration: none;
color: #242424;
width: auto;
}こうするだけでも、nico様が仰っているテキストリンクに近くなるのではないでしょうか。ご参考になれば幸いです。
IDが変わってしまったかもしれませんが、トピ主です。
陽様
はじめまして、お返事を頂き有難う御座います。とんでも御座いません、陽様の丁寧な解説を見て、ようやく理解することができました！
ボタンのこと、初歩的どころか私がとんでもなく勘違いをしていたと気付けました…
てがろぐをダウンロードした元々のファイル内のcssを編集しようとしたり、公式様に載っているカスタム項のタグをどうにかしようとしたり…反映されなくて当然の行動をしていたのです。
己の空回りを考えると笑ってしまいますが、御指南頂いたcssの通りに編集してみたところ、お陰様で理想的なカスタムができました。本当に有難う御座いました。書き込んでみて良かったです…。
<p style=”text-align: left;”>nico様、解決できたようでよかったです！お役に立てて幸いです。</p>
<p style=”text-align: left;”>余計なお世話かもしれせんが、ブラウザのデベロッパーツールを使うと、自分が手を加えたい部分に対してどのファイルのどの記述を触ればいいのか、ということがわかるようになります。このデベロッパーツールについて、ガタガタ様が「デベロッパーツールの使い方を画像付き解説！CSS編集の強力な味方にしよう | do」の記事でわかりやすく解説してくださっているので、お時間のあるときにでもお読みになってみてください。難しいかもしれませんが、上手く使えるととても便利で作業効率が格段に上がります！</p>
<p style=”text-align: left;”>長々と失礼しました。</p>
陽様
こちらこそ度々のお返事を有難う御座います！
いえ、いえ、そんな。do様のサイトは何度も通っているはずなのに恥ずかしながらこちらのページは存じ上げておりませんでした。
今までPCとスマホとを行き来して確認していたので、ブラウザ上でサイズ比の見え方まで分かるなんて便利ですね！右クリックでソースが見れるというのは知っていたのですが、こんな便利な機能があったのかと驚いています。
優しく丁寧なご対応と貴重なお時間を頂いて改めてどうも有難う御座いました！cssとhtmlの違いもまだまだ理解できていない部分の多い初心者ですが頑張ります。
