みどりとくらす

バラとランと多肉と観葉植物と・・・

【CSS3】カレンダーのリンクを丸くする

本ブログのフッター位置にあるカレンダーウィジェットを、以前からもうちょっとデザインを工夫できないかな、と考えていて、いろいろとネットを検索していました。特にリンクに関しては、工夫したかった!

そこで、ネットで見つけた「[WordPress.com] カレンダーウィジェットの日付を丸くする | comemo」(2017年3月10日:リンク先のサーバーが見つかりません)を参考にスタイルを変更しました。

特に難しいことはなさそうですし、私のような素人でもできるよに開設されていますから、素晴らしいですよね~キーポイントは、CSSで角丸を指定する「border-radius」を設定することですよね。

私の場合、カレンダー上の投稿記事が公開された日付のリンクを丸くしたい、ということだけですから、カレンダーウィジェットのリンク部分だけを変更(実際には追加です)すれば良いことになります。変更後の結果は、右画像のように出力されていますので、確認する必要はないと思います。

実際に挿入しているコードを下記に記述します。このコードは「子テーマ」にある style.css に挿入します。

「display」を block にすること、border-radius で角を丸めたことでしょうか。上記のコードにある px 部分は、毎回確認しながら微調整しました。なかなか微調整が上手くいかないもんですね~

気楽にコメントして頂けますように!コメントは承認後の公開です。

(必須) スパム対策にご協力下さい。下記、数式を完成してコメント送信して下さい。

Copyright © 2016-2017 by Zero Cool. All rights researved. Frontier Theme