WordPress無料のテーマCocoonのアイコンを小さくしたり大きくしたい!

 

Cocoonを使用している方で以下のような悩みありませんでしょうか?

アイコンサイズが意図したサイズと違う。大きさを変えたいのに変え方がわからない。

私はアイコンサイズを変えようとしたとき、うまくカスタマイズできずに何日も悩みました。

そこで今後、cocoonでアイコンサイズを変更する方にとって解決の糸口になればと思い備忘録を残します。

この記事でわかること

・Cocoonのアイコンの大きさを変える方法は多いけど、その1つがわかるようになる

・wordpressの細かい変更方法についての考え方が身につく

初めの状態では縦横100pxになっています。これを縦横120pxに変更したいです。

そこで以下のようなソースコードを入力しました。

/************************************

************************************/

.author-box .author-thumb img{

/************************************

************************************/

.nwa .author-box .author-thumb{

これでサイズが変わります! 

今回のアイコンサイズ変更方法は数多く解説されていますが、どれもうまくいきませんでした。

開発ツールで確認して、スタイルシートを当てたら変わると思ったけどうまくいかない。

そんな時は詳細度を上げる必要があると考えました。

詳細度とは何か?という方は下記記事を参考に。

CSSセレクタ詳細度の理解を深める – Qiita

社内勉強会のメモ CSSセレクタの詳細度とは 仕様 仕様にもある通り、「詳細度」というのはselector’s specificity なので、「セレクタの詳細度」のこと。 詳細度は計算できる。 MDN …