このページの記事一覧

2012年10月29日月曜日

Twenty Twelveの最上部の隙間をなくす・・・Twenty Twelveのカスタマイズ


 先日WordPressのサイトでTwenty Twelveにテーマを変更したのだけれども、まずりたいことは、抜粋記事の一覧を表示させるのと、Twenty Twelveは最上部に、












 このように、隙間があり、隙間をなくしたいと思っていたのだが、LoveLoveLabo ANNEXさんのサイトの「【WordPress】[Twenty Twelve カスタマイズ] メニューバーの位置をヘッダの下に」の記事にわかりやすく説明が書いていたので試してみた。




 まずTwenty Twelveの子テーマのスタイルシートに、子テーマの作り方は「WordPressのTwenty Elevenのテーマカスタマイズ・・・子テーマ」に。その子テーマのスタイルシートに、



 /* =ページ最上部の隙間を消す
----------------------------------------------- */
#page.hfeed.site {        
margin-top: 0;




 を加えるだけ。すると、









 このように最上部の隙間が消えて、最上部がすっきりした気がする。。。
LoveLoveLabo ANNEXさんありがとうございました。。。





2012年10月28日日曜日

Twenty Twelveを試してみた・・・WordPress


 WordPress趣味のサイトで早速Twenty Twelveを試してみたのだけれども、シンプルな感じで、結構お気に入り。新しい点としては、フォントサイズの記述が、remベースになっていること。remはCSS3から出てきた新単位みたいだけれども、もし、タイトルや本文のフォントサイズを変えたいと思ったりした時に厄介だと思っていたが、Webourgeoさんのサイトに詳しく書いてあったので、いざタイトルのフォントサイズを変えようと思った時も、初心者の自分もひとまず安心。。。



 Twenty Twelveは気に入ったので、見出しだけ少しスタイルシートに加えただけでこのまま使用しようとしていたのだけれども一つだけ大きな問題が・・・・その大きな問題とは、twentyelevenでは、以前「トップページに抜粋記事の一覧を表示・・・WordPress」で書いたように、content.php の  <?php The_content・・・・・・  と書かれている部分を <?php the_excerpt ・・・・・に変更するだけで、トップページやカテゴリ記事、タグ記事も抜粋記事の一覧表示にできたのだけれども、Twenty Twelveでは確かに抜粋表示にはなるのだけれども、一覧の中から該当記事をクリックして個別記事に移動しても、抜粋されたままで全文が表示されない。。。。自分の知識ではどうしようもないので他の方法で抜粋記事一覧を表示させたいと思うのだが、自分には相当難しいことのような気がする。。。


2012年6月5日火曜日

bloggerで関連記事を表示する②



 bloggerで関連記事一覧を表示させる方法としては、前に「bloggerで関連記事一覧を表示する」での方法で、このブログでは関連記事を表示させているが、他の方法を探してみたら、Smarter Related Posts Widget for Google Blogger - v2.0」といウィジェットがあったので試してみた。




 設置方法はSmarter Related Posts Widget for Google Blogger - v2.0」のサイトに行き、記事中にある「 easy setup wizard 」をクリック。そうすると、












 設定画面が表示されるので、「Blog URL」に自分のブログのURLを入力し、「Mode」で関連記事が、最近の投稿か選択し、「Max posts」で表示する関連記事数、等設定。設定が終わったら、「update  demo&code」をクリックすると、コードが表示されるので、記事下に関連記事を表示したい場合は、「テンプレート編集で」





<div class='post-footer'>





 が二つあるので上にある方の下に、先ほどのコードをコピーすると、「デモ」 このリンク先のブログのような関連記事一覧が表示される。関連記事の見出しについては、先ほどの設定画面の「Recent Title」に好きな見出しを任意につけられる。




 このブログも個別記事には関連記事が表示されるけど、何となく同じくブログタイトルのみのシンプルな関連記事一覧だけど、bloggerで関連記事一覧を表示する」で書いた方法のほうがすっきりしていていいような気がする。。。



2012年5月29日火曜日

関連記事を表示するプラグイン・・・YARPP(Yet Another Related Posts Plugin)



 WordPress関連記事一覧を表示するプラグインYARPP(Yet Another Related Posts Plugin)。WordPressでブログは二つ書いているのだけれども、片方のブログは関連スコア下げたほうがいいのか関連記事が一つも表示されない。。。。




 それはいいとして、プラグインYARPP(Yet Another Related Posts Plugin)。ダウンロード後ネットワークで有効化すると、それだけで関連記事が自動的に表示された。YARPPの設定は、ダッシュボードの「設定」のところに「YARPP」が表示されるので、そこで「YARPP」の設定を。










 まず、表示オプションをクリックすると、「フィルター設定」「関連スコア」設定にチェックがないのでチェックを入れる。フィルター設定は、関連記事に表示したくない「タグ」や「カテゴリー」を除外できたりする。「関連スコア設定」は、










 初期値は5だけれども、ブログを始めたばかりだと関連記事が表示されないかもしれないので、5より下げたほうがいいかもしれない。自分のブログも5だと表示されないブログがあるので。。。




 そして「表示設定」で、サイトでどのように表示されるか設定。デフォルトでもいいのだけれども、









 デフォルトだと自分が今使ってるテンプレートだと表示が寂しかったので、CSSで見出しをつけたのだけれども、設定を終わり自分のサイトでは、このように表示された。このプラグインはファイルを弄る必要がなく、簡単に関連記事が表示されるので気に入っているのだけれども、競馬ブログは古い記事は読まれることはほぼないと思うので、自分のブログにはあまり意味がないような気がする。。。


2012年5月21日月曜日

Twenty Elevenの固定ページ、サイドバーテンプレート




 WordPressのデフォルトのテーマである「Twenty Eleven」の固定ページのテンプレートには、








  • デフォルトテンプレート
  • ショーケーステンプレート
  • サイドバーテンプレート



 の3種類がある。ショーケーステンプレートは、「ショーケーステンプレート・・・(スライドショー)WordPress」で書いたように、記事の公開設定で「この記事を先頭に表示する」にチェックウィ入れた記事のスライドショーと、最近の投稿がページに表示されるのであるが、サイドバーテンプレートはなんだろうと思いながらもずっと使用していなかったのだが、今日試しに使ってみたら、デフォルトの固定ページではサイドバーが表示されないのだが、サイドバーテンプレートを使用すると、サイドバーが組み込まれており、サイドバーテンプレートを使用した固定ページにはサイドバーが表示される。名前のまんまのテンプレートだったので、もっと早く試せばよかったと思う。。。





 けれどこのサイドバーテンプレートのおかげで思わぬところで、「トップページに抜粋記事の一覧を表示・・・WordPress」に書いた、記事一覧を表示させた時に、先頭の投稿だけ抜粋記事が表示されないという問題が解決された。




 単独記事と固定ページは、プラグイン「Twenty Eleven Theme Extensions」でサイドバーを表示させていたのだが、固定ページのテンプレートにサイドバーテンプレートを使用し、プラグインで固定ページにサイドバーを表示させるのをやめたら、抜粋記事の一覧の最初の投稿にも抜粋記事の一覧が表示されるようになった。。。

Twenty Elevenの単独記事にサイドバーを表示・・・Twenty Eleven Theme Extensions


 もうずいぶん前の話になるけど、WordPressのデフォルトのテーマのTwenty Elevenは個別記事と固定ページにはサイドバーが表示されないので、ファイル編集するから、プラグインで対応するかと考えたのだけど、お手軽にプラグインでサイドバーを表示させることにした。



 「Twenty Eleven Theme Extensions」をダウンロードして有効化。そうするとダッシュボードの「外観」に「Theme Extensions」が表示されるので、














 日本語に翻訳語だけれども、ページや、シングルポストのサイドバーの欄にチェックを入れ保存するだけで、固定ページや単独記事にサイドバーが表示されるようになる。手軽に固定ページや単独記事にサイドバーを表示できるのだが、固定ページはテンプレートにサイドバーテンプレートを使えばサイドバーが表示されるので、個別記事だけ必要なのだが、それならばプラグインでなくてもいいような気もするが。。。









ショーケーステンプレート・・・(スライドショー)WordPress


 WordPressで記事更新するときに前々からなんだろう?と思っていたのが、ショーケーステンプレート。なので色々調べてみたら、ショーケーステンプレートは、Twenty Elevenの場合しか試してないのだが、スライドショーと、最新の記事一覧が表示されることを今更ながら知って面白いと思った。



 固定ページでテンプレートは最初はデフォルトテンプレートになっているが、そこでショーケーステンプレートに変更して、タイトルをつけて保存。そしてトップページにショーケーステンプレートを持ってくるために、









 ダッシュボードの「設定」「表示設定」で「固定ページ」にチェックをし、フロントページに先ほど作ったショーケーステンプレートの固定ページを選択して保存。そうするとトップページに、一番最近の投稿が抜粋記事、それ以外の記事は記事タイトルが表示されるのだが、これだけではスライドショーは表示されず、記事の編集画面で、









 公開設定のところで「この投稿を先頭に固定表示」にチェックを入れ、チェック入れた記事が2つ以上あるとヘッダーの下に、選択した記事のスライドショー、その下に最近の投稿の記事の抜粋と記事タイトルが表示される。面白いとは思ったのだが、問題は、最新記事がスライドショーで表示されるわけではなく、自分で毎回設定しなければいけないことと、ウィジェットの問題がある。




 プラグインで固定ページにもウィジェットを表示させるようにしていると、ショーケーステンプレートの場合ウィジェットがはみ出てしまう。。。プラグインの設定でページ上にウィジェットを表示させないようにして、ウイジェットの設定でTwenty Elevenの場合はショーケースサイドバーにウィジェットを詰め込めば、表示されるのだが、他の固定ページにはこれだとウィジェットが表示されなくなるので、プラグインではなく、ファイルを弄ってページにウィジェットを表示させなければいけなくなるが、それも知識の浅い自分には時間のかかる作業になるので、結局トップページに記事一覧を表示させるのは、「トップページに抜粋記事の一覧を表示・・・WordPress」に書いた方法のでいいと思ったのだが、時間があるときにやってみようかなとは思う。。。


トップページに抜粋記事の一覧を表示・・・WordPress


 昔から抜粋記事の一覧を表示させたいと思っていたのだが、ブログを弄るととてつもなく時間がかかってしまうので、なかなか調べることもしていなかった。重い腰を上げて色々調べてみたら、「The present note」さんのサイトに、デフォルトのテーマのTwenty Elevenでのやり方がわかりやすく書いてあったので、早速やってみた。



 方法は、Twenty Elevenの content.php の  <?php the_content・・・・・・  と書かれている部分を <?php the_excerpt ・・・・・に変更するだけ。そうするとカテゴリページもタグのページも、アーカイブも抜粋記事の一覧が表示される。記事数はWordPressのダッシュボードの「設定」「投稿設定」1ページに表示する最大投稿数を変えれば、記事一覧の表示数が変えられるので、一応5件にしてみたのだが、一つ大きな問題が。。。。

















 このように、一応抜粋記事の一覧は表示されるようになったのだが、なぜか一番上の記事だけ抜粋が表示されない・・・・・。今日はこれだけでなくショーケーステンプレートも試してみたのだが、それでも一番最初の投稿だけ、ブログの題名だけで抜粋記事が表示されない。。。なんでなのだろうか・・・?



2012年5月11日金曜日

ページ上部に戻るプラグイン「Dynamic To Top」・・・WordPress


 ページ上部に戻るプラグインを色々試した結果、一番よかったと思うのは「Dynamic To Top」。色々と言っても3つしか試してないのだが、他の二つについては、、、






 さてそこで一番自分としてはよかったと思う「Dynamic To Top」であるが、これも他の二つと同様に、ダウンロードしてネットワーク有効化するだけで、back to topのボタンが表示される。








 しばらくは自分のサイトでは使用すると思うが、「Dynamic To Top」は「wp to top」と異なり個別記事以外でも表示されるし、カスタマイズも少しだけれども「wp to top」よりは多くできる。設定の仕方は、ダッシュボードで、「外観」→「TO TOP」をクリックすると、設定画面になり、表示するテキストやボタンのカラー表示する位置等設定できる。簡易に使用したい場合には「Dynamic To Top」が一番いいような気がする。



ページ上部に戻るプラグイン「wp to top」・・・WordPress


 前回はプラグイン「Cudazi Scroll to Top」を試してみたが、ネットで、ページ上部に戻るプラグインで、検索すると1番ヒットする「wp to top」を今回は試してみた。WordPressのダッシュボードから「wp to top」もダウンロードできるので、ダウンローして、ネットワークで有効化すると、











 
このように、表示され、マウスカーソルを合わせてクリックすると、ページ上部にスクロールされる。また、ダッシュボードで、「設定」→「wp to top」をクリックすると








 「wp to top」の設定画面になり、表示する位置、テキストやカラーを変更できる。簡単に設置でき、簡単なカスタマイズもすぐできるので非常に便利だと思うのだが、トップページ、カテゴリ記事、タグ、アーカイブでは表示されず、個別記事でしかback to topのリンクは表示されない。便利なプラグインだと思うけど、個別記事でしか表示されないのは少し残念。。。


ページ上部に戻るプラグインCudazi Scroll to Top・・・Wordpuress



 最近WordPressの話にばっかなってきてるが、ページ上部にスクロールするボタン。最近になってお気に入りの競馬サイトにも実装されたのだが、プラグインでも簡単に実装できるので、3つほどプラグインを試してみた。





まずは「Cudazi Scroll to Top」。ダウンロードして、ネットワークで有効化するだけで、










 このようなページトップへスクロールするボタンが表示されるようになる。ダッシュボードでカスタマイズはできないが、簡易に設置できるので、便利なプラグインだとは思うが。。。


2012年5月9日水曜日

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


 検索結果に「ブログタイトル」→「記事タイトル」と表示されると、ブログタイトルが先に表示されることにより、検索結果ではどのような記事が書いてあるかわかりにくい。このブログで、「bloggerをカスタマイズする」という記事を書いたとすると、検索結果が「ブログタイトル」→「記事タイトル」で表示されるとすると、「ダメ人間の日々の日記:bloggerをカスタマイズする」と検索結果に表示されることになり、どのような内容の記事が書いてあるのかわかりにくい。bloggerも最初は「ブログタイトル」→「記事タイトル」と表示されるが、それについては「bloggerの検索結果を記事タイトル→ブログタイトルにする




 FC2ブログでも、検索結果に「ブログタイトル」→「記事タイトル」と表示されるので、FC2ブログで「記事タイトル」→「ブログタイトル」にするには、








 まず管理画面の「環境設定」の「テンプレートの設定」で、








 
 使用しているテンプレートのhtml編集をクリックすると、html編集ができるので、<title>~<title>を探して、




<title><!--not_index_area--><%sub_title> <!--/not_index_area--><%blog_name></title>




 と書き換え、しばらくすると検索結果が「記事タイトル」→「ブログタイトル」で表示されるようになるはず。。。このブログは訪問者が少ないので、検索結果がどう表示されようがあまり関係ないような気もするが。。。




FC2ブログでファビコン(Favicon)を表示させる


 独自性を出したり、ブックマークされた時に差別化が図れるとか、ファビコンにはそうゆうメリットがあるのかもしれないが、実際ファビコンを使った場合の感想。ブログは5、HPは1サイト書いているが、そのうちファビコン使用しているサイトは3つ。やはりお気に入りのブログにはファビコンを使いたくなるし、表示されたときこれが自分のサイトか!と満足感がある。。。それだけなのだが。。。。




 ファビコンについては以前、「bloggerにファビコン( Favicon )を設置」のとこで書いたが、自分が実際にファビコンを使っているのはblogger、WordPress、FC2ブログなのだけれども、FC2ブログでファビコンを表示させるにはまず、









 ツール → ファイルのアップロードをクリックし、









 「ファイル選択」でファビコン用に用意した画像をアップロード。次にアップロードした画像を表示させるためにテンプレートを弄らないといけないので、









 環境設定 → テンプレートの設定をクリックし、








 使用しているテンプレートのhtmlの「編集」をクリックすると、テンプレートのhtml編集ができるので、html内の<head>~</head>の間に、




 
 <link rel="shortcut icon" href="favicon.ico(ファビコンへのアドレス名)">




 を記入。これだけの作業でファビコンが表示されるわけだが、IEでは表示されないときがあるのでその時の対処方法(確実ではない)。。。どうでもいいことだけれども、他のサイトのファビコンと比べると、このブログもそうだが、あまりにファビコンにセンスがないような気がする。。。1日のトータルアクセス数3000PV超えるブログもあるのだが、そのブログは途中からファビコンを使い始め、1つの記事に平均6コメントくらいはあったのだが、誰もファビコンに触れてくれなかったのは少しさみしかった。。。自己満足のためファビコン使用しているとはいえ。。。





2012年5月8日火曜日

WordPressにファビコン(Favicon)を設置・・・All in one Favicon


 このブログもファビコンを設置しているが、bloggerやブログ・ホームページでの設置について、「bloggerにファビコン( Favicon )を設置 」でこのブログに書いたが、WordPressのブログにもファビコンを・・・・と思ったのだが、ひとつだけめんどくさいことがあることに気付いた。。。



 WordPressのブログでも同じようにファイルを弄ってファビコンを設置したとすると、テーマを変えるたびにまたファイルを書き換えないといけないし、そう考えるとあまりコアファイルは弄りたくないと思い、プラグインでファビコンを設置することにした。




 便利なプラグインがないかと探していたのだが、「All in one Favicon」とゆう便利なプラグインがあった。このプラグインを有効化した後、「設定」→「All in one Favicon」で設定をすれば、ファビコンが表示されるのだが、ここで壁にぶつかった。。。




 ファビコンに使用しようとした画像は「Favicon Generator」で作った画像なのだが、画像は「○○.ico」。All in one Faviconでは、.icoもできるはずなのだが、なぜか表示されない。そこで画像の種類を変えてアップロードすることにした。使用するのは「ペイント」。まず、「スタート」メニューから「ペイント」を開き、ペイントで使用したい画像を開く。今回使用する画像は、Favicon Generatorで作った画像なので、元々16×16なのでサイズ変更する必要はないのだが、そうでない場合は、ペイントの「ホーム」→「サイズ変更」をクリックし、







  



 サイズの単位をピクセルにして、「水平方向」と「垂直方法」を16ピクセルに変更。そして後はgifに変更すればいいのだが、「名前をつけて保存」を選択すると、画像の種類が選べるので、gifで保存する。これでファビコン用の画像ができたので、ダッシュボードで「設定」→「All in one Favicon」でAll in one Faviconの設定画面に行き、






 




 GIFのところで「ファイル選択」で先ほどの画像をアップロードして保存すれば終了。とても便利なプラグインだと思うのだが、個人ブログでファビコン使用してる人ってどのくらいの割合なんだろう?当ブログみたいに誰も見てないブログには必要ない気もするが、自己満足ってことで。。。
 

 

2012年5月4日金曜日

WordPress・・・アクセスカウンターをWordPressに設置する


 当ブログも簡単なアクセスカウンターを、bloggerの基本ガジェットにある、「ブログの統計情報」とゆうガジェットでアクセスカウンターを設置している。このブログは訪問者も少ないし、設置する必要はないと思うのだが、昔からブログにはアクセスカウンターを設置するのが好きだったので一応書き始めのころから設置してみた。bloggerはダッシュボードの「統計」でトラヒック等、グーグルアナリティクスの簡易版のような情報がみれるし、アクセス解析にグーグルアナリティクスを設置しているのでそこまでの必要ではないのかもしれないのだが。。。



 とゆうわけで、WordPressのサイトにもアクセスカウンターを設置したいと思いプラグインを検索したわけだが、思ったよりも数が少なかった。やはりもうブログにアクセスカウンターを設置する時代ではないのだろうか?そういえば他社のブログを拝見しても、アクセスカウンターを設置しているサイトが減ってきているような気がしないでもない。。。グーグルアナリティクスののようなアクセス解析が主流なのだろうか?そこらへんはわからないが、自分としてはそのブログはFC2ブログ時代からアクセスカウンターを使っていたので、WordPressに引っ越しても使いたかったので。。。



 WordPressのプラグイン検索で「counter」と入力し、検索結果で出てきたアクセスカウンターのプラグインで試してみたのは、まずは「Counterize II」。Counterize IIはアクセス解析(グーグルアナリティクス)ができ、トータル、本日日、オンライン中のページviewが表示される。昨日ページviewはcounterize.phpファイルをエディタで編集。そしてサイドバーでPHPが動くように、プラグインPHP Code Widgetをインストールしなければならない。昨日の情報を見るにはコアファイルも弄らないといけないし、カウンターは手間をかけずに設置したいので、Counterize IIはやめることにした。



 次に試したのは、「トラフィックフラッシュカウンター」。これは、本日・昨日・毎日の平均にトータルのページviewが表示され、ウィジェットを動かすだけで設置ができ、設置が非常に簡単。しかしフラッシュなだけに少し重かったので。。。。。



 また、「Traffic Counter Widget」とゆうプラグインも試してみた。設置はこのプラグインを有効化すると、ウィジットに追加されるので、設置は簡単。そこですぐさま表示させてみたのだが、






 1日、7日間、30日間の訪問数に、検索でのヒット数、ユニークアクセス数、現在閲覧中の人数と表示され、動作も軽く中々のもの。しかし、これも自分が求めているカウンターではないので。。。



プラグインではイマイチ自分の求めているカウンター見つからなかったので、ロリポップのアクセスカウンターも試してみた。トータル・昨日・今日のページヴviewがみれ、設置はウィジットの「テキスト」にコードをコピーするだけ。表示も軽いのでいいと思ったが、FC2カウンターに馴れたせいなのか、





 


 のように、今日と昨日、トータル訪問者だけでなく、7日間の推移をみたいので、それにマッチするカウンターは結局見つからなかった。。。



 そうなると、プラグイン「Google Analytics Dashboard」セッション数、ページビュー数、平均ページビュー数、直帰率、平均サイト滞在時間、新規ユーザ率 が、「Extended Stats」欄で、人気記事、検索キーワード、参照元とグーグルアナリティクスの情報がダッシュボードに表示されるので、その統計情報でいいような気もしてくる。bloggerはgoogleのブログだけあって最初から実装されてるのはありがたいとは思う。




 ただ、いちいちダッシュボードみるのも毎日だと煩わしいので、ブログを表示したときに、FC2カウンターくらいの情報が一瞬でみれると楽なのだが、希望に沿うプラグインはなかったので、今は「Google Analytics Dashboard」でダッシュボードで統計情報を見ることにしている。まあFC2カウンター設置すればいいだけの話なのだが。。。。


2012年4月25日水曜日

WordPressマルチサイトでの不具合(プラグイン)・・・メインサイトを表示しようとするとサブサイトが表示


 未だにWordPressで設定したマルチサイトのサブサイトは何も更新していない状況なのだが、そのマルチサイト。プラグインによっては不具合が発生し、まだワードプレスのメインサイトでも記事を書いていない、ワードプレスに移行した当初、一気にプラグインを20個ほど有効化した時に不具合が発生しかなり苦労した。。。




 どうゆう不具合が起きたのかとゆうと、上手く説明できないのだが、メインサイトを表示しようとすると、サブサイトが表示され、サブサイトのダッシュボードでサブサイトの設定を更新すると、今度はメインサイトを表示しようとすると、サブサイトが表示される。そればかりではなく、ダッシュボードもメインサイトのダッシュボードに接続したはずなのに、サブサイトのダッシュボードに接続される。。。



 この不具合、ネットで調べても対処方法がわからず、知識の乏しい自分としては、どうしていいのかわからず、まだ記事を何も書いておらず、プラグインを20個ほど導入しただけの状況だったので、データベースを削除し、新しいデータベースを作り、もう一度ワードプレスを導入し直してみた。当然なのだが、この状況では先程の不具合はなし。そこでまたプラグインをダウンロードしてを有効化してみると、上記の不具合が。。。




 少し冷静になって考えてみたら、20個も一つづつ調べるのは面倒な作業だが、一回プラグインを全部無効化し、一つずつ有効化し、不具合が発生するプラグインを探せばいいだけなのでは?と思い、プラグインを全部無効化してみた。この状況では不具合はなし。面倒な作業だが、一つづつ有効化し、メインサイトとサブサイトを確認し、不具合が発生するか一つづつ調べると、ついに発見!そのプラグインを有効にすると、不具合が発生し、無効化すると、不具合がなくなる。それを2・3回確認して間違いないと思い、そのプラグインは削除し、他のプラグインは全て有効化。プラグインは何だったのか忘れてしまったのだが、これでマルチサイトでの不具合は解消され、安心したのだが、不具合発生した当初は相当焦って、夜寝ずに色々試して大変だった。。。

2012年4月18日水曜日

WordPressのテーマカスタマイズ・・・Twenty Elevenのサイドバーの幅の変更



 子テーマも完成したので、いよいよTwenty Elevenのテーマをカスタマイズすることに。ヘッダーの隙間を埋めるのは、「Twenty Elevenのヘッダーをカスタマイズする」を参考に、style.cssの



 /* =Header
----------------------------------------------- */

#branding {
 border-top: 2px solid #bbb; padding-bottom: 10px;
 position: relative;
 z-index: 9999;
}





 border-top: 2px solid #bbb;を削除して、 #page.hfeed { margin-top: 0px; }を追加するだけ。これで隙間がなくなってすっきり。




 だが問題だったのは、サイドバーの幅の変更。一応HPも作成経験があるので、サイドバーの幅の変更は簡単だと思っていたのだが、結構ややこしかった。。。html5について全く勉強したことがなかったこともあるのだろうが、自分の知識では結構難しかった。




 まずは、「Twenty Elevenのレイアウトの構造を調べてみる」で全体のレイアウト勉強して、


#page {
 margin: 2em auto;
 max-width: 1000px;}


 のページの幅を1000pxにして、



#primary {
 float: left;
 margin: 0 -30% 0 0;
 width: 100%;
}

#content {
 margin: 0 21% 0 2%;
 width: 77.0.%;
}

#secondary {
 float: right;
 margin-right: 0%;
 width: 30%;
}


 この部分を弄ったわけだが、 #secondary のwidthの部分を30%にして300pxサイドバーの幅を確保。他はそれに合わせて調整してサイドバーの幅は拡がったのだが、これであってるのかは正直自分の知識では何とも言えない。。。他にもグラデーション、等html5新要素を取り入れ、見出しなども作成して、一応サイトの形としては完成したのだが、見出し、サイドバーの幅はともかく、ブログのデザインはデフォルトのほうがよかったような気がする。。。。自分のサイトはこれなのだが、他のサイトと比べるとかなりダサい気がするので。。。それにhtml5はまだIE9は対応してないらしくIE9では完全に表示されないので。。。

WordPressのTwenty Elevenのテーマカスタマイズ・・・子テーマ


 FC2ブログからWordPressへのブログの引っ越しは無事に終わったので、今度はWordPressのテーマのカスタマイズ。どのテーマを使うか色々悩んだ結果、初めてなのでカスタマイズの勉強になりそうなデフォルトのテーマTwenty Elevenを使うことに。そろそろ2012を使えるようになりそうなのだが。。。




 カスタマイズしたい箇所は、まずは基本としてヘッダー、サイドバーの幅、フォントサイズ。ここだけはまず最初のカスタマイズしたいと思っていたが素人なのでかなり苦戦することに。Twenty Elevenはhtml5なのであるが、html5の知識が全くないので、まずはhtml5の基本構造について少しだけ勉強し、テーマを弄ろうと思ったのだが、テーマを弄るのはさまざまのブログを読むと、子テーマを作って、その子テーマを弄ったほうがいいみたいなので、まずは子テーマを作ることに。




 いずれプラグインを使用するため、その他のファイルも子テーマで弄ることになったのだが、その箇所以外は書き換えない、とゆうか弄る知識もないので、最初は子テーマのstyle.cssだけをテーマをカスタマイズするために作成。




 子テーマについては、「WordPress Codex 日本語版・・・子テーマについて」に書かれているが、まず、


  
   wp-content → themes → 子テーマのディレクトリ



 のように、他のテーマが入っているthemesのなかに子テーマのディレクトリを作成。名前は自由なので、子テーマだとわかりやすい名前で作成してみた。次にその子テーマのディレクトリの中に子テーマのstyle.cssを作成するわけだが、






 

 必須なのは、 「THeme Name」「Template」と親テーマを継承して変更したい部分だけ子テーマで弄るのだから、継承する親テーマの「@import url」だけ。このファイルを子テーマのディレクトリにアップロードするだけで子テーマは完成。後は子テーマを弄るだけなのだが、素人にはここからが難しかったのだが、それはまたいずれ書こうと思う。。。


2012年4月17日火曜日

WordPressに移転・・・FC2ブログからWordPressにブログの引っ越し


 つい最近までFC2ブログで趣味ブログを書いていたのだが、急にWordPressを使ってみたくなり、そのFC2ブログをWordPressに移転したわけだが、手順は簡単なのだが、とんでもないことになってかなり苦労した。。。。



 FC2ブログのファイルのバックアップ


 まずは、FC2ブログのファイルのバックアップなのだが、FC2ブログの管理画面で、 「データのバックアップ」 → 「エクスポート」 → 「全ての記事」をダウンロード。画像はファビコンしか使っておらず、画像はエクスポートする必要がなかったので、これでバックアップは終了。。。




 WordPressへFC2ブログのバックアップファイルをインポート



 次に先ほどバックアップをとったFC2のブログをWordPressにインポートするわけだが、








 ツールインポートMovable Type and TypePadをクリックし、先ほどバックアップをとったFC2のファイルを選択して、FC2ブログからWordPressへのブログの引っ越しは終了するはずなのだが、文字コードがFC2ブログがEUCなのに対しWordPressはUTF-8。本来ならばここでFC2ブログのバックアップデータの文字コードをWordPressのUTF-8に変換する必要があるわけだが、ブログを引越しする時に参考にしたサイトに、そのままでも大丈夫なことがある、というようなことが書いてあったので、そこで文字コードを弄らずインポートしてみることにした。文字化けしてたら全記事削除してから、文字コードを変換してインポートすればいいわけだし。。。



 と思い、文字コードそのままにインポートをしたらとんでもないことに・・・。案の定文字化けしていたのだが、それだけでなく、記事のタイトルがすべて消えていて、記事を削除することができない。。。そこで記事を編集してすべての記事に「あ」とか適当にタイトルをつけてから記事を削除することに。。。記事の数が少なければこの作業も楽なのだろうが自分のブログは記事数が400を超えていたので。。。しかもWordPressはなぜか、記事を全記事一括削除できないので削除するのも結構面倒な作業。。。




 かなりの時間かかったが、無事全記事を削除。改めて、文字コードを変換してからやり直すことに。TeraPadでバックアップファイルを開き、


  「ファイル」 → 「文字/改行コード指定保存」





  

 で文字コードをUTF-8に変えて上書き保存。これで、先ほどの手順でWordPressにインポート。ブログ内のリンクとか貼ってあれば書き直す必要もなるのだが、自分のブログは自分のブログのリンクはなく、そこは不要。FC2ブログで使用していたカテゴリーも反映されていて、ブログの移行も特に画像もリンクもなければ楽な作業だと思っていたら、FC2で使用していたタグが反映されていないのと、2行以上の改行が反映されていなにのに気付いた。。。改行が2行以上だと1行も改行されておらずかなりブログが読みにくい。。。しかも自分のブログは記事数400超えていたので、手作業で改行をするのは・・・ということで過去の記事はそのままの状態になっているが、いつかは改行をし直して、タグも割り当てたいと思うのだが、400以上もその作業しないといけないと思うと、取り掛かる勇気がでない・・・。




 容量オーバー(ロリポップ)



 ブログを移行する時、記事数が多いとロリポップでは最初は2Mに設定されているので、容量オーバーでインポートできず、自分の場合もそうだった。



 ロリポップの管理画面にログインし、


  WEBツールPHP設定PHP.ini→設定変更



 と進み、




 


 upload_max_filesizeを2Mから20Mに変更すれば大丈夫なようなので。。。それにしても、ミスが多かったせいでワードプレスをマルチサイト化からFC2からの移行までかなり時間かかり、大変な作業だった気がする
 。他のブログは書いていないので、苦労したマルチサイトも機能してないのだが。。。

2012年4月1日日曜日

WordPressをマルチサイト化



 今更ながらWordPressに興味を持ち、弄ってみたいと思い、レンタルサーバーはロリポップで借り、WordPressを始めてみた。WordPressではFC2ブログで書いていた趣味ブログを移転、プラス唯の日記形式のブログを書きたいと思い、最初からWordPressをサブドメイン形式のマルチサイト化にしようと思い挑戦してみたが、これには不具合もありかなりの時間を要することになった。。。


 

 まずはロリポップの簡単インストールでワードプレスをインストール。そしてロリッポップのコントロースパネルからサブドメイン設定をクリックしてサブドメインを作成し、ムームードメインでネームサーバーの設定変更したりまではよかったのだが、初心者にはWordPressの設定が割と大変だった。。。




 まずは、wp-config.phpを開いて、


// 編集が必要なのはここまでです ! WordPress でブログをお楽しみください。


 の上に、




// WordPress マルチサイト:機能オン define ('WP_ALLOW_MULTISITE', true);



 を追加すると、ダッシュボードの「ツール」「ネットワークの設定」が出るらしいのだが何故か出ない。。。何回やっても出てこないのでおかしいと思っていたら、wp-config.phpを編集した時に、PHP編集にしていなかった。。。そこでterapadでPHP編集にして、上記を追加したら何とかネットワーク設定が出てきたので、何とか次の段階に。。。




 そしてネットワーク設定で、「サブドメイン形式」を選択し先に進み、







 この手順どうりに。まずはwp-content内に新しいフォルダの作成で、blogs.dirディレクトリを作成。




 次にwp-config.php ファイルの、/* 編集が必要なのはここまでです ! WordPress でブログをお楽しみください。 */ という行より上の行に、



define( 'MULTISITE', true );
define( 'SUBDOMAIN_INSTALL', true );
$base = '/';
define( 'DOMAIN_CURRENT_SITE', 'zenpeti.net' );
define( 'PATH_CURRENT_SITE', '/' );
define( 'SITE_ID_CURRENT_SITE', 1 );
define( 'BLOG_ID_CURRENT_SITE', 1 );



 を追加。そして、.htaccess



RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]

# uploaded files
RewriteRule ^files/(.+) wp-includes/ms-files.php?file=$1 [L]

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule . index.php [L]



 を追加するらしいのだが、.htaccessファイルがなかったので、メモ帳で.htaccessと名前を付けて保存してfttpでアップロードしてから上記のコードを記入。そうするとダッシュボードに「参加サイト」とゆう項目が出てくるらしいのだが、出てこない。。。念のために、コードを一回メモ帳にペーストし、それをコピーしてやってみても出てこない。。。しばらく色んなサイトを調べたが原因がわからない・・・。けれどダッシュボードをよくよく見ると、








 
 ダッシュボードの上のところに参加サイトとゆう項目が出現していた。。。そこで「サイトネットワーク管理者」のところで、「サイト」「新規追加」で、あらかじめ作成していたサブドメインにブログタイトル等記入すればマルチサイト化が成功。。。こう見ると、マルチサイト化の作業はすぐ終わるのだが、実際これをやるのには2日くらいかかった気がする。。。プラグインの不具合で、まだ記事もなかったので、一回データベースごと削除して、ワードプレスをインストールするとこからマルチサイト化をやり直したときはすぐに終わったのだが、初心者にはこれだけの作業でも初めてマルチサイト化する場合にはかなり難しいような気もする。。。自分がPC初心者だから余計だろうけど、なんだかんだ言って初心者の自分には難しかった気がする。。。せっかく苦労してマルチサイト化したものの、未だにサブドメインのほうのブログは一回も更新しておらず、何のためにマルチサイト化したのかわからないが・・・・。


2012年3月18日日曜日

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


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



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



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


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




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






 

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



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


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)にリンクすることができます



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

 

2012年3月11日日曜日

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


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



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




 管理画面で、



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




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









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








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




2012年3月9日金曜日

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



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



  『カテゴリ記事』の時と同じように、「デザイン」→「コンテンツ」で『過去記事コンテンツ』を作り、『過去記事コンテンツ』の「コンテンツHTML編集」で、<% 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">
<!--
<% if:pager.need_pager -%>




<% else -%>
document.write("<% archive.createstamp | date_format("%Y年%m月") %>の記事一覧です。<hr/>");
<% /if -%>
// -->
</script>
<ul>
<% loop:list_article -%>
<li><a href="<% article.page_url %>" class="a"><% article.subject %></a></li>
<% /loop -%>
</ul>
</div>
<hr/>
<br/>




 を貼ったら、











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




  #clist {text-align:left;}



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




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



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



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



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









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









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



bloggerにファビコン( Favicon )を設置



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



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








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






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









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




 
 <link rel="shortcut icon" href="favicon.ico(ファビコンへのアドレス名)">



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



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



 に進み、











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




2012年3月8日木曜日

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



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




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








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




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








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












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






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



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



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



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





 <% if:page_name eq 'category' -%>
<div class="navi">
<a href="<% blog.page_url %>">TOP</a> / <% category.name %>
</div>
<% if:pager.need_pager -%>
<div class="navi">
   ・
   ・
   ・

</div>
<% /if -%>

<% /if -%>




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




<div class="sidetitle">
<p>『<% category.name %>』の記事一覧です。</p>
</div>
<div class="side">
   ・
   ・
   ・
<% /loop -%>

</div>
<br />
<hr />



 を貼ると、




  





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






2012年3月7日水曜日

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



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



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



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


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



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



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



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




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



 のソースを貼り、テキストエリア・・・二つある<div style='clear: both;'/> <!-- clear for photos floats -->の一つ目のほうの次の行に<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 != &quot;item&quot;'>
 <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='&quot;#&quot; + data:post.id'><data:post.title/></a>
     <b:else/>
       <a expr:href='&quot;#&quot; + data:post.id'><data:post.id/></a>
     </b:if>
     </li>
   </b:loop>
   </ul>
 </b:if>
 </b:if>
 <br/><br/>





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








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



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