はまぞうブログをカスタマイズ(15)テンプレートと実際に出力されるheadの中身の違い

はまぞうブログをカスタマイズ(15)テンプレートと実際に出力されるheadの中身の違い

はまぞうブログをカスタマイズ

はまぞうブログのテンプレート上でのhtmlと実際に出力されるhtml――今回は<head>の中身の違いについてのメモです。

テンプレート【トップページ】の場合

試しに以下のようにhtmlを書いてみました。

なんでもない感じです。

しかし、実際に出力されたものを確かめてみると、こんなふうになりました。

<head>の直下に<style>がずらーっと出力されます。出力されるclass名は以下のとおり。

.image-aside サイドバーに出力される最新の記事の画像class
.image-aside img
.image-aside a:hover img
.image-aside a:hover img
a:link #album-link サイドバーに出力される最新の記事、画像一覧のボタン
a:visited #album-link

このことからわかるのは、最新の記事のスタイルはstyle.cssのほうから指定できないということです。どういうふうに表示されるかを任意で変更できません

テンプレート【個別記事】の場合

トップページのテンプレートと同じ<head>を作ってみたところ、個別記事の場合は少し変わりました。

トップページと違うのは、<meta property=”og: ~”>が出力されることです。個別記事の内容に合わせてタイトル・URL・テキストの省略がされた、OGPが出力されます。


Back to Top