Bloggerの弱点の一つ。それは、関連記事などを自由にカスタマイズ出来ないこと。WordPressではプラグインが豊富にありますが、BloggerではWordPressみたいになかなかプラグインに似たウィジェットがありません。
そんなお困りのあなたに超オススメなBloggerのウィジェットたち！WordPress並みなクオリティーで、Bloggerを使う事が出来ます。たとえば、このJapaNEOみたいにね(笑)
それでは、あったら便利なBloggerのウィジェットたちをご紹介して行きましょう！
各投稿の更新日時の表示方法
更新日時の表示って、意外に重要ですよね？大分昔に書いた記事でも、最近更新した記事であれば、「最新記事」として扱ってくれたりするので、この更新日時機能はあった方がいい！また、Googleでも更新日時の方を検索したタイトル下に表示してくれるので、SEO対策にもなります。
しかし、そんな機能はWordPressでは見かけても、Bloggerでは・・・、と思っていませんか？そんなお悩みに答えてくれるブロガーさんを見つけました！
Blogger：レイアウト編集(9)各投稿の更新日時の表示をする（成功編）
Bloggerカレンダー、LibreOfficeマクロ、Python,linuxBean
このブロガーさんは、おそらくプログラマーの方なんでしょうが、独学でこの更新日時機能を編み出しております。海外ブログでもどこでも、この更新日時機能はBloggerにはありませんでした。それを、この方は失敗を重ねながら、各投稿の更新日時を表示させる事に成功したのです！
もう、HTMLとCSSしか分かっていないひもくみからしたら感謝と感動、そして尊敬しかありません。勝手に使用させて貰っていますが、この場を借りて感謝を述べます。本当に、Bloggerに更新日時機能を作ってくれてありがとうございます！
Bloggerで目次を設置する方法
目次設置の最も簡単な方法は、こちらで紹介されているやり方でしょう。</head>の上にコードを挿入するだけで良いので、初心者の方でも楽に設置する事が出来ると思います！
人気のあるBloggerブログの作り方: Bloggerで目次と見出し番号を自動生成させるカスタマイズ方法
Simplify Responsive Blogger Template
パンくずリストの設置方法
Bloggerのパンくずリストって、構造化データ対応が出来ていなかったり、ラベルが増えてパンくずの順序を変えたい場合でも、ラベル頻度順でなく、アルファベット順になってしまったり・・・。
Bloggerでパンくずリストを作ろうにも、あまりに情報が少ないので、全部希望の叶うパンくずリストを諦めた人も多いのではないでしょうか？
しかしですね、その希望を何と全て叶えてくれたBloggerさんがいます！ざっくりログさんの『Blogger パンくずリスト（構造化データ対応）の作成』です！
このざっくりログさんの通りに作業をすれば、構造化データに対応したパンくずリストが出来上がるのですが、私の場合に一つ注意しなければならないことがありました。
それが、<b:include data='posts' name='breadcrumb'/> を、<b:include name="status-message" data="top"> の前に挿入するのではなく、 <b:if cond="!data:mobile">の前に挿入しなければならなかったことです。このタグの意味は、モバイル版でも表示できるという意味なのですが、おそらくJapaNEOブログがウェブ・モバイル版と関係のないテンプレートを使用しているから起きた問題だと思います。
さらに、ざっくりログさんの凄いところは、ラベルの頻度順によるパンくずリストのJavaScriptを開発したことです。『Blogger ラベル頻度順パンくずリスト』で紹介されていますが、構造化データ対応のパンくずリストが出来上がった後に、このラベル頻度順パンくずリストの為のJavaScriptを追加してみて下さい！
Add Thisマーケティングを活用
「Add This」を使用しているブロガーさんも多いのではないでしょうか？Add Thisとの出逢いは、私ひもくみがBloggerを純粋に使っていた時の頃。その当時は、まだHTMLやCSSの事なんか知らずに、「簡単にブログへ便利ツールを追加出来ないか？」と悩んでいた時期でした。その時に、色々海外ブロガーの人達が使用しているシェアボタンを見て、その企業名の入ったシェアボタンに飛んでみたのがきっかけ。そう、それが「Add This」。
あまりの簡単な設置作業に、当時はただただ驚いたものでした。また、最近ではAdd Thisの改良も素晴らしく、コードの貼り付け場所を丁寧に教えてくれたり、シェアボタンのデザインを選べたり出来ます。会員登録してログインすると、2つのカテゴリに分けられています。一つは、「ツール」。もう一つは、「分析」です。
「ツール」には、
- Share Buttons（共有ボタン）
- Folllow Buttons（フォローボタン）
- Related Posts（関連記事）
- List Building（メールマガジン）
- Link Promotion（リンクプロモーション）
- Website Tip Jar（寄付金用ボタン）
があります。ここで、あなたが自分のサイトに追加したいボタンやバナー等を選択す事が出来るのです。JapaNEOでは、シェアボタンを活用させて頂いております。「分析」には、
- 訪問アクティビティ・・・参照ドメイン、ダイレクト、ソーシャルソースの訪問数と割合を知る事が出来ます。
- トップコンテンツ・・・あなたのブログの上位記事を知る事が出来ます。
- トップ参照ドメイン・・・GoogleやYahoo!など、どこから流入して来たのかランキング形式で分かります。
- トップソーシャルソース・・・FacebookやTwitter等のSNS経由の数をランキング形式で知る事が出来ます。
- トップキャンペーン・・・やってないので、分かりません。すみません！
- デバイスとプラットフォーム・・・デスクトップやモバイル等の流入数を知る事が出来ます。
Add Thisの便利なところは、ある一定数以上の流入がいきなりあった場合、Add Thisからメールで知らせてくれるのです。JapaNEOでは残念ながら、SNS経由でのシェアはそんなに無く、オーガニック検索からばかりですが、SNSからの流入がどれだけあるかを知れたり、バズった時に知らせてくれるメール通知は、結構役に立ちますよ！
上（トップ）へ戻るボタン
記事が長くなると、あった方が便利なアイテム。それが、トップに戻る↑（矢印）ボタン。「上へ戻るボタン」は、Bloggerのガジェットを使用する事が出来ます。ガジェットというのは、コードを使わずに人気投稿などの機能をBloggerの「レイアウト」画面で追加する事が出来るというもの。ガジェットの追加方法は、
- Blogger にログインします。
- 更新するブログを選択します。
- 左側のメニューで [レイアウト] をクリックします。
- ガジェットを追加するセクションで、[ガジェットを追加] をクリックします。
- 開いたウィンドウで追加するガジェットを選び、追加アイコン 追加 をクリックします。
- 左下の [保存] をクリックします。
- 省略可: ガジェットの設定を変更するには、編集アイコン 編集 をクリックします。
（Bloggerヘルプより引用）
となります。今回はガジェットの「HTML/JavaScript」を追加します。まずは、「HTMLの編集」より「Ctrl + F」で<head>タグを検索してください。そして、その下に
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
をコピペして保存します。その後に、左側のメニューで「レイアウト」→「ガジェットを追加」→「HTML/JavaScript」を追加を選びます。そして、そこにこのコードをコピペします。
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color: rgba(235, 235, 235, 0.80);
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="自分の好きな画像のURL" alt="Back to Top" / ></a>
ここで注意なのが、"自分の好きな画像のURL"には、Blogger内にある画像のURLか、今回翻訳させてもらったサイトさん、
How To Add Back To Top Button In Blogger
How To Add Back To Top Button In Blogger with pictures Insert Back To Top Link Back To Top button
の中に出てくる矢印のアイコン画像のURLをコピペして貼り付ける事が出来ます。上手く貼り付けられると、このようになります。
ここで注意なのが、タイトルには何も入れないこと！ガジェットとして何か新しいコードを入れたい時にタイトルを入れてしまうと、おかしな所で文字が入ってしまうので、注意して下さいね。
ガジェットの使用以外にも、HTML編集で付け足せる「上へ戻るボタン」もあるので、そちらもご紹介しますね！
Free Scroll to Top Buttons
Our Free Scroll to top Buttons allow your website visitors to easily scroll back to the top of the page.
ここのサイトさんが、比較的様々な種類のアイコンを用意してくれているかな。これも、</body>というコードの前にアイコンの右に書かれてあるコードをコピペするだけ。それだけで、あなたのスタイルに合わせた「戻るボタン」が仕上がります。
検索窓のデザイン変更方法
大体検索窓にデザインを施すとなると、コードではなく画像で作られたものがほとんどでした。しかし、個人的にはコードデザインされている方が好きなので、CSSデザインされている検索窓をご紹介したいと思います！
5+ Blogger Search Box Widgets: Stylish Search Boxes [Bootstrap Style]
Add blogger search box widget to improve the user experience. Pick any stylish search box for Blogger from this list to let your readers navigate easily.
こちらは、幅も自由自在に変形してくれ、設置も本当に楽々でした。5つのシンプルな似たデザインしかありませんが、ガジェットの「HTML/JavaScript」を追加で、検索窓のコードをコピペすれば完了です。
5 Stylish Search Boxes For Blogger (with Demo)
Step by Step Instructions (With Pictures, Demo and Video) for Adding a Beautiful Custom Stylish Search Box Widget in Blogger.
お次のサイトも、5つのサーチボックスしかありません。ですが、デザインがそれぞれ全く違ったものなので、ブログデザインにこだわりのある人はお使い下さいませ。幅は、サイドバーとモバイル幅くらいの大きさです。もし変更したければ、中の"width"の大きさを変更しなければいけませんが、検索窓と検索ボタンのデザインが別々なので、それを合わせるのが大変かもしれませんね。
デザイン変更可能な9種類の関連記事
関連記事機能は、今まで色々なものを試して来ましたが、最終的にはこちらの関連記事を参考にさせて頂きました！
Customizable Related Posts Widget for Blogger
We already posted a few tutorials on how to add related posts widget with thumbnails in Blogger with summaries or only titles, which can be...
こちらのサイトさんは英語ですが、結構画像などを使用して説明されているので、分かり易いかなぁ、と。この関連記事を使用すれば、Bloggerのラベル内の記事を結構ランダムに載せてくれます。関連記事のウィジェットって、意外にも関連してない事が多いんです。例えばLinkWithinとかね。
また、この関連記事ウィジェットの凄いところは、なんと9種類のスタイルを選べるところ！
その9種類とは、
- ポストタイトルのみを表示するシンプルな関連記事ウィジェット
- 投稿タイトルと説明文を表示する
- 投稿のサムネイル画像、投稿タイトル、説明文を表示する
- 関連記事のサムネイル画像、投稿タイトル、投稿日を表示する（デフォルトで表示）
- 関連記事のサムネイル画像と投稿タイトルを表示する
- サムネイル画像をサムネイル画像の真正面に表示する
- サムネイル画像のみを表示する
- 右側に投稿タイトルと右下に日付が付いた小さなサムネイル画像
- 投稿タイトルのある小さなサムネイル画像と右側に説明文
おすすめのタイプは、5と6です！Helploggerさんでは、自分たちで変更できるコードをわざわざ赤色にしています。たとえば、大きさを変えたければ「width」のパーセンテージ(%)を変えれば良いのです。あなた独自の関連記事スタイルを生み出せるので、かなりおすすめなウィジェットです！
最新・ランダム記事を簡単に設置
最新・ランダム記事も、ウィジェットとしてBloggerサイトに導入する事が出来ます。
Blogger Random – Recent – Specific Label Posts Widget – All in One Post Feed Widget
Recent posts or random posts widget from all labels or specific label is now available for you Blogger Blogspot. Just check your favorite
ここで紹介されているウィジェットは、超おすすめです！なぜなら、設置が本当に簡単なんです。
この2通り（リストとコラム）からスタイルを選べます。Widget Optionsで、自分の表示したいオプションを選択していきます。タイトルだけなのか、その少し記事内の説明も欲しいのか。そういう選択が出来ます。そして、チェックし終えたら、自分のブログのURLを載せて、「ADD WIDGET」に移ります。
そうすれば、自分の表示させたいブログをまた選ぶ欄があり、 タイトルもここで変更出来ます。その後に、「 ウィジェットを追加」を押すと、あなたのブログにこの最新、またはランダムウィジェットが追加されています。
ひもくみの場合、何故かウィジェット追加がボタン一つで出来なかったので、「コンテンツを編集」をクリックして、コードをガジェットの「HTML/JavaScript」に貼り付けました。
お問い合わせフォームの個別ページ
またまた、Helploggerさんからの紹介です！お問い合わせ用のガジェットはBloggerにはあるのですが、「企業ページみたいに、独立したお問い合わせページを作りたい！」という方には最適なウィジェットです。
5 Best Custom Blogger Contact Form Widgets
In the past, adding a custom contact form for Blogger was quite a complex process, and many bloggers were forced to use third party websites...
こちらの記事も、画像と共にかなり詳しく解説されているので、自分のサイトに合ったスタイルを選んで問い合わせページを作成してみましょう！ちなみに、JapaNEOの場合は、元々無料テンプレートに問い合わせ用のデザインが施されていたので、そちらを採用しました。
あまりにも、Bloggerのウィジェットに関する情報が少ないので、テンプレートをカスタマイズするのにも苦労しますよね。しかし、苦労あってこそ、自分の思い通りのサイトが出来上がった時の喜びは人一倍です！
勝手に紹介させて頂いたウィジェットたちですが、情報を発信してくれているブロガー・プログラマーさん、本当にありがとうございました！少なくとも、今回紹介したウィジェットを使えば、JapaNEOブログの装備しているウィジェットたちは揃うはず（笑）
ぜひ、あなたのBloggerブログでも試してみて下さい。他にも、Bloggerに関してこんな記事を書いています！
Blogger無料おしゃれテンプレートの劇的カスタマイズ方法 - JapaNEO
Bloggerのダサいテンプレートをオシャレにカスタマイズする方法をお教えします。もちろん、無料でおしゃれテンプレに変更出来ますよ！
無料Bloggerテンプレートのデザインカスタマイズ方法 - JapaNEO
Bloggerテンプレートをアップロードしたけど、文字の編集方法やデザインの変更方法が分からない！そんな人に、HTML・CSSのコードが、よく分からなくても編集できる方法を書いています。
良ければ、チェックしてみて下さい。
0 コメント