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

ふつうってなに?

雑記ブログです。色々と興味を持ったことを記事にしています。

【はてなブログ】目立つ枠のカスタマイズを2種使う方法!

スポンサーリンク

オススメ記事

本が嫌いなあなたへ!オーディオブックFeBeがオススメな5つの理由

カサンドラ症候群になる前に読むべき本

ハーレークインって誰?まとめ記事!

10年後も読み返したくなる漫画たち!

f:id:kiyosui:20170119163245j:plain

ども!キヨスイ(@kiyosui_goraku)です!

 

シロマティさんが「おすすめ記事・関連記事のリンクを枠で囲って目立たせるカスタマイズ - NO TITLE」こんな便利アイテムを作ってくれました。感激...ありがとうございます。

で、これ2種類同時に使えないのかな?と思って、実験的に試してみたらできました。

*CSSとか超無知なやつがやっているので変なことになっても責任とりません。

 

スポンサーリンク
 

関連記事を目立たせる枠を2種類使う方法!

僕は、この二つを使いたいなって思って実験してみました。そしたらできたっぽい。

 

一つ目がこちら

f:id:kiyosui:20170119161246p:plain

 

二つ目がこちら

f:id:kiyosui:20170119162407p:plain

 

一つ目のコードがこれになっています。

.entry-content .emphasize-link {
position: relative;
margin: 36px 0 16px;
padding: 16px 10px;
border: 2px solid #c62824;
background-color: #fffafa;
}
.entry-content .emphasize-link p:last-child {
margin-bottom: 0;
}
.entry-content .emphasize-link::before {
position: absolute;
top: -12px;
left: 10px;
padding: 0 10px 0 26px;
content: "関連記事";
background-color: #c62824;
border-radius: 10px;
color: #fff;
font-size: 14px;
font-weight: bold;
line-height: 20px;
}
.entry-content .emphasize-link::after {
position: absolute;
top: -16px;
left: 4px;
width: 28px;
height: 28px;
background-color: #c62824;
border-radius: 14px;
line-height: 27px;
text-align: center;
content: "\f009";
font-size: 16px;
font-family: "blogicon";
color: #fff;
}

 

二つ目のコードがこちらです。

.entry-content .emphasize-link a {
display: block;
position: relative;
padding: 14px 30px 14px 16px;
border: 2px solid #fff;
color: #fff;
text-decoration: none;
background-color: #be2d32;
box-shadow: 0 2px 2px rgba(0,0,0,.4);
-webkit-transition: all .3s;
transition: all 0.3s;
border-radius: 6px;
}
.entry-content .emphasize-link a::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
content: "";
background-color: #fff;
opacity: .1;
}
.entry-content .emphasize-link a::after {
position: absolute;
top: 50%;
right: 14px;
margin-top: -10px;
font-family: "blogicon";
line-height: 20px;
content: "\f006";
}
.entry-content .emphasize-link a:hover {
box-shadow: none;
-webkit-transition: all .3s;
transition: all 0.3s;
}

 

両方のコードとも始めがこちらになってますよね。

.entry-content .emphasize-link a {

emphasize-link」の末尾に2を付けてみた。

.entry-content .emphasize-link2 a {

 

 

この部分だけ2を付けたものと付けてないものをCSSに両方ぶっこんでみたんです。

 

CSSに入っているコードはこの2種です。

 

こっちがこれ

f:id:kiyosui:20170119161730p:plain

.entry-content .emphasize-link {
position: relative;
margin: 36px 0 16px;
padding: 16px 10px;
border: 2px solid #c62824;
background-color: #fffafa;
}
.entry-content .emphasize-link p:last-child {
margin-bottom: 0;
}
.entry-content .emphasize-link::before {
position: absolute;
top: -12px;
left: 10px;
padding: 0 10px 0 26px;
content: "関連記事";
background-color: #c62824;
border-radius: 10px;
color: #fff;
font-size: 14px;
font-weight: bold;
line-height: 20px;
}
.entry-content .emphasize-link::after {
position: absolute;
top: -16px;
left: 4px;
width: 28px;
height: 28px;
background-color: #c62824;
border-radius: 14px;
line-height: 27px;
text-align: center;
content: "\f009";
font-size: 16px;
font-family: "blogicon";
color: #fff;
}

 

こっちがこれ(4箇所「2」をつけないとダメです)

f:id:kiyosui:20170119162407p:plain

.entry-content .emphasize-link2 a {
display: block;
position: relative;
padding: 14px 30px 14px 16px;
border: 2px solid #fff;
color: #fff;
text-decoration: none;
background-color: #be2d32;
box-shadow: 0 2px 2px rgba(0,0,0,.4);
-webkit-transition: all .3s;
transition: all 0.3s;
border-radius: 6px;
}
.entry-content .emphasize-link2 a::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
content: "";
background-color: #fff;
opacity: .1;
}
.entry-content .emphasize-link2 a::after {
position: absolute;
top: 50%;
right: 14px;
margin-top: -10px;
font-family: "blogicon";
line-height: 20px;
content: "\f006";
}
.entry-content .emphasize-link2 a:hover {
box-shadow: none;
-webkit-transition: all .3s;
transition: all 0.3s;
}

 

Chromeの拡張機能でクラス名を使い分ける

この拡張機能もシロマティさんが作ってくれているもの。

はてなブログ編集用のChrome拡張機能を作りました(使い方の説明) - NO TITLE

 

拡張機能を使って目立たせる枠を使うと「クラス名」のところに「emphasize-link」を入力してね。ってシロマティさんの記事に書いてありますよね。

f:id:kiyosui:20170119162105p:plain

 

このクラス名を「emphasize-link2」を入れて使うと上記でemphasize-link2と入力した方が使えた!

これで2種類使えるんですよ!みんな知ってた?知ってたらごめん!そして勝手なことすんなボケー!!って言われたらすぐにこの記事消します。

 

要するに「emphasize-link2」を入れるとこっちの枠が出るのよ!

f:id:kiyosui:20170119162407p:plain

 

じゃあやってみるよ!

DMM.com「見放題ch ライト」が破格の値段!使ってみたレビュー。

 

ほい!どうっすか!?これで二つ使えます。使い分けしたい人はしてくださいね!

 

最後に

もう一回言っとくけど、無知がやったから誤作動でたらごめんね!

CSSとか色々無知な僕からすると本当に感激もので...シロマティさん作ってくれてありがとうございます。

そして二つ使えた自分にも少し感激したぞ!!というお話でした。誰かの役に立ったら嬉しいです。

 

シロマティさんへ。お前勝手なことすんなー!!ダメー!!!って感じでしたら記事削除しますので、お手数ですがご連絡ください。

 

まずはこちらを見てね!