BloggerをCDNを使って公開

2017年3月23日木曜日
本ブログをCDNを使って配信しました。
CDNとは、Content Delivery Network（コンテンツ・デリバリ・ネットワーク）の略。

CDNの機能は、オリジナルのウェブサイトのデータ（コンテンツ）を、世界中に張り巡らされているCDN用のサーバーにコピー（キャッシュ）し、ユーザーからのアクセスに対して、一番近いCDN用のサーバーに誘導し、そこからデータ(コンテンツ）が配信される機能です。

　もし、Googleが提供する無料Blog：Bloggerのサーバーがアメリカに存在する場合、日本国内からアクセスすると、遠く表示が遅い状態となる。
　それを、CDNサービスを使って、もし日本国内にCDN用のサーバーが存在すると、基本日本国内のサーバーからデータ(コンテンツ）が配信され、当然サイトの表示が早くなるということでなる。

　このCDNのサービスを無料で提供する、CloudFlareを契約し、使ってみることした。

　ただし、Googleの無料ブログBloggerの場合、独自ドメインでの公開が必須です。
なぜなら、CloudFlareのCDNサービスは、ドメイン（FQDN)を使って一番近いサーバーのIPアドレスを返す仕組みとなっているためである。そうなると、ドメインのネームサーバーをCDNサービスが提供するネームサービスに変更する必要があるためで、当然Googleが権利を持っているBloggerの標準ドメインでネームサーバーを変更することができなためである。

　後、Blogger上の写真等のコンテンツは、独自ドメインでの公開ではなく、Google上のアルバム等サービスとなっているため、画像を表示するURLが独自ドメインではありません。
　と、いうことは、BloggerにCDN機能を追加しても、写真等は今までどおりBloggerから配信されることになり、CDN用のサーバーからの配信では無い　ということになります。
　でも、HTMLやCSSは、独自ドメインでの公開になるので、CDN機能を追加することで、速くなることは間違いありません。　※確かに速くなりました。


1 コメント ラベル: ,

Bloggerスマートフォン用テンプレート

2011年11月30日水曜日
Bloggerでスマートフォン用モバイルテンプレート機能がBlogger draftで使えるようになりました。

この機能をつかうことで、スマートフォン用のページデザインを変えることができます。
また、モバイルテンプレートのカスタマイズもできるようで、自分専用のスマートフォンサイトが作れるかもしれません。
0 コメント ラベル: , ,

Bloggerのダイナミックビュー

2011年11月19日土曜日
４月ごろにBloggerのデザインに「ダイナミックビュー」の閲覧者が動的にデザインを変更できるテンプレートが追加された。
この新しいテンプレートは、フォトビューアとしてともとても使えるテンプレートだと思う。写真を主体とした投稿をしているかたは、是非一度お試しあれ。





0 コメント ラベル: ,

Bloggerのトップページに固定表示させる

2011年8月13日土曜日
このサイトではBloggerを使っているが、Bloggerをホームページとして作成して中で、一番困っていることが、トップページに投稿（記事）を固定出来ないことだ。
そこで、なんとかコンテンツを固定できないかやってみた。方法は、固定化するコンテンツをガジェットとして登録し、そのガジェットをセンタートップに配置して、URLがトップページの時にのみ表示するようにした。

  1. デザイン配置でガジェット（ここではテキスト）を配置して保存
  2. テンプレートHTMLの編集でウェジットテンプレートを展開状態で、新たに配置したガジェットを探し出す
  3. ガジェットに修正を加えて保存する
ガジェットに対して行う修正は以下の通り（ガジェットはテキストとして説明）
【修正前】
【修正後】
この３行目、１２行目を追加するだけである。（内容は、トップページURLの時は、ガジェットのタイトル・コンテンツを表示する。それ以外は、表示しない）
0 コメント ラベル:

BloggerがGoogle Blogsに名前を変える？

2011年7月8日金曜日
このBloggerがGoogle Blogsに名前変える情報を入手した。本記事時点ではまだ変わっていないが．．
Bloggerは仕事でも無料ブログ活用ということで提案をし、実際に使ってもらっている。パソコンの操作に不慣れな方に、２時間程度のサポートで写真付きの記事が作成でき、喜んでいただいている。この名前の変更で大きな影響は無いと思っているが、今現在私のBloggerの新管理画面に全面移行になったら、またレクチャーすることになってしまう。これだけは今まで通りにしてほしい。
でも、新しい管理画面はシンプルでとても使いやすい。

0 コメント ラベル:

Bloggerの管理画面が変更になった

2011年6月11日土曜日
６月１１日夜にBloggerにログインしたところ、新しい管理画面に変更になっていた。
※いつからなったかは？？
一番困ったがのが、各種設定のメニュー位置が変わったため戸惑ったが、ダッシュボードをクリックすることで戸惑いも消えた。

ただ、一番最初の画面がサマリーとなるが、この部分は前回のよりいいかもしれない。

投稿（記事）については、特に問題無し。

ページについては、新しい方が使いやすい。

コメントについては、よくも悪くも無し。

統計については、さすがGoogle。ただ、Google Analyticsのようにもう少し詳しい方がいい。
これは、以前と同じだが。

収益（Google AdWords）は、これからのよう。※ここが充実すればいいのに

レイアウトは、使いやすくなった。

テンプレートも、一覧が表示されるようになり使いやすくなった。

設定も問題無し。

デザインもよくなり、前回に比べて総合的に使いやすくなったとおもう。

５月に発生した、Bloggeの大規模な障害（長時間停止）については、この新しい管理画面への移行の為に行ったのかな？？

2 コメント ラベル:

Bloggerにzenbackを設置する

2011年5月28日土曜日
最近、他のブログで”zenback”なるブログパーツ（ウィジェット）を良く目にする。
この”zanback”は、
  • 設置しているブログとソーシャルメディアとの連動
    Tweetボタン／はてなブックマーク／mixiチェック／Evenoteサイトメモリー／Facebook「いいね！」
  • 埋もれているブログ内の関連記事の表示
  • 他”zenback”を設置しているブログの関連記事表示
    逆に”zenback”を設置している他ブログに自分のブログ記事が関連記事として表示される
  • ”zenback”を設置しているブログから収集したキーワード検索で表示される
  • 自分の記事のTwitterやはてなブックマーク
など、自分のブログに他からのブログやソーシャルメディアから流入の期待ができる。

早速、このBloggerにも設置してみる。なお、zanbackはMovableTypeで有名な、”six apart”社のサービスで、安心もできる。個人利用の場合は無料だが、企業／法人向けに設置する場合は有料となる。

zenbackのサイトへアクセス

”新規登録＆コードを取得する”をクリックし、メールアドレス／パスワードを入力し、設置する自分のブログのURLを入力する。

次に、表示する項目を選択する。

自分のブログに追加するコードが表示されるので、カット＆スペースでテキストファイル等にセーブする。

管理画面にて、ブログへの表示項目の選択や順番、ソーシャル／ボタンの選択ができる。また自分のブログにあった色やデザインにするために、cssをカスタマイズすることもできる。※私は、”mixiチェック”を外した。それと、無料の場合、関係リンク／関係キーワードは外せないし、zanbackからのお知らせについては、必ず表示される。


コードをBloggerのデザイン→ページの要素にて、ガジェット追加にてHTML/JavaScriptを選択し、取得したスクリプトコードを貼付ける。後はガジェットを好みの場所に配置する。

注意：即表示はされません。気長に待ちましょう。

2 コメント ラベル: ,

Bloggerにパンくずリスト

2011年5月22日日曜日
Bloggerにパンくずリストを追加する方法。

上記のソースをデザイン→HTMLの編集で、
の上に貼付ける。

次にHTMLの編集でテンプレートに下記のように修正する。
0 コメント ラベル:

iGoogleからのBlogger投稿

2011年1月17日月曜日

Bloggerを使っているなかで、iGoogleのガジェットで”Post to Blogger”が便利ツールとしてレポートされるが、インストールしても下記画面から進まない。

image

iGoogleのガジェットのコメントにも同様な内容が多くみられる。だれかできた方は、方法を教えてください。

1 コメント ラベル:

BloggerでSyntaxHighlighterの追加

2011年1月14日金曜日
HTMLソースやJavaScriptソースをきれいに見せる、SyntaxHighlighterをBloggerに導入しました。
GoogleからのGoogleコードとして提供されておりますが、バージョンが1.5.1と古く最新のSyntaxHighlighterを使う為にSyntaxHighlighterサイトのバージョンを使うことにします。
記事作成時点の最新のバージョンは、3.0.83です。
下記ソースを、テンプレートの＜/head＞直前に挿入します。HTML的に一番最後となります。

<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/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.config.clipboardSwf=&#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>

なお、各種ソースに対応する用、複数のソースが提供されていますので、必要なものだけを使うようにします。全て使用するとそれだけ遅くなる可能性があります。情報は本サイトにあります。
後は、
<pre class="brush: xxxx">
  ソース
</pre>
とすればよいです。
このときの、XXXX（brush Alias）部分は、ソースによって違ってきます。情報は本サイトにあります。

　投稿すればよいのですが、＜や＞をコード変換の必要があります。

0 コメント ラベル:

Blogger　faviconの設置方法

2011年1月12日水曜日
Bloggerに独自のfaviconを表示させる方法です。
通常、favicon.icoファイルをBlogger上に置くことができない。そのため、他のサイトにICOファイルを置いてそこの画像を使う方法が一般である。
なお、Googleから無料のサイト作成”Googleサイト”サービスが提供されているので、そこにfavicon.icoを置いて、そこのアイコンを設定することにより。
（Googleサイトの作成や設定は、割愛します）

<link href="http://sites.google.com/site/自分のサイト名/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon"></link>  
<link href="http://sites.google.com/site/自分のサイト名/favicon.ico" rel="icon" type="image/vnd.microsoft.icon"></link>

追加する場所は、テンプレートで、を探し、その直前に挿入すれば良いです。
0 コメント ラベル:

Bloggerブログ説明の変更

Bloggerのタイトルの変更と同様に、ブログの説明を変更する方法です。

<b:if cond='data:blog.pageType == "index"'> 
  <p class='description'><span><data:description/></span></p> 
<b:else/> 
  <p class='description'><span><data:blog.pageName/></span></p> 
</b:if>


修正場所は、テンプレートの<div class="descriptionwrapper">を検索し直下にある、<div class="description"><data:description></data:description></div>と入れ替えるます。

0 コメント ラベル:

Bloggerタイトル表示の変更

Bloggerのタイトルは、通常
<title><data:blog.pageTitle/></title>
となるが、記事表示の時に、（記事タイトル ｜ ブログタイトル）にするように、修正する。
なお、ホームの時（ ｜ ブログタイトル）になるので、ページの種類が”index”の時には、ブログタイトルのみにするようにした、

<b:if cond='data:blog.pageType == "index"'>
  <title><data:blog.pageTitle/></title>
<b:else/>
  <title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
0 コメント ラベル:

Bloggerの見出しタグ

Bloggerを使いはじめて、気づいたことがあります。Bloggerだけでは無いかも知れませんが、シンプルスタイルのテンプレートの見出しタグ<h2>や<h3>の使い方が、SEO的にあまり良く無いと感じます。
<h2>タグは、”記事の投稿日付け”や”サイドバーの見出し”になっています。ページのリストを使った時は、ページリストの見出しとして”ページ”が<h2>に挿入されます。
<h3>タグは、”記事のタイトル”と使用されております。

これってとてもSEO的にもったいない。そこで、<h2>タグと<h3>タグをそっくり入れ替えてみました。
方法は、デザインからテンプレートをダウンロードして、”<h2”を”<h3”に、”<h3”を”<h2”に置換してもました。当然、CSSの部分も含めてです。

そうしたところ、全体のデザインは問題がなかったが、”ページリスト”を配置した部分に<h3>タグで”ページ”（タイトル）が表示されてしまいった。通常、ページリスト（グローバルメニュー）には、タイトル必要ないので<div class='widget PageList' id='PageList1'> を検索して、<b:if cond='data:title'><h2><data:title/></h2></b:if>を削除します。

これで、まったく変わりなく変更することができます。
0 コメント ラベル:

Bloggerモバイル テンプレート（ベータ版）開始

2010年12月20日月曜日

　Bloggerからモバイルテンプレートがベータ版として公開された。

早速、”設定”→”メールとモバイル”から”はい。テンプレートのモバイル バージョンを携帯端末で表示する。”をセレクトして、保存する。
私、iPhone持っていないが、モバイルプレビューでみるとこのように見れる。

image

少し物足りないようにも見える．．．もう少し何とかならないかな～～～

 

で、URLはこちらです。

chart

0 コメント ラベル:

Blogger　Attribution（著作権）の変更

2010年12月17日金曜日

　提供されているテンプレートには、Attributionの部分に不必要な項目が表示される。

　個人用に表示させる方法は、


/*
-----------------------------------------------
Blogger Template Style
Name:     Simple
Designer: Josh Peterson
URL:      www.noaesthetic.com
----------------------------------------------- */
の”Designer”と”URL”を変更することで、変更できる。
※ただし、Powered by Blogger.ははずせない。

/*
-----------------------------------------------
Blogger Template Style
Name:     Simple
Designer: 私
URL:      www.xxxxxxx.xx
----------------------------------------------- */
0 コメント ラベル:

Bloggerで関連記事の表示方法

2010年12月7日火曜日
Blogger上で関連記事を表示する方法を探してみました。
blogger-related-postsなるサイトを参考にガジェット追加して簡単に表示させることができました。
なお、設定オプションは、

  • 画像（サムネイル）を表示はしない
  • related_titleを”関連記事”を表示
  • recent_titleを”最近の記事”を表示
をつけました。


<script type="text/javascript" src="http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js"></script>

<div class="related-posts-widget">
<!-- {
 blog_url:'http://blog.takasun.net'
        ,thumbs:0
 ,related_title:'関連記事'
        ,recent_title:'最近の記事'
} -->
loading..
</div>

1 コメント ラベル:

Bloggerのnavbarを表示させない

2010年12月3日金曜日
ブログのトップに表示される、navbarを表示させない方法



  1. デザインのHTMLの編集
  2. </b:skin>を検索
  3. その直前にCSSを追加する
    #navbar-iframe {
height:0px;
visibility:hidden;
display:none
｝
でも、navbarを表示させないと、デザイン的にはすっきりするが、記事の登録やデザイン編集の時、ページ移動が面倒である。
1 コメント ラベル:

Bloggerのアクセス集計

2010年12月2日木曜日
Bloggerのアクセス集計について、Google Analyticsの設定方法です。



  1. Blogger アカウントにログインします。
  2. トラッキングするブログを選択し、[管理] オプションで [設定] をクリックします。
  3. [テンプレート] タブをクリックします。
  4. [ページ要素] をクリックします。
  5. [ページ要素を追加] をクリックします。
  6. ポップアップ ウィンドウで [HTML/JavaScript] オプションを選択し、[ブログに追加] をクリックします。
  7. [HTML/JavaScript の設定] ウィンドウの [タイトル] 欄の名前 (Google Analytics トラッキング コードなど) を作成します。 Analytics のトラッキング コードを [コンテンツ] 欄に直接貼り付けます。
  8. [変更を保存] をクリックして終了します。
0 コメント ラベル:

メールでのBlogger記事アップ

メールからBloggerの記事アップです。
これって、とても楽！！
添付ファイルに画像をつけることも可能です。
0 コメント ラベル:
登録: 投稿 ( Atom )
Related Posts Plugin for WordPress, Blogger...