2011-06-16

オフィシャルブログ http://amadeusrecord.jugem.jp/ のテンプレート破損のため復元修正を行います。

2011-06-16 0

失策。オフィシャルブログ http://amadeusrecord.jugem.jp/ のテンプレートを破損してしまいました。救急対応はしてブログの表示は出来ていますが、カラム落ち、レイアウトずれを起こしています。久し振りの更新のあと、画像の表示の仕方をCSS側で処理しようと上書きさせたのが原因です。今年になってJUGEMのテンプレート機能などが刷新された際に、HTMLとCSSファイルのタグのリフレッシュが行われていたようです。

Webでの記事閲覧は出来ると思いますし、携帯での閲覧は問題ありません。CSSのチェックをし直せば復元は難しいものではありません。ただ、近年はワイドサイズのレイアウトが主流になりつつある模様。縦に長くスクロールを要するレイアウトは、あまり宜しくないそうです。

2010-09-28

スタイルシートをカスタマイズ。一行追加しました。

2010-09-28 0
ほとんどのブログ更新には、その下書きを含めて POSTEROUS から行っています。そして一端クロスポストされたあとで、このブログのレイアウトを調整しています。

クロスポストされてくる際に、POSTEROUSで指定されている“class”を活かして今日は、スタイルシートに一行追加して引用元へのリンク“via.・・・”の部分を、右寄せに配置するようにしました。これで、これまでの一手間を自動化することが出来ます。

☟CSSに追加した1行


.post .posterous_quote_citation{
text-align:right;
}

2010-08-31

メインブログへの訪問が1万をカウント。訪問者の皆さん、ありがとうございます。

2010-08-31 0


メインブログ「アマデウスレコード☃ブログ組曲第4番 http://www.amadeusrecord.com/ 」への訪問者が、ちょうど10,000を数えました。今年の4月にカウンターを設置して五ヶ月。たくさんの訪問があって嬉しいです。

雑多な内容が入り乱れていますが、それが楽しんで貰えているのだと思えるようになって来ました。

これからもよろしくお願いします。

Posted via email from littleconcert

2010-06-18

【新機能】楽天のモーション・ウィジェット。

2010-06-18 0
夕方、アメブロの「なう」に新しいフォロアーが増えました。わたしがフォロワーを承認するステップとしてブログ、サイトのリンクがあれば訪問して更新の様子を観ます。
その時目にとまった、ブログ記事の内容も重要になる事は仕方のないことだと思う。読者になって貰う分には良いんだけど、それで親しくなった気持ちになってしまうのも居ることは困ったところ。
しかし様々な考え方で作られているブログを観ていると、記事の内容以上にサイドバーで面白い体験をします。今日の新しいフォロワーさんのブログのサイドバーに、最近わたしが楽天でチェックした商品が連続で表示されたのにびっくり。え、このフォロワーさん、前からわたしの事を知っている方なのかしらと驚きました。表示される楽天商品が全部チェックしたことがある商品ばかりだったからです。
それがこの「楽天モーション・ウィジェット」。
このウィジェットは、ブログに訪問した楽天ユーザーが閲覧したことのある商品や購入履歴から最適な商品を自動表示するというものです。効率は良いウィジェットだけど、次の選択をレールを敷いて待ってられるようで思いがけない発見には反したものにもなりそう。

2010-05-10

【補完】Bloggerにパンくずリスト(Breadcrumb)を導入する方法

2010-05-10 0

ブログ記事にはタグをそのまま表示させることが難しかったので、半角の「 < 」と「 > 」を全角にして表示しています。
補完として、テキスト版を添付データにしました。ダウンロードしてからコピー&ペーストして頂くと簡単です。
分からない部分や、細かなコードのオプションは参考にした「Bloggerカスタマイズ情報」のページで確認して下さい。
わたしは少し手を加えて、「ラベル無し」を「未分類」に変更しました。

Posted via email from littleconcert's posterous

2010-05-09

Blogger にパンくずリスト ( Breadcrumb ) を導入する方法

2010-05-09 0
日記のようにブログ更新しているとは言え、数が増えてくると少しはカテゴリーが整ってくるものです。最近は前に書いたことがあるかもと探す手まわることが増えてブログ内検索の大切さをわたし自身良く感じるようになりました。サイドバーにカテゴリーをリスト表示しているものの、関連するものも多様化してくると数が増えるばかりです。
今日は Blogger にある、わたしの最も古いブログ「アマデウスレコードブログ組曲第4番 http://www.amadeusrecord.com/ 」に“パンくずリスト”と呼ばれるナビ、 Breadcrumb を導入することを試みてみました。



「ホーム > Twitter > ・・・」とあるのがパンくずリストです。思いの外簡単でした。あとは少し色を変えるとか、文字のサイズとかと言った視認性を修正してみることとなるでしょう。あとは毎回の記事にカテゴリーをつける習慣がまだまだ。導入した意味のあるものに充実させていきたいと努力します。

導入方法はテンプレートのカスタマイズ。

1.Bloggerにログイン後、 [レイアウト] → [ HTML の編集] → [ウィジェットのテンプレートを展開] にチェック。
レイアウトを調整するのに HTML の編修は慣れていたのですけど、今日修正する項目を見つけられなくて諦めかけていました。“[ウィジェットのテンプレートを展開] にチェック”を入れてなかったのでした。これまでウィジェットのテンプレートは手を入れたことがなかったのです。これで今後は少しウィジェットも修正するかも知れません。
ブラウザに表示できる領域は狭いし、作業中にブラウザが落ちたりすると大変ですからエディタでバックアップを取りながら修正されるのが良いと思います。テンプレートの中から該当する部分を見つけるのも容易ですからね。
変更するのは3箇所です。

2. [テンプレートを編集] 画面で、次のラインを見つける。
<b:include data='top' name='status-message'/>
3.見つけたら、それを削除し、削除した位置に次のラインを追加する(書き換え)。
<b:include data='posts' name='breadcrumb'/> 
4.次に、次のラインを見つける。
<b:includable id='main' var='top'> 
5.見つけたら、その直前に次のコードを追加する。
<b:includable id='breadcrumb' var='posts'>
<div id='breadcrumb'>
<a expr:href='data:blog.homepageUrl'>ホーム</a>
<b:if cond='data:blog.homepageUrl == data:blog.url'><!-- breadcrumb on home page -->
<b:else/>
 <b:if cond='data:blog.pageType == "item"'><!-- breadcrumb for the post page -->
  <b:loop values='data:posts' var='post'>
   <b:if cond='data:post.labels'>
    >
    <b:loop values='data:post.labels' var='label'>
     <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
     <b:if cond='data:label.isLast != "true"'>,</b:if>
    </b:loop>
   <b:else/>
   > ラベルなし
   </b:if>
   > <span><data:post.title/></span>
  </b:loop>
 <b:else/>
  <b:if cond='data:blog.pageType == "static_page"'><!-- breadcrumb for the static page -->
   > <data:blog.pageName/>
  <b:else/>
   <b:if cond='data:blog.pageType == "archive"'><!-- breadcrumb for the label archive page and search page -->
    > <data:blog.pageName/>
   <b:else/>
    <b:if cond='data:blog.pageType == "index"'>
     <b:if cond='data:blog.pageName == ""'>
      > 全投稿
     <b:else/>
      > <data:blog.pageName/>
     </b:if>
    </b:if>
   </b:if>
  </b:if>
 </b:if>
</b:if>
</div>
</b:includable>
※タグは半角の「<」と「>」を全角にして表示しています。コピー&ペーストする場合は半角に戻してから行って下さい。
6.最後に、]]>を見つけ、その直前に次のコードを追加する。
#breadcrumb {
margin: 0 0 15px 0;
padding: 5px 5px 5px 0;
border-bottom: 3px double #e6e4e3;
font-size: 95%;
line-height: 1.4em;
}
7. [プレビュー] をクリックして、パンくずリストが追加されていることを確認して、 [テンプレートを保存] する。
プレビューしても個別のページでは、機能しているか確認できませんからトップページに「ホーム」とあれば大丈夫でしょう。



デザインを工夫しているブログでは違和感が出てくるものもあると思います。「6」で追加したスタイルシートを工夫してみましょう。
普通はそのままでも問題無しだと思います。以前より感想を頂いていることですけど、わたしのブログはエントリー個々のタイトルがとても個性的だと言うことです。長いタイトルをつけることが多いので少々煩わしい感じがします。文字の色を工夫してみたいと思います。
これで何でもかんでも雑多に盛りだくさんのわたしのブログもまとまった形に見えるかな?テーマを決めてかかれているブログも目次替わりになるので便利、有用性の高い機能ですね。

今日のカスタマイズには、「Bloggerカスタマイズ情報」の「 Bloggerにパンくずリスト(Breadcrumb)を導入する方法 」を参考にしました。記事に引用したコードはその記事から引用しました。
 
アマデウスレコード☃ブログ組曲第4番. Design by Pocket