| BBS | COMMENT | TRACKBACK | CATEGORY | LINKS | ARCHIVE | GALLERY |
TOTAL PV
ここ最近のブログカスタマイズ
あとで読むはてなブックマーク - ここ最近のブログカスタマイズ | 2016年12月26日(月) | 0 | 0 | 記事編集
ここ最近のブログカスタマイズ
ここ最近、ブログのカスタマイズをぼちぼち行っておりまして。。
(今までも不定期でごにょごにょやってたりしますが…)

その一つ一つの内容に関しては
記事に起こすまでのモンでもなかったんで敢えてしませんでしたが。。
年末ですし…
今年のまとめとして(?)記しておこうと思います(^▽^


SNSコメント数の取得と表示

以前施したカスタマイズでコンパクトになったコメント欄ですが…
タブ切替でコメント欄をコンパクト化 | ひいろんBLOG
コンパクトになったコメント欄
隠れた部分のコメント数が表示されたら確認する手間が省けるのでは?

っつ〜事で

各々のコメント数表示
各々のコメント数を表示させてみました。。

施したカスタマイズ

参考にしたのは下記サイトさんです。
ソーシャルカウントの取得方法まとめ(全9サイト)
【SYNCER | 知識と感動を同期するブログ】
jQueryを使った「はてなブックマーク数」と
「Facebookシェア数」を取得するコードが掲載されてます。

って事で早速導入させていただいたんですけど…
はてなブックマーク数はすんなり表示させられましたが…
Facebookのコメント数がどうにもこうにも反映されないんで
調べてみた所…
どうやらFacebookのAPI仕様変更が原因だったみたいで。。
下記のサイトさんを参考に…
【仕様変更】ブログのFacebookシェアボタンのカウント数が取得出来ない - 時期尚早
コードを書き換えた所。。

Facebookも大丈夫
無事に反映させる事ができました♪
あ、Twitterに関しては基本ツイート数の表示が出来ない仕様になっているそうです。。
(方法はあるみたいですけど…)


パンくずリスト導入

パンくずリスト表示
パンくずリストに関しては以前SereneBachのプラグインを導入済みではありましたが…
【プラグイン】
さんぷらす - パンくずリスト
単にカテゴリー表示をさせる為だけに使ってました。。

これを本来の使い方である「パンくずリスト」として利用してみました。。

施したカスタマイズ

上記プラグインを使って表示される形が
カテゴリー>サブカテゴリー
こんな感じになるので
それを一般的な(?)ul、liを使ったパンくずリストにする為に
下記リンクを参考にプラグインを改造しました。。
サイトのパンくずリストとSerene Bachのパンくずリスト - px*blog
これだけでも充分なんですが…
せっかく弄るなら…ってことで。。

下記サイトを参考にパンくずリストをmicrodataでマークアップしてみました。。
Googleなどの検索エンジンに好かれるパンくずリストの実装の仕方 | KA Partner
んで…
CSSの装飾は下記サイトさんを参考に。。
[CSS]シンプルなHTMLで、美しいパンくずを実装する4つのスタイルシート | コリス
おかげさまで、かなり素敵で機能的なパンくずリストが完成しました(^▽^


カテゴリーリストの差別化

これに関してはかなり個人的な理由で導入した事ですし
本来の目的と違うモノを利用した形になるんで参考にされる方は皆無かと思いますが(爆
簡単に言うと本ブログとパズドラブログで表示されるカテゴリーリストを替えてみました。
【本ブログのカテゴリーリスト】
カテゴリー差別化
こちらは全てのカテゴリーリストが表示されます。。

【パズドラブログのカテゴリーリスト】
パズドラブログのカテゴリー欄
パズドラブログって事で、パズドラ関連カテゴリー以外は表示されない仕様になってます。。

施したカスタマイズ

カテゴリーのプルダウン化プラグインを導入する事で
リストにclass付けがされるので個別に表示を消してます。。
プラグインと参考記事
カテゴリーのプルダウン化プラグイン for Serene Bach: 小粋空間
プルダウン化プラグインで特定のカテゴリーだけをプルダウン化するカスタマイズ: 小粋空間
かなりニッチで反則的な使い方なんですけど…
個人的には満足できる仕様になりました♪


記事を読むのにかかる時間表示

他所のブログで良く見かける記事を読む所要時間…
読む人や記事によって所要時間なんて様々なんでしょうけど。。
記事の先頭に記述する事でブログ来訪者に
ある程度の記事ボリュームを知ってもらうのは悪い事ではないな。。
って事で調べてみると
Wordpressにはプラグインがあるみたいですね。。
もちろんSereneBachみたいにマニアック(失礼…汗)なツールに
そんなプラグインがあるはずもなく…汗
どうしたモンかと思ってましたが。。

施したカスタマイズ

下記サイトさんにjQueryを使って所要時間表示させるコードが載ってたので
参考にさせていただきました♪
Seesaaブログに「記事を読むのにかかる時間」をつけてみた: boKUma
Seesaaブログ用に書かれたコードですが
jQueryが動く環境であればどんなサイトでも使えます(^▽^

っつ〜事で。。

記事読破所要時間の表示
無事に所要時間表示させる事ができました♪



まとめ

色々カスタマイズしましたが
基本的に他サイトさんのコードをそのまま使わせていただいた部分が多いので
今回の記事にはコードは載せませんでしたが
参考にしたいので教えてほしい等
ご質問があればコメントいただければお答えできる範囲でお答えしたいと思いますです♪
2016年12月26日(月) 18:14 | ネット > 改造メモ | 0 | 0 | 記事編集
  • コメント[0]
  • Facebookコメント[]
  • はてブコメント[]
  • Twitter[]

まだこの記事へのコメントはありません。

コメントする

icons:

 
トラックバック

まだこの記事へのトラックバックはありません。

ランキング参加中:応援(クリック)よろしくお願いします
  ブログランキング・にほんブログ村へ ブログ王ランキングに参加中! .*:゚(・ω・人)゚:*.
【ネット > 改造メモ】の最新記事
FaceBookページ応援よろしくおねがいします〜(^▽^
Now Loading…
  • SEOブログパーツ
ひいろん
  • 【ひいろん】
  • 性別:おっさん
  • 住所:静岡県
  • 愛車:RX-8