amzn_assoc_ad_type = "link_enhancement_widget"; amzn_assoc_tracking_id = "cheeeehonz-22"; amzn_assoc_placement = ""; amzn_assoc_marketplace = "amazon"; amzn_assoc_region = "JP";

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

ガジェットミッション

ありとあらゆる情報に挑む,ガジェットブログ

【簡単コピペ】はてなブログを一瞬でカスタマイズ!-引用枠線デザインと太字マーカーを追加で見やすくする方法-

ライフハック ライフハック-はてなブログ

【簡単コピペ】はてなブログを一瞬でカスタマイズ!-引用枠線デザインと太字マーカーを追加で見やすくする方法-

f:id:chehonz5:20160329140518j:plain
貼り付けるだけの簡単作業で、はてなブログを見やすくする方法をご紹介します。
今回は、引用枠線デザインと太字マーカーを追加することで文章を読みやすくお洒落にする方法です。
誰でも簡単に出来るので特に必要な知識はありません!

※はてな記法推奨

太字をオシャレなマーカー付きにする方法

デザイン画面のカスタマイズにある「デザインCSS」に書き込みます。
(ダッシュボード ▶︎ デザイン ▶︎ カスタマイズ ▶︎ デザインCSS)

貼り付け用

/*太文字マーカー*/
.entry-content b {
background: linear-gradient(transparent 60%, #96E6E6 40%);
}

デザイン画面のスマートフォンにある「タイトル下」に書き込みます。
(ダッシュボード ▶︎ デザイン ▶︎ スマートフォン ▶︎ ヘッダ ▶︎ タイトル下)

貼り付け用

/*太文字マーカー*/<--style type=text/css-->
.entry-content b {
background: linear-gradient(transparent 60%, #96E6E6 40%);
}<--/style-->
※「--」を消してお使い下さいませ!



引用の枠線をオシャレにする方法

デザイン画面のカスタマイズにある「デザインCSS」に書き込みます。
(ダッシュボード ▶︎ デザイン ▶︎ カスタマイズ ▶︎ デザインCSS)

貼り付け用

/* 引用デザインA*/
.entry-content blockquote {
padding: 20px 55px;
background: rgba(245,245,245,0.8);
color: #222;
position: relative;
border:3px solid #444444;
padding:1.5em;
}
/* 引用デザインB*/
.entry-content blockquote:before {
color: rgba(200, 200, 200, 1);
font-family: serif;
font-size: 600%;
left: 0;
line-height: 1em;
position: absolute;
top: 0;
}
/* 引用デザインC*/
.entry-content blockquote:after {
font-family: serif;
position: absolute;
bottom: 0;
right: 0;
font-size: 600%;
color: rgba(200,200,200,1);
line-height: 0;
}

デザイン画面のスマートフォンにある「タイトル下」に書き込みます。
(ダッシュボード ▶︎ デザイン ▶︎ スマートフォン ▶︎ ヘッダ ▶︎ タイトル下)

貼り付け用

/* 引用デザインA */
.entry-content blockquote {
padding: 20px 55px;
background: rgba(245,245,245,0.8);
color: #222;
position: relative;
border:3px solid #444444;
padding:1.5em;
}
/* 引用デザインB */
.entry-content blockquote:before {
color: rgba(200, 200, 200, 1);
font-family: serif;
font-size: 600%;
left: 0;
line-height: 1em;
position: absolute;
top: 0;
}
/* 引用デザインC*/
.entry-content blockquote:after {
font-family: serif;
position: absolute;
bottom: 0;
right: 0;
font-size: 600%;
color: rgba(200,200,200,1);
line-height: 0;
}



最後に・・・

簡単に見た目を変えれて、お洒落になったら嬉しいですよね!
見た目がよければきっときっときっとアクセスが増えるでしょう。(笑)

Copyright © 2016 TheGadgetMission All rights reserved.