はてなブックマークの変更と追尾型ＳＮＳを縦型表示
stinger3で記事内にある「はてなブックマーク」のＳＮＳボタンの
変更と追尾型ＳＮＳを縦型表示にするやり方を紹介します。
以下記事はワードプレス(WP)や、テーマのstinger3をカスタマイズ
したやり方等を忘れないために書き留めた備忘録です。
記事内にソースコードを表記してる箇所は、ダブルクリックすると
ソースコードが全選択されるので、コピーして使えます。
尚、修正したソースコードは、必ずＦＴＰソフトを使ってサーバー
にアップ。または各サーバーのオプション（ファイルマネージ
ャー）等（例はさくらサーバーです）で編集してください。
バックアップは忘れずに！！！
ワードプレスでstinger3を使用する場合、記事内にあるＳＮＳボタ
ンがありますが「はてなブックマーク」だけデザインが違うのは気
になりませんか？
はてなブックマークボタンのデザインを変更して他のSNSボタンと
見た目をそろえる
を以下のように変更する。
はてなブックマーク作成
以下のサイトへアクセスします。
１．ボタンのタイプを選びます。
２．ボタンの設定をします。
上記画像にある「ページのアドレス」欄に「aaaaaaa」を入力しま
す。
次に「ぺーじのタイトル」欄に「bbbbbbbb」を入力します。
次にブックマーク数欄を表示（バーティカル）に変更します。
以下のようになったのを確認してください。
３．ボタンを確認します。
確認が終わったら、コードをコピーします。
ＰＣ内にあるメモ帳やテキストエディタ等に貼り付けます。
そのコードを一部変更します。
ボタンの設定の時に「aaaaaaa」と入力しましたので、コード内に
書いてある「aaaaaaa」を探して消します。
そこに以下のコードをコピーして貼り付けをします。
[css]
<?php the_permalink(); ?>
[/css]
次に同じコード内に書いてある「bbbbbbbb」を探して消します。
そこに以下のコードをコピーして貼り付けをします。
[css]
<?php the_title(); ?>
[/css]
終わったらコードを全て選択してからコピーしてください。
４．ワードプレスのＳＮＳ．ｐｈｐを書き換えます
stinger3のテーマ編集内の「ＳＮＳ．ｐｈｐ」をクリックします。
すると中ほどにはてなブックマーク用のコードが書かれているとこ
ろがあると思います。
<li>・・・・・hatena・・・・・・・・</li>
を消して先ほどコピーしておいたコードを貼り付けます。
コードの変更は自己責任でお願いいたします。
“ファイルを更新”ボタンをクリックします。
ブログを再更新してみてください。
以下のように変わっているはずです。
追尾型のＳＮＳの表示を縦型表示に変更
従来の追尾型のＳＮＳ表示では、記事やフッターに被って読みづら
い時がありました。
なので追尾型ＳＮＳ表示を縦から横型に変更しました。
ＣＳＳに以下のコードを追記しました。
[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]
すると以下のように変わりました。
これでブログ外観を損ねる事がなく、記事やフッターも読めると思
います。
コメント