無料ブログ各社のブックマークアイコン(favicon)変更可否と方法

2013/07/13 2014/11/22

ブログを初めてしばらくすると、投稿だけでなくデザインにも気を配るようになりますね。
デザインはサイトのデザインだけでなく、
ブラウザのタブなどに表示される、ブックマークアイコン(ファビコン／favicon)もあります。

こうしたアイコンの表示は各社無料サービスによって、
変更ができたりできなかったりとまちまちではありますが、
一通り実際に表示が可能かどうかを検証しましたので投稿しておきます。

尚本投稿は新たに実現する方法が見つかった場合には更新していきます。

また、実際の設定の方法については、
各投稿に分けていますので、文中のリンク先でご確認頂ければと思います。
本投稿においては、各々ざっくりとした説明でご紹介します。

[rakuten]001:9784798037370[/rakuten]

はじめに

アイコンファイルの公開

ファビコンの設定が困難な無料ブログサービスとして、
すぐに思い浮かぶのがamebaブログかと思います。

その他のブログサービスでも困難なサービスはありますが、
そうしたブログの多くは拡張子icoファイルを
画像ファイルとしてアップロードすることをそもそも認めていないという実態があります。

そうしたサービスの場合には、
まずはそのWeb上で参照可能なアイコンファイルを
どこかで公開しなければタグの設定もなにも始まりません。

そのアイコンファイルの公開にはファイルをファイル共有サービスが利用できます。
こちらの投稿をご参照ください。

ファイル共有(SugarSync)を利用したブックマークアイコンの公開

もしそうした制限がなければ大抵はファビコンの設定も簡単に行えます。
自由にしてもらって構わないというサービスとしての寛大さに
とても好感を持てますし、制限しなくても運営していけるという自信にも感じます。

Linkshare Promotion

各社の対応

②favicon.icoファイルをアップロードすれば反映されるサービス

この方法はサイト内のファイルマネージャなどを利用して、
favicon.icoファイルをアップロードすれば、アイコン表示が行える方式です。
正直これが一番スマートだと思うんですけどね。

まさか対応しているとは！と思ったのが以下ブログでした。
自分のブログのトップレベルディレクトリに対して、
ファイルをアップできる仕様に少し驚きました^^

ココログ

③カスタマイズ領域から<link>タグ挿入で表示されるサービス

この編集方法はサイトのテンプレートなどを、
のちに変更した場合であってもHTML等の変更が失われない挿入方法です。
テンプレートなどの見た目に影響を受けないところが何より助かります。

livedoorブログ
忍者ブログ

④htmlの直接編集による<link>タグ挿入で表示できるサービス

この編集方法はサイトのテンプレートなどをのちに変更した場合に、
新しいテンプレートによってHTML等の変更が引き継がれない編集方法です。
現在のテンプレートを複製して編集は可能だったりしますが、
別のテンプレートに対しては引き継がれないのが難点です。
ただ、HTMLを編集可能であるということは自由度が高いことも利点です。

FC2ブログ
Jugemブログ
Seesaaブログ
DTIブログ
ファンブログ(A8)
yaplog

⑤カスタマイズ領域にJavascriptゴリゴリでやっと表示することが可能なサービス

このゴリゴリするパターンに関しては、
のちのテンプレート編集などの影響は受けない実装方法ですが、
グレーな方法であるといえます。

一応利用規約は確認していますが解釈の難しい部分でもあり、
当サイトならびに管理人アルゴリズンは一切その責を負いません。
貴サイトや貴ブログが何らかのペナルティーを受ける可能性がないとは言い切れません。
ですので、あくまでも自己責任で対応お願いします。

アメブロ
ウェブリブログ

以前は、フリー領域に対してソースを貼り付けることで、
「ファビコンが表示された」という投稿を多く見かけますが、
このタイプは、<head>タグの内部にこの<link>タグを設定することは困難でしょう。

現在確認したところで、アメブロとウェブリブログでは、
カスタマイズ可能領域へのタグ挿入では、ファビコンは表示されませんでした。
その為、JavaScriptにてheadタグへの要素更新・追加にて対応しています。

[rakuten]001:9784047041875[/rakuten]

各ブログサービス別の対応の一覧

対応一覧(●をクリックで詳細を表示します)
サービス先	①設定	②ico	③head	④html	⑤JS	ico可否	表示の確認
Blogger™(Google)	●	－	－	－	－	可	blogger支店
WordPress.com	●	－	－	－	－	否	WordPress.com支店
FC2™ブログ	－	－	－	●	－	可	FC2支店
livedoor™ブログ	－	－	●	－	－	可	livedoorブログ支店
dti™ブログ	－	－	－	●	－	可	DTIブログ支店
Seesaa™ブログ	－	－	－	●	－	可	Seesaa支店
忍者ブログ	－	－	●	－	－	可	忍者ブログ支店
はてな™ブログ	●	－	－	－	－	否	はてなブログ支店
Jugem™ブログ	－	－	－	●	－	否	Jugem支店
ファンブログ(A8)	－	－	－	●	－	否	ファンブログ(A8)支店
ココログ™	－	●	－	－	－	可	ココログ支店(@nifty)
yaplog™	－	－	－	●	－	否	yaplog支店
アメブロ™	－	－	－	－	●	否	アメブロ支店
ウェブリブログ™	－	－	－	－	●	否	ウェブリブログ支店(biglobe)
楽天™ブログ	－	－	－	－	－	否	楽天ブログ支店
Yahoo™ブログ	－	－	－	－	－	否	Yahooブログ支店
exsite™ブログ	－	－	－	－	－	否	exsiteブログ支店
goo™ブログ	－	－	－	－	－	否	gooブログ支店
CROOZ™ブログ	－	－	－	－	－	否	CROOZブログ支店

※表中に●印のないサービスはファビコン表示を実現できなかったことを示します。
ico可否：ブログサービス内のファイルアップロードがicoに対応していることを示します。

各ブログに対する対応の一部説明

Blogger(Google)

一覧へ戻る
Blogger(Google)では、ファビコンを設定する領域が、
カスタマイズ領域として設定されています。
icoファイルを作成し、そのままアップロードすることですぐに対応が可能です。

bloggerによるファビコン設定

詳細はこちらです

ブックマークアイコン(ファビコン)をBloggerで表示する方法

[amazonjs asin=”4906810217″ locale=”JP” tmpl=”Small” title=”Googleの説明書―2012年最新機能対応 (超トリセツ)”]

WordPress.com

一覧へ戻る
WordPress.comでも、ファビコンを設定する領域が、
[ブログ画像]という名称で用意されていますが、
icoファイルをアップロードすることはできません。
jpeg,gif,png画像をアップロードするだけで表示されるようになります。
InternetExploreでも正しく表示することができています。

wordpress.comによるファビコンの設定

詳細はこちらです

ブックマークアイコン(ファビコン)をwordpress.comで表示する方法

[amazonjs asin=”6133386592″ locale=”JP” tmpl=”Small” title=”Wordpress.com”]

FC2

一覧へ戻る
FC2では、ファビコンを設定する項目は特にありません。
HTMLもCSSも編集可能という自由度によってファビコンの設定も自由に行えます。
icoファイルもアップロード可能で、ご自由にどうぞといったスタンスです。

FC2のファイルアップロード画面

FC2画像のタイトル設定と制限の確認

FC２のHTML編集画面

編集前に複製し現在の状態を残しておくことも可能です。

FC2ファビコン設定ソースの貼り付け

詳細はこちらです

ブックマークアイコン(ファビコン)をFC2で表示する方法

[amazonjs asin=”4903111350″ locale=”JP” tmpl=”Small” title=”さすが!と言わせる FC2ブログ徹底攻略術”]

livedoorブログ

一覧へ戻る
livedoorブログではとても良心的な機能が実装されています。
HTMLを直接編集することも可能ですが、
<head>領域などに任意のコードを挿入することが可能です。
これはテンプレート(テーマ)をのちに変更を行っても、
挿入するソースの移植や再貼り付けなどが必要ないことを示しています。
<head>領域にはファビコンだけではなく、
JavaScriptも挿入するでしょうし、analyticsのタグを挿入したりもするでしょう。
こうした編集が損なわれず、テーマが編集できる点が非常に便利です。
またicoファイルのアップロードにも対応しています。

livedoorカスタムソースの挿入

詳細はこちらです。

ブックマークアイコン(ファビコン)をlivedoorブログで表示する方法(head)

[amazonjs asin=”4478740348″ locale=”JP” tmpl=”Small” title=”ライブドアブログで稼ぐ!儲ける!”]

DTIブログ

一覧へ戻る
DTIブログではテンプレートの複製を行った上で、
HTMLの直接編集にて実装可能なブログです。
icoファイルのアップロードにも対応しています。

dtiブログHTML編集画面

詳細はこちらです

ブックマークアイコン(ファビコン)をdtiブログで表示する方法

[amazonjs asin=”4844331779″ locale=”JP” tmpl=”Small” title=”必ず結果が出るブログ運営テクニック100 プロ・ブロガーが教える“俺メディア”の極意”]

Seesaaブログ

一覧へ戻る
Seesaaブログではテンプレートの複製を行った上で、
HTMLの直接編集にて実装可能なブログです。
icoファイルのアップロードにも対応しています。

SeesaaブログHTML編集画面

詳細はこちらです

ブックマークアイコン(ファビコン)をSeesaa™ブログで表示する方法

[amazonjs asin=”4774133450″ locale=”JP” tmpl=”Small” title=”Seesaa DSで稼ぐ! ドロップシッピングスタートブック”]

忍者ブログ

一覧へ戻る
忍者ブログでもlivedoorブロ同様に良心的な機能で共通タグ機能が実装されています。
HTMLを直接編集することも当然可能ですが、
<head>領域などに任意のコードを挿入することが可能です。
これはテンプレート(テーマ)をのちに変更を行っても、
挿入するソースの移植や再貼り付けなどが必要ないことを示しています。
<head>領域にはファビコンだけではなく、
JavaScriptも挿入するでしょうし、analyticsのタグを挿入したりもするでしょう。
こうした編集が損なわれず、テーマが編集できる点が非常に便利です。
またicoファイルのアップロードにも対応しています。

忍者ブログ共通タグ機能

詳細はこちらです

ブックマークアイコン(ファビコン)を忍者ブログで表示する方法

[amazonjs asin=”B007KX4XQC” locale=”JP” title=”姫忍者/黒×赤”]

はてなブログ

一覧へ戻る
はてなブログでは、ファビコンを設定する領域が、
ブログ画像として設定されています。
icoファイルを利用することはできませんが、
jpeg,gif,png画像をアップロードするだけで表示されるようになります。
InternetExploreでも正しく表示することができています。

はてなブログアイコン設定画面

詳細はこちらです

ブックマークアイコン(ファビコン)をはてなブログで表示する方法

[amazonjs asin=”4798030724″ locale=”JP” title=”あっという間に月25万PVをかせぐ人気ブログのつくり方―これだけやれば成功する50の方法”]

Jugemブログ

一覧へ戻る
Jugemブログでは、ファビコンを設定する項目は特にありません。
HTMLもCSSも編集可能という自由度によってファビコンの設定も自由に行えます。
ただしicoファイルを利用することはできません。
icoファイルにこだわる場合には別途Webストレージなどを用いて
公開することで、対応することができます。

JugemブログHTMLソースの編集

詳細はこちらです

ブックマークアイコン(ファビコン)をJugemで表示する方法

[amazonjs asin=”B004DNXA5C” locale=”JP” title=”スーパーマリオジュゲムSぬいぐるみ”]

ファンブログ(A8)

一覧へ戻る
ファンブログ(A8)を利用されている方は実際のところ少ないでしょうね。
というのも、
致命的な「１投稿あたりの画像貼り付け枚数が５枚」という制限があります。
実際、画像をあまり使わない小説や日記であれば問題ないかもしれませんが、
私のような操作説明などの場合には、どうにもこうにもといった感じです。

とはいえ、画像ファイルを公開できるエリア(Webサーバなど)をお持ちの場合には、
そちらへリンクさせればいいわけで、問題ないといえば問題ないのかもしれません。
(FC2を間借りするのも一つですが、毎回外部リンクで貼るのは面倒すぎるとは思いますが・・・)

ファンブログ(A8)ではその画像ファイルの制限もあり、
かつicoファイルもアップロードできません。
人によっては拡張子偽装によってアップする方もいるようでうが、
A8を利用するということはアフィリもされているのでしょうから、
ビジネスパートナーとしてお勧めできる方法とは言えません。

ファンブログ(A8)ではHTML直接編集を認めているので、
タグを挿入するだけで表示することができます。

ファンブログのメインテンプレート編集画面

詳細はこちらです

ブックマークアイコン(ファビコン)をファンブログ(A8)で表示する方法

[amazonjs asin=”4844334166″ locale=”JP” tmpl=”Small” title=”ブログ飯個性を収入に変える生き方”]

ココログ

一覧へ戻る
ココログ自体はFC2やSeesaaといったブログよりも少し影が薄い印象でしたが、
ファビコン設定に限って言えば、一番スマートと思える設定方法でした。
「favicon.ico」ファイルをディレクトリのトップにアップロードするだけで、
ファビコンの設定は完了です。

ソースの修正も何もする必要はありません。
これはブラウザのfavicon.ico検索動作に基づく表示方法で、
大抵のブラウザでは対応しています。
特にhead領域に記載も必要がない便利さがいいところです。

ココログではHTML編集や~~JavaScriptが利用できない~~(CSSは可)ので、
一見何も変更ができないのかと思うところですが、
ファイルマネージャの制限が緩く、
こうした設定方法を利用することができました。

2013/09/01：訂正
JavaScriptの実行は「項目の追加」を利用することで可能です。

Google™ Analyticsアクセス解析をココログで利用する方法(項目)

ココログファイルマネージャアップロード

ココログのファビコン設定に関しては、
あまり情報がなく、やりたい人が少ないのか、利用者が少ないのか分かりませんが、
どこかで目にしていただいてお役に立てるのかなと思うところです^^

詳細はこちらです

ブックマークアイコン(ファビコン)をココログで表示する方法

[amazonjs asin=”4901873512″ locale=”JP” title=”眞鍋かをりのココだけの話 (ココログブックス)”]

yaplog

一覧へ戻る
yaplogでは画面の構成が少しわかりにくく、
慣れるまでどこで何を編集するのか少し困惑する部分はありますが、
HTML直接編集が可能です。
ただしicoファイルのアップロードには対応していません。

yaplogのHTMLの編集

詳細はこちらです

ブックマークアイコン(ファビコン)をyaplogで表示する方法

[amazonjs asin=”4990295307″ locale=”JP” tmpl=”Small” title=”てんBlog Days―お気楽主婦のフワフワ日記 (GMO BLOG BOOKS―presented by yaplog!-ヤプログ!から生まれたブログブックシリーズ-)”]

amebaブログ

一覧へ戻る
amebaブログことアメブロですが、いろいろと制約が厳しいことで有名ですね。
HTMLも編集は認められていません。
個人的にはアメブロは編集できなくていいだろうと思います。

アメブロに実装されている様々な機能を考えてみれば、
もしHTMLが編集可能だったら壊してしまうかもな・・・と思うところです。

個人的にアメーバアイコンは好きなのですが、
アメブロでファビコンを変更する・・・結構しんどいものですね。
「運営サイドが変更して欲しくない！」そう言っていると感じます。
とはいえ、今回はそれを変更するのが目的なので、一応変更して見ました。

よく「フリーエリアに<link rel=”shortcut・・・とタグを記述すると表示することができます！」
という記述を見かけますが、そうしたサイトも現在はアメブロアイコンで表示されていました。
おそらく仕様が変わったのでしょうね。

とは言え、アメブロはプラグインエリアを利用すると、
JavaScriptを利用できたりするという便利さは残してくれているので、
無料ブログのガチガチ制限ではなく、
ユーザの利便性を残してくれているという良さがあります。

今回はそのプラグインエリアにJavaScriptによる実装をしています。

アメブロフリープラグイン貼付

参考まで、ざっとソースを貼り付けておきます。
やっつけソースなので何かあればご指摘ください。
またURLに関しては貴方のアイコンファイルURLに置き換えてください。

fabicon_link = null;
function appendIcon(){
	if(fabicon_link) return;	//すでに生成済
	fabicon_link = document.createElement("link");
	fabicon_link.rel = "icon";
	fabicon_link.type = "image/x-icon";
	fabicon_link.href = "http://algorhythnn.jp/pblic_pic/ico/favicon_ameba.ico";
	//head要素に追加
	document.head.insertBefore(fabicon_link, document.getElementsByTagName("link")[0]);
}
appendIcon();

fabicon_link = null;

function appendIcon(){

if(fabicon_link) return; //すでに生成済

fabicon_link = document.createElement("link");

fabicon_link.rel = "icon";

fabicon_link.type = "image/x-icon";

fabicon_link.href = "http://algorhythnn.jp/pblic_pic/ico/favicon_ameba.ico";

//head要素に追加

document.head.insertBefore(fabicon_link, document.getElementsByTagName("link")[0]);

}

appendIcon();

ただし、これはちょっとグレーな対応だと私は感じています。
HTML自体はまったく編集はしていませんが、
ブラウザが表示する際にアイコン表示をすり替える処理をしています。

規約違反には当たらないとは認識していますが、
いつか何かの制裁が下らないとは言い切れません。
自己責任でお願いします

詳細はこちらです

ブックマークアイコン(ファビコン)をアメブロで表示する方法

[amazonjs asin=”488337792X” locale=”JP” title=”アメブロをカスタマイズ魅せるブログデザインを作ろう！改訂版”]

ウェブリブログ

一覧へ戻る
ウェブリブログに関してもアメブロ同様にHTMLの編集などは認められていません。
とはいえアメブロ同様にフリーエリアという形でJavaScriptの利用が認められています。
そこを利用することで、ファビコンの設定を行っています。

ウェブリブログフリースペース編集

尚、内部的にURL生成を行っています。inivalue("favicon_webry.ico", "favicon_webry_logo_p01-72px_webry.png", "webry");

第１パラメータの”favicon_webry.ico”は、icoファイル名です。
第２パラメータの”favicon_webry_logo_p01-72px_webry.png”は、スマホ用アイコンのpngファイル名です。
第３パラメータはブログサービス名ですが現時点では何も利用していません。

アイコンを公開しているディレクトリをalgorhythnn_favicon.jsの赤字部分で指定しています。
pcIconUrl = “http://algorhythnn.jp/pblic_pic/ico/” + ico_name_sfx（第１パラメータ値）;
appleIconUrl = “http://algorhythnn.jp/pblic_pic/pic/” + apl_name_sfx（第２パラメータ値）;

ウェブリブログ側のフリーエリアソース

<script type="text/javascript" src="http://algorhythnn.jp/pblic_js/algorhythnn_favicon.js"></script>
<script langage="JavaScript"  type="text/javascript">
	inivalue("favicon_webry.ico", "favicon_webry_logo_p01-72px_webry.png", "webry");
	appendIcon();
</script>

inivalue("favicon_webry.ico", "favicon_webry_logo_p01-72px_webry.png", "webry");

appendIcon();

</script>

algorhythnn_favicon.jsのソース

var C_ICON = "icon";
var C_SICON = "shortcut icon";
var C_APL_ICON = "apple-touch-icon-precomposed";

var C_TYPE_I = "image/x-icon";
var C_TYPE_IMS = "image/vnd.microsoft.icon";
var C_TYPE_GIF = "image/gif";
var C_TYPE_PNG = "image/png";
var C_TYPE_XPNG = "image/x-png";
var C_TYPE_JPG = "image/jpg";
var C_TYPE_JPEG = "image/jpeg";
var C_TYPE_PJPEG = "image/pjpeg";
var pcIconUrl;
var pcIconType;		// 上記タイプから選択し指定
var appleIconUrl;
var appleIconType;		// 上記タイプから選択し指定
var blnicon = false;
var blnapple = false;
var ico_name_sfx = "";
var apl_name_sfx = "";

//各ブラウザ対応イベント設定
function addListener(elem,eventType,func,cap){
	if(elem.addEventListner){
		elem.addEventListner(eventType,func,cap);
	}else if(elem.attachEvent){
		elem.attachEvent("on"+eventType,func);
	}else{
		return false;
	}
}

//個別にファイル指定する場合
function inivalue(ico_name, apl_name, service_name){
	ico_name_sfx = ico_name;
	apl_name_sfx = apl_name;
	if(ico_name_sfx == ""){
		ico_name_sfx = "favicon_orange.ico";
	}
	if(apl_name_sfx == ""){
		apl_name_sfx = "logo_p01-72px_orange.png";
	}
	/**ここから編集**/
	pcIconUrl = "http://algorhythnn.jp/pblic_pic/ico/" + ico_name_sfx;
	appleIconUrl = "http://algorhythnn.jp/pblic_pic/pic/" + apl_name_sfx;
	switch (service_name){
	case "ameba":
		pcIconType = C_TYPE_I;		// 上記タイプから選択し指定
		break;
	default:
		pcIconType = C_TYPE_IMS;		// 上記タイプから選択し指定
		break;
	}

	appleIconType = C_TYPE_PNG;		// 上記タイプから選択し指定
	/**ここまで編集**/
	return null;
}
//favicon指定がない場合に追加する。
function appendLink(strtype, strRel, strUrl){
	var newlink = null;
	newlink = document.createElement("link");
	newlink.rel = strRel;
	newlink.type = strtype;
	newlink.href = strUrl;
	//head要素に追加
	var elmhead = document.getElementsByTagName("head").item(0);
	elmhead.appendChild(newlink);
	return null;
}
//既存のfavicon指定を独自アイコンに更新する
function appendIcon(){
	var nodeList_link = document.getElementsByTagName("link");
	for(var i=0; i<nodeList_link.length; i++) {
		/*要素ノードの参照オブジェクト*/
		var elmNode = nodeList_link.item(i);
		/*relに対してアイコンが指定されているelemに対し、hrefを更新する*/
		var relval = elmNode.rel;
		switch (relval){
		  case C_ICON:
		  case C_SICON:
			  elmNode.type = pcIconType;
			  elmNode.href = pcIconUrl;
			  blnicon = true;
		    break;
		  case C_APL_ICON:
			  elmNode.type = appleIconType;
			  elmNode.href = appleIconUrl;
			  blnapple = true;
		    break;
		}
	}
	// 既存にアイコン指定がない場合
	if (!blnicon){
		appendLink(pcIconType, C_SICON, pcIconUrl);
	}
	if (!blnapple){
		appendLink(appleIconType, C_APL_ICON, appleIconUrl);
	}
	return null;
}

100

101

var C_ICON = "icon";

var C_SICON = "shortcut icon";

var C_APL_ICON = "apple-touch-icon-precomposed";

var C_TYPE_I = "image/x-icon";

var C_TYPE_IMS = "image/vnd.microsoft.icon";

var C_TYPE_GIF = "image/gif";

var C_TYPE_PNG = "image/png";

var C_TYPE_XPNG = "image/x-png";

var C_TYPE_JPG = "image/jpg";

var C_TYPE_JPEG = "image/jpeg";

var C_TYPE_PJPEG = "image/pjpeg";

var pcIconUrl;

var pcIconType; // 上記タイプから選択し指定

var appleIconUrl;

var appleIconType; // 上記タイプから選択し指定

var blnicon = false;

var blnapple = false;

var ico_name_sfx = "";

var apl_name_sfx = "";

//各ブラウザ対応イベント設定

function addListener(elem,eventType,func,cap){

if(elem.addEventListner){

elem.addEventListner(eventType,func,cap);

}else if(elem.attachEvent){

elem.attachEvent("on"+eventType,func);

}else{

return false;

}

//個別にファイル指定する場合

function inivalue(ico_name, apl_name, service_name){

ico_name_sfx = ico_name;

apl_name_sfx = apl_name;

if(ico_name_sfx == ""){

ico_name_sfx = "favicon_orange.ico";

}

if(apl_name_sfx == ""){

apl_name_sfx = "logo_p01-72px_orange.png";

}

/**ここから編集**/

pcIconUrl = "http://algorhythnn.jp/pblic_pic/ico/" + ico_name_sfx;

appleIconUrl = "http://algorhythnn.jp/pblic_pic/pic/" + apl_name_sfx;

switch (service_name){

case "ameba":

pcIconType = C_TYPE_I; // 上記タイプから選択し指定

break;

default:

pcIconType = C_TYPE_IMS; // 上記タイプから選択し指定

break;

}

appleIconType = C_TYPE_PNG; // 上記タイプから選択し指定

/**ここまで編集**/

return null;

}

//favicon指定がない場合に追加する。

function appendLink(strtype, strRel, strUrl){

var newlink = null;

newlink = document.createElement("link");

newlink.rel = strRel;

newlink.type = strtype;

newlink.href = strUrl;

//head要素に追加

var elmhead = document.getElementsByTagName("head").item(0);

elmhead.appendChild(newlink);

return null;

}

//既存のfavicon指定を独自アイコンに更新する

function appendIcon(){

var nodeList_link = document.getElementsByTagName("link");

for(var i=0; i<nodeList_link.length; i++) {

/*要素ノードの参照オブジェクト*/

var elmNode = nodeList_link.item(i);

/*relに対してアイコンが指定されているelemに対し、hrefを更新する*/

var relval = elmNode.rel;

switch (relval){

case C_ICON:

case C_SICON:

elmNode.type = pcIconType;

elmNode.href = pcIconUrl;

blnicon = true;

break;

case C_APL_ICON:

elmNode.type = appleIconType;

elmNode.href = appleIconUrl;

blnapple = true;

break;

}

// 既存にアイコン指定がない場合

if (!blnicon){

appendLink(pcIconType, C_SICON, pcIconUrl);

}

if (!blnapple){

appendLink(appleIconType, C_APL_ICON, appleIconUrl);

}

return null;

}

ソースが長く読みづらいと思います。
アメブロと同じようにタグのインサートで実装ができると思っていたのですが、
同じ処理ではウェブリブログでは表示を行うことができませんでした。

ただし、これもちょっとグレーな対応だと私は感じています。
HTML自体はまったく編集はしていませんが、
ブラウザが表示する際にアイコン表示をすり替える処理をしています。

規約違反には当たらないとは認識していますが、
いつか何かの制裁が下らないとは言い切れません。
こちらも自己責任でお願いします

詳細はこちらです

ブックマークアイコン(ファビコン)をウェブリブログで表示する方法

[amazonjs asin=”B000EPF6PK” locale=”JP” title=”Be as one(期間限定生産盤)(DVD付)”]

楽天ブログ・Yahooブログ・exsiteブログ・gooブログ・CROOZブログ

一覧へ戻る
この無料ブログサービスでは、HTMLの編集もできず、
JavaScriptを実装可能なプラグインなどを追加する機能も、
見つけることができませんでした。

既存で用意されているブログパーツのみ追加可能であったりと、
制約が厳しくて正直なところ与えられたままに使う人向きかなと思うところです。

それぞれに特色があって、使いたいなと思うところもあるのですが、
カスタマイズは完全に無視して、淡々と投稿に専念して、
サービス独自の特色の恩恵を受ければいいのかなと思うところです。

正直「カスタマイズできない＝余計な時間を取られない」という、
当たり前ながら、大切な部分だったりします(笑)

カスタマイズできるが為に、
本来の投稿の内容や更新頻度が落ちてしまう結果を招く誘惑が、
少ないとも考えられます。

VC Promotion

総括(感想)

さて、以上で今回のファビコンをテーマにしたカスタマイズは終わりです。
たかがファビコン。
ここまでやる必要あるのか？というところですが、
こうして１つのテーマで様々なサービスを利用して見るのも面白いものだなと思います。

何ができて何ができないのか。
使いやすいインターフェイスはどうあるべきか。

そんなものが身に染みて感じられます。

今後またこうした投稿を行いたいと思っていますが、
正直、ストレスにしかならないような投稿画面で、
「プリビュー入力とタグ入力の切り替えがしんどい」操作体系のブログもありました。

無料ブログは後々の引っ越しが大変だったりするので、
最初に自分に合った操作感を選ぶことも大切だなと思います。
当然、将来のカスタマイズ性も考慮していきたいものです。

Google™はGoogle Inc. の登録商標（第４４７８９６３号及び第４９０６０１６号）です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号：８８１００６及び９２６０５２及び１０８６２９９及び１０９１９９０及び１１４５９３４
Google AdSense™,AdSense™はGoogle Inc. の登録商標（第４８９９４１２号）です。
Google Analytics™はGoogle Inc. の商標です。
Blogger™はGoogle Inc. の登録商標（第４９６５９７７号）です。
Bloggerロゴ、アイコンはGoogle Inc. の登録商標（第４７８５８６６号）です。
Bloggerのマーク等はGoogle Inc. の商標であり、Google Inc. の著作物です。

WordPress™はWordPress Foundation の登録商標（第５０４９９６５号）です。
WordPressロゴ、アイコンその他のマーク等はWordPress Foundation の商標であり、
WordPress Foundation の著作物です。
WordPress.comはWordPress Foundation が管理運営を行うドメインならびにサービスの名称です。
WordPress.com、WordPress.net、WordPress.org、WordPress.tv、
WordPressFoundation.orgはWordPress Foundationが
管理運営を行なう正式なトップレベルドメインであるとともに、
WordPress Foundationが運営を行うサービスの名称です。

FC2™はFC2, Inc.の商標であり、FC2ブログはFC2, Inc.のサービス名称です。
FC2ロゴ、アイコンその他のマーク等はFC2, Inc.の商標であり、FC2, Inc.の著作物です。

livedoor™はLINE株式会社の登録商標（第４４５１５８５号）であり、
livedoorブログはLINE株式会社のサービス名称です。
livedoorロゴ、アイコンその他のマーク等はLINE株式会社の商標であり、LINE株式会社の著作物です。

dti™blogはDTI SERVICES, INC.の商標であり、
dtiblogを含む、すべての名称、商標、ブランド、ロゴ、デザイン、トレードドレス、スローガン、DTIは
その商品やサービスに関連して使用され、DTI SERVICES, INC.の著作物です。
DTIサービスのロゴ使用と会社名表記に関する声明はhttp://www.dtiserv.com/logo/DTI.htmでご確認頂けます。
またDTIサービスのWebサイト契約（http://dtiservices.com/wp/?page_id=357）に
商標に関する取扱いが明記されています。

Seesaa™はシーサー株式会社の登録商標（第５０４９９６５号）であり、
Seesaaロゴはシーサー株式会社の登録商標（第５１３７４５７号）です。
Seesaaブログはシーサー株式会社のサービス名です。
Seesaaのサービスに用いられるアイコンその他のマーク等は、
シーサー株式会社の商標であり、シーサー株式会社の著作物です。

忍者ブログは株式会社サムライファクトリーの商標であり、
忍者ロゴ、アイコンその他のマーク等は株式会社サムライファクトリーの商標であり、
株式会社サムライファクトリーの著作物です。

Hatena™は株式会社はてなの登録商標（第４８６３８０５号）です。
Hatena Blogは株式会社はてなの商標であるとともに、
Hatenaロゴ、アイコンその他のマーク等は株式会社はてなの商標であり、株式会社はてなの著作物です。

Jugem™は株式会社ｐａｐｅｒｂｏｙ＆ｃｏ．の
登録商標（第４８５０２２４号及び第４８８３７２１号）です。
Jugemロゴ、アイコンその他のマーク等は株式会社ｐａｐｅｒｂｏｙ＆ｃｏ．の商標であり、
株式会社ｐａｐｅｒｂｏｙ＆ｃｏ．の著作物です。

ファンブログ及び、A8.netは株式会社ファンコミュニケーションズの商標であり、
ファンブログまたはA8.netのロゴ、アイコンその他のマーク等は
株式会社ファンコミュニケーションズの商標であり、株式会社ファンコミュニケーションズの著作物です。

ココログ™はニフティ株式会社の
登録商標（第４７８２２５６号及び第４８９８６０３号及び第５２２００９２号）です。
ココログのロゴ、アイコンその他のマーク等はニフティ株式会社の商標であり、
ニフティ株式会社の著作物です。

yaplogはGMOメディア株式会社の商標です。
yaplogのロゴ、アイコンその他のマーク等はGMOメディア株式会社の商標あり、
GMOメディア株式会社の著作物です。

アメブロは株式会社サイバーエージェントの
登録商標（第５０１９５５６号及び第５０３８９６８号）です。
アメブロのロゴ、アイコンその他のマーク等は株式会社サイバーエージェントの商標であり、
株式会社サイバーエージェントの著作物です。

ウェブリブログ™はＮＥＣビッグローブ株式会社の登録商標（第４８１１１０５号）です。
ウェブリブログのロゴ、アイコンその他のマーク等はＮＥＣビッグローブ株式会社の商標であり、
ＮＥＣビッグローブ株式会社の著作物です。

楽天™は楽天株式会社の登録商標です。
（第４４５３０５４号及び第５０３６７７２号及び第５０８８８８０号及び
第５５３６３８１号及び商願２０１３－１５４５５）
楽天KCロゴは楽天株式会社の登録商標（第４９７８３９２号）です。
楽天Rロゴは楽天株式会社の登録商標です。
（第５０３８５４０号及び第５０６９４９４号及び第５５３６３８３号）
楽天ブログのロゴ、アイコンその他のマーク等は楽天株式会社の商標であり、楽天株式会社の著作物です。

ヤフー™及びyahoo!™はヤフー！　インコーポレイテッドの登録商標です。
（第４２５３３４９号及び第４２５５４４６号及び第４２６３６３５号及び
第４３２３３０４号及び第４３２３３０５号及び第４３６３０１３号）
yahoo!ブログのロゴ、アイコンその他のマーク等はヤフー！　インコーポレイテッドの商標であり、
ヤフー！　インコーポレイテッドの著作物です。

exsite™はエキサイト株式会社の商標です。
exsiteブログのロゴ、アイコンその他のマーク等はエキサイト株式会社の商標であり、
エキサイト株式会社の著作物です。

goo™はエヌ・ティ・ティレゾナント株式会社の登録商標です。
（第４２２７８１８号及び第４２２７８１９号及び第４３１４０６０号及び第４８２１２４０号）
gooのロゴはエヌ・ティ・ティレゾナント株式会社の登録商標です。
（第４２２７９１３号及び第４２２７９１４号及び第４３１５１６３号）です。
gooブログ、アイコンその他のマーク等はエヌ・ティ・ティレゾナント株式会社の商標であり、
エヌ・ティ・ティレゾナント株式会社の著作物です。

CROOZ™はCROOZ株式会社の登録商標（第５３６４１２６号及び第５４１４５４３号）です。
CROOZのロゴ、アイコンその他のマーク等はCROOZ株式会社の商標であり、
CROOZ株式会社の著作物です。

- javaScript, 無料ブログ amebaブログ, Blogger(Google), DTIブログ, favicon, FC2ブログ, Jugem, livedoorブログ, Seesaaブログ, wordpress.com, yaplog, アメブロ, ウェブリブログ, ココログ, はてなブログ, ファンブログ(A8), ブックマークアイコン, 忍者ブログ

Comment

ブックマークアイコン(ファビコン)をwordpress.comで表示する方法 | ええかげんブログ(WP支店) より:

2013/07/13 7:33 PM

[…] この投稿は、以下投稿の詳細ページです。「無料ブログ各社のブックマークアイコン(favicon)変更可否と方法」もしお時間があれば本編もどうぞ。 […]