CO×HO×CO

小さななんでも情報の宝庫

【コピペ可】はてブロにドラクエ風味の読者登録お願いCTAを作ってみた【分家版】

f:id:cgsts:20170913130547p:plain

自己満感半端ない(;´∀`)

だってちょっと真面目系ブログですもん...

でも楽しまないと損ソン!!

 

今回はブログ記事の最後にドラクエ風味の読者登録を促すボタンを作ることがテーマです('ω')

 これにあたってはまず、本家様に感謝いたします(*_ _)

moriawase.net

ありがとうございます。

手間の99.9%は本家様によるものです(''ω'')ノ

私はちょこちょこっとアレンジしただけです(*ノωノ)

本家様同様コピペ可能なので気に入れば使ってください~!

では、早速実装していきましょう!

 

1.作業流れ!設定をいじる部分は3カ所!

最初は分からないことが多いですが、頑張っていきましょう(*'ω'*)

(1)HTMLをいじって、自分好みの構成(文章)にアレンジ!

(2)HTMLをブログ記事やフッター等任意の場所へコピペ!

(3)デザインCSSにコピペ!

 

2.HTMLをいじって、自分好みの構成(文章)にアレンジ!

まずは以下をメモ帳などにコピペして、自分用にアレンジしてください('ω')

構成上大きな変更がない場合は赤い太文字部分を変更してください。

意味が分からなかったらまずはそのままコピペしてみてくださいね(=゚ω゚)ノ

 

<div class="blackback">
<div class="blackboard question">
<p>〇〇〇が読者になって欲しそうにこちらを見ている</p>
</div>
<div class="tekimg"><img src="画像リンク" alt="画像説明文" /></div>
<div class="blackboard question">
<p>読者になりますか?</p>
</div>
<div class="clearfix">
<div class="blackboard answer float-r">
<p class="blink-before"><a href="読者登録リンク">読者になる</a></p>
<p><a href="Twitterフォローリンク">にげる</a></p>
</div>
</div>
</div>

※「にげる」 なのにTwitterフォローリンクを入れているのは遊び心です(*ノωノ)

不要な場合は「<a href="Twitterフォローリンク">にげる</a>」を消してください。

 

3.ブログ記事や記事下、フッター等へコピペ!

次は2で作ったHTMLを表示したい場所に貼り付ける作業です('ω')

ブログ記事張り付ける場合は「HTML編集モード」に貼り付けます。

f:id:cgsts:20170913131048p:plain

 ※ここです。

ブログ記事そのものに貼り付ける場合は毎度、同じ手間を要します(-_-)

面倒だな~という人はフッターへ貼り付けたりしましょう。

 

4.デザインCSSにコピペ

最後にCSSです。これは特段いじる必要はありません。

これをそのまま「デザインCSSに貼り付けます。

 

/*--------------------------------------
ドラクエ
--------------------------------------*/
.tekimg {
    width:25%; /*画像が小さかったらここで調整*/
    margin:auto;
    padding: 10px 0;
}

.blackboard {
    position: relative;
    margin: 0 auto 1.5rem;
    padding: 1.6rem 1rem;
    font-size: 1.2rem;
    color: #fff;
    border: 2px solid #000;
    border-radius: 5px;
    box-shadow: 0 0 0 4px #fff inset;
    background-color: rgba(0,0,0,0.9);
}
.blackboard.answer p {
    margin-left: 1.7rem;
}
.blackboard .blink-before {
    font-size: 1.2rem;
}
.blackboard a {
    text-decoration: none;
    color: #fff;
}
.blackboard .blink-before::before {
    content: '▶';
    position: absolute;
    left: 1rem;
    animation: blink 1.4s infinite;
}
.blackboard p:last-of-type {
    margin-bottom: 0;
}
/* 回り込み */
.float-r {
    float: right;
}
/* 回り込み解除 */
.clearfix {
    zoom: 1;
}
.clearfix:after {
    clear: both;
    content: "";
    display: block;
}
/* 点滅 */
@keyframes blink {
50% { opacity: 0; }
}
@-webkit-keyframes blink {
50% { opacity: 0; }
}

 ※デザインCSSってどこやねんという人

☟ここですよ~('ω')☟

f:id:cgsts:20170913125940p:plain

 

 5.できあがり!「読者は遊び心を入手した」

f:id:cgsts:20170913125927j:plain

お疲れさまでした ^^) _旦~~

改めて本家様に感謝します。

 役に立ちましたらシェアもお願いします(''ω'')ノ

 

では早速....

 

野生のぼうしが読者になって欲しそうにこちらをチラチラ見ている

読者になって欲しそうに見ているぼうし

読者になって事務所の今後を見守りますか?