記事の影を消しました(borderとbox-shadow)

WordPressテーマの「Mercantile」(by Acme Themes)を使わせていただいております。(フッターにリンクがあります)
ノーマルで使っているわけではなく、いろいろ手を入れています。
特にCSSは調整をしています。

今回の変更では記事の影を消しましたが、実は、その他の部分ではすでにどこをどう変更したのか分からなくなってしまっています。。
そこで、分かっている部分は併せて書き残しておこうかと思います。

課題は子テーマ化

本当は子テーマ化しておけばよかったのですが、つい興が乗って勢いでいろいろ変更してしまいました。
最低でもバックアップは取っておくべきでした。
ひょっとしたら記憶がないだけで、バックアップはあるかもしれません!w

ちゃんと調べようと思えば、GitHubとかで元ソースは手に入るはずなので、Diffでもかければよいでしょう。

今後のバージョンアップ対応があるかないかはさておき、せっかくある機能なので、子テーマにはしておきたいところです。
いつかやりますw

変更部分と意図

やりたいことがあって変更しているので、意図も記録しておきます。
トライアンドエラーでいじるクセがついてしまっているので、意味のない変更や、意図とは異なる変更を入れている可能性もあると思っています。。

エリアを円にしたい

トップページのボランティア募集のところで、アイコン的な表示の調整でした。
「style.css」のどこを変更したか覚えていません。。w

ただ、「border-radius」を「100{89587dd5f6084c55728ce90745699dce6f7178cda10ec21f4fd6d38560c3f2fa}」にしたのは覚えています。
角を丸めるためのcss指定で、100{89587dd5f6084c55728ce90745699dce6f7178cda10ec21f4fd6d38560c3f2fa}だと円になります。

真面目に探すときには、以下の記載を検索すればよいはず。

border-radius: 100{89587dd5f6084c55728ce90745699dce6f7178cda10ec21f4fd6d38560c3f2fa};

パーツ部分なので、ソースからクラス名は分かるかと。

記事の余白を詰めたい

当初、記事の左右の余白が広くて気になっていました。
レスポンシブですのでスマホ表示の時に、余白が広すぎると微妙です。。
ここは好みの問題なのだとは思っていますが。

余白の賛否はあるにしても

余白が広すぎると画面に表示できる情報量が少なくなって、必然的にスクロール頻度が多くなります。
記事を読むのにあまり手間はかけたくないということで、余白を小さくしました。

いじったところ

余白の指定は、大きく2パターンです。
「margin」か「padding」か。

ソースから追ったところ、今回はpaddingだったようなので、それらしいところを根こそぎ2pxにしておきました。
クラス名は「content-wrapper」あたりだったと思います。
style.css以外もいじった気がします。。

記事の影みたいなのを消したい

ここが今回の満足点ですw

いじったところ

「border」で色指定されていた部分と、「box-shadow」を根こそぎ消しました!
クラス名は「page」とか「post」とか「content-wrapper」とか。
指定は、たとえば以下のような記載です。

border-bottom: 1px solid #ddd;
box-shadow: 4px 2px 4px -4px rgba(0, 0, 0, 0.133), -4px 2px 4px -4px rgba(0, 0, 0, 0.133);

border-bottom : 1px solid #e5e5e5;

box-shadow: 0 0.15em 0.35em 0 rgba(0, 0, 0, 0.133);

記事についていた薄い線は、「謎の線」と呼ばれて、運営委員会メンバーからも評判が悪かったのです。

ぐち

影って、今様ではない気がします。。
分かってはいたものの、どこが勘所なのか見つけられずにいました。
こういうのは思い付きなところもありますので、今回、解決です!!

トップページのカコミも消えてますけど、問題ないですよね?

コメント

タイトルとURLをコピーしました