ココログ画面カスタマイズ

ここでやるカスタマイズは、サブタイトル内にhtml（スクリプト）を追加することで実現させています。

ブログのサブタイトル（キャッチフレーズ）：にリンクを入れる

ブログのサブタイトルにはhtmlのタグが使えます。
下記のように、ホームページへのリンクやバナーを貼ってやることも可能です。

＊あのこらのブログのサブタイトル

FaceBookのいいねボタンの設置

facebookいいねボタンの取得

FaceBookプラグインのバージョンは２．０が指定されていますが、２．３に変えても動作しました。

【ボタンの設置スクリプト】

【jqueryの指定】

短いスクリプトで機能が実装できたので、jqueryを使いました。最新バージョン2.1.4で確認しています。
スクリプトの記述の先頭に記載が必要です。

【class="entry-footer-info"の先頭に追加します。】

下記のHTMLソースはある日のあのこらのブログのフッター部分を取り出したものです。
改訂前のブログでは、FaceBooｋのいいねボタンを"entry-footer-share"(tweetボタン）の後ろに追加していましたが、フッターの表示設定でタグが有ったりなかったりするので設定にかかわらず存在する<div class="entry-footer-info"> 要素を使用することに変更します。
「jQuery　各要素の前後にコンテンツを挿入する　before　after　prepend　append」の記事にコンテンツ挿入の為のコマンドの詳しい使い方が記載されています。

ブログではこのように表示されています。

【いいねボタン追加の為のスクリプト】

このスクリプトでは、各記事ごとのＵＲＬが指定されず、あのこらのブログに対してのいいねになります。
記事ごとのＵＲＬを取得して、ボタンに反映してやる必要があります。
画面からは、外れていますが、<a class="permalink" href="http://anocora.cocolog-nifty.com/blog/2015/10/post-237b.html">固定リンク</a>

が記事ごとのＵＲＬを持っているので、ここからＵＲＬを取り出します。
このスクリプトでは、関数$(this)がこの要素の親要素になります。//ページ内に複数のclass="permalink"を持つ要素が有っても、それぞれのURLを取得します。 function () {return $(this).children('.permalink').attr('href'); }

上で貰った、FaceBookのIFRAMEのボタンコードの [ここにURL]の部分が取得できました。
前後のコードを関数化して、取得したURLと連結し、各記事ごとのいいねボタンにして追加してやります。

【サブタイトルの全文】

テキスト形式のサブタイトルの全文はこちらに在ります。

【設置方法】

ココログの管理画面で設定タブを開き、サブタイトルのテキストエリアに、上記のスクリプトを張り付けるだけで動きます。
「変更を保存」をクリックして

「サイトに反映」をクリックし

「反映」をクリックして、終了を待ちます。

【設置の注意事項】

この他にも、いろんな画面カスタマイズや、スクリプト作成の経過をブログの記事にしています。

ココログ記事