はじめに

もしかしたら、ものすごく当たり前なのかもしれませんが…。WordPressでブログを書く際に便利なCSSの活用法を書き留めておきます。

最近、WP-Noteという素晴らしいプラグインがあることを知ったのですが、もう少しシンプルなほうがいいなと思いました。もちろんプラグインをカスタマイズすればいいのですが、そこまでしなくてもCSSで自分に必要な分だけ書いてしまえばいいじゃないかということで、やってみました。

Contents

完成サンプル

まずは、サンプルを表示させます。

メモ実装のサンプルです。

このような感じになります。
それでは、実際のコードを見てみましょう。

実装コード

.post .notes {
        background: #f0f0f0;
        padding: 20px;
        border: 1px solid #808080;
        border-radius: 10px;
        display: inline-block;
        box-shadow: 2px 2px 2px #808080;
        font-weight: bold;
 }

実際にコードはこのような感じです。あとは、メモにしたい要素にclass=”notes”としてあげればOKです。
それぞれの値は好きなように変えて、複数のパターン用意するのもいいと思います。

注意：○○　みたいな感じとか

以上、簡単にブログ記事を見やすくすることができる方法でした！