せきらら白書～備忘録～

この度、Bloggerブログ移行することになりました。

noreply@blogger.com (Unknown) — Tue, 16 Apr 2013 18:21:00 +0000

この度、
諸事情により、Bloggerブログから移行することになりました。
（同じBloggerブログなんですが(^^ゞ）

これからは、
以下でお願い致します。

せきらら白書～備忘録～

何卒よろしくお願い申し上げます。

これまでの記事等は同じなんですがポリポリ f ^^)

これから更新は上記&下記でしていきます。

『名言集』これまで記事にした名言をページにてまとめました

noreply@blogger.com (Unknown) — Mon, 15 Apr 2013 22:38:00 +0000

これまでに記事に投稿した名言を、
上部ページ内に、
（サイトマップ等がある場所）

『名言集』としてまとめました。

これかも、
数々の名言を投稿していこうと思っております。

次回は名言集2にて、
これまでには記事にしていない名言をまとめていきます。

良ければ偉人の名言に鑑みてください。

Powered by Bloggerを再表示させる方法

noreply@blogger.com (Unknown) — Mon, 15 Apr 2013 21:52:00 +0000

Powered by Bloggerを再表示させる方法

以前カスタマイズで、

Powered by Bloggerを削除する方法

を紹介しました。
削除すると元に戻せない。

というのが、
通説でしたが元に戻せます。

以下コード（テンプレートによって異なるかもしれませんが）を

<!-- outside of the include in order to lock Attribution widget -->
<b:section class='foot' id='footer-3' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
<b:includable id='main'>
<b:if cond='data:feedbackSurveyLink'>
<div class='mobile-survey-link' style='text-align: center;'>
<data:feedbackSurveyLink/>
</div>
</b:if>
<div class='widget-content' style='text-align: center;'>
<b:if cond='data:attribution != &quot;&quot;'>
<data:attribution/>
</b:if>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>

<div class='footer-cap-top cap-top'>

のすぐ下の

</macro:include>

直下に上記コードを挿入すれば、
Powered by Bloggerの
『Attribution widget』は元に戻せます。

なお、2行目の

<b:section class='foot' id='footer-3' showaddelement='no'>

noをyesに。

3行目の

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>

trueをfalseにすれば
レイアウト画面にて移動可能になります。

レイアウト画面にて移動可能表示

以上の様になります。

名言集

noreply@blogger.com (Unknown) — Mon, 15 Apr 2013 21:40:00 +0000

名言集

１、悲しみと苦痛は、やがて「人のために尽くす心」という
美しい花を咲かせる土壌だと考えましょう。
心を優しく持ち、耐え抜くことを学びましょう。
強い心で生きるために
ヘレン・ケラー
　

２、
Tis better to have loved and lost,
Than never to have loved at all.
（愛して失ったほうがいい、ぜんぜん愛さなかったよりも。）
アルフレッド・テニソン
　

３、
愛はお互いを見つめあうことではなく、
ともに同じ方向を見つめることである。
サンテグジュペリ
　

４、
非常に強い悲しみというのは、時間が経つと薄らぐだろう
しかし、失われた者の代わりというのは、絶対に有り得ない。
どんなに心の中にあいた穴を埋めようとしても、
また埋められたと思っても、絶対に、それは最初のものの代わりには
なり得ない。したがって、悲しみが強いのは当然であり、
これは、我々が手放そうとしない、持ち続けていたい、その愛を
続ける唯一の方法なんだ。
フロイト（子供を亡くした友人へ宛てた手紙より）
　

５、
最大の名誉は決して倒れない事ではない。
倒れるたびに起き上がる事である。
孔子
　

６、
現実の人生では、あらゆる偉業は信念に始まり、
信念によって第一歩を踏み出す。
アウグスト・フォン・シュレーゲル（詩人）
　

７、
失敗は一種の教育である。
「思考」とは何であるか知っている人間は、
成功からも失敗からも、非常に多くのことを学ぶ。
ジョン・デューイ（哲学者）
　

８、
苦さの味を知らぬ者は甘さも分からない。
ドイツの格言
　

９、
陽のあたる場所ばかり見ていれば、影は見えません。
ヘレン・ケラー
　

１０、
愚か者は幸福がどこか遠い所にあると思い込んでいる。
利口者は幸福を足もとに育てる。
ジェームズ・オッペンハイム
　

１１、
ものごとをあるがままの姿で受け入れよ。
起こったことを受け入れることが
不幸な結果を克服する第一歩である。
ウィリアム・ジェームズ（心理学者）
　

１２、
本当に幸福になれる者は、人に奉仕する道を探し求め、
ついにそれを見出した者である。
これが私の確信である。
アルベルト・シュヴァイツァー
　

１３、
Ｍｏｒｉｏｒ，ｄｕｍ Oｒｉｏｒ
（私は生まれた時、もう死に始めていた。）
ラテン語の諺（作者不詳）
　

１４、
人間は死刑を宣告されている死刑囚だ。
ただ無期執行猶予なのだ。
ヴィクトル・ユーゴー
　

１５、
生まれ生まれ生まれて生のはじめに暗く
死に死に死に死んで死の終わりに冥し
空海
　

１６、
死を軽蔑するのは勇気の行為である。しかし、
生きることが死ぬことよりいっそう困難な場合は、
あえて生きることが真の勇気である。
サー・トーマス・ブラウン
　

１７、
愚か者よ、愚かなりと思い知らば
すなわちすでに賢きものなり。
愚か者よ、自らを賢きものと思いなさば
これ真の愚か者なり。
（法句経より）
　

１８、
Let every bird sing it's own note.
「どの子にもみんなそれぞれの自慢の歌を歌わせよ･･･」
（イギリスのことわざ）
　

１９、
よりしばしば考えるほど、より長く思うほど、私の心を崇敬と感嘆の念をもって
充たすものが二つある。その一つはわが上なる天上の星、
今一つはわがうちなる道徳律（良心）である。
カント（哲人）
　

２０、
人の教養とは学術などによって身につけたよけいな知識を捨て去るところにある。
ハイゼンベルグ（ノーベル物理学賞受賞者）
　

２１、
賢くなろうとして本や黒板に教えを乞うてはならない。
天と地と林と木の葉とは、本当に子供らを賢くするであろう。
コメニウス（教育学者）
　

２２、
神が人に絶望をあたえるのはその人を殺すためではなくて、
新しい生命を呼び起こすためである。
ヘルマン・ヘッセ
　

２３、
利己心よりめざめ、永遠なるものをつかみ、慈愛に導かれ、
地上のものを手段と解してこれに打ち克つ、
これこそ地上における唯一の幸福な状態である。
カール・ヒルティ
　

２４、
三界は唯一心にあり、心の外に別法なし
（経典名不詳）
　

２５、
死より強いものがあるか、それは死に臨んでほほ笑む人である。
フリードリヒ・リュッケルト（詩人）
　

２６、
Smile,and you will win.
(ほほ笑みなさい。そうすればあなたの勝ちです。)
（西洋のことわざ）
　

２７､
人間は起こることよりも、起こることに対する見解によって
ひどく傷ついてしまう。
モンテーニュ
　

２８、
人間は常に時間が足りないとこぼしながら、
まるで時間が無限にあるかのように、振舞う。
セネカ（詩人哲学者）
　

２９、
「汝の今いる所が汝の世界である・・・」
（アラビアのことわざ）
　

３０、
「人生はどんな場合でも価値がある。」
ヴィクトール・フランクル（実存主義哲学者）
　

３１、
「すべてのものはうつろいゆくおこたらずつとめよ」
（
ヴァヤダンマーサンカーラーアッパマデーナサンパーデートゥ）釈尊
　

３２、
苦痛がどんなに大きかろうが、希望と未来への
手助けは必ずある。ユーモアの感覚がよみがえり、笑いが出はじめたら、
きっと元気が戻ってくる。
アール・グローマン
　

３３、
幸福の扉の一つが閉じる時は、別の一つが開きます。
けれど私たちは閉じたほうばかりながめていて、
こちらに向かって開かれているもう一つの方に
気付かないことが多いのです。
ヘレン・ケラー
　

・

よろしければ、あなたのご存知のすばらしい名言をご紹介下さい。

（メールでも結構ですし、伝言板にお書き頂いても結構です。）

Bloggerブログのフォントをメイリオにする方法

noreply@blogger.com (Unknown) — Sun, 14 Apr 2013 17:51:00 +0000

メイリオフォントは見易く、
目にも優しい。

メイリオフォント

そこで、

Bloggerブログのフォントを簡単にメイリオフォントに変更する方法。

HTMLにても可能だが、
変更箇所が多く存在するので、CSSにて変更した方がいい。

body, textarea { font-family:"meiryo","メイリオ","ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif; }

ヒラギノが好みの方は

body, textarea { font-family: "ヒラギノ角ゴ Pro W3", "meiryo","メイリオ", "ＭＳ Ｐゴシック", sans-serif; }

諦めなかった!! IEでもBlinkerとサイドバーzenbackが表示（もちろんwebkitでもOK(^o-)）

noreply@blogger.com (Unknown) — Sat, 13 Apr 2013 21:59:00 +0000

つい数時間前、

→諦めた!! IEでBlinkerが表示されなくなる&zenbak表示も…。（webkitだと大丈夫なのに）

と記載したが、

やっとできた！！！
(..)(^^)(^。^)(*^o^)(^Ｏ^)ウレシーーー!!

以前の関連記事表示方法を
→関連記事を表示させる方法（Linkwithnなど使わずに）
なんとか絶対に生かしIEでも正常表示されるようにと
必死こいて頑張った甲斐あった！！

「Smarter Related Posts Widget for Google Blogger - v2.0」 &「Linkwithn」
を共に、
このテンプレートにおいて、（間違いなく他のテンプレートでもOK）
記事直下にブラウザによる異表示なしに表示させることに成功！！

忘れないうちに
備忘録！！

記事直下に関連記事表示とSmart&Linkwithn
コード挿入場所

<b:include data='posts' name='related-posts'/>

の直下に以下コードを挿入

 <!-- 関連記事 開始 -->
<b:if cond='data:blog.isMobile'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear: both; margin-top: 0px;'>
<!--~~~~~~~~~~~~~~~~~ Include these JS files once: jQuery then plugin -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src='http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js' type='text/javascript'/>
<!---~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~ required HTML -->
<div class='related-posts-widget'>
&lt;!-- {
 blog_url:&#39;http://sekiraradiary.blogspot.jp/&#39;
 ,tags:[]
 ,related_title:&#39;関連記事&#39;
 ,recent_title:&#39;最近の記事&#39;
 ,thumbs:0
 ,post_page_only:1
} --&gt;
loading..
</div>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
</div>
</b:if>
</b:if>
<!-- 関連記事 終了 -->     
              


<div class='linkwithin_div'/>
               
                <!--  linkwithin code 開始 -->
<b:if cond='data:blog.isMobile'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear: both; float: right; margin-right: 10px;'>
 <script>linkwithin_text=&#39;こちらの記事も読まれています:&#39;</script>
  <script>
var linkwithin_site_id = *******;
</script>
<script src='http://www.linkwithin.com/widget.js'/>
<a href='http://www.linkwithin.com/'><img alt='Related Posts Plugin for WordPress, Blogger...' src='http://www.linkwithin.com/pixel.png' style='border: 0'/></a>
</div>
</b:if>
</b:if>
<!--  linkwithin code 終了 -->

以下jqueryは省いても大丈夫です。
（BLinkerにてjquery1.6.1を使用している為。）

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

というより、
省かないとwebkitにて、
以前のIE現象が発生してしまう。
ので省く。

省いたコード

<!-- 関連記事 開始 -->
<b:if cond='data:blog.isMobile'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear: both; margin-top: 0px;'>
<!--~~~~~~~~~~~~~~~~~ Include these JS files once: jQuery then plugin -->
<script src='http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js' type='text/javascript'/>
<!---~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~ required HTML -->
<div class='related-posts-widget'>
&lt;!-- {
 blog_url:&#39;http://sekiraradiary.blogspot.jp/&#39;
 ,tags:[]
 ,related_title:&#39;関連記事&#39;
 ,recent_title:&#39;最近の記事&#39;
 ,thumbs:0
 ,post_page_only:1
} --&gt;
loading..
</div>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
</div>
</b:if>
</b:if>
<!-- 関連記事 終了 -->     
              


<div class='linkwithin_div'/>
               
                <!--  linkwithin code 開始 -->
<b:if cond='data:blog.isMobile'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear: both; float: right; margin-right: 10px;'>
 <script>linkwithin_text=&#39;こちらの記事も読まれています:&#39;</script>
  <script>
var linkwithin_site_id = *******;
</script>
<script src='http://www.linkwithin.com/widget.js'/>
<a href='http://www.linkwithin.com/'><img alt='Related Posts Plugin for WordPress, Blogger...' src='http://www.linkwithin.com/pixel.png' style='border: 0'/></a>
</div>
</b:if>
</b:if>
<!--  linkwithin code 終了 -->

万事OK☆ъ(*゜ー^)＞パチンッ♪

あとは、
CSSにて
表示サイズ調整のみ。

.related-posts-widget h2 { margin-bottom: 10px !important; }
.related-posts-widget h2, .linkwithin_text { font-size: 16px !important; font-weight: bold !important; }
ul.rpw, ul.linkwithin_textlist { padding: 0 !important; margin: 0 0 0 15px !important; }
ul.rpw li, ul.linkwithin_textlist li { line-height: 1.2em !important; padding: 0 !important; margin-top: 7px !important; margin-bottom: 0px !important; font-weight: bold !important; }

上記CSSを追加していたが、
現在未適用です。

気が向いたら、
再度編集してCSS追加します。

参考までに！

BloggerのHTMLエディタが改善された…と言われても。 | Bloggerぶろっがー（仮）

noreply@blogger.com (Unknown) — Sat, 13 Apr 2013 11:21:00 +0000

私も、前回２回の記事にしました。
１回目
→BloggerブログのテンプレートHTMLの編集画面が変わった！

２回目
→ブロガーバズ：BloggerのテンプレートHTMLエディタの改善

との事ですが、

なんだか以前のHTML編集画面がやっと慣れてきた時に、
いきなりの変更で四苦八苦(・・;)

ウィジェットの展開が無くなり、他の機能が搭載されていますが、
今のところ使いにくい(w＿－; ｳｩ･･

これまでにHTML編集した内容がどこに飛んでいるのか把握しづらい。
把握するのに小一時間、
しかも把握した後に、
どこまでを削除すれば元のHTMLに戻るのかが、
Bloggerブログ初心者の私にとっては確実に把握しきれない。
という痛手を被っている最中でございます。

「('ヘ`;まいったなぁ．．

下手に編集して元に戻らなくなっても困っちゃうし…。

Jean Kamikazeさんも以下に記載されていらっしゃいます。

BloggerのHTMLエディタが改善された…と言われても。 | Bloggerぶろっがー（仮）

諦めた!! IEでBlinkerが表示されなくなる&zenbak表示も…。（webkitだと大丈夫なのに）

noreply@blogger.com (Unknown) — Sat, 13 Apr 2013 02:23:00 +0000

以前、個別ページ下部の
『次の投稿』と『前の投稿』表示を、
記事タイトルを表示させるようにした。

前後記事タイトル表示されている状態

→個別ページの前後記事表示をタイトル名に変更する方法

が、
関連記事等をさらに表示させたく
以下Smarter Related Posts Widget for Google Blogger - v2.0 コードとLinkwithinコードを
現在の関連記事表示されるコードの
</b:includable>上部に挿入するが、
IEにて、以下2点の課題が生じた。

１）個別ページにて前後記事がタイトル表示でなく、『次の投稿』『前の投稿』表示になる。
２）サイドバーのzenbackがなかなか表示されない。

以下Smarter Related Post Widget for BloggerコードとLinkwithinコード。
（一部改変済み）

  <!-- 関連記事 開始 -->
<b:if cond='data:blog.isMobile'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear: both; margin-top: 0px;'>
<!--~~~~~~~~~~~~~~~~~ Include these JS files once: jQuery then plugin -->
<script src='http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js' type='text/javascript'/>
<!---~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~ required HTML -->
<div class='related-posts-widget'>
&lt;!-- {
 blog_url:&#39;http://sekiraradiary.blogspot.jp/&#39;
 ,tags:[]
 ,related_title:&#39;関連記事&#39;
 ,recent_title:&#39;最近の記事&#39;
 ,thumbs:0
 ,post_page_only:1
} --&gt;
loading..
</div>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
</div>
</b:if>
</b:if>
<!-- 関連記事 終了 -->     
              

<div class='linkwithin_div'/>
              
                <!--  linkwithin code 開始 -->
<b:if cond='data:blog.isMobile'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear: both; float: right; margin-right: 10px;'>
&lt;script&gt;
var linkwithin_site_id = *******;
var linkwithin_text=&#39;こちらの記事も読まれています&#39;;
&lt;/script&gt;
&lt;script src=&quot;http://www.linkwithin.com/widget.js&quot;&gt;&lt;/script&gt;
&lt;a href=&quot;http://www.linkwithin.com/&quot;&gt;&lt;img src=&quot;http://www.linkwithin.com/pixel.png&quot; alt=&quot;Related Posts Plugin for WordPress, Blogger...&quot; style=&quot;border: 0&quot; /&gt;&lt;/a&gt;
</div>
</b:if>
</b:if>
<!--  linkwithin code 終了 -->

おそらく、以前の関連記事表示方法が関与していると思われるが、
両方を生かしたい。

なんとかならないものか…。

Syntax Highlighter（最新版）を簡単に導入する方法2

noreply@blogger.com (Unknown) — Thu, 11 Apr 2013 19:22:00 +0000

Syntax Highlighter（最新版）を簡単に導入する方法

以前Syntax Highlighterを簡単に導入する方法として、
以下記事を紹介しましたが、

→Syntax Highlighter2.1.364（最新版）を簡単に導入する方法

さらに簡単に、
しかも最新版3.0.189が
本当にとても簡単に導入する方法がありました。

Syntaxhighlighterジェネレーター選択画面

ジェネレーターののようですが、
以下URLにて言語選択StyleCSSの選択のみで、
タグが発行されます。

そのタグを、
<head>～</head>内に挿入するだけでOKです。

わかりやすくジェネレーターへの直リンクを掲載します。

→Syntax Highlighter Scripts Generator

本当にとても簡単に導入可能です。

Syntaxhighlighterジェネレーター選択画面

例えば、
必要なBrushesをチェックし、
StyleCSSを「Django」を選択してコード作成してみると。
以下コードが即座に発行されます。

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDjango.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script language="javascript" type="text/javascript">
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>

とても簡単です。
導入に困難されている方は、
是非お試し下さい。

＊ちなみに、上記コードをコピペでも大丈夫です。

ブロガーバズ：BloggerのテンプレートHTMLエディタの改善

noreply@blogger.com (Unknown) — Thu, 11 Apr 2013 02:53:00 +0000

昨日、私自身ビックリしたので以下記事にしましたが、
→BloggerブログのテンプレートHTMLの編集画面が変わった！！

ブロガーバズブログに23時間前に
記載されていました。

→ブロガーバズ：BloggerのテンプレートHTMLエディタの改善

内容によると、
HTMLの編集画面にて、
『ウィジェット選択』をすると即座に該当ウィジェットコードのTOP行を指し、
その行の『▶』押下にて、該当ウィジェットのコードを展開できるようになった模様。

そのウィジェットの表示コードを移動することがやり易くなったとか…。

ブロガーバズでは、
例として、
ブログ記事に表示されている『日付』の場所を移動しています。

Googleデータエクスポート

noreply@blogger.com (Unknown) — Thu, 11 Apr 2013 02:19:00 +0000

すでにご存知の方もいらっしゃるかと思いますが、
Googleのサービスで、

『Googleデータエクスポート』

というサービスがあります。

GoogleデータエクスポートTOP

ログインすると、
上記の様な管理画面になります。

自分がGoogleで利用しているサービス一覧が表示されます。
その中で、バックアップしておきたいサービスのデータをダウンロードして、
保存可能です。
もちろん、
利用しているサービスすべてを一括ダウンロードも可能です。

例えば、
Bloggerブログのバックアップをしておきたい場合は、
TOP上部の、
『サービスを選択』を押下すると以下の様な画面になります。

『サービス選択』押下後

ここで、上部のバックアップしておきたいサービスを押下します。

『Blogger』押下後

このようになります。
そして、100%になった後に左下の
『アーカイブを作成』にて、
バックアップデータを作成し希望サービスのデータをダウンロード可能になります。

自分の不知な部分で様々なサービスがあるものですね。
Googleのみならず、
他のサイトでも自分の知らない所で便利なサービスがあるのでしょうね。

ネットサービスは、
本当に多くあり奥が深いですね。

BloggerブログのテンプレートHTMLの編集画面が変わった！！

noreply@blogger.com (Unknown) — Wed, 10 Apr 2013 10:02:00 +0000

本日の朝方までは、
以前のようなHTML編集画面でした。
（本日以降にBloggerブログを使用される方は想像しにくいですが_(._.)_）

『ウィジェットの表示』があって、

その右側にチェックボックス。

『プレビュー』すると、

新しいウィンドウにて表示されていた。

それが、
夕方には…。

変わっていた。
w(・o・)w

こんな感じ

『ウィジェットの表示』

でなく、

『ウィジェットへ移動』

さらに、
プレビューに関しては、
新規ウィンドウではなく、
そのページ内にプレビュー表示されるようになった。

これは、ユーザービリティ向上に繋がるのか…。

いきなり変わったのでビックリしました。
w(・o・)w

それとも、変わったのは私だけ!?
（そんな事はない…よね）

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

noreply@blogger.com (Unknown) — Wed, 10 Apr 2013 09:33:00 +0000

Bloggerブログでの、
個別記事下部に表示される前後の投稿記事表示は、
「次の投稿」、「前の投稿」と表示され、
クリックしないと前後の記事タイトルすら分かりません。

そこで、
上記の「次の記事」「前の記事」と表示されている部分を、
記事タイトルが表示されていれば、
ユーザビリティの向上とその記事だけ読んでおしまい。
という直帰率改善に貢献できるのではと考えられます。

個別記事下部に前後記事のタイトル表示

こんな感じだとわかりやすいですよね。

そこで、
zerippeさんの作成したjQueryプラグイン
『bLinker』を使用すると上記リンク先の
記事タイトルを表示できます。

リンク先の記事タイトルを自動挿入するjQueryプラグイン "bLinker"

方法はリンク先にもありますが、
わかりやすく（備忘録として自分に）記載しておきます。

テンプレート＞HTML の編集から

<head> タグ内にjQueryを読み込む以下のCodeを追加。

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>

bLinker v1.0

<head> タグ内にbLinkerを読み込むCodeを追加

<script src="（ファイルのURL）/blinker.js"></script>

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

通常多くのテンプレートでは、
「b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'」を検索し、
"a"要素に"blinker"クラスを追加し、
bLinkerをロードするコードを追加すればOKです。

私のテンプレートにおいては、
上記部分が存在しなかった為、
『nextprev』にて検索し、
（２箇所在り）
『nextprev』を含む一番上の部分の
"a"要素に"blinker"クラスを追加しました。

この部分を変更します。

<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: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>

以上でも動作しますが、

CSSによって表示の調整も可能です。

このBlogで使用しているCSS

#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;

}

参考にして見てください。

Syntax Highlighter2.1.364（最新版）を簡単に導入する方法

noreply@blogger.com (Unknown) — Wed, 10 Apr 2013 08:53:00 +0000

これまでBloggerブログにて、

Syntax Highlighterの導入に苦労されている方は、

多かったのではないでしょうか？

beautifulofcodeの導入も同様に苦労されている方は、

多かったと思います。

私自身も、その一人でした。

ですが、
上記してあるように
Syntaxhighlight簡単に導入する方法を以下に記載します。

これまで、
使用したかったのにできなかった方、
これから導入しようと考えている方など、
参考にして頂けると嬉しいです。

＊利用方法に関してですが、

　これまで、Bloggerブログなどに多く記載されていた

　利用方法とは若干異なりますので注意して下さい。

以下ソースを
<head>～</head>内に記載するだけでOKです。

<!-- Syntax Highlighter -->
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'/> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

3行目のThemeCSSですが、
以下よりいくつか選べます。
→SyntaxHighlighter - Themes

そして、
コードの貼り方ですが、
上記の通りこれまでの貼り方（利用方法）とは若干異なります。

以前まで良くBloggerブログなど多くの他社ブログなどで記載されていた
利用方法の以下とは異なりますので、注意です。

【これまでの利用方法１】


<pre class="code">
<code class="html">
//classにはコードの種類
//boc-collapseを追加すると、閉じた状態にしておけます。
ここにコードを記述する
</code>
</pre>

【これまでの利用方法２】

<pre name="code" class="java">
『ここにコード記述』
< /pre>

【これからの利用方法】

<pre class="brush: script-type">
script-typeにjsとかjavaと指定して、ここにソースコードをHTMLエスケープして貼り付ける
</pre>

となります。

Google Codeに予めホストされたものを利用していますが、
元ファイルは『こちら』にあります。

実際に利用する場合は、
HTMLタグをそのまま入力して表示することができないので、
変換ツールを利用すると便利です。

こちら→HTMLタグ変換ツール

クリボウさんにて作成もされていました。
→コードをハイライトする「Blogger Syntax Highlighter」ウィジェット
　　（サイトの一番下部に変換ツールがあります。）

WindowsXPサポート終了まで1年

noreply@blogger.com (Unknown) — Tue, 09 Apr 2013 14:28:00 +0000

WindowsXPのサポート終了期限までちょうど1年となった。

以前各OSサポート終了期限を記載したが、
→各OSのサポート期限について

本日でちょうどあと1年。

報道ステーションでもニュースとして報じられた。
現在でも使い勝手の良さなどで、
WindowsXPユーザは全体の約1/3（33%）のシェアを誇っているとの事。
（かく言う私もWindowsXPも現役だ。）

企業においても各会社のアプリケーションが新OSに対応していなかたり、
資金面などで新OSの導入ができ兼ねるとのことである。

マイクロソフトとして最長OSでもあり最良のOSでもある。
その都度サポート期限延長をしてきた。

ユーザーの多さから言っても公共性を有しているといっても過言ではない。

だが、
サポート終了しても使用できなくなるわけではない。

セキュリティホールが見つかっても修正プログラムが
提供されなくなってしまう。

その状況下で使い続けることは、
個人や企業としても何かあった場合、
社会に与える影響がどれ程のものになってしまうのか未知である。

となると、
使用できないわけではなくとも個人としても使用すうるのに躊躇してしまう。
企業となれば、
なお一層のことだと思う。

企業は、
大量の情報（個人情報や企業情報etc）を保有している。
こういった情報が流出してしまったら、
場合によっては企業生命にも関わることになる事象となってしまう事もあり得る。

また、個人所有のWindowsXPのPCにおいても、
これまで構築してきた環境やアプリケーションの設定など、
多数の財産とも言うべきものやデータが存在する。

企業にしてみれば、
個人以上のものであることは想像に容易い。

だが、
WindowsXPは2001年末に発表されてから既に12年目。
非常に長い生命力とも言うべきであろうか。

それまでのWindows98やWindowsMEなどとは比較にならない程、
安定性の向上は群を抜くものだっただけに、
現在でもユーザーが多いのは理解できる。

しかし、
新OSが既にWindowsVista、Windows7、Windows8の3OSが発売されている中、
いつまでも、旧OSであるWindowsXPのサポートをしているばかりでは、
企業としてコストとなってしまう。

今後、あと1年の間に、
どういった動きがあるのか（ユーザーとしても）注目したい。

また、
OSのkernel部分がWindowsVistaから異なってしまうのも
移行する際の課題となっているのも現実だ。

あと1年という期限付き時間制約の中で、
どう対処していくのが最良のメソッドなのか…。

マイクロソフトを筆頭に、
各個人、各企業、社会で最良のメソッドをDiscoveryできたらと思う。

噛み合わせ治療（かみ合わせ）咬合調整

noreply@blogger.com (Unknown) — Tue, 09 Apr 2013 11:06:00 +0000

やっと、噛み合わせ治療の第一歩が踏み出せた。

かれこれ噛み合わせがおかしくなってから、
う～ん何年だろう。

数年かな数十年かな。

特におかしくなったのは奥歯の治療後からなので、
約3年くらいでしょうか。

「低い低い噛んでないです。」
と伝えても
「形態的に問題ないよぉ。
どこか1点でも当たっていれば…。」
との事。
また、
「一度銀歯を入れたら2年間は入れ直せない。」
との事。
「国も財政が厳しいんじゃない。」
とか…。
「じゃぁ、そこがまた虫歯になったらどうするんですか？」
と、
そしたら、
「2年経つまでは、仮歯になっちゃうかなぁ」
とか…。

当事者は、
噛んでない（当たってない）ところが非常に気になります。
違和感を覚えて常にストレスにさらされている状態が続きます。

それから約1年。

見事に突発性難聴に（右）なりました。

その後、
耳鼻科で耳管開放症との診断までされました。
漢方飲んだり、更には手術で耳管ピンとやらを入れるという方法もあるようです。
耳管開放症の症状は、
程度の差はあるにせよ、
なったヒトにしかわかりません。

あとは、
急激なダイエットや顎関節症も要因だとか。

そこで、
「顎関節症っぽいから、歯医者さんで噛み合わせ治してもらってよ。」
と言われ、
かかっていた歯医者さんに行った所、
「そんなことはない。」
と思いっきり否定。

その旨を耳鼻科の先生に伝えました。
そしたら、
「その先生は勉強不足だなぁ。
じゃあ、紹介状書くからそこに行ってみなよ。」

紹介先に行った所、
顎関節症との診断。

マウスピースでの治療…。

それから、2ヶ月半くらい後、
今度は逆側の上顎前部が痛みX線にて影があり、
炎症（per）を認めるとの事。
そのままそこで治療できるかと思いきや口腔外科では、
歯を削るなどの治療はできないとの事。
結局、以前のかかりつけだった歯医者さんへ紹介状。

2ヶ月半くらい歯根治療を行い銀歯を入れた。
「今度は噛み合わせちゃんとするね」
と…。
しかし、
またまた低い低すぎる。
この時ばかりは、先生も入れた瞬間。
「低いっ」
と思わず一言。

だが、
お決まりの、
「でも、どこか1箇所でも当たっていれば…。」
で、
「うん、でも、当たってるよぉ」

「噛み合わせとかそういったので荒稼ぎする悪い歯医者さんもいるんだよ。」
との事。

確かにそういう歯科医や医師もいるかもしれないが、
明らかに当たってないし見た目でも高さが違う。

それから半年後くらいから膝などが痛みだしたが、
整形外科でのX線では特に異常なし。

更に半年後くらい…。
腰やら首やあちこち痛む。

顎関節症治療の口腔外科で、
「いくらマウスピースやっても、
低い咬合（当たってない）のままでは根本的治療にはならないですよね？」
と問いかける。
そしたら、
「症状から言っても咬合治療した方がいいのでは…。」
でも、どこの歯科がいいか…。どこか知ってる？」
知らないわい。
でもって、
どこの歯医者さんでもいいような紹介状をいただく。

個人の開業医のところに行く。
模型作ったりいろいろするが、
結局、
「個人の開業医では手に負えないから歯学部のある大学病院へ行った方がいい。」
との事。
また、
こちらの歯医者さんで伺ったのですが、
上記した2年間は作れない。
のではなくて、
2年間は、管理義務があるので
その歯医者さんがやり直さなければいけないらしい。

そして、
とある大学病院へ。
だが、
現在はマウスピースによる治療は行なっていなく生活習慣改善指導で自費。
数回通うが、数分の会話で診察終了。

悩みに悩んだ。
ネットで噛み合わせ治療やっている所を探すも、近くにない。

目も開いてられない程つらくなってきた。
嫁がなんとか近くの歯医者さんを見つけてくれた。

通い始めて現在に至る。
すべての歯が機能的な形でなく、
見事に顎関節症のマウスピース治療後2ヶ月半後くらいに
歯根治療して入れた2本は低過ぎとの事。
全体の噛み合わせをすることになった。

前置きが長すぎ（汗）。

ようやく、治療の第一歩。
仮歯が入った。
噛んだ音が違う！！

まだ、仮歯なので数時間後で多少違和感があるが、
今後全体の咬合治療で良くなっていくと信じて、
頑張るしかない。

噛み合わせで、
肩が凝ったり首が痛くなったり、膝が痛くなったりetc。
と、よく聞いてはいたが自分がそうなるとは思いもはせず。

人間は頭が重い（6キロとか重いと10キロとからしい）から、
噛みあわせが変わるとその重さを支えようとバランスが崩れ、
あちこちに支障がくるようである。

病院にしても、
何々科とか単独に独立してしまっている。
身体全体は繋がっているのだから、
もっともっと全体を診る・全体を把握する治療を、
本来の治療と考えたい。

最近では、
総合診療科とかできているがそれは医師の領域のみ。
歯科領域のことまでは把握しきれない現状がある。
また、逆もしかり。

先天的なもの以外では全体のバランスなどを考慮し、
治療できる世の中に早くなってほしい。

2000年中盤くらいまでは、
医療訴訟が問題になっていたが、
現在はまた、
医師不足なども叫ばれているせいか
医療は聖域みたいな雰囲気になってきているように感じる。

そんな中での、
潜在的犠牲者と言ったら語弊があるかもしれないが、
各科だけでの診療、診察、治療行為はなくして、
健全な社会生活がおくれるヒトが多くなることを心底思う。

まぁ、何はともあれ噛み合わせ治療の第一歩が始まった。

なんだか取り急ぎのせいなのか読みにくい文章構成になってしまった。

時間がある時に校正しよう。

Chromeに代わる次世代Webブラウザ SRWare Iron +オススメ拡張機能

noreply@blogger.com (Unknown) — Mon, 08 Apr 2013 20:20:00 +0000

Chromeはとてもいいブラウザだと思います。

…が、
ここ最近のGoogle先生の個人情報の収集の仕方が
ロコツすぎてちょっと嫌です。

たかが一個人の情報、されど一個人の情報。
自意識過剰と言われればそれまでかもしれません。

けどChromeと同じ機能を使えて、

なおかつ個人情報渡さなくてもいいのなら

それに越したことはないですしおすし。
そんな想いがきっかけで辿り着いたのが、
今回ご紹介するWebブラウザSRWare Ironです。

では、
SRWare Ironって、Chromeとなにが違うのか。

細かい解説は後述しますが、

ものすごく強引な言い方をすると

Chromeに内蔵されているGoogle的要素を取っ払ったブラウザです。

Chrome同様高速・軽量で、拡張機能はそのまま使用可能なので乗り換えが楽。

ただブラウザを紹介するだけなのもアレなので、オススメの拡張機能も紹介しちゃうよっと。

そもそもSRWare Ironってどんなブラウザ？

SRWare Ironはドイツの企業であるSRWareが開発したブラウザで、

通称Ironと呼ばれています。

Google Chromeと同じくChromiumをベースとしており、
Windows XP/Vista/7、Mac、Linux版がそれぞれリリースされています。

ドイツ製ですがChromiumが日本語に対応していますので、

システム言語がそのまま使用できます。

…ここまで読んでもうダウンロードしたくなっちゃった方は、
下記リンクの"Download"よりどうぞ。

SRWare Iron - The Browser of the Future
http://www.srware.net/en/software_srware_iron.php

Google Chromeとの相違点

wikiに記載されている、Google Chromeとの主な相違点は以下の通り。

広告ブロック機能を搭載
ユーザーエージェントを設定ファイルで指定可能
ポータブルアプリケーションが公式に配布されている
ベースとなったChromiumと同様に
- 利用者情報の送信機能がない
- 自動アップデート機能がない
- Flash PlayerとPDF viewerが非搭載

それでは簡単に補足と解説です。

広告ブロックはそのままですね。
ユーザーエージェントとポータブルアプリケーションは

わかる人だけわかればいいかと…。

大きく異なるのはそれ以下の点。

ChromeはPCにインストールした時点で
ユーザーを識別する固有IDが割り振られます。

つまり同じChromeでありながら、

どのPCにインストールされたものか識別できてしまうってことですね。
SRWare Ironにはこのような機能が搭載されていません。

次に、Ironには自動アップデート機能がありません。
要するに新しいバージョンがリリースされたら
自分でアップデートしなければばりません。

これに関しては月に1回くらい。

公式HPまたはTwitterで確認すればいいと思います。

FlashとPDFについては、非搭載というだけで
その機能をまったく使えない訳ではありません。
必要に応じてインストールしてください。

Ironと一緒にインストールすべきオススメの拡張機能

では、オマケというかこっちが本題になりつつあるオススメの拡張機能の紹介。

基本的にChromeで使用できるものはIronでも同様に使用できます。

ただし一部動作しないものもあるそうですので、そのへんは自己責任で。

2chRevival
インストールするだけで2ちゃんねる、BBSPINKのDAT落ちしたスレを
簡単に復活できるようにする拡張機能。
検索結果でDAT落ちしたスレに当たることって意外と多いので、
入れておくとなにかと便利かも。

2chRevival
https://chrome.google.com/webstore/detail/jincbkepokdimkkecpcmjjfhjepllkdj
AutoPagerize
もはやどのブラウザでも定番となった、Webページを自動で読み込み、
続きのページを継ぎ足して表示してくれる拡張機能。
オン／オフの切り替えや、機能自体が有効化されているかといった視認性も高くオススメ。

AutoPagerize
https://chrome.google.com/webstore/detail/igiofjhpmpihnifddepnpngfjhkfenbp
Awesome Screenshot
表示しているページの一部または全部をキャプチャ出来る拡張機能。
簡単な注釈もつけられるので、公私問わずシェアする時に便利。
Safari版、Firefox版も愛用中。

Awesome Screenshot
https://chrome.google.com/webstore/detail/alelhddbbhepgpmgidjdcjakblofbmce
Better History
デフォルトの履歴管理機能を飛躍的に向上してくれます。
現在表示しているWebページ内の選択したテキストから、
過去の履歴を検索する機能なんかもついてて地味に超便利。

Better History
https://chrome.google.com/webstore/detail/obciceimmggglbmelaidpjlmodcebijb
Create Link
Firefoxでお馴染みのMake LinkのIron版。
コンテキストメニューから表示しているページのタイトルやURLを
任意の形式（プレーンテキストやHTMLなどカスタマイズ可）で
クリップボードにコピーしてくれる拡張機能。
Make Link同様、この手の記事を書く時に大活躍w

Create Link
https://chrome.google.com/webstore/detail/gcmghdmnkfdbncmnmlkkglmnnhagajbm
Do Not Track Plus
こちらもFirefoxにインストールしているトラッキング防止用の拡張機能。
そしてFirefox同様どこまで効果があるのかは不明w
むしろ他にオススメあったら教えてくださいww

Do Not Track Plus
https://chrome.google.com/webstore/detail/epanfjkfahimkgomnigadpkobaefekcd
Evernote Web Clipper
ご存知、EvernoteのWebクリップ用拡張機能。
他のブラウザのそれと比べて評判いい気がします。
私はSafariのやつが一番好きですがw

Evernote Web Clipper
https://chrome.google.com/webstore/detail/pioclpoplcdbaefihamjohnefbikjilc
FlashBlock
アンチFlashユーザーにはお馴染みの拡張機能。
サイト内に無駄に設置されたFlashをブロックし、
自動的に再生されないようにしてくれます。

FlashBlock
https://chrome.google.com/webstore/detail/flashblock/gofhjkjmkpinhpoiabjplobcaignabnl
Image Properties Context Menu
デフォルトよりもより詳細な画像の情報を表示することができます。
この機能に価値を見出せる方は限られるかもしれませんが、
入れておいて損はないと思います。

Image Properties Context Menu
https://chrome.google.com/webstore/detail/khagclindddokccfbmfmckaflngbmpon
PageExpand
便利な機能詰め合わせた拡張機能。
短縮URLの展開、URL文字列のリンク化、画像のポップアップ表示、
動画のインライン表示、掲示板の拡張表示などなど。
設定がちょっと難解なので、訳がわからない項目があるって方も多いかと思います。
しかしデフォルトのままでも充分使えるので試してみて下さい。

PageExpand
https://chrome.google.com/webstore/detail/bjnobgdfhefpilajplncgjjeopakpepc
Scrollbar of Contents
Webページ内のコンテンツ毎に付けられたタイトルをスクロールバーに表示し、
クリックするとそのコンテンツの箇所までスクロールしてくれる拡張機能。
ページ全体の視認性が増し、縦長のページでもスイスイ目的の場所まで移動できます。

実は一般的なサイトだけではなくGoogleの検索結果にも表示可能なため、
一番下までスクロールしなくても検索結果を全て確認できちゃったりもします。

実際に検索してみたのが以下のの画像↓

　　Scrollbar of Contents
　　https://chrome.google.com/webstore/detail/cfmkncejaemmcobmaabfigljmnkeecdm

Service Pages for Google Chrome™
Chromeの様々な設定画面へ簡単にアクセスすることができる拡張機能。
実際にアクセスできるURLは50以上あるのですが、
普通にネットサーフィンする程度の方なら
設定／拡張機能／ダウンロード履歴／ブックマークで充分かと。

Service Pages for Google Chrome™
https://chrome.google.com/webstore/detail/fjmhjjohhiehaoljianalpmfcceojaff
Session Buddy
こちらもChromeの拡張機能を紹介した際に挙げたセッション管理。
セッションの閲覧、保存、復元といった機能をより高性能にすることができます。

Session Buddy
https://chrome.google.com/webstore/detail/edacconmaakjimmfgnblocblbcdcpbko
Speed Dial 2
こちらもお馴染みの新しいタブによく使用するサイトを表示できる拡張機能。
操作性やデザインもよく、ブックマークや最近閉じたタブ、
Ironにインストールしているアプリも表示できるスグレモノ。
…が、たまにページの表示エラーが起きるが気がしてならない。

Speed Dial 2
https://chrome.google.com/webstore/detail/jpfpebmajhhopeonhlcgidhclcccjcik
Universal Search & IE8 Accelerators
私の中でChromeやIronがメインブラウザにならない大きな理由として、
ちょっとした検索の使い勝手やジェスチャ周りの機能だったりします。

この拡張機能は現時点で一番理想に近いのですが、
やはり狐の圧倒的な使い勝手の良さには遠く及ばn(ry

Universal Search & IE8 Accelerators
https://chrome.google.com/webstore/detail/hmcgifbelcmjecmkapejifljephjabjd
Xmarks Bookmark Sync
Firefoxのアドオンを紹介した時にチラっと愚痴ったのですが、
相変わらず使用しているブックマーク管理w

最近はPC間でのブックマークの同期は多くの主要ブラウザに実装されていますが、
やはり一番使い勝手がいい優秀な子だったりします。

Xmarks Bookmark Sync
https://chrome.google.com/webstore/detail/ajpgkpeckebdhofmmjfgcjjiiejpodla

以上、
SRWare Ironとオススメの拡張機能でした。

SRWare Iron - The Browser of the Future
http://www.srware.net/en/software_srware_iron.php

ブログのページタイトルを【記事タイトル/ブログタイトル】にする方法

noreply@blogger.com (Unknown) — Mon, 08 Apr 2013 17:59:00 +0000

以前にも紹介しましたが、
若干違うコードでも同じ様に表示されます。

以前の記事
→『記事タイトル』が検索メインになる方法　→【記事タイトルブログ名】

なので、
今日は違うバージョンです。

SEOの基本と言えば基本ですが、
ほとんどのブログサービスのデフォルトのテンプレートでは、
検索にかかる順番として、
『ブログタイトル|記事タイトル』
となっています。

このままでは、その時一番伝えたい
『記事タイトル』が2番目に重要と判断される為、
GoogleやYahoo!などのポータルサイトで
検索される時にマイナスとなってしまいます。

せっかくの記事を若干無駄にしてしまう事？になってしまいます。

そこで、少しテンプレートのHTMLをいじるだけで
『記事タイトル』をメインに持ってくることができます。

以下方法です。

【方法】

ブログの管理画面「テンプレート＞ HMTL の編集」を開く。

１）次のコードを見つけます。
　　（Ctrl+Fなどで検索）

<title><data:blog.pageTitle/></title>

２）上記コードを以下にする。

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
< b:else/>
<title><data:blog.pageTitle/></title>
< /b:if>

３）「テンプレートを保存」ボタンを押す。

以上です。

以前と違う部分は、赤の部分です。

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

両方で試して見ましたが、
同じでしたので、
indexにするかitemにするかは、
どちらでも大丈夫です。

＊ちなみに、私はitemにしました。

ping送信に！！

noreply@blogger.com (Unknown) — Mon, 08 Apr 2013 06:46:00 +0000

Bloggerブログは、
ping送信先の登録機能がないみたい…。

Pingooなどping送信サイトがありますが、
pingooによると、

※ご注意※Bloggerブログでは、Ping送信先の設定が行えません。
Ping送信機能によるリアルタイム配信はご利用いただけませんので、ご了承ください。

とのことです。
ちょっと残念ですが、
他にもサービスがありました。

以下で、

ご自分の持っているブログやwebのURLを入力して、
『送信』してみて下さい。

送信後、様々なサービスが記載されているページが表示されます。
よく見てよく読んでブログパーツなどを使用すればpingooなどのping送信サイト（サービス）よりも多機能ですよ。
Amazonや楽天、電脳卸…etc。
にも利用可能です。
他にも、

一部抜粋

マルチ検索55
YouTube DRIVE 連続再生
今何人？チェッカー
今何日？チェッカー
Gランク・チェッカー
リンク・マジシャン
キーワード・エージェント
スピード・ツイッター
Flickr
　　

など、多くのサービスが無料です。

是非オススメします。

レイアウト画面での、ガジェット追加を行えるようにする

noreply@blogger.com (Unknown) — Mon, 08 Apr 2013 04:03:00 +0000

レイアウト画面でのガジェット追加を行えるようにする説明の前に、
ヘッダー部分を例にとって説明します。

上の画像で確認ですが、

①の部分が『ヘッダー部分』
②が『ページ部分』です。

そして、
レイアウト画面です。

サイドバーへのガジェットの追加は相当数可能ですが、
ヘッダー部分やタブ部分は、
デフォルトの状態ではロックがかかっていて移動が出来なかったり、
ガジェットを追加することは出来ないことが多いです。

そこで、『管理画面＞テンプレート＞HTMLの編集』から、
「ロック解除」と「ガジェットの最大数」の設定を行うことで、
変更が可能になります。

※ウィジェットテンプレートの展開へのチェックは必要ありません。

上の画像の『赤枠部分』が、
ヘッダー部分という事になります。
【header-outer】などでページ内検索をするとすぐに見つかります。

＊ヘッダー部分の中で、
レイアウトでの「ロック解除」と「ガジェットの最大数」を変更可能にするには、


<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

この部分を変更します。

『maxwidgets』・・・ガジェット最大数
『showaddelement』・・・ロック設定

なので、
maxwidgetsは、
設置したいガジェット数に数字を変更。

そして、
showaddelementは【none】から【yes】に変更します。

＊showaddelementを【yes】にした場合、
　ガジェット内容の編集画面（歯車マークをクリックした時も）に、
　『削除』ボタンが表示されることにもなりますので、
　間違って必要な物を削除しないように注意してください。

これで、
レイアウト画面での設定可能箇所が増えます。

それぞれのコード部分は、

『ヘッダー部分』
→<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
『ページ部分』
→<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

これで
レイアウト画面でのウィジェットの追加や移動が可能になります。

※コードに入ってる数値は、
私個人の設定ですので、個人個人の目的によって調整して下さい。

Bloggerのヘッダーを動かせるようにする方法

noreply@blogger.com (Unknown) — Sun, 07 Apr 2013 23:15:00 +0000

最初に！！
※HTMLの編集をする前に、テンプレートの保存を忘れずに！

本来は、
header部分は動かせない様に固定されていますが、
これをHTMLの編集から解除します。

では方法です。

テンプレートから
「HTMLの編集」＞「ウィジェットのテンプレートを展開」にチェック

「b:widget id='Header1' locked='true'」
を検索して、
「true」を「false」に変更。

<b:widget id='Header1' locked='false' title='せきらら白書～備忘録～ (Header)' type='Header'>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>

以上で、
headerが移動可能になります。

jQueryでスクロールすれば現れるコンテンツ

noreply@blogger.com (Unknown) — Sun, 07 Apr 2013 22:49:00 +0000

サイドスペースを有効活用する為に、
スクロール時に現れるウィジェットコンテンツを表示する方法。

Bloggerでは、
公開ファイルを読み込むことによってjQueryを使えるようになります。

既に、
BLOGGERでブログトップまで移動できるアイコンを表示する方法においても
jQueryは導入済みですが、
（このページ（記事）をはじめて見られた方もいらっしゃると思うので記載します。）
　

まずはHTML編集で、
以下を
</head>の上に挿入。

<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script>

そして、
挿入した箇所の下に、以下jQueryコードを追記します。

<script>$(function(){ $("#fixed-box").hide(); $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 1000) { $('#fixed-box').slideDown(100); } else { $('#fixed-box').slideUp(100); } }); });});</script>

scrollTop() > 1000

の数字ですが､

ウィジェットが現れる位置を指定する数字です｡

数字が大きくなれば､

表示されるのにその位置までスクロールしないと表示されません｡

逆に数字が小さければ、

表示されるのに比較的スクロールしなくても表示されるということになります。

なので、

サイドバーにある空白スペースが現れるまでのスクロール幅（px）で、

指定すればいいことになります。

（Chromeの要素検証を使うとわかりやすいです。）

あとは、

以下のCSSを追記します。

#fixed-box{
position: fixed;
top: 10px;
z-index: 0;
}

.footer-outer
{
position: relative;
z-index: 1;
background-color: #FCFCFC;

}

そして管理画面より、
レイアウト＞ガジェットを追加＞HTML/JavaScriptを選択して､
表示したいjava/HTMLタグを以下のタグで囲みます｡
タイトル入れなくても大丈夫です｡

<div id='fixed-box'>
（ここに挿入）
</div>

参考サイト
→スペースを有効に、jQueryでスクロールすれば現れるコンテンツ

BLOGGERでブログトップまで移動できるアイコンを表示する方法

noreply@blogger.com (Unknown) — Sun, 07 Apr 2013 16:37:00 +0000

よくカスタマイズされて綺麗なブログやHPなどで
見かける矢印アイコン。

その矢印アイコン等でクリックすると

ブログやHPの一番上まで移動する。

はじめての時は、ビックリしました!!ヽ(*'0'*)ツワァオォ!!

その方法です。

まずは、定番のテンプレート操作で、
テンプレート＞HTML の編集で「ウィジェットのテンプレートを展開」にチェック
で、
以下を</head＞の上に挿入します。

<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script>
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();

// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 1000) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 400);
return false;
});
});
});
</script>

そして、
</body＞の直上に以下を、
さらに挿入。

<p id="back-top">
<a href="#top"><span></span></a>
</p>

次に、
CSSの追記で、
以下を追加します。

/* backtotop */
#back-top {
position: fixed;
bottom: 5px;
right: 20px;
margin-right: 85%;
}
#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;

/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}

/* arrow icon (span tag) */
#back-top span {
width: 50px;
height: 50px;
display: block;
margin-bottom: 0px;
background: #eae5e3 url(※用意した画像のURL) no-repeat center center;

/* rounded corners */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}

#back-top a:hover span {
opacity:0.5;
}

これで、Bloggerブログの一番上まで一気に移動させるアイコンが、
表示されます。

＊このブログにもありますm(__)m。

記事タイトルもパーマリンク（Permalink）させる（HTML版）

noreply@blogger.com (Unknown) — Sun, 07 Apr 2013 16:06:00 +0000

以前にも記事タイトルもパーマリンク（Permalink）させるをつけるで、
紹介しましたが、
今回は、簡単なHTML版です。

方法は、以下。

テンプレート＞HTML の編集で「ウィジェットのテンプレートを展開」にチェック

<b:include name='title'/>

を検索し、
<b:include name='title'/>を以下の様にリンクタグで囲むだけです。

<a href="URL"><b:include name='title'/></a>

私個人的には、
前回の記事タイトルもパーマリンク（Permalink）させるの方が、
おすすめかなと思います。