リダイレクトされても編集アイコンが表示されるようになった

3月21日に、「クイック編集アイコンが表示されなくなったのはリダイレクトが原因」という記事を書きましたが、今日、自分のブログを開いてみたら、blogspot.jp にリダイレクトされているのに、クイック編集アイコンが表示されていることに気付きました。

記事の下のペンマークも、サイドバーのレンチとドライバーのアイコンも、ちゃんと表示されてる・・・。

Blogger 側がようやく対応したということでしょうね。

これで毎回 com/ncr と入力しなおす必要がなくなった。やれ、うれしや。

クイック編集アイコンが表示されなくなったのはリダイレクトが原因

Blogger ブログのクイック編集アイコンが表示されなくなって焦りました。

クイック編集アイコンとは、記事の最後に表示される鉛筆マークや、サイドバーの各ガジェットの最後に表示されるレンチとスパナのマークです。

これは、一般の閲覧者には表示されず、ブログオーナーがログインしているときに表示されます。

これらのクイック編集アイコンをクリックすると、編集ページを直接表示できるので、投稿記事を修正したり、ガジェットを編集したい時にとても便利。

その便利なクイック編集アイコンが数日前に突然表示されなくなり、焦りました。

原因は、Blogger ブログが .jp にリダイレクトされるようになったためでした。

たとえば、この「翻訳者の備忘録」の URL は translatorsmemo.blogspot.com ですが、それが translatorsmemo.blogspot.jp にリダイレクトされるようになりました。

回避策は、URL の末尾に /ncr を付けてアクセスすること。

たとえば、translatorsmemo.blogspot.com/ncr と入力すると、クイック編集マークが表示されます。

しかし、このリダイレクト、影響が大きそう。

⇒ Blogger ヘルプ「ブログが国別の URL にリダイレクトされる理由」

新しい Blogger インターフェース

Blogger の編集ページを開くと、「新しい Blogger インターフェースを使ってみる」 というリンクがあったので、「おや！」 と思い、使ってみましたが、予約投稿ができません。夜、11 時頃に翌日の 0 時過ぎの時刻を指定したのに、すぐに公開されてしまいます。

Blogger にフィードバックを送っておいたけれど、fix されたかなぁ。

ちょっと実験。この記事を数時間後の時刻で投稿してみますね。
現在は 9/9 午前 8：40。これを 9：00 で投稿してみます。
さて、どうなるかな。

追記：お、ちゃんと予約投稿できてますね。これなら新しいインターフェースに移行してもいいな。

ソースコードをそのまま表示する

ソースコードをそのまま表示したいときには、<pre><code> と </code></pre> で囲めばよいのですが、この中でも “ <” と “>” は解釈されてしまうので、“&lt;” と “&gt;” に変換する必要があります。

この変換作業をやってくれる Blogtool という便利な Web サービスがあります。

ブログに表示したいソースコードを、この Blogtool のボックスに貼り付けて、ボタンをクリックすると、必要な変換をやってくれます。

さらに見やすくするために、表示したソースコードを枠で囲みたいと思って、色々検索したところ、hata さんの「文章を枠で囲む」を見つけました。

下記のコードを、テンプレートのスタイルシートの最後に貼り付けておくと、<pre><code> と </code></pre> で囲んだ部分に枠が付き、背景が淡いグレーで表示されます。

ちなみに、赤字部分は削除しました。幅を指定すると、テンプレートの表示がくずれるので。

pre {
  font-family: "Courier New",Courier,monospace;
  border: 1px solid #dddddd;
  background-color: #f9f9f9;
  color:#000070;
width: 500px;
  overflow: auto;
  white-space: pre;
  padding: 2px 2px 2px 2px;
  margin-left: 10px;
}
pre code {
    margin: 0;
    padding-left: 5px;
    display: block;
}
pre br {
  display:  none;
}

★ おさらい

ブログにソースコードをそのまま表示したい場合は：

1. スタイルシートに hata さんのコードを貼っておきます。
Blogger の場合は、［デザイン］-［HTML の編集］を開き、

]]>
    </b:template-skin>

という行の前に挿入します。ここに貼っておけば、テンプレートを変更しない限り、有効です。背景画像を変更しても大丈夫。

2. ブログに貼りたいソースコードを Blogtool ページで変換します。

3. 変換したソースコードを <pre><code> と </code></pre> で囲んで投稿します。オシマイ。

Blogger のアーカイブページやラベルページに目次を付ける

別ブログの Natural Interior のアーカイブページやラベルページに目次を付けました。
livedoor ブログでやっていたインテリアブログで、カテゴリページや月別ページに目次を付けていたので、Blogger でも同じようにしたいと思っていたのです。

naminorito さんの 「Bloggerのアーカイブページやラベルページで記事タイトル一覧を表示」を参考にやってみました。

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

このコードを クリボウさんの記事 を参考に、<b:include data='top' name='status-message'/> の次の行へ挿入してみたのですが、NG。表示されません。

saco さんの記事 のアドバイスに従って、<b:includable id='main' var='top'> の下に貼り付けてみたら、やった！ うまく表示されました。

でも、私が使っているテンプレートの場合、背景画像の上に直接目次が表示されるので、見にくい。
そこで、目次部分を白くしてみました。

方法は、スタイルシートの最後に次のコードを貼って、

.post-title-navigation {
background-color:white;
padding:20pt;
}

目次を表示するコードの中で呼び出します（赤字部分）。

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<div class='post-title-navigation'>
<ul id='post-title-navigation'>
<span>このページの記事一覧</span>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:post.link'>
<data:post.dateHeader/> - <a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<data:post.dateHeader/> - <a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.dateHeader/> - <data:post.title/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:if>
</b:if>

ブログのカスタマイズなんて数年ぶりなので、かなり手間取ってしまった・・・ーー;

8月27日追記：目次にナビゲーションを付けました。アーカイブページやラベルページに表示される記事が多いと、1 ページには収まらないので、目次の下に 「新しい投稿」「前の投稿」があった方が便利だろうと思い。

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<div class='post-title-navigation'> --- スタイルシートの呼び出し
<ul id='post-title-navigation'>
<span>このページの記事一覧</span>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:post.link'>
<data:post.dateHeader/> - <a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<data:post.dateHeader/> - <a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.dateHeader/> - <data:post.title/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='nextprev'/> ------ ナビゲーション
</div>
</b:if>
</b:if>

ちなみに、livedoor ブログではメインページに表示する記事数と月別ページやカテゴリ別ページに表示する記事数を個別に指定できたように記憶しているのですが、Blogger ではメインページに表示する記事数しか指定するオプションがなく。

メインページの記事数はあまり多くしたくないけれど、アーカイブページやラベルページに表示される目次の件数があまり少ないのでは目次の意味が薄れる気もして。

今はまだブログ全体の記事数が少ないからいいけれど、記事が増えてきたら、最適な記事数を探らねば・・・・。