ダメ人間の日々の日記: 3月 2012

このページの記事一覧

2012年3月18日日曜日

独自ドメインをbloggerに設定する・・・ムームードメイン

　bloggerには無料で独自ドメインを設定できるようなので、早速やってみようと先日思ったのだが、結果は他にブログに独自ドメインを割り当てることになった。。。それは後程触れるとして、自分はムームードメインで独自ドメインを取得したので、ムームードメインでの話。

　まずはbloger側での設定だが、管理画面で

　　　「設定」→「基本」→「公開」

　のブログのアドレスのところで、「カスタムドメインを追加」をクリックし、割り当てたいドメインを記入して保存すれば終わるので、非常に簡単。bloggerは独自ドメインに関してだけでなくその他のことも、自分のような初心者にもわかりやすい上に、高機能なことを考えると、世界中で支持されているのもうなずける気がする。。。

　けれど問題はその後にあった・・・。bloggerのヘルプによると、「サブドメイン」の場合は、ＤＮＳ設定で、「CNAME 」、「ghs.google.com 」と記述すればいいらしい。

　サブドメインが「www.example.com」の場合は「サブドメイン」の欄に「ｗｗｗ」、「種別」に「CNAME 」、「内容」に「ghs.google.com 」と設定し、「ネームサーバ設定変更」してしばらくすると、設定したＵＲＬでブログが表示されるようになり、自分のブログも設定後しばらくしすると表示されるようになり、サブドメインの設定では、何事も問題なく終わったのだが。。。

　問題だったのは、先程のヘルプにあった、トップレベルドメインの設定。ヘルプ記事によると、

＞example.com という形式でドメイン名を入力し、[A] セクションに IP アドレスを指定します。4 つの異なる Google IP にリンクする、異なる 4 つの A レコードを作成する必要があります。

216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21

　と書いてあったので、その後の記事どうりに、

　を追加したけれども、一向に表示されない。。。おかしいと思ってヘルプ記事を読みなおすと、

＞独自ドメイン（例: example.com）を実際のサイト（例: www.example.com）にリンクすることができます

　とある。そこで先ほどの画像にある、「ｗｗｗ」、「CNAME 」、「ghs.google.com 」を追加し、しばらく経過すると、ブログが表示されるようになった！けれどしばらくするとエラー画面に。。。もう一度blogger側の設定をし直したらまた表示されたのだが、またしばらくするとエラー・・・。原因がさっぱりわからない。。。当初このブログにトップレベルドメインを割り当てたのだが、不安定だったので、結局他のブログにサブドメインを割り当てることになった。。。原因は何だったんだろうか。。。

2012年3月11日日曜日

feedburnerdでbloggerの記事本文に全記事一覧を表示させる

　先日、「feedburnerで最新記事をbloggerのサイドバーに表示してみる」に書いたように、feedburnerの「バズ・ブースト」でサイドバーに最新記事一覧を表示させてみたが、今度は全記事一覧をbloggerの記事内に表示させようと、少ない知識で頑張ってみた。

　全記事一覧専用の記事をどうやって作ろうかとまず考えたが、bloggerには「ページ」とゆう機能があり、「ページガシェット」を「レイアウト」でタイトルの下に持ってくると、メニューバーのようなタブがhtmlを弄ることなしに簡単に作れるので、一先ず「ページ」機能を使うことにしてみた。

　管理画面で、

　　「ページ」→「新しいページ」→「空白のページ」

　をクリックし、タイトルを全記事一覧にして、feedburnerの「バズ・ブースト」で表示する記事を「ALL」に。そうすると全記事の一覧が表示されると思ったのだが、そのままでは「JavaScript」が反映されず、コードのままでしか表示されない。そこで、「ページ設定」のとこにある「オプション」をクリックし、

　「入力されたＨＴＭＬを解釈」をチェックし「完了」をクリック。そうすると「JavaScript」が解釈されされ、全記事一覧が表示される。そのうち変更するかもしれないが、今のところ、このブログにはブログタイトルの下の「記事一覧」をクリックすると、

　と、バズ・ブーストの設定画面で「記事内容を表示」にチェックを入れたので、

記事タイトルと、記事の抜粋が表示される。デフォルトの設定では、記事と記事のスペースがなく、記事タイトルと記事とのスペースもないので、feedburnerのヘルプ記事、『バズ・ブーストバズブーストの一般的なスタイル設定』を参照し、ＣＳＳに記述し、記事タイトルのフォントやスペース、記事の間の線を加えて装飾したが、初心者にしてはまずまずの出来栄えのような気がする。。。

2012年3月9日金曜日

seesaaブログで過去ログの記事一覧を表示する

seesaaブログで前回の記事にもあった、カテゴリ記事一覧について調べていた時に過去ログ記事の一覧について書かれてる、『徒然なるままに』さんの記事が非常にわかりやすかったので、参考にさせていただきました。

　『カテゴリ記事』の時と同じように、「デザイン」→「コンテンツ」で『過去記事コンテンツ』を作り、『過去記事コンテンツ』の「コンテンツＨＴＭＬ編集」で、<% if:page_name eq 'archive' -%>は二つあるので、上にある方の、

<% if:page_name eq 'archive' -%>
<div class="navi">
<% if:archive_page_name eq 'month' -%>
<% if:previous_archive -%>
・
・　　
・
<% /if %>
<% if:archive_page_name eq 'mday' %><% /if -%>
</div>
・
・
・
<% if:archive_page_name eq 'month' -%>
<% if:pager.need_pager -%>

リンクタグ箇所

<% /if -%>

ここに追加

<% /if -%>
<% /if -%>

　の<% /if -%>と<% /if -%><% /if -%>の間に『徒然なるままに』さんお記事中にある、

<div id="clist">
<script langage="JavaScript">

</script>
<ul>
<% loop:list_article -%>
<li><a href="<% article.page_url %>" class="a"><% article.subject %></a></li>
<% /loop -%>
</ul>
</div>
<hr/>
<br/>

　を貼ったら、

　と過去ログの、ブログ設定で表示件数設定した記事分の、過去ログの一覧が表示された。ただ元のソースだと、装飾がなかったので、区切りの線の部分は付け足し、記事一覧も中央に表示されたので、「デザイン」→「デザイン一覧」で現在選択しているＣＳＳに

　　#clist {text-align:left;}

　　を追加して、記事を左寄せに。テスト記事なので、記事が数字のみなのが面白いが。。。seesaaブログは自分にはちょっとややこしい…

feedburnerで最新記事をbloggerのサイドバーに表示してみる

　せっかくfeedburnerを使ってみたものの、さまざまな機能があり、自分にはイマイチよくわからないことが多い。。。「フィード・ブックマーク」のアイコンはブログに追加したけれども、「バズ・ブースト」を試してみようと思う。

　bloggerの基本ガシェットには、最新記事一覧を表示するガシェットがなかったので、「bloggerで最新記事を表示する・・・bloggerのガシェットを使う」でbloggerにあるガシェットで最新記事を表示させてみたが、feedburnerのバズ・ブーストでもbloggerの基本ガシェットの「フィード」と同じように最新記事を自分のブログに表示できるので試してみた。

　ｆeedburnerにログインし、自己のサイトのフィードのページに行き、「集客支援」→「バズ・ブースト」とあるので、それをクリック。色々設定はできるのだが、最新記事を１件から全記事まで表示できる。とりあえず「フィード名」だけチェックを入れ、生成されたコードを、bloggerの基本ガシェットの「HTML/JavaScript」を貼り付けてみたら、

　と最新記事がサイドバーに表示された。今度は、

　記事の内容を表示にチェックを入れて見たら、記事の抜粋も、記事タイトルに合わせて表示されることになった。これは他のブログにも表示させることができるので、便利だと思うが、他に書いてるブログは競馬ブログなので。。。

bloggerにファビコン（ Favicon ）を設置

せっかくこのブログを始めたので、ファビコン（ Favicon ）を作成することにした。ファビコン用のフリー素材はたくさんあるのだが、今回は自分で簡単なデザインで作ってみることに。ファビコンを設置すればこのブログにも独自性が出た感じがして、いいかなぁと思う。

まずは Faviconを作成。今回はファビコンジェネレーターで作ることに。ファビコンジェネレーターは

この二つのファビコンジェネレーターが使いやすかったのだが、「Favicon Generator」はアルファベットの文字しか作れなかったので、今回使用したのは「DeGraeve.com」にあるファビコンジェネレーター。一マス一マス塗りつぶすのは根気がセンスが感じられないが何とか

　完成。これを保存して、後はアップするだけ。bloggerへのアップの仕方は、クラシックテンプレートでなければ管理画面で「レイアウト」のガシェットを追加・変更できる画面の

　「ファビコン」の編集をクリックして、ファヴィコン画像をアップロードするだけ。ホームページや他のブログではｈｔｍｌ内の<head>～</head>の間に、

　

　を記入。このようにして自分のブログにファビコンをアップロードしたのはいいのだが、ＩＥ9でもChromeでも表示されない。。。ＩＥで表示されないときは、

　　「ツール」→「インターネットオプション」→「閲覧の履歴の削除」

　に進み、

　で「キャッシュの削除」をすれば大抵は表示されるはず。。。このブログのファビコンも自分のＩＥではこれで表示されるようになったのだが、Chromeはさっぱりわからない。。。けれど、ＣＳＳ弄ってたら急にファビコンが表示されるようになった！一体原因は何だったんだろうか？

2012年3月8日木曜日

bloggerで最新記事を表示する・・・bloggerのガシェットを使う

　bloggerでは基本ガシェットに最新記事一覧を表示するガシェットがなかったので、bloggerのガシェットを使って簡単に表示できる方法を試してみた。

　一つ目は、「基本ガシェット」にある「フィード」。これに自分のフィードＵＲＬを入力すれば、

　このように最新記事一覧が、記事タイトルのみで表示されるのだが、最大で５件までしか表示されない。

　もう一つのガシェットは「注目やその他のガシェット」にある「Recent Posts」。こちらは、「フィード」と異なり、ガシェットの設定画面で、

　色々と設定できる。「Number of Posts to Display」で表示する記事の件数を設定でき、「Display Post Date」で投稿した日付を表示するか選べる。それと「Show a summary of your blog posts」にチェックを入れれば、最新記事一覧の記事タイトルの下に、

　と、記事タイトルだけでなく、本文の抜粋を表示できる。それだけでなく、このガシェットをサイドバーでなく、「ブログの投稿」の上に設置すれば、記事の上に簡単に最新記事一覧をを表示することができる。

　物凄く簡単に設置でき便利だが、記事上に設置すると少しだけ読み込むのに時間がかかる。。。

seesaaブログでカテゴリ記事一覧を表示する

　もともとはseesaaブログで当ブログを始めようと思っていたのだけど、なかなか難しく、使い慣れたbloggerで始めることにしたわけだが、seesaaブログも、bloggerと同じく、カテゴリ記事一覧が実装しておらず、色々調べていたら、『勝手にブログカスタマイズ』の記事でわかりやすく解説してあったので、それを基に、カテゴリ記事一覧を作成してみた。。

　seesaaブログは記事コンテンツのｈｔｍｌ編集は「トップページ」、「記事ページ」、「過去ログページ」、「カテゴリ記事ページ」とそれぞれ個別に分けられるので、『デザイン』→『コンテンツ』を開き、カテゴリ専用の記事コンテンツを作り、そのカテゴリ専用の記事コンテンツの『コンテンツＨＴＭＬ編集』をする。

　<% if:page_name eq 'category' -%>

</div>

<% if:pager.need_pager -%>

　　　・

</div>

<% /if -%>

　<% if:page_name eq 'category' -%>は二つあるので前にある<% if:page_name eq 'category' -%>方の、１番最後の<% /if -%><% /if -%>の間に、『勝手にブログカスタマイズ』さんの記事にあるhtmlソース、

<p>『<% category.name %>』の記事一覧です。</p>

</div>

　　　・

<% /loop -%>

</div>

<br />

<hr />

　を貼ると、

　カテゴリ記事一覧の上に、「ブログ設定」で「カテゴリ記事の表示件数設定」で設定した、表示記事の件数分の「カテゴリ記事一覧」が表示された。ただbloggerでも思ってることだが、下の記事は消したいが、どうやって弄ればいいのだろうか。。。

2012年3月7日水曜日

feedburnerを使ってみる・・・ＲＳＳフィード

　feedburnerは機能的によくわからない点が多いのだが、とりあえずこのブログではfeedburnerを使ってみることにした。でっかいＲＳＳフィードのアイコンも使用できるので。。。

　bloggerでfeedburnerを使う場合は、既にgoogleアカウントも持っているので、ブログかＲＳＳフィードのアドレスを入力するだけでＲＳＳフィードは作れるのでfeedburnerの設定で集客支援の検索インデックスで「検索エンジンからインデックスされることを希望しない」のチェックを外し、bloggerにリダイレクト。

　bloggerの場合は、「設定」→「その他」のフィードリダイレクトＵＲＬの登録でfeedburnerのフィードＵＲＬを登録するだけでリダイレクトできるので、bloggerにリダイレクトして、自動登録されていたgoogleウェブマスターツールにフィードを送信。ひとまず、記事一覧、関連記事一覧も作り終わったので、人心地ついたけど、やはり人のブログのデザインみてると、凝ってるデザインが多いので、もう少し勉強したいと思う。。。

bloggerで関連記事一覧を表示する

アーカイブやラベルの記事一覧は、その後ろに全記事が表示されるので、どうしようか悩んでいるが、関連記事の一覧はどうしても実装したかったので、またまたクリボウさんのサイトの『Blogger で「関連記事」リストを表示する 2 つの方法』の記事を参考にさせてもらいました。

　２つある方法の１つ目、ラベルごとの記事一覧を利用させていただきました。ｈｔｍｌ編集の「ウェジェットのテンプレート展開」で、<b:includable id='main' var='top'>の下に、

<b:includable id='related-posts' var='posts'>
<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div class='widget-content'>
<h3>関連記事:</h3>

・
・
・

var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>
</b:includable>

　のソースを貼り、テキストエリア・・・二つある<div style='clear: both;'/> の一つ目のほうの次の行に<b:include data='posts' name='related-posts'/>を貼って完成。当ブログの個別記事をクリックすると下記のように、

　ラベル別の関連記事が表示されるようになった。ただもう一回ウェジェットのテンプレート展開を展開すると、関連記事のソースは、

<data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</div>
</div>
</div>
</b:includable>

　の下にあるのはなんでだろう？元の位置から移動してる。。。

bloggerで記事一覧を表示させる・・・ラベル記事、アーカイブ記事

　クラシップテンプレートを断念したのは、アーカイブ記事一覧を表示させるのが上手くいかなかったので、どうしても記事一覧を表示させたかったのだが、色々探していたら、『クリボウの Blogger Tips』とゆう、bloggerのカスタマイズについて詳しく解説してあるあるサイトに、記事一覧を表示させるhtmlソースが書いてあったので、2つある<b:include data='top' name='status-message'/>の下の方にある方の下に、クリボウさんのサイトにある

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<span>このページの記事一覧</span>
<ul id='post-title-navigation'>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:post.title'>
<a expr:href='"#" + data:post.id'><data:post.title/></a>
<b:else/>
<a expr:href='"#" + data:post.id'><data:post.id/></a>
</b:if>
</li>
</b:loop>
</ul>
</b:if>
</b:if>
<br/><br/>

　ソースを貼り付けたら、自分のブログも、アーカイブや、ラベル記事を表示させると、記事一覧が表示されたので、すごい助かった。。。

　このテンプレートのせいなのか、記事一覧と記事の日付がくっついてしまっていたので、<br/>を付け加えて調整したら、一応完成したのだが、一つだけ問題が。。。そのラベルやその月等のアーカイブ記事が、記事一覧の後に表示されるのだが、記事が増えるにつれ、表示される記事が増えるので、相当重くなりそうだし、記事一覧ページは、リンクだけの記事一覧がほしいような気もしてきた。。。

bloggerにはページ機能があるので、あまりに記事が増えてきたら、そのページに自分でリンク貼ったほうがいいのだろうか。。。記事一覧から記事を消す方法がわかれば苦労しないのだが。。。

bloggerの検索結果を記事タイトル→ブログタイトルにする

このブログ以前にbloggerでブログをしていた時、自分のブログを検索したら、「ブログのタイトル」→「記事タイトル」となっていて、ブログのタイトルが先に来ていて、検索結果では何の記事が書かれているのかわからいので、「記事タイトル」→「ブログタイトル」に変更したのを思い出したので、記事を書く前に変更してみた。

　以前も参考にさせてもらった、サイトは忘れてしまったが、自分のブログのソースを見て、

　<title><data:blog.pagetitle/></title>

　の部分を、


<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/>ダメ人間の日々の日記</title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>


　に書き換えたのだが、上手くいってるといいが。。。

bologgerでブログを開始・・・titleタグを追加（クラシックテンプレート）

　bloggerでブログを開始するにあたって、初心者なのにクラシックテンプレートに挑戦しようと思ったのだが、途中で断念。。。どうゆう経緯で断念したかは、下記に。。

　bloggerはアーカイブや、ラベルの記事一覧が実装されていないが、bloggerのヘルプ記事を読んでいたら、クラシックテンプレートでのやり方が書いてあったので、読んでいたら、読み間違いだったかもしれないが、その前提でタイトルタグを追加しないといけないらしい。

　そこでbloggerの『タイトルタグの追加方法のヘルプ記事』を参考に<$BlogDateHeaderDate$><$BlogItemBody$>の間に、タグを追加してみた。。。

　　（追加前）

　　（追加後）

　２０１２年３月７日水曜日の横にタイトルの「テスト」が追加されているのだが、これで先ほどの、カテゴリ一覧を表示するようにできる！と思っていたら・・・何回やっても上手くいかない。。。とゆうわけで、もっと知識がないとどうにもならないことがわかったので、ひとまずクラシックテンプレートはここで断念して現在のテンプレートで始めることに。。。

登録: 投稿 (Atom)