旨い飯には福きたる

管理人かずーきおすすめの居酒屋やレストランをご紹介するグルメブログです。

【はてなブログ】コピペだけできるデザインCSSカスタマイズ②


どうもかずーきです!(@kazuuuuuuuukin)

前回の記事では、自分がおこなった『Brooklyn』(ブルックリン)のトップページのデザインCSSを紹介致しました。

【前回の記事】
www.kazuki-iroiro.com

今回は『Brooklyn』(ブルックリン)以外でも設置できるカスタマイズを紹介致します。


ツイッターのIDを載せる

どうも○○です。(@ツイッターID)
⇒おなじみのこれを作ります。

(<a href="https://twitter.com/kazuuuuuuuukin" target="_blank">@kazuuuuuuuukin</a>)


私のIDである『kazuuuuuuuukin』を皆様のIDに変更してくださいませ。

好きなアイコン画像で吹き出しコメント


どうもかずーきです!

⇒これをつくります。

①載せたい画像をはてなフォトライフに登録

f:id:kazuki-iroiro:20200113225834j:plain

f:id:kazuki-iroiro:20200113230610j:plain

↑画像をアップロードしましょう。

②画像のリンクを取得

f:id:kazuki-iroiro:20200113230932j:plain

↑赤枠のマイフォトにてアップロードした画像を選択

f:id:kazuki-iroiro:20200113231337j:plain

↑赤枠のリンクをクリック
↑青枠の部分をコピー
↑緑枠のようにメモ帳などに一時的に貼っておきましょう。

③デザインCSSにコードを入れます

f:id:kazuki-iroiro:20200113231747j:plain

↑デザイン設定の一番下のデザインCSSです。

/* 吹き出しのCSS */

.entry-content .l-fuki,
.entry-content .r-fuki {
position: relative;
width: 80%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 20px;
border-radius: 6px;
border: 2px solid #999;
box-shadow: 1px 1px 5px #aaa;
background-color: #fff;
z-index: 1;
}
.entry-content .l-fuki {
margin: 20px 20% 40px 0;
}
.entry-content .r-fuki {
margin: 20px 0 40px 19%;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
position: absolute;
content: "";
top: 16px;
width: 10px;
height: 10px;
border-right: 2px solid #999;
border-bottom: 2px solid #999;
background-color: #fff;
z-index: 2;
}
.entry-content .l-fuki::before {
right: -7px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
left: -7px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
position: absolute;
content: "";
width: 80px;
height: 80px;
top: -10px;
border-radius: 40px;
border: 3px solid #fff;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
box-shadow: 1px 1px 5px #aaa;
}
.entry-content .l-fuki::after {
right: -110px;
}
.entry-content .r-fuki::after {
left: -110px;
}
@media screen and (max-width: 620px) {
.entry-content .l-fuki,
.entry-content .r-fuki {
width: 70%
}
.entry-content .l-fuki {
margin-right: 30%;
}
.entry-content .r-fuki {
margin-left: 30%;
}
}
@media screen and (max-width: 478px) {
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
width: 60px;
height: 60px;
border-radius: 30px;
}
.entry-content .l-fuki::after {
right: -84px;
}
.entry-content .r-fuki::after {
left: -84px;
}
}
.koma2::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/k/kazuki-iroiro/20200113/20200113230244.jpg);}

/* 吹き出しのCSS終わり */

↑最後の行の『koma2』部分はお好みのアルファベットに変えてください。
記事で呼び出すときに使います。

(https://cdn-ak.f.st-hatena.com/images/fotolife/k/kazuki-iroiro/20200113/20200113230244.jpg)
⇒この()内の部分を皆さんの画像URLに以下の手順で変えます。

⇩先ほどメモ帳にとってあるURLはこんな感じで長いと思います。

kazuki-iroiro/20200113230244"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/k/kazuki-iroiro/20200113/20200113230244.jpg" alt="20200113230244"></a>

https://cdn-ak ~ .jpg の部分だけ使います。

ココ要注意です。そのままURL全部貼り付けると反映しませんでした。

これでデザインCSSの設定は完了です。


④早速記事内で使ってみましょう。

 <p class="l-fuki koma2">本文</b></p>

『koma2』の部分をデザインCSSで変えたアルファベットに変更しましょう。

本文の部分に文章を入れましょう。

ちなみにclass=の後に『l』だろアイコンが左、『r』だと右になります。

はい、カメです♫

こんにちは♫・・・といった具合に会話形式にできます。

デザインCSSの最後の行をコピーして足していけばいくつでも登録可能です。


SNSシェアと読者になるボタン

f:id:kazuki-iroiro:20200113234507j:plain



赤枠のSNSシェアボタンと青枠の読者になるボタンの設定です。



f:id:kazuki-iroiro:20200113234850j:plain

いつものデザイン設定画面です。

今回は『記事』という部分をいじります。

『記事』の中にも赤枠の記事上と青枠の記事下の2つにコードを入れる部分がございます。

まずは赤枠の記事上の所に入れるコードです。

【SNSシェアボタン】いじらずOK

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!--シェアボタン-->
<div class="share-button">
<div class="share-inner">
<!--はてブ-->
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button color" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i><br> <span class="hatebu-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Facebook-->
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="facebook-button color"><i class="fa fa-facebook-square lg"></i><br><span class="facebook-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank" class="twitter-button color"><i class="blogicon-twitter lg"></i><br><span class="small-text">Twitter</span></a>
<!--ググタス-->
<a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button color"><i class="fa fa-google-plus"></i><br><span class="small-text">Google</span></a>
<!--Pocket-->
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button color" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="small-text">Pocket</span></a>
</div>
</div>

【読者になるボタン】

<div class="reader-button color">
<a href="http://blog.hatena.ne.jp/kazuki-iroiro/https://www.kazuki-iroiro.com//subscribe">読者になる</a>
</div>

↑ダッシュボードの『詳細設定』の最下段にある『読者になるボタン』を確認して、URLとIDを変更してください。

このまま貼ると私の読者になってしまいますので。笑


次に青枠の記事下の所に入れるコードです。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!--シェアボタン-->
<div class="share-button">
<div class="share-inner">
<!--はてブ-->
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button color" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i><br> <span class="hatebu-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Facebook-->
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="facebook-button color"><i class="fa fa-facebook-square lg"></i><br><span class="facebook-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank" class="twitter-button color"><i class="blogicon-twitter lg"></i><br><span class="small-text">Twitter</span></a>
<!--ググタス-->
<a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button color"><i class="fa fa-google-plus"></i><br><span class="small-text">Google</span></a>
<!--Pocket-->
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button color" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="small-text">Pocket</span></a>
</div>
</div>
<!-- シェアボタン数のカウント -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
//Facebookのシェア数を取得
function countFacebook(url, selector) {
$.ajax({
url:'https://graph.facebook.com/',
dataType:'jsonp',
data:{
id:url
}
}).done(function(res){
if ( res.share && res.share.share_count ) {
$( selector ).text( res.share.share_count );
} else {
$( selector ).text( 0 );
}
}).fail(function(){
$(selector).text('0');
});
}
//はてなブックマークではてブ数を取得
function countHatebu(url, selector) {
  $.ajax({
    url:'https://b.hatena.ne.jp/entry.count?callback=?',
    dataType:'jsonp',
    data:{
      url:url
}
}).done(function(res){
    $(selector).text( res || 0 );
}).fail(function(){
    $(selector).text('0');
});
}
$(function(){
  countFacebook('{Permalink}', '.facebook-count');
  countHatebu('{Permalink}', '.hatebu-count');
});
</script>

記事下には読者になるボタンは入れませんでした。

入れると関連記事の下に読者になるボタンがきてしまったので・・。

以上で記事上下にSNSシェアボタン、記事上に読者になるボタンを設置できます。


お疲れさまでした!とりあえず今回はここまでに致します。

記事の枠線や目次は次回と致します!

最後までお読み頂きありがとうございました!