BLOG：新適当マイコン電子工作研究所：So-netブログ

	ブログをはじめるログイン

写真アクセスランキング　 [BLOG]

		1月12日に，So-netから「【重要】フォト、クチコミ地図、プロフィールのサービス終了のお知らせ」というお知らせがありました．このブログでも，ほとんどの写真で「So-netフォト」を使用しており，イベントの場所などの情報で「クチコミ地図」を使用しておりました．この後，これらの写真たちがどのような運命をたどるのかうかがい知ることはできません．せめて，本日現在のアクセス上位10枚をご紹介いたします．ミシン，意外に強かったのね．
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

2010-01-13 17:13 nice!(0) コメント(0) トラックバック(0)

マイコミジャーナル記事転載サービス(β版)てのがあるんだ。　[BLOG]

某所で「マイコミジャーナル記事転載サービス(β版)」を使った記事を見かけたので、まねしてみた。

http://journal.mycom.co.jp/news/2009/09/11/047/index.html

ちょいと、スタイルシートの調整が必要みたいだ。

Canon インクタンク BCI-7e 6色マルチパック

出版社/メーカー: キヤノン
メディア: エレクトロニクス

Canon インクタンク BCI-9BK ブラック

出版社/メーカー: キヤノン
メディア: エレクトロニクス

もっとも、インクともう一つ何か買ったら、1500円にはすぐに達しちゃうから、本・雑誌単体の時のほうが重宝するんだろうな。

子供の科学 2009年 10月号 [雑誌]

作者:
出版社/メーカー: 誠文堂新光社
発売日: 2009/09/10
メディア: 雑誌

2009-09-13 16:05 nice!(0) コメント(0) トラックバック(0)

so-net 管理ページ衣替え記念、BLOGのアイコンを変更する方法　 [BLOG]

別に記念するようなもんじゃ無いんですけどね。

アドレスバーのアイコンは、、どこからやって来る？

最近、当BLOGをWEBブラウザで表示したとき、タブに「渦巻きアイコン」が表示されるようになったことにお気づきの方もいらっしゃるかと思います。これは、 noritan.org がレンタル・サーバになったことに気をよくして変更したものです。隣に見える管理ページのアイコンは、so-net が用意したものです。今日のテーマは、このアイコンを自分の好みのものにする方法です。

そもそも、このアイコンは、どこから来たかというと、各WEBページに「このページのアイコン画像は、これです。」という情報が埋め込まれています。詳しいことは、 w3c.org の FAQ How to Add a Favicon to your Site に書いてあります。当BLOGで採用しているのは、「Method 1 (Preferred): Use of a rel attribute value defined in a profile」の方法です。

<link rel="icon" href="http://noritan.org/favicon.png" type="image/png" />

要は、こんなタグがWEBページに書いてあれば OK なのです。画像は、 noritan.org 配下にあります。

で、どこに書くんだ？

w3c.orgの文書にもあるように、このタグは、 <head> の要素として書かなくてはなりません。ところが、BLOGというシステムの場合には、<heead> タグは自動的に生成されてしまいます。そこで、so-netの場合には、テンプレートのHTMLを直接変更してしまいます。

ここで記述している方法は、HTMLを直接変更するため、失敗した場合にはBLOGが表示されないという深刻な事態を引き起こす可能性があります。十分に理解したうえで、お試しください。

管理ページで「デザイン」タブをクリックし、さらに「HTML編集」をクリックします。すると、「上級者向け」というラベルの下に編集すべきHTMLを選択する画面が現れます。

ここから、現在使用しているHTMLを選びます。私の場合は、「はてな付き」という名前のHTMLを使用しています。あれっ？選べませんか？実は、HTMLの編集は、「カスタムHTML」にしか許されていないのです。編集可能なスキンを追加した上で、カスタムのHTMLを準備してからお試しください。

すると、HTML編集画面が出てきますので、「<!--link rel="shortcut icon" href=…」と w3c.org 勧告に沿わない行をコメントアウト、または削除して、アイコンをありかを示す <link> タグを追加します。これで、WEBブラウザ上にお好みのアイコンが表示されるようになります。

本当は、<head>タグにも profile 属性を追加しなきゃいけなかったのね。あとで変えておこう。

アイコンの規格は？

アイコンは、16×16ピクセル、または、32×32ピクセルの8-または24-ビット色のもので、フォーマットは PNG（W3C 標準）、GIF、または ICO と定められています。置き場所は。各自考えてください。もちろん、so-net のファイル置き場にある画像も使えます。適宜 URL を探り当てて使ってください。

参考サイト

How to Add a Favicon to your Site: 困った時には、 W3C に探しに行くと、たいてい解決します。ただ、このFAQに限って言えば、まだ Draft の段階なのだそうで、将来変更されるかもしれません。

2009-02-15 21:25 nice!(1) コメント(0) トラックバック(0)

so-net blog に「はてな」のカウンタを付けてみた　 [BLOG]

so-net blogにも、だいぶなれたので、いらない事をしてみたくなりました。今日は、so-net blog 限定のネタです。

今日の話題は、HTMLを自分で書き換えるお話です。失敗するとBLOGが正常に表示されなくなりますので、HTMLに不慣れな方には、お勧めできません。自信のある方のみ、お試しください。

はてなのブックマークカウンターを表示する

某さわぎに関連して、はてなブックマークを参照していたら、「はてなブックマークカウンターを自分のサイトに貼り付ける」という広告が出ていました。読んでみたら、このBLOGでもできそうなので、付けてみました。タイトル画像の右側の「なす」の下がそれです。

設定するところは、「管理ページ」の「デザイン」-「レイアウト」タブの中にあります。ここでは、BLOGのサイド・バーの配置などの設定をすることが出来ますが、もっと高度なサイド・コンテンツの中身の編集もすることができます。今回、ブックマークカウンタを付けたのは、「プロフィール」というコンテンツです。「プロフィール」と書かれた所をクリックします。

すると、ブラウザ内に「プロフィール」ウィンドウが開きます。このウィンドウの右上にある「コンテンツHTML編集」をクリックすると、「プロフィール」部分の中身を編集するエディタが開きます。下から４行目に<% content.footer -%>と書かれた行があるので、その上に以下のように記述します。

<a href="http://b.hatena.ne.jp/entrylist?url=<% blog.page_url | html %>"><img
src="http://b.hatena.ne.jp/bc/pr/<% blog.page_url | html %>" class="bcounter"
alt="新適当マイコン電子工作研究所のはてなブックマーク数"
title="新適当マイコン電子工作研究所のはてなブックマーク数"></a>
<% content.footer -%>

alt属性とtitle属性は、お好みにより変更してください。また、色もはてなのページを参照してお好みにより変更してください。変更が終わったら、「保存」ボタンをクリックし、右上の「プロフィールの設定に戻る」をクリックし、戻った画面で「設定を保存する」をクリックします。これで、「プロフィール」サイド・コンテンツに「ブックマークカウンター」が表示されるようになります。

はてなの被ブックマーク数を表示する

次は、「自分のブログに被ブックマーク数を表示する」に挑戦します。タイトル画像の左側の矢印の部分です。被ブックマーク数は、BLOGの記事ごとに表示させます。「ブックマークカウンター」の設定の時と同様に「管理ページ」の「デザイン」-「レイアウト」タブを開きます。

今度は、「記事」と書かれたところをクリックします。「プロフィール」の時と同じように「コンテンツHTML編集」をクリックし、エディタを開きます。今回の変更箇所は、上から３分の１のところにある、<h2 class="articles-title">と書かれた行です。この行は、かなり長々とした行です。その最後尾にさらに以下の記述を追加します。

article.id %>">[編集]</a></span><% /if %><a
href="http://b.hatena.ne.jp/entry/<% article.page_url | html %>"><img
src="http://b.hatena.ne.jp/entry/image/large/<% article.page_url | html %>"></a></h2>
<% if:page_name eq 'article' -%>

編集が終わったら、「保存」ボタンをクリックし、右上の「記事の設定に戻る」をクリックし、戻った画面で「設定を保存する」をクリックします。これで、記事に「被ブックマーク数」が表示されるようになります。ただし、全くブックマークを付けられていない記事には、1ドットX1ドットの画像が表示されるので、何も無いように見えます。

はてなのブックマーク・ボタンを表示する

最後は、『あなたのブログに「このエントリーを含むはてなブックマーク」ボタンを表示させる』に挑戦します。この設定を行う前に、ボタンの画像データをダウンロードしなくてはなりません。上に示したWEBページからボタン画像をダウンロードして、so-netブログにアップロードします。このとき、アップロード先のURLを記録しておきます。

設定変更箇所は、先ほどと同じ「記事」の「コンテンツHTML編集」です。 <h2 class="articles-title">と書かれた行をさらに以下のように変更します。

article.id %>">[編集]</a></span><% /if %><a
href="http://b.hatena.ne.jp/entry/<% article.page_url %>"><img
src="/_images/blog/_06e/noritan_micon/b_entry.png" width="16" height="12"
style="border: none;"
alt="このエントリーを含むはてなブックマーク"
title="このエントリーを含むはてなブックマーク" /></a><a
href="http://b.hatena.ne.jp/entry/<% article.page_url | html %>"><img
src="http://b.hatena.ne.jp/entry/image/large/<% article.page_url | html %>"></a></h2>
<% if:page_name eq 'article' -%>

alt属性とtitle属性は、お好みにより変更してください。また、src属性の部分には、アップロードした「ブックマーク・ボタン」のURLを各自で設定してください。これで、ブックマーク・ボタンが表示されるようになります。

このBLOGでは、それぞれの記事の最後にもボタンとカウンタを表示させています。他の場所にも付けられると思いますので、工夫を凝らしてみてください。

2008-04-05 00:23 nice!(0) コメント(2) トラックバック(0)