ネスぺに落ちてしまいました(＾＾；)

今回は、午前Ⅰ免除が適用される最後のテストだったので、かなり気合を入れて臨んだのですが、結果は、今一歩届かずといった内容でした。

当日の試験もわからないところが多かったので、全体的に知識不足だったと感じます。

ただ、2011年の時は、午前Ⅱも不合格だったので、一歩前進です。

来年にもう一度チャレンジし、その時こそ合格したいですね(＾＾；)

今回はCD ソフトケースを買ったのでそのことを書きます。

• どんなものか？

かさばり易いCDケースの代わりになるものです。
また歌詞カード、帯、裏ジャケットを収納できるので元のCDのデザインをこわすことがありません。
だいたいCDケースの3分の1ほどの厚さになります。

• なぜ買ったのか？

私のCD保有数が１１００枚を超え、いよいよ部屋を圧迫し始めたためです。
四畳半のうち半分はCDが締めています(残り半分は本です)

• 使ってみた

こちらが実際に使用してみた画像です。
ジャケットも裏表あるため見た目はCDケースとほとんど変わりません。
CDケースと重ねてみると暑さが全然違うことがわかります。
作業時間は50枚で一時間ほどかかりました。馴れてくればもっと早くできるようになると思います。

• どのくらい薄くなるのか？

こちらはCD50枚の比較画像です。
ソフトケースを使用した場合ほぼ半分になっていることがわかります。

• 問題点

まず二枚組のCDは入らないことです。
最近のCDはDVDと二枚組であることが多いためこれは結構多きい問題ですね。
あと、耐久性に不安があります。歌詞カードの収容作業中にも何個か敗れてしまいました。まあ、使えなくなるレベルまで破れたわではないので、不安ですが様子見だと思います。

大量のCDを持っていて保管場所に困っている人は買いだと思います。

つい最近のできごとです。いつものように自転車で通勤中しているとある看板を発見しました。

「この辺りでちかんが発生しました」

ごく普通の内容なんですが、最初まったく違う意味に読み間違えてしまいびっくりしました。

どう読み間違えたかはさておき、この一件でとあるコピペを思い出したので紹介します。

コピペ↓

こんにちは みなさん おげんき　ですか？　わたしは　げんき　です。
この ぶんしょう は いぎりす の ケンブリッジ だいがく の けんきゅう の けっか　
にんげん は もじ を にんしき する とき その さいしょ と さいご の もじさえ あっていれば
じゅんばん は めちゃくちゃ でも ちゃんと よめる という けんきゅう に もとづいて
わざと もじの じゅんばん を いれかえて あります。
どうです？ 　ちゃんと よめちゃう でしょ？
ちゃんと よめたら はんのう よろしく

ちゃんと読むことができたでしょうか？
この文章のように文字の並びがぐちゃぐちゃになっていてもちゃんと読むことができるとは人間の脳の画像処理能力を本当に素晴らしいと感じます。
認知心理学にあたる内容だと思いますが、自分たちが普段何気なく行っていることも、よくよく調べれば生物のすごさを実感できますよね。

ちなみに、このようなことがケンブリッジ大学で本当に研究されているかはわかりません。
ですが、英語版もあったので合わせて紹介します。ちなみに、私の英語力では全然読めませんでした（＾＾；）

英語版↓

Aoccdrnig to a rscheearch at Cmabrigde Uinervtisy, it
deosn't mttaer in waht oredr the ltteers in a wrod are, the
olny iprmoetnt tihng is taht the frist and lsat ltteer be at
the rghit pclae. The rset can be a toatl mses and you can
sitll raed it wouthit porbelm. Tihs is bcuseae the huamn
mnid deos not raed ervey lteter by istlef, but the wrod as
a wlohe.

最近、歯医者通って歯石を除去してもらうのが習慣になっています

んで、いろいろまとめてみました

１．歯石の除去方法

歯石の除去は超音波スケーラーを使用して除去しています
なかなか、痛気持ちいい感覚なんですが、機械音が何とも言えない恐怖を仰ぎます

表面など超音波スケーラーの届く範囲はこれで除去しますが、歯茎の奥の歯石は普通のスケーラーで除去しています

終わったら口をゆすぎますが、やはり血がたくさんでているみたいです

２．フッ素
歯石除去が終わったら、フッ素をつけてもらいます
フッ素には、虫歯予防の効果がありますが、ここでは、コーティングの役割があります
コーティングをすることで痛み止めの効果をもたらしています

ただし、フッ素をつけてから30分は飲み食いや口をゆすぐ行為は禁止です

３．費用
費用は、初診が3000円（レントゲン代含む）
その後は、一回800円ほどです
ただし、月ごとに初診料がとられます

同じ医者に通院しているなら、レントゲンの必要はないため、2000円ほどの金額になります


３．診察時間
一回の診察で30分ほどかかります

４．通院回数
現在、3回ほど通っています
一年に一回ぐらいは歯医者に行って歯石の除去してもらう方がいいと思います

今回はブラウザの縮小によってレイアウトが大きく崩れてしまう問題を対処しました

１．　どのような症状か？
例えば、ブラウザを縮小したとき、右サイドバーのウィジェットが、下の方に移動してしまう現象です

もっと縮小していくと、投稿記事が、サイドバーの下に移動してしまい、レイアウト崩れが発生してしまいます

２．原因は？
ブログのBodyにwidthを指定していなかったことが原因のようです
また、ブログの投稿、サイドバーなどのwidthを％で指定しているのも良くなかったようです

まず、Bodyにwidthを指定していなかったため、ブログ全体の幅が決まっていない状態でした
そのような状態でwidthに％を指定している場合は、ブラウザのサイズに合わせて動的に幅を決定してしまいます

そして、ブラウザを縮小した場合は、ブラウザの幅にすべてのコンテンツが収まるようにするため、レイアウトが崩れてしまったようです

３．対策は？
bodyに全体のサイズを指定します（当ブログ1500px）

そのあと、サイドバー、メインコンテンツの幅も、%を使わずに記述し、全体の幅がbodyの幅を超えないように設定します

そうすれば、ブラウザの縮小時にレイアウトを崩すことなく、スクロールバーで対処できるようになります

大分、ブログのデザインが決まってきましたが、どうにもサイドバーが寂しい印象を受けました

そこで、Twitterのタイムラインを乗っけることにしました

１．Twitterウィジェットの作成
ウィジェットの作成は、Twitterの公式ページから行うことができます
https://twitter.com/

まずはTiwtterにログインします

そこで、設定-＞ウィジェット-＞新規作成を開き、適当にデザインを選んで「ウィジェットの作成」をクリックすればソースコードができます

このように、Twitterウィジェットの作成はとても簡単に行えます


２．Bloggerに搭載
次に出来上がったソースコードをBloggerに乗っけます

レイアウト-＞ガジェットを追加から「HTML/JavaScript」を選択し、先ほどのTwitterウィジェットのソースコードを張り付けます

あとは、表示したい位置にガジェットを移動させれば完了です


３．備忘録メモ
１，２のようにBloggerへのTwitterウィジェットの搭載はとても簡単に行えます
が、私はBloggerへの搭載ではまってしまいました（＾＾；）

最初は、作成したソースコードをテンプレート-＞「HTMLの編集」から直接貼り付けようとしたんですが
それだとうまくいかないようです（理由はまだわかっていない…）

やはりBloggerならではの記述方法や特徴をもっと知らなければと痛感しました

コメント欄についてテスト投稿中です

こないだ会社のパソコンから自分のブログを見てみたらとても深刻なレイアウト崩れが発生していることに気づきました。 
家に帰ってから調べてみるとどうやら、IEとFireFoxでレイアウト崩れが発生している模様(Opera、Safariは確認していません…)

 二日ほど原因を調べていてどうやら左上のロゴに原因があることが判明しました。
 以前、ロゴを追加したのですが初めはCSSで画像の追加のみ行いました。
この時点では、特に問題はありません。 しかし、そのあと画像にリンクを持たせるため、HTMLでも<img />タグで同じ画像を呼び出していたため、レイアウトが崩れてしまっていたようです

 いってしまえばただの不注意ですが、今回のミスを通してカスタマイズ中のテンプレートにいかに無駄な要素が多いかを知るきっかけになりました(＾＾；) 

今後もカスタマイズを続けていく中で、無駄な要素は削除するようにしてい着たいと思います
その方がメンテナンス性が上がるってもんですな！

最近、ウィジェットのカスタマイズ方法を知りました。
いまさらって感じなんですが、「HTMLの編集」ページにある「ウィジェットのテンプレートを展開」にチェックをいれれば、ウィジェット内のタグを見ることができるようになりました。

ここをいじれば、日付とタイトルの位置を変更したりできそうですな！

今回は、サイドバーにあるラベルをカスタマイズしました。

とりあえずいつものようにググってソースコードを探してきます。

ラベルリストの表示法いろいろ
http://www.kuribo.info/2009/01/blog-post.html

こちらのサイトを参考にして作成したCSSがこちら↓

/* Label Content
----------------------------------------------- */
.Label ul{
   margin-left: -35px;
   line-height:　100%;
}
.Label li {
  float:left;
  padding:5px;
　list-style-type:none;
  background-color: #333333;
  color: #fff;
  border: 1px solid #fff;
}
.Label a{
  color: #fff;
}
div.clear {
  clear:both;
}

メトロ風な表示を意識してカラーの背景に白字のラベルにかすたまいずしました。
リストにある黒丸(マーカー)は邪魔なので非表示です。

完成したのがこちら↓

左が以前のラベル、右が新しいラベルのデザインです

大分メトロらしいものができたと思います。
次は、ブログページ以外の作成でもしようかな

最近、歯医者で歯石除去をしてもらってきました
前回、医者で歯石を除去してもらったのは、2～3年ほど前のことです

超音波による歯石除去とのことですが、あの痛気持ちいい感じは何とも言えません
終わった後のすっきり感も何とも言えないものがあります

費用は3400円ほどでした
しかし、初診でレントゲン撮影もあったからこの値段とのことです
次回からは1000円ほどで歯石除去ができるらしい！



実は、私は生まれてから一回も虫歯になったことありません

なんでも私の歯はとても丈夫らしいです

医者に行ったときは、診察の結果で逆に褒めれたぐらいです

歯医者さんも「親に感謝してください」とおっしゃっていました

しかし、そんな私も歯周病を回避することはできないとのこと

なんでも歯石の除去は只の歯磨きでは不可能とのこと！

歯周病対策のためには、一年で2、3回ほどの歯石除去が重要とのことです

歯周病は非常に恐ろしい病気ですので、一年に一回は必ず医者に掛かりたいと思います

では、雑記でした

両サイドにサイドバーをだすことにしました
左側がメニューバーで、右側に広告を表示しています

左サイドバー、メインコンテンツ、右サイドバーという組み合わせを3カラムというようです

ここで気を付けなければいけないのは、WEBサイトの幅と、各カラムの幅です
ここを間違えるといわゆる表示崩れが発生します

実は、私は3カラムの実現方法についてまだ、詳しく把握していません
ですので、引き続きCSSの学習を続けたいと思います
今回は、私が思っていた以上にCSSはいろいろできることがわかりました（＾＾；）

もう一つ、各投稿記事をborderで囲うように変更しました

前回の記事にも書いたように記事省略の機能を付けてから、ブログがずいぶんすっきりしてしまい、貧相な印象をうけなくもありません

そこで、投稿記事のレイアウトを変更することでそのような、印象を変えることにしました

今回はただ投稿記事をborderで囲っただけです
次は、もう少し凝ったデザインに変更したいと思います

投稿記事の折りたたみを自動で行えるようにしました。

・どんな機能？
文章の折りたたみ機能です
「続きを読む」「Read more」ですね

この機能を利用すれば、冗長な投稿記事であふれたブログをすっきりさせることができます
読み手からすれば、タイトルだけ見てで読むかどうか決めれるので、便利な機能だといえます


・なぜ自動化？
この機能は多くのブログサイトに実装されている機能なんですが、そのほとんどが手動で行わねばならないものです

記事を書くたびに折りたたむ場所を指定するのも面倒ですし、過去の記事全てに設定するのも大変です
やはり、自動化して少しでも手間を減らしたいと考えます
もちろん、自動化する過程でJavaScriptやjQueryの勉強もできますしね！


・Expander Pluginを使用
今回使用したのは、jQueyのプラグインのjquery.expander.jsです
こちらを使用すると数行のスクリプトで投稿記事の折り込み機能を実装することができます
下がいろいろなサイトを参考にして作成したスクリプトになります（ほとんどコピーです）

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript">
<script src='http://plugins.learningjquery.com/expander/jquery.expander.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
<!--
$(function() {
            $('div.post-body').expander({
                slicePoint: 50
            });
        });
//</script>
//]]&gt;
--&gt;

もし、折りたたみ機能を実装したい方がいるなら「div.postnavi」の部分を折りたたみたい場所のクラス名に変更すれば使用できます

 ・備忘録
 　jQueyの外部ファイルには、GoogleのCDNを利用しています
 最初は、Dropboxを使用してJavaScriptを読み込もうとしたんですが上手くいきませんでした（＾＾；） 
どうやら2012年8月ごろからファイル共有の仕組みが変わったようで、ネット上にまだ情報が出回っていないように感じました

　折りたたみ機能実装のもう一つの選択として「readmore.js」というプラグインがあります
最初はこちらを使用したスクリプトを作成していましたが、外部ファイルの問題で挫折しました

　外部ストレージは、Dropbox、Skydriveの二つを試しましたがうまくいきませんでした
他の選択としてGoogleドライブもあるので、今度試してみようと思います

あと、折りたたみ機能を実装に伴い、ブログがとても簡素に見えるようになりました
このままでは、ただみすぼらしい印象をうけなくもないためさらなるデザインの模索をしていきたいと思います
いずれはテンプレートを公開できたらいいですね

ブログのカスタマイズを着々と進行しています。

主な変更点は以下の通りです

• ヘッダーバーにオリジナル画像を使用
• 背景色を白に変更
• 自己紹介テキスト削除
• サイドバーサイズ縮小
• フッターにオリジナル画像を使用

特に、ヘッダーバーの作成は昔からやりたかったことです。

・ヘッダーバー作成
近年、Faceboo、Google+、ニコニコ動画など、大手SNSでは必ずヘッダーバーを見ますね。
ヘッダーバーはSNSにはなくてはならない存在になっている気がします
やはり、大規模なコンテンツを抱えるSNSでは、どのページでも使えるナビゲーションとしてヘッダーバーが重要な役割をしているのでしょう

この小規模な存在ですが、

ヘッダーバーを実現する方法は画像を使用するのが一番メジャーなやり方のようです
ヘッダーバーの作成はInkscapeで行いました。

グラデーションのかけ方はこちらのサイトを参考にしています
http://kumacrow.blog111.fc2.com/blog-entry-441.html

 

実際は、画像にリピート設定をするので、幅は1pxでいいです。
なので、こんな爪楊枝みたいな画像を作成します。

画像を作成したら、PicasaにアップロードしてCSSで読み込みをします。
このサイトでは、下のようなコードを記述しています。

#topnav{
background:url("https://lh6.googleusercontent.com/-5LgziB_6eGw/UJppE__ELdI/AAAAAAAAANw/pCZ_QDxE1cc/s800/headerbar.png")  repeat-x;
height:40px;
border-bottom: 3px double #999;
}

ポイントは、background:urlの後のrepeat-xです。 これで、画像を繰り返して表示し、ヘッダーバーのデザインを実現しています。

ヘッダーバーに関しては、さらに作りこんでもう一度詳細に触れたいと思います。

・10月全体

全体を振り返ると、ネスぺ受験が今月の全てだったと感じます。

今月はずっとネスぺの勉強をしていた記憶があります。

出来は、まずまずなので、12月の合格発表に期待したいと思います。

以下、個別に振り返りです。

・CEATEC JAPAN 2012参加

人生初参加のCEATECです。テクノロジー系企業の万博のようなイメージです。

しかし、大手家電会社は似た製品の展示が多い印象がありました。国内にライバルメーカーが多いってことですかね。

・ネットワークスペシャリスト受験

10月のメインイベントでした。今月のほとんどの時間を勉強に使用しました。

今は12月の結果発表待ちです。

・Windows Phone ○○の秋

アプリは作成しましたが審査に間に合わず参加できませんでした。悔いが残ります。

・Windows Phoneトライアスロンキャンペーン アイアンマン賞

こちらは無事アプリの提出を行うことができ、アイアンマン賞をもらうことができました。

そして先日、Lumia 710が届きました。

国外メーカーのWindows Phone 7.5端末を持つのは初めてなので嬉しいです。

海外旅行に出かけるとき重宝しそうです。

・11月の予定

・TOEIC勉強

ネスぺが終わったばかりですが、直近の山場は12月のTOEICテストです。

このTOEICテストは手を抜けません。確実に結果をだせるよう11月は英語の勉強に力を注ぎます。

・Bloggerカスタマイズ

ちょくちょくとテンプレート変更とカスタマイズを繰り返していますが、11月中にオリジナルなテーマを作成したいです。

そんで、ブログデザインを落ち着かせたいです。

・「DecoPhoto」のアップデート

海外対応のアプリを出してみたいので、「DecoPhoto」のバージョンアップとともに、英語仕様にしてみたいと思います。

英語の勉強もかねるということで（＾＾；）

だいたいこんなことを11月にやりたいです。

あとは、手が空いたら「将棋ポータル」の設計見直しを進めたいと思います。

では

せっかくロゴを作成したので左上に表示してみました。

見ての通りすぐ下のタイトルとかぶっていて何ともかっこ悪いですね（＾＾；）

もっとカスタマイズしてみようと思います。

ちなみにロゴの画像はPicasaにアップロードしています。

Picasaは画像の埋め込み用URLの取得ができますので、そのURLを読み込んで表示しています。

以下、手順になります。

１．Picasaに画像をアップロードする

２．ブログに使用した画像を選択し、右側の「この写真へのリンク」をクリックします。

３．「画像を埋め込み」コード内の<img>タグのリンクが画像のURLです。

４．CSSならbackground-image: url("画像のURL")で画像の埋め込みができます。

Picasaは、Google+の会員ならほぼ無制限に画像をアップロードすることができます。

レンタルサーバを借りる必要がないので財布に優しいです。

では

最近、知らぬ間に入力モードの切り替え設定がひらがな／全角英数に変わってしまいました。

半角英数

全角英数

このままだとプログラミングしにくいので、ひらがな／半角英数に直そうとしたんですが、設定の仕方がわからず30分ほど、設定方法を探し回ることになってしまいました。

というわけで、今日は入力モードの切り替えの備忘録です。

・原因：何故、入力モードが切り替わったのか？

私と同じ症状をYahoo！知恵袋で質問されていた方がいました。

http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1159394261

どうやらIMEの設定で「前回の変換結果に従う」がONになっているときに、全角英数に変換すると入力モードの切り替えが全角英数に切り替わるようです。

例えば、ひらがなの「えす」を変換するときに、全角英数の「Ｓ」か、半角英数の「S」か入力力モードが切り替わります。

この機能自体は、日頃コンピュータを使いやすくしているはずですが、まさかこのような症状を引き起こすとは・・・

以下は、ネットで調べた備忘録です。

・対処１：IMEを標準状態に戻す

IMEのプロパティから「プロパティの設定を規定値に戻す」でIMEを標準状態に戻すことができます。

私は、これを使用して入力モードをひらがな／半角英数の状態に戻すことができました。

IMEにこれといった設定をしていないなら有効な対処です。

・対処2：半角英数を入力する

原因でも書きましたが、「前回の変換結果に従う」設定のために入力モードが切り替わります。

ですので、半角英数を入力すれば入力モードが半角英数に切り替わります。

対処１だとIME設定がすべて標準状態に戻ってしまうのでこちらの方がおすすめです。

以上、ネットで調べた対処策です。

入力モードの設定は知らないことが多いので、今回みたいなことが起きると困りますね（＾＾；）

Inkscapeの使い方にも大分慣れてきたのでOpenLaboのロゴを作ってみました。

ロゴのコンセプトは、工業をイメージした歯車。
そしてメトロです。

ちなみに、私が思うメトロ風デザインはこんなイメージです。
　１．正方形
　２．文字、オブジェクトのストロークがない
　３．色地に白抜き

あと、「OpenLABO」から「OpenLabo」に変更しています。微妙な違いですが（＾＾；）

とりあえず、しばらくはこのロゴを使用してみようかな。気に入らなかったらまた新しく作り直します。

・OpenLABOのロゴの旧デザイン

「何だこれ？」と思った人もいるかもしれませんが将棋ポータルVer2からアプリ起動時のSplashScreenにはOpenLABOのロゴが表示されるようになっています。

このロゴは、SplashScreenに何か表示するために作成しました。
いかにも手抜きな感じですが作成したときは「なかなかいいジャン！」とか思ってました。
こちらはしばらく封印します。


では、

将棋ポータルVer2では、頑張ってメトロ風アイコンを作成してみたんですが、その時使用したのがInkscapeというフリーソフトです。

Windows 8の発売も間近なので、メトロ風アイコンの作成についての備忘録です。

・Inkscapeとは？
「Inkscape」はフリーのドローソフトです。私は、無料版イラストレーターぐらいの感覚で使用してます。簡単なオブジェクトの描画ならこのソフトで十分に事足ります。

公式ページhttp://inkscape.org/
2012/10/11現在の安定版は0.48.2になります。
0.48.3もありますが、インストール中に止まってしまった・・・


・Inkscapeでメトロ風のアイコンを作ってみる
Inkscapeと「Windows アプリアートギャラリー」を組み合わせればメトロ風のアイコンを簡単に作成することができます。

「Windows アプリアートギャラリー」はマイクロソフトが提供しているフリーの画像素材です。
制限はWindowsアプリに限定して使用しないといけないことです。

それでは早速メトロ風アイコンの作成に入ります。
まず、ページのサイズを縦横とも200に設定します。サイズの変更方法はファイル→ドキュメント設定でサイズの設定画面になります。

次に、四角形のオブジェクトを配置します。サイズは縦横ともに200です。

最後は、「Windows アプリアートギャラリー」からとってきたバドミントンのラケットをのっけてできあがりです。

下の画像は秋コン用に作成した「Sports Sound」のメニュー画面です。
タイルが並んでいるとメトロっぽくなりますね。

今回紹介した「Windows アプリアートギャラリー」や、以前紹介した「Syncfusion Metro Stduio」を使用すればメトロ風アイコンの作成は簡単にできそうです。高い画力はそんなに必要ないイメージです。

そのかわりデザインセンス、特に配色のセンスがいると感じました（＾＾；）
では

本日、ネットワークスペシャリスト試験を受験してきました。今回で二度目の受験になります。

前回は、午後Ⅱで途中退室するというありさまでしたが、今回はしっかり勉強したおかげでそれなりな手ごたえがあります。

最も、前回も午前Ⅱは突破したと思っていたのに落ちていたのでまったく頼りにならない手ごたえですけど（＾＾；）

とりあえず試験の備忘録を書き留めておこうと思います。

・勉強に使用した参考書

試験勉強に使用した参考書は以下の3つです。全部アイテックの本です。

高度専門 ネットワーク技術 第2版

2012 ネットワークスペシャリスト「専門知識+午後問題」の重点対策

2012 徹底解説ネットワークスペシャリスト本試験問題

・勉強期間

前回の受験時から一年間みっちりと勉強・・・というわけでははく、本格的に勉強を始めたのは試験の２か月前からになります。

それ以前は、参考書を流し読みしつつ気になった単語などをWikipediaで調べたりしていました。

２か月前からは、「高度専門 ネットワーク技術 第2版」をひたすら読み込む勉強をしてました。

大体、3回くらい読み直しただろうか・・・

１か月前から「2012 ネットワークスペシャリスト「専門知識+午後問題」の重点対策」、「2012 徹底解説ネットワークスペシャリスト本試験問題 」の二冊を使って午後問の勉強を始めました。

午後問には解法があるみたいなので、その感覚をつかむために同じ過去問を何回かときながら問題文のどこを読めば解答を導き出せるか調べてました。

しかし、試験前日になっても過去問でわからない部分がかなり多かったです。

・試験当日

試験当日は、午前Ⅰが免除だったので朝はマクドナルドでコーヒーを飲みながら復習していました。

朝はハンバーガー1個、昼はおにぎりとブラックサンダー１個ずつという絞った食事をしていました（＾＾）

試験自体は、最後まで集中して受けることができました。

しかし、前回とは逆に時間が足りなくなってしまい2、3問悔いの残る解答をしてしまいました。

・試験を受けて

今回で二回目の受験になりますが、前回よりは確実にできているはずです。

しかし、全体的に知識、経験不足な感がいなめません。

特に、ネットワークの構築の経験が少ないため、各機器やプロトコルだけを勉強しても、午後問のような問題を解くのは難しいと感じました。

今回の試験が不合格ですと次回から午前Ⅰの勉強もしないといけないのでますます合格が困難になります。とりあえず試験の合否発表まで悶々とした毎日を過ごそうと思います（＾＾）

この前、無料ドローソフト「Inkscape」を使おうとしたら起動できませんでした。

エラーの内容はこんな感じ↓

アプリケーションを起動できません（0xc0000005）
アプリケーションを終了します。

んで、「0xc0000005」でググってみたけど何か決定盤の解決策がみつからない＾＾；
なのでいろいろ試してみました！

・Windows Updateで解決！
結果から言えばWindows Updateをして再起動をかけたら直りました。
本当にあっさりと直ったのでここに原因があったのでしょう、たぶん・・・

・アンインストール・インストール
真っ先に試したのがこれ。まったく効果ありませんでした。
「Inkscape」のバージョンを落としてみても効果なし。
最もいくつかのサイトで「アンインストールはあまり効果ない」と書かれていました。

・Google Chromeの更新
ネットで調べて出てきたのが「Googleデスクトップ」をインストールしたらこの症状が起きたという例。
その例では、「Googleデスクトップ」をアンインストールしたら起動できるようになったとのこと。

私は、Googleデスクトップはインストールしていないですが、同じGoogle製品ということでGoogle ChromeがインストールされていたのでChromeのバージョンを更新してみることに。

結果は駄目でした。Inkscapeは相変わらず起動しません。

本来ならChromeをアンインストールしたら起動するかもしれないけれど、そこまでのやる気はおきませんでした・・・

・Windows Updateの更新
最後に試したのがWindows Update。そして、これで直りました。
しかし、詳しい原因が判明していません。
今後、同じ症状が起きた場合に困ります・・・


以下、参考にしたサイトです。
0xc0000005について詳しく解説しているサイト
http://pctrouble.lessismore.cc/running/0xc0000005.html
「Inkscape」のWiki。「Googleデスクトップ」との例が載っています
http://wikiwiki.jp/inkscape/?%BB%A8%C3%CC
Google Chromeでこのエラーが出た場合にレジストの編集で直す例が載ってます
http://d.hatena.ne.jp/rsyudo/20080903/p1

ちょっと経たないうちに部屋の中に本がたまってきました。

いわゆる積本というやつですね。

こいつが部屋の隅から発生し、じわじわと部屋中を侵食してきています。

このままでは部屋中が本で埋まる日もそう遠くありません・・・


大学時代の恩師は、本は読んだら売れ！と、教えてくれましたが、なかなか手放せない・・・
というか、積本だからそもそも読んでいなかった・・・

つまり、対抗策はただ一つ！しっかりと本を読まなければ！

というわけで多くの積本の中から特に読まなければ！という本を精選しました。

これらを今年中には読むようにしたいと考えています。

しかし、左２冊は技術本ゆえに読むのに時間がかかります。

しかも、しっかりと技術として身に着けるにはさらに時間がかかることが考えられます。

綿密な読書計画を立てなければきっと今年中にこれらの本を読み切ることはできないでしょう。

さらにいえば、今月はネットワークスペシャリスト試験。来月はTOEICの受験も控えています。

読書に気を取られこれらの試験の勉強をおろそかにしたら元も子もありません。

というわけで左２冊は今日から継続的に読み続ける方向で考えています。
特にUMLの知識＆技術は早いうちに身に着けたいのでこちらの本を先に読んでいく計画です。

右５冊は、一か月に２冊ずつ読む計画でいきます。

あと、１２月は「なれる！SE」の８巻が出るらしいのでそれも計画に入れときます。、

右５冊の読む順番も決めておきます。

１０月：マーベリックカンパニー、理科系の作文技術（再読）

１１月：アルファドックカンパニー、道は開ける

１２月：ザ・プロフィット、なれる！SE ８

とりあえずはこの計画でいこうと思います。

それにしても本は容赦なくたまっていきますね。
一体、みんなはどうやって本を整理しているのだろうか・・・

本日最終日のCEATEC JAPAN 2012に参加してきました。
今年から東京に住んでいるので、電車で気楽に参加できました。

電車で幕張メッセに向かう途中に参加賞を忘れたことに気づきましたが、会場には参加賞を忘れた人用の受付があり、その場で発行してもらうことにより難を逃れました。

最終日は、無料公開日とのこともあり学生や家族の姿が目立ちました。
ちなみに私も私服でいきました。

以下、各ブースの感想を殴り書きです。
ソニー：
Windows 8を搭載したUltrabookを見てきました。
こちらね↓
http://itpro.nikkeibp.co.jp/article/NEWS/20121002/426782/

半年くらいまえにIntelが発表していた「CovePoint」を思い出させるデザイン。
タブレットにもPCにもなるハイブリットPC。
タッチパネル前提につくられたWindows 8にはてもマッチしています。
デモ機は軽快に動作しておりこれなら開発用PCとしても使える印象。

あと、ホームボタンがついてたんですがこれが非常に便利。
これは普通のノートパソコンにもついているとありがたいぐらい便利。
というかWindows 8には必須と感じました。

NTTドコモ：
こちらの目玉はiBeamですかね。
iBeam↓
http://news.mynavi.jp/articles/2012/10/01/ceatec01/index.html

iBeamは視線でタブレットを操作できるという代物。
利用シーンは電車など片手がふさがっているところとのこと。
けど、会場のデモはタブレットが固定されていたので、実際に揺れがある電車内でiBeamを使用するのはかなり困難な気がしました。

それよりは、看護やリハビリテーションの分野。
もしくは視力回復トレーニングなんかに利用できるのではないかと感じました。

シャープ：
展示ブース全体が薄暗かったためかIGZOの綺麗さがとても目立ちました。

IGZO↓

http://www.inside-games.jp/article/2012/10/04/60302.html

会場でみたらほんとマジで吸い込まれそうな液晶です。

今後、家電量販店で見たときにその感動が変わらず得られるなら欲しい！

他にも、村田製作所とかのセンサー関係が印象に残ったけどそれはいずれ・・・
とりあえず思ったよりWindows 8が少なかったよ・・・

将棋ポータルの再設計を着々と進行させています。

今回は、将棋盤関連の見直しを行うために現状のプログラム（将棋盤関連）の状態を相関図にしてみました。
画像はPowerPoint2010で作成しました。
人に見せるには恥ずかしい内容ですが、大体こんな状態になっています。

この相関図は、将棋ポータルの対局と、棋譜並べの機能のプログラムの関係を表しています。
BattleSetting.xamlは持ち時間設定画面

ReadPage.xamlは棋譜読み込みの画面

GamePage.xamlは将棋盤の画面

対局でも棋譜並べでも将棋盤はこのGamePageを使用しています。
対局と棋譜並べはどちらのファイルからアクセスがあったかを判断して、機能をわけています。

・とりあえず現在の問題点をあげてみた
現在の一番の問題点は、プログラムで扱える棋譜が独自形式になっていることです。
今となっては独自形式の使用に特に深い理由はないので、ここは、柿木形式をそのまま扱えるように改善したいと考えています。
そしてゆくゆくは、CPU対戦機能を実装したい！

次の問題点は、KifuConverter.csにGamePageからアクセスしていることです。
KifuConverter.csがそこにあることに特に深い理由はない！ですのでここは、ReadPageの機能を拡張し、そこで棋譜DB機能、棋譜形式の変換等おこなえるようにしたいと考えています。


最後に将棋盤の駒の画像です。現状の画像では、駒の文字が読みにくい！
ここは、NHK将棋トーナメントで使用しているような一文字の将棋駒の画像に変更します。
そうすることでスマートフォンのような小さな画面でも見やすくなるはず・・・
駒の画像は自作します。Inkscapeを使えばそんなに難しいことではないはずです。

以上、今回は現状のプログラムの見直しと、今後どうしたいかを書き出してみました。
今週の土、日を使って設計できたらいいなと考えています。
しかし、土曜日はCEATECにも行きたいという・・・

無料版astah*をインストールしていざ将棋ポータルの設計を見直してみよう！
と、思い立ったんですが、実はUMLがよくわからない（＾＾；）

とりあえず現在の将棋ポータルの状態を箇条書きしてみることにします。
UMLは全然関係ないけどな！

• 現在の将棋ポータルは９個のソースコードから成り立っている
• そのうち７個はxamlファイルとC#ファイルの組み合わせ
• ２個は局面の処理や、棋譜のコンバートを行うファイル
• 現在、４つの機能（対局、棋譜並べ、本検索、RSSリーダー）がある
• ４つの機能はアプリのルートページからそれぞれアクセスできる
• 対局は、時間設定画面、将棋盤画面、局面処理のソースコードからなる
• 棋譜並べは、棋譜読み込み画面、棋譜コンバーター、将棋盤画面、局面処理のソースコードからなる
• 本検索は、本検索画面だけ
• RSSリーダーはRSSリーダー画面だけ

全体だと大体こんな感じかな。
うーむ、箇条書きだとよくわからん（＾＾；）

次はもうちょっと各機能の処理に焦点をあてていきます。
というかUML全く使ってないな・・・

将棋ポータルもバージョン２になって、段々とプログラムの規模が膨張してきました。

こうプログラムが大きいと、バグが出たときに原因箇所の特定に戸惑ったり、新しい機能を追加しにくくなったりしてきます。

何よりもプロジェクトを開くとファイルがたくさん出てきて非常にうっとうしい（＾＾；）

プログラムの動作も不安定になってきている気がします。

そこで、自分のプログラムの設計を見直すことにしました。

今回は、UMLを使ってしっかりとアーキテクチャを描いてみることにします。

そのためにはUMLモデリングのためのツールが必要です（ノートに走り書きでもいいけど・・・）

さっそく、Googleで「UML　無料」で検索してみることに・・・

・無料のUMLモデリングツール「astah* Community」をインストール

とりあえず検索のトップででてきたastah* Communityを使用してみることにしました。

提供元は国内のチェンジビジョンという会社。つまりastahは純国産のUMLモデリングツールということらしいです。

チェンジビジョン社公式HP

http://astah.change-vision.com/ja/index.php

サイトから製品紹介ページをみてみるとastahには複数のエディションがあることがわかります。

このうち、無料で使えるのはastah* Communityのみらしいです（その他のエディションはどれも１万円越え、ですがソフトウェアの値段としては安いほうかも・・・）

とりあえずダウンロードページからインストーラを手に入れてインストールしてみました。

ダウンロードページ

http://astah.change-vision.com/ja/product/astah-community.html

インストール自体は、特に戸惑うところもありません。

次へを連打すればあっというまにインストール終了です。

早速プログラムを起動してみて使用感を確かめます。

うん。デザインも各シンボルが見やすくて結構よさそう（＾＾）

操作性もなかなか良好です。起動時間もそれなりに早い。

しかし、有償版のみの機能が灰色で表示されているのはどうだろうか？

使えたら便利そうな機能が軒並み有償版なのでがっかりすること山の如し。

有償版が欲しくなりますね。金さえあれば・・・

ちなみにastah*以外のUMLモデリングツールはここのブログが手広く紹介しています。

http://ynomura.dip.jp/archives/2010/10/uml.html

各ツールの特徴が非常にわかりやすくまとめてあってとても助かります。

WP7アプリの開発中になぜか毎回忘れてしまいがちな処理を書き留めたいと思います。 

完璧な備忘録です、ええ

  １．C#からのUIElement色変え
クリックしたときに色が変わる等、動的にオブジェクトの色を変えたいときはC#から色の変更処理を行う必要がある。

tb.Foreground = new SolidColorBrush(Colors.Black);
tb.Foreground = new SolidColorBrush(Colors.White);
tb.Foreground = new SolidColorBrush(Colors.Blue);

C#で色の指定を行うときは、SolidColorBrushから行う。


２．フォルダから画像を読み込んでImageのソースに代入するとき
こちらも単純に画像のURLを渡すだけではダメ。

img.Source = new BitmapImage(new Uri("image/PictureFolder.png", UriKind.RelativeOrAbsolute));

こんな感じに一度BitmapImageを作成してからImage.Sourceに代入してあげる

以上、備忘録でした

前々からBloggerにソースコードを表示する方法を探していたんですが、いいのが見つかったので導入してみることにします。

ブログへソースコードを表示するときに良くつかわれるのが「SyntaxHighlighter」というもの。
さっそくここのサイトをヒントにやってみることにしました。
http://wada811.blogspot.com/2012/02/bloggersyntaxhighlighter.html


1、とりあえず全部はっつける
サイトを見てみるとまず使用する言語を選ぶチェックボックスが並んでいる。
ここで自分が良く使う言語を選ぶみたい。
しかし、ここ１年間でも目まぐるしく使用言語が変わっているのでここは全部チェックということで。

とうわけで生成されたソースコードを「HTMLの編集」からテンプレートに張り付ける。 ちなみに張り付ける場所は</head>の直前が良いらしい。 というわけでソースコードが無事に表示されるようになりました。 細かい調節もあるんだけどそれは次回にやります。

以前まで使っていたテンプレート「Education Bｌog」が、アドセンスの掲載に伴ってあんまりしっくりこなくなりました。

そこで新しくしっくりくるBloggerのテンプレートを探すことに…

こういう時は「Blogger　テンプレート」でググります。

検索結果から、まず最初に目についたサイトは「フリーのBloggerテンプレート・36+4まとめ

」

この中から、気になったテンプレートをいろいろ試してみることにしました。

この中で最も気に入ったのが「Corporate」のテンプレート。

豚の画像がかわいいですよね。

さっそくテンプレートをアップロードしてみたら見慣れぬメニューが増えていました。

どうやら「Corporate」の名の通り企業向けページの作成に適したテンプレートのよう。

だからAboutとかProductsなどのメニューがあるんですね！

最初のカスタマイズで、とりあえず使用していないメニューバーを削除することにしました。

HTMLの編集からAboutで検索するとメニューバーに関する記述がみつかります。

<div class='hide' id='navigation'>

<ul>

<li><a class='homepage' href='/'>Home</a></li>

                 <li><a href='#'>About</a></li>

                 <li><a href='#'>Services</a></li>

                 <li><a href='#'>Products</a></li>

                 <li><a href='#'>Support</a></li>

                 <li><a href='#'>Contact us</a></li>

</ul>

</div>

ここから使用しないメニューを<!---->で囲んでしまえばは一様メニューバーのカスタマイズは終了です。

これからしばらくはこのテンプレートをいろいろカスタマイズしてみたいと思います。

以前、紹介したKinectEffectという動画の日本語版がYouTubeに上がっていました。

 

 

機械語翻訳のような日本語ナレーションですが、英語版のときに後ろで喋ってた英語の意味がやっとわかりました。

 

何より、BGMのWhere Is My Mindが素晴らしい。



初めてこの動画を見たときは、その選曲にとても感動したこと覚えています。

本日、品川のグランドプリンスホテルにて開催されている「Microsoft Conference 2012」に参加してきました。

午後からの参加だったんですが、目当てがKinectに関する講演だったのでセーフです（＾＾）

Kinectに関する講演は、概要と導入事例の二つがありました。もちろん両方とも参加です。

概要講演：
大学を卒業してから、まったくKinectに触れていないため新鮮な話が多く聞けました。

また、NUI(Natural User Interface）ありきで話してくれたので、これからKinectアプリケーションを作成するときのヒントを多くもらえたと思います。

10月6日にリリースされるv1.6の情報も聞けました。
やっと、4m以上の深度が取得できるようになるのがうれしいところ。
詳しくは、リリース後にまた、触れたいと思います。

アプリケーション開発サイクルの話も聞けました。やっぱり、テストが重要とのことです。誰もが使いやすいと感じるには、日々のフィードバックと改良が必要なんですな。

最後は、Kinectのイメージビデオが流れました。

講演では、日本語バージョンになっていました。
何回見てもモチベーションを高められる動画ですｗ


導入事例講演：
講演2では、たくさんの導入事例を紹介してもらいました。
数が多いので、さらっと箇条書きします。

• 三井ホーム：家具、家電をジェスチャー入力で操作
• アーケードゲーム：DDR並みのヒット、人だかりがすごいらしい
• トヨタ：ショーイベントで使用。
• 医療：非接触インタフェースとして活躍。論文もありました。http://www.eizojoho.co.jp/industrial/pdf/201206i_22.pdf
• リハビリ：患者のモチベーション維持に利用
• 見守り支援：患者の様子を監視
• ビッグデータ：人流計測のセンサーとして使用。
• ヒューマンエラー防止
• アパレル：疑似試着に使用。
• 教育：ヒップホップダンスの訓練に使うんだとかなんとか

まだまだ、たくさん紹介されていましたが、どれもかなり実用化されつつある感じです。

また、Kienctは、日本が最も盛んにとりんくんでいるらしいです。
学生の人たちは、卒業研究のテーマにするなら、先行研究の調査を怠ると大変な目に合いそうですな。

MSDNでは、Pivotページを使用する時のベストプラクティスとしてコンテンツのオンデマンド読み込みが推奨されています。
http://msdn.microsoft.com/ja-jp/library/ff941101(v=vs.92).aspx

私自身も、前々から実装したいなー、って思っていたんですが、やり方がわからないので手をださないでいました。
しかし、「将棋ポータル」をVer2にする時に、どうしても必要と感じたので開発フォーラムで質問して実装方法を教えてもらいました。

オンデマンド読み込みがどんなものか、一様、紹介させてもらいますと、ｍｓｎニュースアプリとかで、ニュースのカテゴリ変更時に、データを読み込むようにすることです。

・将棋ポータルに実装したオンデマンド読み込み
WP7の開発フォーラムを見れば、私の質問がありますので、そちらの回答を見てもらうとオンデマンド読み込みの仕組みがわかると思います。

要は、最初にPivotItemが切り替わった時にだけデータを取得するようにすればいいみたいです。

・いざ実装
まず、XAMLからSelectionChangedイベントを追加しました。

次は、C#からPivot_SelectionChanged内の処理を書いていきます。
ほとんど回答してもらった内容にそって作成しています。
ただし、初回読み込みの判定はコンテンツの有無ではなく、フラグを使用したものになっています。
なので、もし読み込みに失敗したら二度とコンテンツを取得できないという。。。
今のところ大丈夫ですが、次のアップデートまでには見直したいところです。


あと、記事書いてて思ったことですが、Bloggerへのソースコード表示方法を調べなければ（＾＾；）

Windows Phoneのマーケットプレースで公開している将棋アプリ「将棋ポータル」のVer2を申請しました。

今回は、今までの状態から大幅にデザインを変更しているとともに、二つほど機能を追加しています。

・UIをメトロ風に変更
ホーム画面を、今までのボタンを並べていたUIから、メトロを意識したUIに変更しました。

 

左がVer２で、右がVer１です。やはり、タイルを使用すると、メトロらしさがぐっと出てきますね。

ちなみにアイコンの作成は、Inkscapeを使用しています。一つのアイコンの作成時間は30分もかからないです。割と簡単に作成できますね。

 

・新機能１：将棋本の検索

Ver1でも、おまけ程度でついていましたが、一つの機能として独立させました。





 





矢倉、横歩取り、角換わり、四間飛車、三間飛車、中飛車は、デフォルトで検索できるようになっています。もちろん、自分で検索キーワードを入力することもできます。

こちらは、Pivotを使用したオンデマンドの、コンテンツ読み込みに手間取りました。

しかし、開発フォーラムの助けを得て実装することができました。

 

・新機能２：中継ブログのRSSリーダー機能

近年、将棋界もIT化が進んでいるため、各棋戦には大体、中継ブログが存在します。

この機能は、各中継ブログのRSSリーダーとなっています。

 

取得できる中継ブログは、竜王戦、王位戦、王座戦、棋王戦、棋聖戦、新人王戦、加古川清流戦、達人戦になります。
本の検索の機能を流用することで、簡単に作成できました。
しかし、RSSからLinqで情報を抜き出すのには苦労しましたね。また、今度別の記事で書きたいと思います。
また、画像取得のために正規表現を使用したんですが、正規表現をプログラムに実装するのは、初めてだったため、エラーがすごく出ました。御かげでさまで画像の取得も行えるようになりましたがね。

・成果と今後
今回は、技術的にも、オンデマンド読み込み、RSSの解析、正規表現の使用と、新しいことに挑戦できました。
また、デザイン面もフリー画像の使用でなく、一からアイコンの作成を行いました。メトロ風アイコンの作成は、簡単に行えることがわかったのが一つの成果です。
ただし、バージョンアップまでの期間があまりにも開きすぎたのが問題です。
次回からは、アップデートはこまめに行うようにしていきたいです。

今後のバージョンアップ予定ですが、
・将棋盤のデザイン変更
・将棋盤プログラムの見直し
・.kifファイルからの棋譜読み込みと、棋譜のデータベース化
・WebAPIを使用して、将棋ニュースのRSSリーダー
・周り将棋など、将棋に関する別のゲームを収録
・将棋関係のTwitterを取得する機能
・各種機能のセカンダリタイル化＆エージェントで更新通知
・今後の対局予定と、対局結果の取得
あたりを予定しています。

どちらかというと見る、調べるを主体としたアプリにしていく予定です。

CPU対戦機能は、大変時間を労する勉強が必要なため、なかなか手が出せない状況です。
ニーズはあるので、そのうちやりたいかも(^_^)

WP7アプリを作ってて、毎回、UIには悩まされます。
やはり、Windows ストアアプリのUIは独特なので、アイコン作成の手を抜くとなかなか、WP7アプリさがだせなくなります。

そこで、何か良いデザインツールないかなー、っと探していたら下記のツールを発見しました。

商用フリー、“メトロ”アイコンを簡単に作成できる「Syncfusion Metro Studio」
http://www.forest.impress.co.jp/docs/news/20120309_517374.html

これは使えるかもしれないということで早速インストールしてみました。

・インストーラーの入手
まずは、提供元のホームページにいきます。
Syncfusionの公式ホームページ

トップページから、メニューバーのProductを開くとMetroStudioのダウンロードページに行けます。
ダウンロードするためには、名前、会社名、メルアド、電話番号を入力する必要があります。

すべて入力するとインストーラーがダウンロードできます。インストーラー自体は、約10Mbほどのファイルです。

・Syncfusion Metro Studio2のインストール
Syncfusion Metro Studio2のインストールは非常に簡単でした。Windows8のUIっぽいインストール画面が特徴です。

 

 

Nextを押していくと、名前と会社名、あとロック解除キーを聞かれます。

ロック解除キーはインストーラーのダウンロード時に入力したメルアドに届いています。

インストーラーではよくある承認のコーナーです。よく読んでから同意するようにしましょう。
ちなみに、acceptは受け入れるという意味です。
ここが終わると、インストール場所を聞いてきます。基本的にはデフォルトでいいはずです。
その後は、いよいよインストール開始です。

動画サイトで動画を見ている間にインストールが終わっていました。とりあえずソフトを立ち上げてみます。

おお！Windows8風のアイコンがずらりとたくさんあります。
アイコンの数は全部で約1700種類らしいです。
それぞれがカスタマイズも可能で、画像として取得するだけでなくXAMLのコードとして出力もしてくれるようです。

細かい使い方は今後みていきます。
それにしても1700種類のアイコンがデフォルトで使用できるだけでも十分魅力的です。

前回に紹介した「エンジニアのための時間管理術」を読み終わりました。
自己啓発本として有意義なだけでなく、単純な読み物としても面白い本でした。
ページ数も丁度よく二日でじっくり読み終えるぐらいです。

この本を読むと、どんなものが時間を浪費する無駄かがわかります。
特に、朝、ニュースを読んだり、メールを読んだりする前に、一日の計画をたてるようにするというのは印象に残りました。
ニュースもメールも時間管理には敵なんですね。

 メインは著者が編み出した「サイクルシステム」という時間管理法の紹介です。
「サイクルシステム」は、エンジニアのみならず働くすべての人に有効な時間管理術だと思います。

私も、明日からこの本に書いてあることのいくつかを実践していこうと思います。

とりあえず後書きに書いてある通り、もう一度、本書を流し読みをすることから始めてみます。

前回に引き続きBloggerのテンプレートを編集したいと思います。

今回は、投稿文と投稿文の間に線を一本引きたいと思います。
デフォルトの状態だと、線がないため投稿文と投稿文の間の境目がわかりにくくなっています。

線なしの状態

・線を引く
まず線を引く場所ですが、日付とタイトルの間にします。ここに一本線を引きます。
CSSを使って線を引く方法はPart１で使用した枠線のコードとにています。

border-top: 1px solid #cccccc;

このコードを書けば線が引けます。
線は日付とタイトルの間に引きたいので、タイトルのデザインを行っている部分を探します。

.post h3 {
    color: #000000;
    font-size: 170%;
    font-weight: bold;
    line-height: 1.4em;
    margin: 0.25em 0 0;
    padding: 0 0 4px;
}

どうやらこの部分でタイトルのデザインを行っているようなので、先ほどのコードをここに追加します。

線ありの状態

 

これで線が引かれて前より見やすくなったはずです。

前回に引き続きBloggerのテンプレートのカスタマイズを行っていきます。

・フォントの変更
Education Blogでは、デフォルトのフォントが明朝体となっています。
しかし、明朝体は紙媒体では読みやすいフォントとして有効だと思いますが、パソコンで読む文字としてはあまり適切でないように思います。

ここはやはり、文字として認識しやすいゴシック体を使用したいところです。
ゴシック体は明朝体と比べて、文字が読みやすいという特徴があります。
ゴシック体なら、モバイル向けページなどの小さい画面でも文字を読むことができるでしょう。

通常ならBloggerは、テンプレートデザイナーを使用して、簡単にフォントの変更を行えますが、Education Blogの場合は、直接、HTMLの編集を行う必要があります。さっそく、テンプレート→HTMLの編集を開いて、ソースコードを書き換えます。
※HTMLの編集をする前に、必ずテンプレートのバックアップを取っておきましょう。

CSSの記述でSerifとなっている個所を片っ端からSans-serifに書き換えます。
※Serif=明朝体、Sans-serif=ゴシック体です

Serif：明朝体

Sans-serif：ゴシック体

 

これで、文字がぐっと読みやすくなりました。
テンプレートデザイナーに対応してたらもっと楽にできるんですけど、そこはHTML＆CSSの勉強だと思って取り組みましょう。

私のブログは、「Blogger Template」でとってきたEducation Blogというテンプレートを使用しています。

※リンク
BTemplates：http://btemplates.com/
Education Blog：http://btemplates.com/2012/blogger-template-educationblog/

このままでも悪くないんだけど、気になったところもあったので少し編集しました。

・投稿文に枠線を足す
このテンプレートはデフォルトのままだと、投稿文の枠がありません。また、背景画像と、投稿文の背景色がとても近いので、どこが投稿文なのかわかりにくいです。

というわけでHTMLの編集をします。BloggerのテンプレートからHTMLの編集を開き、投稿文に関するCSSを探します。
#main-wrapper {
    background: none repeat scroll 0 0 #FFFFFF;
    float: left;
    margin-left: 0;
    margin-top: 0;
    overflow: hidden;
    padding: 10px;
    width: 616px;
    word-wrap: break-word;
}
どうやらここが投稿文のデザインをしている部分のようなのでここに枠線を表示する文を付け足します。

border-style: double; /* 枠線の形 */
border-color: #cccccc;/* 枠線の色 */
border-top-width: 2px; /* 上の枠の太さ */
border-bottom-width: 2px; /* 下の枠の太さ */
border-left-width: 2px; /* 左の枠の太さ */
border-right-width: 2px; /* 右の枠の太さ */
以上で投稿文に枠線が表示されるようになりました。

枠線なし

 

枠線あり

 

これで前より少し見やすくなったと思います。