読者です 読者をやめる 読者になる 読者になる

つばさのーと

つばさの日常を綴るのーと

コピペでどうぞ。けものフレンズ風な囲みデザインのカスタマイズ

ブログ ブログ-カスタマイズ

f:id:tsubasa123:20170223163527j:plain

 

こんにちは、つばさ(@_tsubasa123_)です。

 

またまた「けものフレンズ」便乗記事です。昨日は見出しのカスタマイズを作りましたが、今日は囲みバージョンです。記事を投稿した後すぐに「囲みもあったほうがいんじゃね?」って思いついたんですよね。

 

昨日の記事にまとめるか迷ったんですが、URLに「midashi」って使っちゃったので別記事にしました。計画性無さすぎ、IQが溶けてきてますね。次からは1記事にまとめてお届けできるように気をつけます。

  

サンプルはこんな感じ

 

すごーい!たーのしー!すごーい!たーのしー!すごーい!たーのしー!すごーい!たーのしー! すごーい!たーのしー!すごーい!たーのしー!すごーい!たーのしー!すごーい!たーのしー! すごーい!たーのしー!すごーい!たーのしー!すごーい!たーのしー!すごーい!たーのしー! すごーい!たーのしー!すごーい!たーのしー!すごーい!たーのしー!すごーい!たーのしー!

 

昨日の見出しとデザインは同じなので目新しさはありませんが、まぁ囲みのスタイルにも応用可能でした。背景を重ねて一回り分ずらして配置することで縞々させています。

 

コピペでどうぞ

 

使ってみたいという方がいらっしゃいましたら、下記のCSSをコピペしてください。今回は白背景のデザインが対象となっています。他のお色のテーマをお使いの方は、「backgrounf: #fff」の部分を修正すればいけるかと。

 

html, body { background-color: transparent !important; }
.kemono-border
{ box-sizing: border-box; position: relative; background: #fff; margin: 7px; padding: 5px 7px; } .kemono-border::before { position: absolute; top: -7px; right: -7px; bottom: -7px; left: -7px; content: ''; z-index: -1; background: repeating-linear-gradient(45deg, #23AC69 0px, #23AC69 3px, #91C132 3px, #91C132 6px, #F19726 6px, #F19726 9px, #E8552D 9px, #E8552D 12px, #1AAB8E 12px, #1AAB8E 15px, #E1147F 15px, #E1147F 18px, #2980C1 18px, #2980C1 21px, #1BA1E6 21px, #1BA1E6 24px, #9FA0A0 24px, #9FA0A0 27px, #F19726 27px, #F19726 30px, #E30B20 30px, #E30B20 33px, #E30B20 33px, #E30B20 36px, #A3338B 36px, #A3338B 39px); }

 

「kemono-border」というクラスを囲みたいエリアのタグに追加していただければスタイルが適用されるようになっています。

 

<div class="kemono-border">すごーい!</div>

 

こんな感じのタグで囲ってあげてください。1行目はテーマによっては背景全体に白が指定されておりボーダーが表示されないことがあったのでつけましたが、正直なところ影響範囲が把握できておりません。ご利用の際はご注意ください。

 

さいごに

 

アニメ効果なのは十分承知していますが、ポンポンと好意的なブコメがつくとやっぱりテンション上がりますね。「使いたい」とか「もっと作って」とか言われるとニヤニヤしちゃいます。カスタマイズ記事書いてよかったーと思う瞬間ですね。あとはアドセンス広告が表示されればもう少しやる気がでるんですが、いつまで待てばよいのやら。Google先生、ひとつ宜しくお願いします。

 

ではでは、最後までお付き合いいただきありがとうございました。

 

関連記事

 

コピペでどうぞ。けものフレンズ風な見出しデザインのカスタマイズ