ラベル TIPS の投稿を表示しています。 すべての投稿を表示
thumbnail

独自ドメイン「8888km.net」に変更 | Blog運用

2016年4月1日、気分新たにするため?、このブログのURLを、独自ドメイン「8888km.net」に変更。その際のbloggerなど手順。

ページありません

このブログシステムは、GoogleのBloggerを使っていて、それまで、普通に発行されるURL「kota-mishima.blogspot.com」となっていた。

ようやく、というか、今更、というか。

このブログの独自ドメイン「8888km.net」を取得し、変更。

変更作業にあたり、大きなつまずきはないが、注意点など。


Bloggerで独自ドメインに変更する手順


  1. ドメインを取得 ドメインの取得は、GoDaddy.com、eNom.com、DomainDiscount24.com などのGoogle提携のところでなくとも、有名な「お名前.com」でもOK。


  2. Bloggerのブログ管理画面の左メニュー「設定」で、新しいドメインURLを入れて「保存」ボタンを押す。

    独自ドメイン「8888km.net」に変更 | Blog運用



  3. ドメインのDNSサーバー設定用の値が2つ表示される。
      一つは、ghs.google.comに向かわせるもの
      残りは、そのドメイン所有者であることを、googleが確認するもの。
      それらを「CNAME」設定をする。
  4. ドメイン取得した、ドメイン管理画面で、DNS設定を行う。
      3での内容を「CNAME」設定で行う。

  5. Bloggerのブログ管理画面の左メニュー「設定」で、新しいドメインURLを入れて「保存」ボタンを押す。google側で疎通が確認できると、新しいURL「リダイレクト」される。

  6. BloggerドメインのページURLも、新しいURLに変換してくれる。今までの記事のURLを書き換えたりなどという作業は不要。
    例:
     http://XXX.blogger.com/abcdefg.html
            ↓
     http://(新しいURL)/abcdefg.html

以上の手順などは、googleサポートページにも記載されている。


独自ドメインに変更する際の注意点


上で設定した「新しいドメインへのアクセスをgoogleに向かわせる」という、DNS反映には時間がかかる。

DNSというのは、住所録のようなもの。このURLが、どのサーバーにあるのかを指示てしている。 インターネットという仕組み上、自分が変えたDNSサーバーから、他のDNSサーバーへ、その設定内容が順次反映されていくのに時間がかかる。

そのため、上設定後1−2日ぐらいは、新しいドメインにアクセスすると、Webサイトにアクセスできる場合と、できない場合がある。

反映されるまで、DNSサーバーが指していた、もともとのWebサーバーにアクセスしてしまい、bloggerへのアクセスにならない。旧URLでアクセスされると、googleのbloggerでは、新しいURLにリダイレクトしてくれるのだが、もともとのWebサーバーに向かってしまう。

自分の場合、家のインターネットでは見えるのに、Ymobileのルーターでは見えず。2日間ぐらい、そういう状態が続く。

この間、自分だけの症状ではなく、同様のユーザーがいるわけなので、Webサイトを全く見えない人がいてアクセス減になる。

今回は、対応しなかったが、googleのbloggerのリダイレクトをしばらくOFFにしておけば、旧URLへのアクセスは救えたかもしれない。検索エンジンなどは、旧URLで登録されているわけだから、そうしたほうがよかったのかもしれない。

なお、Bloggerの記事投稿等は、従来通り。

thumbnail

Bloggerにschema対応 | TIPS

Bloggerにschema対応 | Blogger設定の備忘録


Bloggerのhtmlファイル設定から、schema対応を施す。

<meta itemscope='itemscope' itemtype=&#8216;http://schema.org/Product'/><br /> <meta itemprop="name" expr:content='data:blog.pageName' /><br /> <b:if cond='data:blog.postImageUrl'><br /> <meta itemprop="image" expr:content='data:blog.postImageUrl' /><br /> <b:else/><br /> <b:if cond='data:blog.postImageThumbnailUrl'><br /> <meta itemprop="image" expr:content='data:blog.postImageThumbnailUrl' /><br /> </b:if><br /> <b:if cond='data:blog.metaDescription != &quot;&quot;'><br /> <meta itemprop="description" expr:content='data:blog.metaDescription' /><br /> </b:if><br />



最初、以下の記述で構文エラーとなる。
<div itemscope itemtype="http://schema.org/Product"></div>


いろいろと調べた結果、以下の対応方法を見つける。
<div itemscope='itemscope' itemtype="http://schema.org/Product"></div>



thumbnail

Bloggerのサイトマップ自動生成 | TIPS

備忘録



Bloggerには、サイトマップを自動生成できる機能があるということを知る。
以下のURLで生成される。

http://###.blogspot.jp/sitemap.xml


それをGoogleウェブマスターツール に登録する。
検索対策(SEO)。

http://www.google.com/webmasters/

ついでに、MicrosoftのBingにも、サイトマップ登録をする。
http://www.bing.com/toolbox/webmaster
※要ユーザー登録


※11/29追記
このサイトマップで送信されるURLは750が上限の模様。
記事数は、1400近くあるのに、750までしか認知されていない。
それ以上の場合は、どうする?

googleの管理画面を見ると、「インデックスに登録されたページの総数 1,477」
とあるので、検索エンジンには登録されている?

※11/29追記 その2

調べたら、対応方法を見つけた。
以下のURLを追記すると、残り分のサイトマップ送信が可能。

以下の場合は、501件目以降を500件分送信する。

atom.xml?redirect=false&max-results;=500&start-index;=501


下の場合は、サイトマップの6ページ目を送信する。

sitemap.xml?page=6




thumbnail

読み込み速度を高速化 | Blogのデザインを変更 その2

約1年前の2014年7月頃から開始した、このBlog。
そのデザインを、2015年8月30日に一新する。
ちょうど、自分の誕生日にあわせたかのような対応。

しかし、Bloggerで使える有料テンプレートを使用し、設定したら、ブログの読み込み速度が、極めて重たくなる。

今回は、その対応方法のメモ。

今回使ったWebスピードチェックサイト「Pingdom」
サイト内のどこが重たいのかがわかりやすく表示される。

thumbnail

このBlogの画面デザインを変更 | TIPS

このBlogの画面デザインを変更。


といっても、すこし改修。
モバイル向けの表示を変更。

Bloggerの管理画面からデザイン変更をしていく。

それで行うと、Adsens表示とかの個別埋め込みなどが、標準状態に戻ってしまうので、あとで手直ししないといけない。

手順としては、

  1. テンプレートでデザインを変更
  2. カスタマイズで変更
  3. HTMLの編集で細かく調整
という流れ。

なお、変更前のhtmlのソースとテンプレートのバックアップをとっておくことは、言うまでもない。


thumbnail

BloggerのCSS設定 | TIPS


比較的に設定の自由度が高いGoogleのBlogサービス:Bloggerのカスタマイズ記録。

Google Adsenseの表示設定のカスタマイズ


(2014.10.01実施)

スマホやケータイなどでBlog表示時に、Google Adsenseの広告を、最下部に固定して表示させる方法。よくある情報系サイトのような感じに。

1. Google Adsenseでレスポンシブ型の広告コードを取得

2. Bloggerの設定で、テンプレート>htmlの編集で、以下のコードを追加
 黒字は広告コードをそのままコピペ。
 ※エラー表示のため、「async」を消去。


<b:if cond="data:blog.isMobile">
    <div style="bottom: 0; clear: both; display: block; float: none; left: 0; margin: 0; padding: 0; position: fixed; width: 100%; z-index: 1;">
    <script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
    </script>
    <!-- XXXX_respo_size -->
    <br />
    <ins class="adsbygoogle" data-ad-client="ca-pub-XXXX" data-ad-format="auto" data-ad-slot="XXXX" style="display: block;">
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    </div>
<b:else>
</b:else>



blockquoteタグの表現変更


(2014.08.03実施)

標準に使うと、以下のように引用かどうかわかりにくい、<blockquote>タグ使用時の表現を


以下のように変更



(CSSコード)

blockquote.orgkmstyle{
    background-color:#ddd;
    padding:3em 1em;
    position:relative;
    z-index: 1;
}

blockquote.orgkmstyle:before{
    content:"''";
    font-size:600%;
    line-height:1em;
    color:#FFFFFF;
    font-family: 'Times New Roman' ,"MS Pゴシック" ,sans-serif;
    position:absolute;
    left:0;
    top:0;
    z-index: 2;
}

blockquote.orgkmstyle:after{
    content:"''";
    font-size:600%;
    line-height:0em;
    color:#FFFFFF;
    font-family: 'Times New Roman' ,"MS Pゴシック" ,sans-serif;
    position:absolute;
    right:0;
    bottom:0;
    z-index: 2;
}

blockquote.orgkmstyle p  {  
    margin-bottom: 12px;  
    z-index: 3;
}  

blockquote.orgkmstyle p.origin    {  
    text-align: right;  
    padding-top: 8px;  
    margin-bottom:0; 
    font-size:small;  
    z-index: 3;
} 


(htmlでの使い方)

<blockquote class="orgkmstyle">
<p>
「家庭というものの持つ、おそるべきべき魔力。<br />
<br />
まさに、典型的なホームドラマだ」
</p>
<p class="origin">背中の音、「夜のかくれんぼ」、星新一</p>
</blockquote>



h1タグの表現変更


(2014.08.03 実施)

標準に使うと、以下のようにただ文字が大きいだけの<h1>タグ使用時の表現を


以下のように変更



(CSSコード)

h1.orgkmstyle{
    padding:3px 5px;
    border-color:#777777;
    border-width:0 0 1px 7px;
    border-style:solid;
    font-size:large;
}


(htmlでの使い方)

 <h1 class="orgkmstyle"> 搭乗回数編</h1>