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

ポジ熊の人生記

雑記です。ブログが大好きなので定期的にブログ論を書く癖があります。



はてなブログの定期購読ボタンをお洒落にしたい初心者向け記事

ブログ-はてなネタ

広告

これは僕自身がＣＳＳを考え出した記事ではなく、別サイトの開発者が公開している方法を初心者の自分が実践して適用するまでの一連の流れを記したものです。つまり知識が０のはてなブロガーでも理解できることを目指しました。

※条件があります、スマホのデザインカスタマイズには『はてなブログPro』は必須です。月額１０００円程度ですが、もしこれに感化された方は導入を検討してみてはいかがでしょうか。

それでは本編に入ります。

カスタマイズ後の画像

ＰＣサイドバー

f:id:pojihiguma:20160305112159p:plain

最初に目に入ることを意識してます。ファーストビューに定期購読ボタンを置くというのはテクニックです。

スマホＴＯＰ

f:id:pojihiguma:20160305112326p:plain

ここもファーストビュー意識ですね。

スマホは色が淡泊になりやすいので、あえて地は着色しました。

スマホ下部 

f:id:pojihiguma:20160305112407p:plain

シェアボタンの下に。

記事を読了して「よっしゃあ購読したるわ」なんて最高のパターンでしょう。

 

参考にした記事とまずやるべきこと

参考記事

www.ituore.com

若手はてなブログカスタマイザーの雄、shun君（id:shun_prog0929）のサイトを参考に、ここから本当に何も知らない人向けに記事を書いてみたい。

まずやること

はてなブログにおいて・・・

設定→詳細設定→検索エンジン最適化→headに要素を追加

ここ（僕は一番上に書いた）に

stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css

を入力しましょう。これはアイコン画像の紐づけ作業だそうです。

既にこのコードを貼りつけている方もいるそうなので、重複に注意を！

ＰＣへの設置準備

デザイン→カスタマイズ→サイドバー→モジュールの追加→</>HTML

ここに以下のコードを入力し、以後は色付きの順番で自分用に改変していった経緯を全て説明する。

<!-- フォローボタン -->

<center>

<div class="content-inner-follow-buttons" >

<div class="follow-title"><span style="font-size: 8px">フォローする</span></div>

<a class="hatena" href="http://blog.hatena.ne.jp/shun_prog0929/www.ituore.com/subscribe" onclick="window.open('http://blog.hatena.ne.jp/shun_prog0929/www.ituore.com/subscribe', '', 'width=500,height=400'); return false;">

<i class="blogicon-hatenablog lg"></i>

<span class="inner-text">Hatena</span>

</a>

<a class="facebook" href="URL" target="_blank">

<i class="blogicon-facebook lg"></i>

<span class="inner-text">Facebook</span>

</a>

<a class="twitter" href="https://twitter.com/intent/follow?screen_name=shun_hatena" target="_blank">

<i class="blogicon-twitter lg"></i>

<span class="inner-text">Twitter</span>

</a>

<a class="instagram" href="URL" target="_blank">

<i class="blogicon-instagram lg"></i>

<span class="inner-text">Instagram</span>

</a>

<a class="feedly" href="http://feedly.com/i/subscription/feed/http://www.ituore.com/feed" target="_blank">

<i class="blogicon-rss lg"></i>

<span class="inner-text">Feedly</span>

</a>

<a class="googleplus" href="URL" target="_blank">

<i class="fa-google-plus fa"></i>

<span class="inner-text">Google+</span>

</a>

</div>

</center>

 

content-inner-follow-buttons→sidebar-follow-buttons　へ変更（サイドバー仕様にするため）

 

class="follow-title"→消した（フォローするという言葉が消えるらしい）

 

shun_prog0929/www.ituore.com→pojihiguma/www.pojihiguma.com

shun_prog0929/www.ituore.com→pojihiguma/www.pojihiguma.com

上記２か所は（自分のはてなid/自分のサイトＵＲＬの一部）に修正

 

紫文字の部分（ＦＢ・インスタ・G+）→不必要なので消した

 

shun_hatena→poji_higuma　TwitterのID入れた（＠不要）

 

www.inoue.com→www.pojihiguma.com　自分のサブドメインとアドレス入れた

 

以下修正後

 

<!-- フォローボタン -->

<center>

<div class="sidebar-follow-buttons" >

<div class="follow-title"><span style="font-size: 8px">フォローする</span></div>

<a class="hatena" href="http://blog.hatena.ne.jp/pojihiguma/www.pojihiguma.com/subscribe" onclick="window.open('http://blog.hatena.ne.jp/pojihiguma/www.pojihiguma.com/subscribe', '', 'width=500,height=400'); return false;">

<i class="blogicon-hatenablog lg"></i>

<span class="inner-text">Hatena</span>

</a>

<a class="twitter" href="https://twitter.com/intent/follow?screen_name=poji_higuma" target="_blank">

<i class="blogicon-twitter lg"></i>

<span class="inner-text">Twitter</span>

</a>

<a class="feedly" href="http://feedly.com/i/subscription/feed/http://www.pojihiguma.com/feed" target="_blank">

<i class="blogicon-rss lg"></i>

<span class="inner-text">Feedly</span>

</a>

</div>

</center>

 

これをサイドバーのTOPに持ってくる。

 

ＰＣサイドバーに設置

このままでは文字だけの味気ないものになってしまうので、ここからカスタマイズして定期購読ボタンをアイコンにする必要あり。

設定→デザイン設定→カスタマイズ→デザインCSS

に以下を追加

/*サイドバーフォローボタン*/

.sidebar-follow-buttons{

    width: 100%;

    text-align: center;

    letter-spacing: -.40em;

}

.sidebar-follow-buttons a {

    display: inline-block;

    letter-spacing: normal;

    position: relative;

    width: 25%;

    font-size: 12px;

    text-align: center;

    text-decoration: none;

    padding:6% 0;

    margin:1%;

    overflow: hidden;

    z-index:2;

}

.sidebar-follow-buttons a:hover {

    color:#fff;

    transition: all .3s;

}

.sidebar-follow-buttons a:after {

    position:absolute;

    content:'';

    width:100%;

    height:100%;

    top:-100%;

    left:0;

    z-index:-1;

    transition: 0.2s;

}

.sidebar-follow-buttons .inner-text {

    font-size:16px;

    padding-left:5px;

}

.sidebar-follow-buttons .hatena {

    color: #38393C;

    border: 1px solid #38393C;

    background: #ffffff;

}

.sidebar-follow-buttons .hatena:hover:after {

    top:0;

    background:#38393C;

}

.sidebar-follow-buttons .facebook {

    color: #305097;

    border: 1px solid #305097;

    background: #ffffff;

}

.sidebar-follow-buttons .facebook:hover:after {

    top:0;

    background:#305097;

}

.sidebar-follow-buttons .twitter {

    color: #55acee;

    border: 1px solid #55acee;

    background: #ffffff;

}

.sidebar-follow-buttons .twitter:hover:after {

    top:0;

    background:#55acee;

}

.sidebar-follow-buttons .instagram {

    color: #3f729b;

    border: 1px solid #3f729b;

    background: #ffffff;

}

.sidebar-follow-buttons .instagram:hover:after {

    top:0;

    background:#3f729b;

}

.sidebar-follow-buttons .feedly {

    color: #6cc655;

    border: 1px solid #6cc655;

    background: #ffffff;

}

.sidebar-follow-buttons .feedly:hover:after {

    top:0;

    background:#6cc655;

}

.sidebar-follow-buttons .googleplus {

    color: #db4a39;

    border: 1px solid #db4a39;

    background: #ffffff;

}

.sidebar-follow-buttons .googleplus:hover:after {

    top:0;

    background:#db4a39;

}

 

赤字の部分はもともと40%と18pxだったんだけど、表示の体裁を整えるためにいじった。

 

これでPCサイドバーが完了する。

次はスマホ。頑張ろう、もうちょいだよ。 

 

スマホへの設置準備

設定→デザイン設定→スマートフォン→ヘッダ→タイトル下

に次を記載

<style>

/*スマホ版フォローボタン*/

.content-inner-follow-buttons{

    text-align: center;

    width:100%;

    letter-spacing: -.40em;

}

.content-inner-follow-buttons .follow-title {

    letter-spacing: normal;

    width:100%;

    color:#666;

    margin-bottom:5px;

}

.content-inner-follow-buttons a {

    display: inline-block;

    letter-spacing: normal;

    width:30%;

    text-align: center;

    text-decoration: none;

    padding:6% 0;

    margin:1%;

}

.content-inner-follow-buttons .inner-text {

    font-size:13px;

}

.content-inner-follow-buttons .hatena {

    color: #ffffff;

    background: #38393C;

}

.content-inner-follow-buttons .facebook {

    background: #305097;

    color: #ffffff;

}

.content-inner-follow-buttons .twitter {

    background: #55acee;

    color: #ffffff;

}

.content-inner-follow-buttons .instagram {

    background: #3f729b;

    color: #ffffff;

}

.content-inner-follow-buttons .feedly {

    background: #6cc655;

    color: #ffffff;

}

.content-inner-follow-buttons .googleplus {

    background: #db4a39;

    color: #ffffff;

}

</style>

 

スマホに設置（上）

設定→デザイン設定→スマートフォン→ヘッダ→タイトル下

※僕の場合はトグルメニューがあるので、その下に表示させるようにした。ヘッダ以下に何もない人は気にせず配置すると良い。

<style>

<!-- フォローボタン -->

<center>

<div class="content-inner-follow-buttons" >

<div class="follow-title"><span style="font-size: 8px">フォローする</span></div>

<a class="hatena" href="http://blog.hatena.ne.jp/shun_prog0929/www.ituore.com/subscribe" onclick="window.open('http://blog.hatena.ne.jp/shun_prog0929/www.ituore.com/subscribe', '', 'width=500,height=400'); return false;">

<i class="blogicon-hatenablog lg"></i>

<span class="inner-text">Hatena</span>

</a>

 

<a class="twitter" href="https://twitter.com/intent/follow?screen_name=poji_higuma" target="_blank">

<i class="blogicon-twitter lg"></i>

<span class="inner-text">Twitter</span>

</a>

 

<a class="feedly" href="http://feedly.com/i/subscription/feed/http://www.pojihiguma.com/feed" target="_blank">

<i class="blogicon-rss lg"></i>

<span class="inner-text">Feedly</span>

</a>

</div>

</center>

</style>

赤字部分はPCサイドバーだと変更した部分であるが、ここはデフォルトのままでよい（サイドバーとは無関係のため）

青字部分は前述の記事内容を参考にして、各自用に随時変更すること。

 

スマホに設置（下）

設定→デザイン設定→スマートフォン→記事→記事下

<style>

<!-- フォローボタン -->

<center>

<div class="content-inner-follow-buttons" >

<div class="follow-title"><span style="font-size: 8px">フォローする</span></div>

<a class="hatena" href="http://blog.hatena.ne.jp/shun_prog0929/www.ituore.com/subscribe" onclick="window.open('http://blog.hatena.ne.jp/shun_prog0929/www.ituore.com/subscribe', '', 'width=500,height=400'); return false;">

<i class="blogicon-hatenablog lg"></i>

<span class="inner-text">Hatena</span>

</a>

 

<a class="twitter" href="https://twitter.com/intent/follow?screen_name=poji_higuma" target="_blank">

<i class="blogicon-twitter lg"></i>

<span class="inner-text">Twitter</span>

</a>

 

<a class="feedly" href="http://feedly.com/i/subscription/feed/http://www.pojihiguma.com/feed" target="_blank">

<i class="blogicon-rss lg"></i>

<span class="inner-text">Feedly</span>

</a>

</div>

</center>

</style>

赤字及び青字の注意点に関してはスマホ設置（上）に同じ

僕の場合はシェアボタンと合わせて読みたいのCSS間に挿入している

 

ーー

 

以上、定期購読ボタン設置法。

 

pojihiguma

広告



follow us in feedly
コメントを書く