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

ぴよこボックスが可愛過ぎるので紹介!投稿の補足情報などにどうぞ

どうも!柄にもなく可愛いの作りました。気持ち悪いとか言わないでね。今回ぴよこをお借りしたイラストやさんがぴよたそです。

今回の完成イメージはこんなやつですん(テーマ配布終了のお知らせで使用)
※ベータ版の配布は終了しました。これから完成版を発表しようと思いますので、今しばらくお待ちください。

けんじ

ジャガイモみたいでかわいい!!

こちらのサイトのイラストを使ってボックスを使ったら「あら!素敵だわ!!なシリーズの紹介」スタートです。

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の場合は、タグ登録しておくと便利です。こちらで説明してるので参考にしてみてね。

WordPressで強調文字に蛍光ペン風のスタイルを追加する方法
WordPressで強調文字に蛍光ペン風のスタイルを追加する方法
なんでまた蛍光マーカーを使う方法な 記事を書いたかというと、実はテーマ変更でマーカーのスタイルとか消えちゃってることに今更気づいたアフォーです。 なので、アフォーな自分でも覚えておきたいのでメモがてら記事にした次第でございます。 色のサンプル linear-gradientを使って蛍光ペンで引いたようなスタイルを追加しておき、クラス毎にスタイルをふる感じで行きましょう。 以下よく見かけるメジャーな色を用意しておきました。 light yellow crimson royalblue limegreen orangered ちなみに色は以下の記事を参考にチョイスしてきました。英語(日本語色付き)で使う104背景色 スタイルの追加 light yellowのスタイル strong.light-yellow { background: linear-gradient(transparent 40%, #ffff66 80%);} crimsonのスタイル strong.crimson { background: linear-gradient(transparent 40%, #ff8282 80%);} royalblueのスタイル strong.royalblue { background: linear-gradient(transparent 40%, #44a3ff 80%);} limegreenのスタイル strong.limegreen { background: linear-gradient(transparent 40%, #44fd44 80%);} orangeredのスタイル strong.orangered { background: linear-gradient(transparent 40%, #ff7744 80%);} あとはこれをstyle.cssにぺったんこするだけだす!(`・ω・´)b 蛍光マーカー的なやつの使い方 ここまで来たらあとは、ストロング+クラスで囲むだけだけ。 <strong class="light yellow">light yellowのスタイル</strong> タグを登録しておくと便利 ただこれ、毎回タグを打ち込むのがめんどくさい。 そうです皆さんも思いますよね?ね?… なので、プラグインのAddQuicktagを使うのが一番手っ取り早いのですよ。 では、ひとまずプラグインのインストールをします。 有効化すると設定にAddQuicktagな項目が追加されるので、アクセスします。 さてさて、一見難しそうに見えるセッティング画面ですが、意外と簡単ですの。ここでAddQuicktagさんに、先ほどのタグ名、HTMLタグ、順番を教えてやるだけです。 これで時間使うのもアレなもんで、今回は最低限の設定で行きしょう。最低限ボタン名、開始タグと終了タグを入力すれば使えます。 ようするに、こんな感じで登録してやります。名前は任意で分かればOK、開始タグと終了タグが大事。 これで、エディタに追加されているので、使ってみる。スタイルを当てたい文字を選択してQuicktagのドロップダウンに先ほど追したタグをポチっと。 プレビューするとスタイルが当たってるのが確認できます。 他も同じように登録しておけばすぐ使えるので便利ですね。 けんじ AddQuicktagは、こういう吹き出しなんかも登録しておくと便利なので入れておくことをお勧めします あと、ちょくちょく出てきたひよこのボックスも紹介してるので参考にしてみてね。 報告は以上でございます!!(`・ω・´)ゞ

公式ぴよたそシブタク🐣(@pochimin02)さんからツイート頂きました。Yes!✌Yes!✌でもケンちゃんSNSの使い方わからない…(泣)
逆輸入的な感じ。


以上!!ひよこのお祭りでした。(`・ω・´)ゞ

スポンサーリンク

この記事をかいた人

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

コメント一覧

4
  • ぴよこボックス超かわいいーーーーー!!
    ありがとうございます!使わせて頂きました。☆彡

    • マリさんコメントありがとうございます。
      いやぁ良かった!良かった!気持ち悪いとか思われていなくて(笑)
      どんどんバンバン使って下さい。

  • この記事読んで、けんじさんとひよこ
    ギャップに大変驚きました(笑)

    とても可愛いですよ~♪

    あ、おすすめサイトあります

    ご存知かもしれませんがcoconala です

    https://coconala.com/

    けんじさんのスキルをお売りしたらどうですか?

    私は、もっぱら購入派ですが(笑)

    私みたいなPCスキルが無い人間がワードプレスとかやると
    ちょとした事が分からないので、誰かに手伝って欲しいのですよね

    • 意外と中身は幼い少女のような感じです。
      この記事結構見られてて嬉しいです(笑)

      ココナラねぇ~
      登録まではしてるんですけども、人様からお金を頂戴するのは
      チョット気が引けるんですよね(;^_^A

      パソコンはWindows95の時(20年くらいかな?)から触ってるから好きなんですけどね。
      ただ、文章書くのが苦手…

コメントを閉じる

コメントを残す

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


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