AddQuickTagに登録しておきたい囲い線のタグまとめ

WordPressの文字入力ってデフォルトだと味気ないんですよね。
ボタンでポチッと押したら終わり!みたいなのがいい
ということで作ることにしました。
class指定とか色などは好みで分けていいところなんですけど、言葉にあった文字にしていくと印象に残りやすいかもしれませんね。

テーマのstyle.cssにcssを追記していきます

WordPress管理画面>外観>テーマの編集>スタイルシート
このような画面になります。
ここでstyle.cssの1番下にこれから紹介するコードを貼り付けていきます。下準備はこれでOK。続いてAddQuicktagに登録することで投稿画面にボタンを作ることができます。

AddQuickに登録する方法

AddQuickをインストール>有効化>設定>AddQuicktag とすすみます。そのあとは書くリストの中にスクショものせてあるので参考にしてみてください。
1番右側のチェックボタンをおすと全部クリックされます。

コピペで使えるリスト

ポイント!

ポイント!

p.point_up {
    border: 4px double #00ad30;
    padding: 15px 20px 10px;
    border-radius: 10px;
    position: relative;
    font-size: 14px;
    margin-top: 2.2em;
    margin-bottom: 2.2em;
}

p.point_up:before {
    content: "POINT!";
    position: absolute;
    left: 15px;
    top: -15px;
    font-weight: bolder;
    color: #009c20;
    background: #fff;
    font-size: 16px;
    padding: 0 5px;
}

メモ

メモ

p.memo {
    border: 4px double #ad5a00;
    padding: 15px 20px 10px;
    border-radius: 10px;
    position: relative;
    font-size: 14px;
    margin-top: 2.2em;
    margin-bottom: 2.2em;
}

p.memo:before {
    content: "\f044\00a0MEMO";
    position: absolute;
    left: 15px;
    top: -15px;
    font-weight: bolder;
    color: #9c3100;
    background: #fff;
    font-size: 16px;
    padding: 0 5px;
    font-family: "FontAwesome";
}

気をつけて!

気をつけて!

p.notice {
    border: 4px double #ff0000;
    padding: 15px 20px 10px;
    border-radius: 10px;
    position: relative;
    font-size: 14px;
    margin-top: 2.2em;
    margin-bottom: 2.2em;
}

p.notice:before {
    content: "\F06A \00a0Notice!!";
    position: absolute;
    left: 15px;
    top: -15px;
    font-weight: bolder;
    color: #ff0000;
    background:#fff;
    font-size: 16px;
    padding: 0 5px;
    font-family: "FontAwesome";
}

blockquote p.notice:before {
    background:#dedede;
}

合わせて読みたい

コピペで使える!AddQuickTagプラグインを使った吹き出しアイコンの作り方

追記:リンクのURLを直貼りするとURLが右に飛び出てしまうのでテキストリンクの形式↑で使うようにしてください
p.together {
    border: 4px double #ff7e26;
    padding: 15px 20px 10px;
    border-radius: 10px;
    position: relative;
    font-size: 14px;
    margin-top: 2.2em;
    margin-bottom: 2.2em;
}

p.together:before {
    content: "\F06B \00a0合わせて読みたい";
    position: absolute;
    left: 15px;
    top: -15px;
    font-weight: bolder;
    color: #ff7e26;
    background:#fff;
    font-size: 20px;
    padding: 0 5px;
    font-family: "FontAwesome";
}

blockquote p.together:before {
    background:#dedede;
}


まとめ:ボタンは楽、でも量が増えたら大変なので…

ただ、これって数が増えてくるとstyle.cssへのコード量が多くなってしまうんですよね。
間違ってコード書いちゃうのは嫌だよね。
PHPでちゃちゃっとならないの?
ちゃちゃっと…
う〜む、functions.phpに書いたりするのは呼び出せるけどプラグイン作っちゃった方がいいような気も…
というところで課題は残っていますが、今回はこのようなところで。
プラグイン開発などの進展あったらこちらにも記載しておきますね!