Bloggerを便利に利用する方法 Tipsまとめ

      2016/03/16



実際にBlogを書くときの作業効率UPと記事の見栄えを良くする方法など、Google Bloggerだけではなく、便利なブックマークレットを利用してUsabilityを上げるTipsなど紹介しますので参考にして頂ければ幸いです。


Twitterのツイートをブログなどに埋め込む「BlackBird bookmarklet」


Real-time curation » Blog Archive » Blackbird bookmarklet: publish a tweet in html



Twitterの個別Tweetページで、こちらのブックマークレットを利用すると背景から内容、TwitterのIDまで綺麗にブログに貼り付けることができます。

しかし読み出しているAPIに問題があり、最近のTweetで実行するとPost URLの末尾の2ケタが四捨五入され正しくコピーされない状態でした。

また、Tweetした内容部分のLinkは「target="_new"」が追加されるので、クリックした時に新しいタブで開くようになっていますが、「Twitter ID」「timestamp(日時)」「source(via ○○)」の部分は「target属性」は無く、ページがそのまま開くようになっており記事の外部リンクとしては今ひとつな感がありました。

日時についても、アメリカのサービスのためタイムゾーンが日本のGMTとズレて表示される問題がありました。

そこで、+Takehiro Takahashi 氏の協力のもと新しくブックマークレットを修正いたしました。

下記Linkをブックマークバーにドラッグ&ドロップしてください。


使用方法は、個別のTweetページでブックマークレットを実行するとHTMLタグが生成されます。

Sample 元のブックマークレットを使用したもの

Sorry for the long wait. Blog updated at http://t.co/i9c8VjbDSun Nov 27 09:00:56 via web



BlackBird JPを使用したもの

Sorry for the long wait. Blog updated at http://t.co/i9c8VjbD2011年11月27日 18:00 via web


Going to the UK vs. Portland game tonight. Blogpost also coming later tonight on greenpois0n.com2011年11月27日 8:13 via Twitter for iPhone



Link先を見ると、Chronic-Dev teamが発見したiOS 5の5つのUserland Exploitは発表したのが早すぎたのか、5.0.1でAppleに塞がれてしまったようです。今のところMac用のみですが、JailbreakerはこちらからiOS クラッシュレポートツールをDownloadして協力してあげましょう。



このような形で使用することができます。WordPressの「Blackbird Pie」というサービスが終了して「BlackBird bookmarklet」を利用するようになった方は、そのまま使用されてるかと思いますので、正しいURLとなるこちらをShareして広めてもらえるよう協力お願いします。

ブログやサイトのリンクをサムネイル付きで表示させるブックマークレット


ShareHtmlとFocusHtmlもリニューアルしました♪ | 普通のサラリーマンのiPhone日記
ShareHtmlはお気に入りのサイトのブログで紹介する為のBookmarklet、FocusHtmlはGoogleリーダーの共有メモを一括でブログで紹介する為のBookmarkletです。


ウェブページのサムネイル画像を作成するサービス『HeartRails Capture』を利用して、上記のような綺麗で分かりやすいLinkを作成してくれるサービス『ShareHtml』です。

文字だけでは目立たないLinkも、サムネイルとちょっとした説明文があることで( ̄ー ̄)bグッ!っと見やすくなりますね。好みのスタイルにカスタマイズできるので、Link先を参考に『ShareHtmlメーカー』でブックマークレットを作成しておくと便利です!

Google IMEなどの単語登録を利用して、よく使うタグを登録しておく


ブログを書くときの時間短縮とタイプミス防止のテクニックとして、単語登録を有効活用する方法がお勧めです。
<a href="" target="_blank"></a>
<span style=""></span>
<p style="text-align:center;"></p>
<div id=""></div>
<blockquote></blockquote> ...etc
自分がよく使う構文、例えば「あhr」で「<a href="" target="_blank"></a>」変換できるようにしておくと作業が捗ります。

Firefoxのアドオンを利用して作業を効率化する


Blogを書くときのツールはユーザーにより変わってくるかと思いますが、ぼくの場合「Firefox」を普段利用しています。

実際にBlogを書く上で使っているアドオンは2つだけです。

Make Link | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト
コンテキスト (右クリック) メニューから、HTML、Wiki 記法、あるいはプレーンテキストなどの形式で、リンクをクリップボードへコピーできるようにします。独自のリンク形式を作成することも可能です。


参考:使用しているショートカット
アンカータグの作成
<a href="%url%">%text%</a>
アンカータグにtarget="_blank"を付ける
<a href="%url%" target="_blank">%text%</a>
アンカータグにtarget="_blank"を付けListタグで囲む
<li><a href="%URL%" target="_blank">%text%</a></li>
アンカータグ(target="_blank")にはてブ数追加
<a href="%url%" target="_blank">%text%</a>&nbsp;<a href="http://b.hatena.ne.jp/entry/%URL%"><img src="http://b.hatena.ne.jp/entry/image/%url%"></a>
画像imgタグの作成
<img src="%url%">
imgタグで75pxに指定
<img src="%url%" width="75" height="75">

Rainbow Color Tools :: Add-ons for Firefox
ブラウザ上の表示色を調べてくれるColorPicker


StatusBarに虹のアイコンが追加され、クリックした時にブラウザ上の色を調べることができる。

参考Link:Mozilla Re-Mix: ウェブページの色を抽出・分析できるFirefoxアドオン「Rainbow」

モバイル用テンプレートをカスタマイズしてスマートフォンでの視認性を上げる


設定>メールとモバイル>モバイル テンプレートを選択から「カスタム」を選択
(新しいデザインの場合:テンプレート>「モバイル」の歯車をクリックして「カスタム」)

PC用テンプレートをできるだけ引き継いだモバイルテンプレートが作成されます。

本文に記述したJavascriptも適用されるので、SNSボタンやSyntaxhighlighterなど好みのページ構成を作成することができます。また、HTMLの編集で「mobile='yes'」とすることで、ウィジェットも表示させることができます。

「ブログアーカイブ」ウィジェットをモバイルテンプレートに表示する例
<b:widget id='BlogArchive1' mobile='yes' title='Blog Archive' type='BlogArchive'>

他に「.mobile」とすることで、モバイル用のCSSも調整することができるようになりました。

画像は「width」を指定することにより自動的に縮小されていましたが、Youtubeやtableなどは指定した大きさの幅になっていたため、モバイル環境で閲覧する際に横にはみ出した状態で見栄えが悪くなってしまうという問題がありました。

そこで「.mobile」を使用しCSSで調整することで、画面内に収まった表示が可能となりました。
.mobile table, .mobile iframe{
height:auto !important;
width:auto !important;
}
他に表示させたくないものや、backgroundの表示などを見やすく調整することができます。

Kuriboさんが詳しく解説されているので、参考にして下さい。

クリボウの Blogger Tips: モバイルテンプレートもカスタマイズ可能に

iPhone や Android 端末からブログにアクセスしたときに表示されるテンプレートのことですが、今回新たにこちらもカスタマイズ可能になりました。 ...


個別ページから前後の記事への表示をタイトル名に変更する


通常は「次の投稿」「前の投稿」といった表示で、クリックして開いてみないと前後の記事が何か分かりません。

もし、気になる記事タイトルが表記されていれば、ユーザビリティUPと共に直帰率改善にもつながると考えられます。そこで、zerippeさんの作成したjQueryプラグイン 「bLinker」を使用するとリンク先の記事タイトルを表示させるようにすることができます。

リンク先の記事タイトルを自動挿入するjQueryプラグイン "bLinker" : とある変人の超備忘録
リンク先の記事タイトルを自動挿入するjQueryプラグイン "bLinker" ...

設置方法はリンク先にて説明されていますが、アレンジを加えてみたので簡単に紹介します。

1.デザイン>HTML の編集から <head> タグ内にjQueryを読み込むCodeを追加
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>

2.『bLinker v1.0』こちらからプラグインをDownloadして外部ファイルとして置く

<head> タグ内にbLinkerを読み込むCodeを追加
<script src="(ファイルのURL)/blinker.js"></script>

3.ウィジェットのテンプレートを展開にチェックし、以下のように変更する

「Ctrl+F」で「b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'」を検索

この部分を変更します。
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'>
<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

  </div>
  <div class='clear'/>
</b:includable>
"a"要素に"blinker"クラスを追加し、bLinkerをロードするコードを追加
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'>
<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blinker blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blinker blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

<script>$(function(){$.blinker().load();});</script>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

  </div>
  <div class='clear'/>
</b:includable>
該当部分にそのままコピペしてOKです。

4.CSSで表示の調整をする

sample
#blog-pager-newer-link, #blog-pager-older-link {
    background: -moz-linear-gradient(center top , #657E95 0%, #586D84 40%, #586D84 60%, #657E95 100%) repeat scroll 0 0 transparent;
    background: -webkit-gradient(linear, center top, center bottom, color-stop(0%, #657E95), color-stop(40%, #586D84), color-stop(60%, #586D84), color-stop(100%, #657E95)) repeat scroll 0 0 transparent;
    background-color:#586D84;
    border-radius: 3px 3px 3px 3px;
    font-size: 60%;
    padding: 5px;
    height: auto;
    width: 35%;
}
#blog-pager-newer-link a, #blog-pager-older-link a {
    color: #FFFFFF;
    display: block;
    height: 30px;
}
#blog-pager-newer-link:hover, #blog-pager-older-link:hover {
    opacity: 0.8;
    filter:alpha(opacity=80);
    -ms-filter: "alpha( opacity=80 )";
}
#blog-pager-newer-link a:hover, #blog-pager-older-link a:hover {
    text-decoration: none;
}
お好みのスタイルに調整してみてください。

おわりに


ブログは個人の日記的なものであると共に自分自身のデータベースにもなり、その内容が見た人にとって有用なものであれば重要な情報源にもなります。

ホームページなど特定のジャンルに絞ったウェブサイトと違って、時事性の高いものを容易に情報共有できることから、第三者の視点で創り上げていくと自然と読者も集まってくるものと考えています。かと言って、あまりにジャンルがバラバラな記事になってくると全体のコンテンツとしてバランスが崩れてしまうので、その辺りは上手くつながりを持たせていく必要がありますね。

つまり一つの個人的データベースであると共に、第三者から見ても「分かりやすい」「読みやすい」ページの作成を心がけて書くと、後々の自分自身が見た時にも役立つものが出来上がると考えます。

そのためには、他の様々なウェブサイトを参考にすることと過去の記事を見直し悪い部分を改善していくことがポイントになってきます。僕自身まだまだ勉強不足なので、他の方のBlogや企業サイトなど参考にさせて貰っています。

ですが、やはり自分が書きたいと思うものを形にすることが一番大切で楽しいものですね。

という訳で、長くなりますのでこの辺で…少しでも参考にしてもらえれば幸いです。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でWillFeelTipsをフォローしよう!


  関連記事

Push7とIFTTTを使って、はてなブログや未対応サイトの更新をPush通知で受け取る方法

昨日紹介した、Webサイトの更新をiPhoneなどのデバイスでPush通知を受け ...

WordPressなどのブログで自分のサイトがはてブされた時に通知される設定方法

はてなブックマークは、自分のためにブックマークしておくだけではなく、コメント(ブ ...

Feedlyおすすめ拡張機能「Feedly Full Feed」の設定方法

Googleリーダーが無くなった現在、もっとも普及しているRSSフィードサービス ...

Dropbox招待でのプレゼント容量が2倍の500MB最大16GBにUP!

オンラインストレージサービスDropboxの招待を利用したアカウントの作成で、招 ...

feedly高速化TIPSまとめ - 使えるGreasemonkey、userstyle、モバイルSync

2013/07/15にGoogleリーダーのデータ転送ができなくなります。おそら ...

 - Blogger, Web service