Pages


2016-09-10

使用中のブログパーツなんか紹介しちゃうよ ~Bloggerだけでなく、はてブロとかFC2とかlivedoorなんかで使えるのもあるんです~

お気付きの方もいらっしゃることと思いますが、ここ最近、ブログのデザインを変えておりまして。
で、ようやく自分の思っているものに、概ねなったわけですが。
jQueryやらJavaScriptやらといったものはおろか、HTMLやらCSSやらまでさっぱりの世界の住人だったので、連日、残業上がりの夜中に数時間かけてやっておりました(苦笑)

で、そんな中で色々な外部サービスを知ったり、親切な方のTipsをお借りしたりして、なんとか形になったというところです。

そんなこんなでBloggerのみならず、はてなブログやらFC2ブログやlivedoorブログやらでも使えそうな外部サービスもあったので、忘備録を兼ねてご紹介しておきます。


まずは、そんな汎用的な外部サービスからでも書いておきましょうか。


なお、外部サービスについては、これまでの経験から以下の点に重点を置いて選んでみました。
  • サービスの持続可能性
  • 動作の安定性
  • 動作の軽快さ
  • 使いやすさ(UI)
  • 柔軟性(コーディングやスタイルの変更等)
特に、サービスの持続可能性動作の安定性については最重要視しています。
実は、以前使っていた新着記事や関連記事用のサービス「Smarter Related Posts Widget for Google Blogger - v2.0」が、ある日突然使えなくなりまして。
そのサービス自体はまだあるのですが、私のブログで作動しなくなったんですよね。

そんなわけで、上の5つの観点から私なりにこれは使えそうだなって思える汎用的な外部サービスをチョイスしたので、ご紹介します。


【汎用外部サービス】

■最新記事
日本語対応のRSS表示用ブログパーツ。
当ブログでも、サイドバー最下段に使っています。

デザインなども含めて簡単に上記WEBサイト上で作成でき、分かりやすくて設置も簡単という点が非常にいいです。
最初の読み込みは少々時間がかかるものの、動作も軽く、安定性もあります。
何より、全世界で使われ2016年8月に6億6100万PVもあったことが、事業の持続可能性という点で安心できます。

ただ残念なのが、縦長スタイルありき(縦スクロールのみ)だということ。
これを横長スタイル(横スクロール)も選べたらいいのにな~って思います。
もっとも、コーディングできる方はできるのかもしれませんけど。。…私には無理(笑)


■SNSシェアボタン
○忍者おまとめボタン (http://www.ninja.co.jp/omatome/)
このブログでは、モバイル表示のみに設置してあります。
場所は記事の上と下で、レスポンシブなボーダーデザインにしてあるものです。

で、ご覧の通りこれは日本のサービス。
そんな安心感はありますが、実際に動作も安定しており、かつ軽快さもあります。
しかも、各ブログサービスへの設置方法までしっかり記述してあるため、非常にわかりやすいです(もちろん日本語)。
また、各ボタンでシェアされた数の分析(アナリティクス)もあるので、効果測定もできたりします。


○AddThis (https://www.addthis.com/)
このブログでは、右側に固定&追尾するサイドバー(PC表示のみ)と、最下段のフッターに個別ボタンにして配置しています。
これぞレスポンシブといったデザイン&動作で、非常にカッコよくて気に入っているものです。
有料サービスもありますが、無料でも必要十二分の機能とカッコよさがありますので、私は一生無料で行くつもりです(笑)

このAddThis、日本でいうところのはてなブックマークのような存在ですが、その規模は世界レベル。しかも、あのオラクルの子会社(関連会社?)なので、持続可能性の点でもほぼほぼ間違いないレベルかなと。
また、設置後少ししてから作動しなくなったことがあったのですが、AddThisにサポートを求めたら何度かのやり取りの後、ほんの数時間で解決してくれました。

こういう海外のサービスを使っていると、やはり語学力って大切だなって思いますね。
一応今回はほとんど自分でメールの文章を書いて、一部翻訳ソフトで訂正したのですが、3~4行程度の文章を書くのに30分以上もかかってしまっていました。
もっともっと英語学習も頑張らないとダメですね。

AddThisの導入方法などの詳細はこちらです。
https://b8a4avtof30320dmspo.blogspot.jp/2016/09/3snsaddthis.html


■Adsense(レスポンシブ・レクタングル広告にする方法)
○アフィリエイトZONE (http://afi-zone.com/adsense/)
ツールと言うわけじゃありませんが。
アドセンスにはレスポンシブ広告と言うものがあって、閲覧しているデバイスに応じて様々な形状の広告を自動で選んでくれます。
ただこのレスポンシブ広告、PCなどでは横長をチョイスすることが多くて、その横長だといまいちクリック率が上がらなかったりします(しっかり測っていないけど)。

そこで、レスポンシブはレスポンシブなんだけど、レクタングル(正方形に近い長方形)のみをチョイスするやり方ってないのかな~って調べているときに見つけたのがこちらでした。
この方法ですと、CSSを触るわけではないのでレイアウトやデザイン崩れにもならず、かつ簡単です。
目から鱗とはまさにこのこと。


・・・と、ここまでが他のブログサービスでも使える汎用向けなお話し。
いずれもハウツー的な記事は日本語でも多々あるので、気になる方は適当にググってくださいませ。
私なんかよりよっぽど上手に丁寧に解説されている記事、たぶんいっぱいあると思いますよ。

あ、そうそう。
何個かボツになったのがあったので、そのサービスと理由もいずれ書こうと思います。


で。
ここから先は、Blogger専門のTipsになるのですが。
かな~~~り長くなることが見込まれるので、触りの紹介だけにして次回以降のネタにします。


【Blogger専門Tips】

■関連記事の表示方法
 ⇒このブログの記事の下に出る『RELATED POSTS:』の見出しのあれです。リンク先は完全に英語だらけなので、また別記事で紹介&詳解します。


■トップに戻るボタン
○Crawlist (Easily add Smooth 'Scroll To Top' button in Blogger)
 ⇒ちょっと下にスクロールすると右下に出る矢印なあれです。押すと最上段に戻れる便利なヤツです。ちなみにこのCrawlistというWEBサイト、なかなかのフィッシングサイトっぷりで危険度が高いのでリンクは貼れません。ゆえに、これまた別記事で紹介&詳解することにします。

トップに戻るボタンの設置方法などの詳細はこちらです。
http://b8a4avtof30320dmspo.blogspot.com/2016/09/blogger-tipscss_12.html


■サイドバーにあるガジェットの追尾
 ⇒最新記事の表示に使っているRSSツール『FeedWind』に使っている小技。ある一定のところまで画面をしたスクロールすると、以降、追尾して右上に居座ってくれます。ちょいちょい数値を変えてコーディングしたんで、これもまたまた別記事で紹介&詳解します。


■カテゴリー一覧のプルダウン化
⇒カテゴリー一覧をすっきりさせたくて導入しました。本当、書いてあることそのままやったのみで楽ちんでした。なので、別記事は要らないかな~って思いますので書きません。実はほとんどの読者の方が使っていないカテゴリー一覧、私が一番使っていたりします。過去記事の確認をするのに、ラベルから追うと分かりやすいんですよね~。ちなみに、カテゴリー一覧はPCのみの表示にしてあります。


と、まあこんな感じです。
何か、しばらくこれでネタに困らなそうですね(笑)

というわけで、あれこれまた次回以降に書こうと思います。


んでは!





0 件のコメント :

コメントを投稿