空からの川の風景


ライブドアブログのカスタマイズ



あいかわらず、いろいろいじっています。
実はライブドアブログの運営のなかで、ずっと気になっていたことがあるんです。
それをどうにかしようとして、(たぶん)成功しました。
かなり時間がかかりました。
カテゴリ別のアーカイブページのカスタマイズです。

何をしたのか



見ていただければわかるのですが、かなりシンプルになりました。
これは使っているテーマにもよると思うのですが、もともとはカテゴリ別アーカイブのページに、記事の本文が全部載っていたのです。
ずらっと並んでいるので、記事を探し難かったのですね。

本文を全部載せる必要はないんじゃないかと思っていました。
どうにかならないかと、ずっと思っていて、今回やってみました。

HTMLとかコードとかいうのをどうにかしたんだと思うのですが、検索して出てきたものを切り貼りして作ったので、あまり理解はしていないです。
結局どうなったのかというと、
  • 日付
  • 記事のタイトル
  • アイキャッチ
  • 本文の概要
がアーカイブに表示されるようになりました。
ほかは表示されていないですね。
もとのアーカイブページとはかなり変わりました。
シンプルです。

どういうふうになっているの?



こちらが実際のコードです。

<IfArticleFirstImage>
<SetVar ThumbnailWidth>180</SetVar>
<SetVar ThumbnailHeight>160</SetVar>
<div class="ArticleFirstImageThumbnail">
<a href="<$ArticlePermalink$>">
<img src="<$ArticleFirstImageThumbnail$>" align="left" 
 alt="<$ArticleTitle ESCAPE$>"  hspace="50px" vspace="10px" />
</a></div>
</IfArticleFirstImage>
<div class="article-body">
<div class="article-body-inner">
<$ArticleDescription$>
</div>
</div>

こういう感じです。
これを、カスタマイズの月間アーカイブと、カテゴリアーカイブのコードのなかの、記事本文の表示のところに書いてあるコードと置き換えます。
あとはソーシャルボタンとかのコードを削除しました。
これで、思っていたようなシンプルなアーカイブページが完成しました。

色がついている数字をいじると、表示が調整できるんじゃないかと思います。
「見てみたけど表示がおかしいよ」とか、「このコードじゃなくて、こうしたほうがいいんだよ」とかわかる方がいたら、教えてください。
とりあえず初心者が検索を駆使してやってみたらこういう感じになりました。

どういうふうにやったの?



あとから、自分で修正したりするときのために、何をしたのかを書いていこうと思います。
だいたいはネットで見つけた解説記事の切り貼りでできています。

アイキャッチ画像を表示する



まず、最初のほうにあるのはアイキャッチ画像を取得して、表示するコードです。
そんなことができるのか? と思うかもしれません。
はい、できるんです。

ギャラリーモードについて - ライブドアブログのヘルプ

こちらに書いてあるコードを参考にしてみました。
3. <$ArticleFirstImageThumbnail$> について、というところにあるコードですね。

画像位置の調整



それから、画像の位置を調整しました。
これもネットで検索しましたよ。
何の知識もないですからね。

画像の表示位置を指定する -HTMLタグ辞典-

HTMLタグ/要素一覧/img 要素 - TAG index Webサイト

こちらの記事を見て、見よう見まねで、align、hspace、vspace というタグを使ってみて調整しました。

記事の概要



それから、下のほうのコードは、記事の概要を表示するものです。

独自タグ一覧(変数) - ライブドアブログのヘルプ

こちらの記事から、ArticleDescription という独自タグを見つけて、それを使いました。
なんか<div class="article-body">とかいうのの中に入っているんですけど、これはもとのコードにもあったもので、記事本文を取得する独自タグがこのなかに入っていたんですね。

なので、記事概要のタグもこれのなかに入れたほうがいいのかな、と思って入れています。
全然理屈はわかりませんが、とりあえずうまくいっているのでいいんじゃないかと思います。

まとめとその後



プログラムがわかる方は一瞬で書けるようなものだと思うんですけど(そもそもこれでいいのかもわからないですが)、初心者が検索しながら書くとなるとけっこう時間がかかりました。
でもうまくいってよかったです。
シンプルな表示になったので満足しています。

そして、その後検索するうちに、こんな記事を見かけました。
ライブドアブログの公式ヘルプです。

アーカイブページで本文を省略してタイトルだけにする - ライブドアブログのヘルプ

タイトルだけで十分なら、こちらのコードを貼ればいいのですね。
いちおう、本文の概要と、サムネイルが表示されるので、がんばって作ったコードも無駄ではなかったです……。
よかったです。

パンくずリスト



このブログではパンくずリストを使っています。
こちらのサイトに書いてあったコードを使わせていただきました。

記事の最上部に「パンくずリスト」を追加する:ライブドアブログ

ちょっとしたことなのですが、パンくずリストがあると、読むときにわかりやすいんじゃないかと思います。
ライブドアブログでは、カテゴリがふたつあります。
そのふたつともを表示できるパンくずリストですね。

ブログを確認すると……ちゃんと表示されていますね。
こういうふうにコードまで説明してある記事があると、初心者としてはありがたいですね。

ところで検索しても……?



パンくずリストというのは、グーグルの検索結果にも表示されるんです。
ときどき見かけますよね?
それで、このブログのパンくずリストが表示されるのも、待っていたのです。
でも、いっこうに表示されません。

まあ、反映されるには時間がかかるものなのかなあと思っていたのです。
そう思いながら、2ヶ月くらいたっても変化はありません。
さすがに遅すぎますよね。
これはどういうことなのでしょう。

構造化データでマークアップがどうのこうの



いくつかのサイトを見てまわって、なんとなくわかりました。
パンくずリストを設置するだけではダメなんです。
構造化データをマークアップして、どうにかしないといけないようです。
(わかってない……)
とりあえず、グーグルさんがこういうツールを用意しているようです。

構造化データ マークアップ支援ツール

これを使ってどうにかするようです。
はい、よくわかりませんね。

それでもどうにかする



まあ、表示されないならされないでいいです。
そう思いながらも、構造化データについての記事をしばらく読んでいました。
おかげで、多少は理解が深まりましたよ。

マークアップというのはブログにコードみたいなものを書き込むことみたいです……?
コードを書き込んで、グーグルに「これは画像ですよ」とか「この単語は人間の名前ですよ」とか教えるのが、構造化データのマークアップということのようです。
個別の記事のHTMLに書き込んでも、構造化データを設置することもできるようなのです。
でも、いちいちそんなことをするのは面倒くさいです。
ブログ設定のカスタマイズのコードを書き込むところで、一気にやっつけたいです。
そういう記事を探していました。

ついに見つける



はい、そういうことが書いてある記事が見つかりました。
こちらです。

リッチスニペット-検索結果に表示される構造化データの書き方

Googleの検索結果にパンくずリストを表示させる方法!

Googleの検索結果に表示されるパンくずリストがmicrodataとRDFaに対応

この三つの記事をよく読みました。
もちろん、一度では理解できません。
でも、コードの例文があります。
とりあえず例文と同じようにやってみました。
それが、こちらです。

<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<$BlogUrl$>" itemprop="url">
<span itemprop="title">トップページ</span>
</a>>
</span>
<IfArticleCategory1>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<$ArticleCategory1Url$>" itemprop="url">
<span itemprop="title"><$ArticleCategory1$></span>
</a>
</span>
</IfArticleCategory1>
<IfArticleCategory2>
『<a href="<$ArticleCategory2Url$>" >
<$ArticleCategory2$></a>』
</IfArticleCategory2>>
<$ArticleTitle ESCAPE$>

もとのコードにいろいろなものが付け足されています。
これがマークアップだか構造化データだかいうもののようです。
itemなんとかという部分ですね。
カテゴリ2については、このマークアップからはずしておきました。

これを設置して、グーグルサーチコンソールの構造化データテストツールでチェックしてみました。
無事に認識してくれているようですよ。
Breadcrumbという表示が出ています。
Breadcrumb=パンくずリストですね。
どうやらうまくいったようです。
検索結果にも、徐々に反映されているようですね。

ほかにもいろいろあるらしい



グーグルが用意した、パンくずリスト・マークアップの例文もあるんですね。
いろいろ検索するうちに見つけました。
こちらですね。

Breadcrumbs | Structured Data | Google Developers

でも、グーグルの例文のようにやってみてもうまくいかないんですよね。
そもそもパンくずリストが、グーグルの用意したものだと、うまく表示されません。
そこらへんの仕組みはわかりません。
もう少し調べていこうと思います。
パンくずリストは今のままでいいでしょう。
うまくいっていますし。

ほかには、イメージの構造化データは、ある程度の大きさの画像でないと受け付けてくれないらしいということがわかりました。
あとは「websiteの情報」と「ブログを書いているひと」について、マークアップしました。
簡単にできそうなところは、これでだいたい済ませたようです。