MENU
HOME
TOP
WhiteTiger Ver 1.2.1に更新しました。確認よろしくお願いします。

「WordPress」ビフォーアフターな説明をCSSで表現するボックススタイル

どうも!最近カラフルボックス というナウいレンタルサーバーをお試ししてコアサーバー に帰ってきたレンタルサーバーおたくです。イエス!

病み上がりの初投稿が幼稚な記事でメンゴ(`・ω・´)ゞ

えっと本題に入ります。(みんな席について)

最近自作テーマのちょこちょこ修正が多く、初めての人にも直感的に説明出来るようなものをと考えた結果。シンプルイズベストなんすよね。

こんな使い方します

さあさあ!!よってらっしゃい。みてらっしゃい。

私は文章を読まなくてもなんとなく意味してる事がわかっちゃうステキなボックスよ。

私の場合はテーマの更新でどこがどう変わったのか。はたまたどんな機能が追加されたのか。そういった表現に使えちゃいます。

ビフォーアフターなCSSの追加

はい、とりあえずstyle.cssに追記しましょう。
スタイルは最低限でお造りしておりやすので適宜っちゅうか安生やってくださいね。

/*ビフォーアフターなボックス*/
.before-after_box {
    background: #ffffff;
    border: 2px solid #5d5d5d;
    margin-top: 30px;
    margin-bottom: 40px;
    padding: 30px;
    border-radius: 4px;
    position: relative;
    display: block;
    margin: 40px 0;
}
.before-after_box::after {
    content: "";
    position: absolute;
    right: 0;
    width: 26px;
    height: 2px;
    left: -5px;
    bottom: -2px;
    margin: auto;
    background: #fff;
}
.before-after_box::before {
    content: "\f0a7";
    font-family: FontAwesome;
    font-size: 36px;
    position: absolute;
    right: 0;
    width: 36px;
    height: 36px;
    left: 0;
    bottom: -6px;
    margin: auto;
    color: #5d5d5d;
}
おててのアイコンフォントは Font Awesome を使っていますので、functions.phpで呼び出してください。
//レンダリングブロックが気になるのでフッターで読み込む
function add_footer_styles() {
    wp_enqueue_style('font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css');
};
add_action( 'wp_footer', 'add_footer_styles' );
※ひよこからひと言
すでに読み込んでいる場合は必要ないので確認してください。

あ、ちなみに上のヒヨコさんはこちらで紹介していますので良かったらついでによろしくデス。

ぴよこボックスが可愛過ぎるので紹介!投稿の補足情報などにどうぞ
ぴよこボックスが可愛過ぎるので紹介!投稿の補足情報などにどうぞ
どうも!柄にもなく可愛いの作りました。気持ち悪いとか言わないでね。今回ぴよこをお借りしたイラストやさんがぴよたそです。 今回の完成イメージはこんなやつですん(テーマ配布終了のお知らせで使用) ※ベータ版の配布は終了しました。これから完成版を発表しようと思いますので、今しばらくお待ちください。 けんじ ジャガイモみたいでかわいい!! こちらのサイトのイラストを使ってボックスを使ったら「あら!素敵だわ!!なシリーズの紹介」スタートです。 Photo by Tim Umphreys on Unsplash 著作権的なアレ 個人的に使うとかブログなどで紹介する分には問題ないようですが、再配布がダメな感じだったので問い合わせました。以下ぴよたそ様の利用規約の気になるところです。 商用利用の方:素材の再配布、転売等は以下をご参考に商用利用や素材を加工しての利用はもちろんOK。クレジットの記載も不要で、何点ご利用頂いても大丈夫です。ただし未加工(もしくはほぼ手が加わっていない)イラストの著作権の主張、転売はご遠慮ください。(何に使ってもらってもOKですが、元イラストの著作権は放棄しておりません) ぴよたそ利用規約 | ゆるくてかわいい無料イラスト素材屋「ぴよたそ」 お問い合わせの結果、結論的に言うと、パーツとして作成したものを配布してユーザーに利用していただくものは再配布としないとの許可を得ました。 お問い合わせのメール内容です。 ということで、ぴよこボックスのパーツとして配布できるようです。次回配布予定のテーマにも組み込む予定です。 あ、あとぴよこボックスってなんやねん!震えるぅ~。そう思った方も300人はいてると思いますが、僕が勝手に命名しただけでやんす。 ぴよこボックスのスタイル とりあえず、5種類の紹介です。 ごめんね的なやつ ケンちゃんが気に入って使ってるやつですね。ごめんねと書けば何となく許してしまう的な感じです。 <div class="piyo-info piyo-info_sorry">ここが文章ですよ。</div> .piyo-info_sorry { background: #fffcdd; border: 1px solid #ff9658; padding: 25px 20px 25px 125px; border-radius: 4px; position: relative; display: block; margin: 1em 0; } .piyo-info_sorry:before { position: absolute; top: 0; bottom: 0; margin: auto; left: 12px; content: ""; display: inline-block; background-image: url(ここに画像のURLを入れてください。); width: 100px; height: 100px; background-size: cover; background-position: center; } 補足説明てきな さっきも出て来ましたが、投稿の補足説明なんかに使えそうなやつです。ていうか使って下さい。 <dip class="piyo-info piyo-info_suppleme">ここが文章ですよ。</dip> .piyo-info_suppleme { background: #f5fcff; border: 1px solid #00acee; padding: 25px 20px 25px 125px; border-radius: 4px; position: relative; display: block; margin: 1em 0; } .piyo-info_suppleme:before { position: absolute; top: 0; bottom: 0; margin: auto; left: 12px; content: ""; display: inline-block; background-image: url(ここに画像のURLを入れてください。); width: 100px; height: 100px; background-size: cover; background-position: center; } ここ注目てきな アテンションプリーズ!ってやつです。functions.phpの編集は危険なので、バックアップは必ずとっておいてね。みたいな使い方でしょうか。 <div class="piyo-info piyo-info_attention">ここが文章ですよ。</div> .piyo-info_attention { background: #ffe9e9; border: 1px solid #bf0000; padding: 25px 20px 25px 125px; border-radius: 4px; position: relative; display: block; margin: 1em 0; } .piyo-info_attention:before { position: absolute; top: 0; bottom: 0; margin: auto; left: 12px; content: ""; display: inline-block; background-image: url(ここに画像のURLを入れてください。); width: 100px; height: 100px; background-size: cover; background-position: center; } 何でもいけそうなやつ ただただ無表情です。逆に何でもOKなオールマイティー。文中で本題からずれたときにでも使えちゃう。ザキヤマてきなやつ。 <div class="piyo-info piyo-info_nature">ここが文章ですよ。</div> .piyo-info_nature { background: #f0fff0; border: 1px solid #7c7; padding: 25px 20px 25px 125px; border-radius: 4px; position: relative; display: block; margin: 1em 0; } .piyo-info_nature:before { position: absolute; top: 0; bottom: 0; margin: auto; left: 12px; content: ""; display: inline-block; background-image: url(ここに画像のURLを入れてください。); width: 100px; height: 100px; background-size: cover; background-position: center; } 寝てるやつ よくわからんけど、たまにはゆっくり休んでもいいよね。ブログばっかやってると肩こっちゃうよ的な? <div class="piyo-info piyo-info_sleeping">ここが文章ですよ。</div> .piyo-info_sleeping { background: #fbfbfb; border: 1px solid #666; padding: 25px 20px 25px 125px; border-radius: 4px; position: relative; display: block; margin: 1em 0; } .piyo-info_sleeping:before { position: absolute; top: 0; bottom: 0; margin: auto; left: 12px; content: ""; display: inline-block; background-image: url(ここに画像のURLを入れてください。); width: 100px; height: 100px; background-size: cover; background-position: center; } 全部まとめる場合 因みに全部まとめるとこんな感じでCSSは省略できます。 .piyo-info { padding: 25px 20px 25px 125px; border-radius: 4px; position: relative; display: block; margin: 1em 0; } .piyo-info:before { position: absolute; top: 0; bottom: 0; margin: auto; left: 12px; content: ""; display: inline-block; width: 100px; height: 100px; background-size: cover; background-position: center; } /*sorry*/ .piyo-info_sorry { background: #fffcdd; border: 1px solid #ff9658; } .piyo-info_sorry:before { background-image: url(ここにURLを入れてください。); } /*補足*/ .piyo-info_suppleme { background: #f5fcff; border: 1px solid #00acee; } .piyo-info_suppleme:before { background-image: url(ここにURLを入れてください。); } /*attention*/ .piyo-info_attention { background: #ffe9e9; border: 1px solid #bf0000; } .piyo-info_attention:before { background-image: url(ここにURLを入れてください。); } /*nature*/ .piyo-info_nature { background: #f0fff0; border: 1px solid #7c7; } .piyo-info_nature:before { background-image: url(ここにURLを入れてください。); } /*sleeping*/ .piyo-info_sleeping { background: #fbfbfb; border: 1px solid #666; } .piyo-info_sleeping:before { background-image: url(ここにURLを入れてください。); } ちょっとした文字をキャプションみたいに入れても可愛いです。 スタイルはこんな感じです。適当に変更して使ってね。 .piyo-info.piyo-info_attention:after { content: "注目!!"; top: -12px; left: -13px; font-weight: bold; position: absolute; transform: rotate(-17deg); color: #bf0000; font-size: 21px; background: #ffffff; border: 1px solid #bf0000; padding: 1px 6px; border-radius: 4px; } 画像のURL確認 まず以下の画像をダウンロードしてください ぴよこボックスの素材ダウンロード あくまでもこのパーツとしてです。画像は圧縮リサイズ済みです。 で、ZIPなので解凍してWordPressのメディアに新規追加します。 アップロードが終わったら、ライブラリから編集をクリックします。 右側を見れば確認できるのでURLをコピーします。 後は、コピーしたURLをCSSのurl(ここに入れます)にいれてください。 WordPressの場合は、タグ登録しておくと便利です。こちらで説明してるので参考にしてみてね。 公式ぴよたそのシブタク🐣(@pochimin02)さんからツイート頂きました。Yes!✌Yes!✌でもケンちゃんSNSの使い方わからない…(泣)逆輸入的な感じ。 おお!ぴよたそのご紹介ありがとうございます~。ぴよこボックスが可愛過ぎるので紹介!投稿の補足情報などにどうぞhttps://t.co/67bDd44e71 — シブタク🐣 (@pochimin02) 2018年8月27日 以上!!ひよこのお祭りでした。(`・ω・´)ゞ

誠に拙作でありました。(`・ω・´)ゞ

スポンサーリンク

この記事をかいた人

閲覧どうもありがとうございます。当サイトキャンディースタイルとWordPressテーマのWhite Tigerというサイトを運営しています。まだまだ初心者なので、お見苦しいとこがありますがどうぞよろしく。

コメントを閉じる

コメントを残す

メールアドレスが公開される事はございませんが*の付いている欄は必須項目となります。
なおコメントの反映にお時間がかかる場合があります事をご了承ください。


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください