はてなブックマークの変更と追尾型SNSを縦型表示

2017年12月20日stinger3 備忘録SNSボタン, はてなブックマークstinger3 備忘録, はてなブックマーク

stinger3

はてなブックマークの変更と追尾型SNSを縦型表示

 

stinger3で記事内にある「はてなブックマーク」のSNSボタンの
変更と追尾型SNSを縦型表示にするやり方を紹介します。

 

以下記事はワードプレス(WP)や、テーマのstinger3をカスタマイズ
したやり方等を忘れないために書き留めた備忘録です。
記事内にソースコードを表記してる箇所は、ダブルクリックすると
ソースコードが全選択されるので、コピーして使えます。

 

尚、修正したソースコードは、必ずFTPソフトを使ってサーバー
にアップ。または各サーバーのオプション(ファイルマネージ
ャー)等(例はさくらサーバーです)で編集してください。

 

バックアップは忘れずに!!!

 

ワードプレスでstinger3を使用する場合、記事内にあるSNSボタ
ンがありますが「はてなブックマーク」だけデザインが違うのは気
になりませんか?

 

hatena003

 

はてなブックマークボタンのデザインを変更して他のSNSボタンと
見た目をそろえる
hatena001

 

を以下のように変更する。

 

hatena002

 

はてなブックマーク作成

 

以下のサイトへアクセスします。

はてなブックマークボタン作成
hatena012

 

 

1.ボタンのタイプを選びます。

 

hatena004

 

2.ボタンの設定をします。

 

hatena005

 

上記画像にある「ページのアドレス」欄に「aaaaaaa」を入力しま
す。

次に「ぺーじのタイトル」欄に「bbbbbbbb」を入力します。

 

次にブックマーク数欄を表示(バーティカル)に変更します。
以下のようになったのを確認してください。

 

hatena007
3.ボタンを確認します。

 

hatena008

 

確認が終わったら、コードをコピーします。

PC内にあるメモ帳やテキストエディタ等に貼り付けます。

 

そのコードを一部変更します。

 

ボタンの設定の時に「aaaaaaa」と入力しましたので、コード内に
書いてある「aaaaaaa」を探して消します。

 

そこに以下のコードをコピーして貼り付けをします。

 

[css]
<?php the_permalink(); ?>
[/css]

 

次に同じコード内に書いてある「bbbbbbbb」を探して消します。

そこに以下のコードをコピーして貼り付けをします。

 

[css]
<?php the_title(); ?>
[/css]

 

終わったらコードを全て選択してからコピーしてください。

 

4.ワードプレスのSNS.phpを書き換えます

 

stinger3のテーマ編集内の「SNS.php」をクリックします。

 

すると中ほどにはてなブックマーク用のコードが書かれているとこ
ろがあると思います。

 

<li>・・・・・hatena・・・・・・・・</li>

を消して先ほどコピーしておいたコードを貼り付けます。

 

コードの変更は自己責任でお願いいたします。

ファイルを更新”ボタンをクリックします。

 

ブログを再更新してみてください。

以下のように変わっているはずです。

 

hatena011

 

 

追尾型のSNSの表示を縦型表示に変更

従来の追尾型のSNS表示では、記事やフッターに被って読みづら
い時がありました。

 

hatena009
なので追尾型SNS表示を縦から横型に変更しました。
CSSに以下のコードを追記しました。

 

[css]
/*—————————–
SNS
——————————*/

.sns {
width:64px;
padding: 15px 15px 15px 25px;
bottom: 10px;
position: fixed;
border-radius: 0px 4px 4px 0px; /* CSS3 */
-moz-border-radius: 7px; /* Firefox */
-webkit-border-radius: 7px;
border-top-width: 1px;
border-left-width: 1px;
border-bottom-width: 1px;
border-right-width: 1px;
border-top-style: solid;
border-left-style: solid;
border-bottom-style: solid;
border-right-style: solid;
border-top-color: #ccc;
border-bottom-color: #ccc;
border-left-color: #ccc;
border-right-color: #ccc;
background-image: url(images/a30.png);
background-repeat: repeat;
}

.snsbox div ul {
position:relative;
left:50%;
float:left;
}
[/css]

 

すると以下のように変わりました。
hatena010
これでブログ外観を損ねる事がなく、記事やフッターも読めると思
います。