テンプレート修正・変更履歴

このページの記事目次 (カテゴリー: テンプレート修正・変更履歴

total 7 pages  次のページ →  

Template 31、プラグインエリア1-3の使い分け

ブログ初年の1年間、テンプレートは殆ど何も変更しておりませんでした。プラグインも初期設定のままで、使っていたか?、記憶が定かではありません。

ちょっとパワーアップして2年目は、3つもあるプラグインエリアをそれぞれ使い分けてみることにしました。

プラグインエリア1、サイドバータイプ1 (ピンク系)

プラグインのテストを行う時、それが1でも2でも3でも、プレビューはホームのページに反映されます。この為、プラグインエリア1は、ホームのサイドバーに使用することにしました。

<aside id="sidebar">
<!--not_titlelist_area--><!--not_permanent_area--><!--not_category_area-->
<!--plugin-->
<!--plugin_first-->
<p><%plugin_first_title></p>
<p><%plugin_first_description></p>
<p><%plugin_first_content></p>
<p><%plugin_first_description2></p>
<!--/plugin_first-->
<!--/plugin-->
<!--/not_titlelist_area--><!--/not_permanent_area--><!--/not_category_area-->
</aside>

ちょっとまどろっこしいエリアの指定法なのですが、全記事一覧(titlelist area)ではなく、記事エリア(permanent area)ではなく、カテゴリー一覧(category area)ではないページのサイドバーに表示されます。

現段階では、ホーム(index area)のほかにも、関連タグページ(tag area)、新着記事ページ(date area)、検索語関連記事ページ(search area)などにも使用されております。

プラグインエリア2、サイドバータイプ2 (オレンジ系)

<aside id="sidebar">
<!--not_titlelist_area--><!--not_index_area-->
<!--plugin-->
<!--plugin_second-->
<p><%plugin_second_title><p>
<p><%plugin_second_description></p>
<p><%plugin_second_content></p>
<p><%plugin_second_description2></p>
<!--/plugin_second-->
<!--/plugin-->
<!--/not_titlelist_area--><!--/not_index_area-->
<!--/id=sidebar-->
</aside>

ちょっとまどろっこしいエリアの指定法なのですが、全記事一覧(titlelist area)ではなく、ホームのページ(index area)ではないページのサイドバーに表示されます。

つまり、現段階では、ホーム(index area)は、プラグイン1(ピンク)のみ表示、記事エリア(permanent area)は、プラグイン2(オレンジ)のみ表示を表示しています。

その他(関連タグページ(tag area)、新着記事ページ(date area)、検索語関連記事ページ(search area)など)は、見直しを行うまでは暫定的に両方のプラグインを表示している状態です。

何故、プラグインを使い分けるのか?

この方法の何がいいかというと、メインのページの内容と重複しない様な内容のプラグインを設定できることです。ボチボチやっているので、見直しが終わっているものはホーム(index page)と単独記事ページ(permanent area)のみですが、カテゴリーリストやタグリストをメイン側に持っているホームは、重複した内容を除いて、カレンダーなどのメインに存在しない情報をサイドバーに置いた方がフレンドリーかな?と思ったのです。

え?、カレンダーは役に立たないって??、カレンダーにしたことで、毎日記事を更新する意欲が湧きそうなので、試してみました。自分の為ですm(__)m

逆に、単独の記事ページ(permanent area)では、記事に関係するタグやカテゴリーはメインで見えますが、他のタグやカテゴリーが存在が見えにくいので、サイドバーにおいておくと、興味が湧くかもしれないと…

あまり役に立つことは書いていないものの、興味関心が近い分野についての駄文は探しやすくなりました。

ちなみにタグリストはTop 100のみです。揺らぎの確認にもなって便利です、これ。はっ。また、自分の為ですね。m(__)m

プラグインエリア3、ホームのメイン

当ブログのホームページは、Recent Articles以外はプラグインエリア3です。

プラグインエリアってサイドバー以外にも使えるんですね~。

<!--index_area-->
<!--plugin-->
<!--plugin_third-->
<h3><%plugin_third_title></h3>
<p><%plugin_third_description></p>
<p><%plugin_third_content></p>
<p><%plugin_third_description2></p>
<!--/plugin_third-->
<!--/plugin-->
<!--/index_area-->

このテンプレートを作成されたparuparuさんに感謝です。遊びがあって、面白いです。

余談

ホームの見直しが終わって、ホームだけは、エラーがゼロに!(号泣)

W3CのHTMLバリデーターでno error

感動です。SEOサイトやHTMLガイドサイトでも、エラーを全く抱えていないサイトは少ないんですよ!

最近、テンプレートのカスタマイズをするにあたって、コピペするとエラーまで引き継いでしまう事があるのです。最初は信じられなかったのですが、どうしてもよくわからない時は、ページのソースを見たりします。それでもわからない時は、参照元のページをW3CのHTML validatorにかけてみるのです。そしたらエラーまみれ!!!っという場合もあるんです。エラーをコピペーしているなんで、素人には分からないんで、最初は大変でした…

他のページもこれからエラーゼロを目指して頑張ります!プロブロガーさんたちと努力の方向が真逆でもいいんです。楽しいから。

スポンサーサイト

Template 30、コメントのマークアップ

関連記事、「執筆ガイドライン10、コメントはArticleだ!」を受けて、HTMLとJSON-LDのマークアップを施しました。

HTMLのマークアップ

HTMLでは、コメントをArticleタグ内に投入しました。こんな感じ↓

コメントHTMLマークアップ
Article(ピンク)
コメントは、固有のidを持つarticleにしました。
Heading(黄色)
Articleは独立したコンテンツなので、ヘッディングタグが必要です。当ブログでは、本記事同様h2タグにいたしました。
コメント本文(赤色)
地味ですが、全てを囲んで1段落になっています。
footer(水色)
お名前、URL、投稿日時などが入ります。
time(灰青色)
Article投稿日です。

今のところ私の技術でできるのはこのくらいです。

空のヘッディングに対するエラー対処

コメントタイトルをh2タグにしたところまではよいのですが、見出しタグは空にしておくと↓のようなエラーがでます。

W3C, Markup Validation Serviceのエラーメッセージより

Empty heading. (=見出しタグの中が空だよ。)

ふぅむ。っと思って、タグ内が空にならないように、コメントする人がタイトルを書かなかった場合、No titleと記述されるように書き換えました。テンプレートを書き換えました。

<dt><label for="subject">タイトル</label></dt>
<dd><input id="subject" type="text" name="comment[title]" size="25" class="name" value="No title" onfocus="if (this.value == 'No title') this.value = '';" onblur="if (this.value == '') this.value = 'No title';"  /></dd>

とりあえずdtとddタグは無視してください。クリックすると書き換えられるようになっています。

でも、これ、過去記事には使えないので、結論としては削除することにしました。笑。

その代り、タイトルは必ず★と★の間に挟まれるように配置しました。タイトルがない場合は★★という表記になり、HTML的に空になりません。
そんなリア充っぽいタイトルになるのが嫌な方もいらっしゃるかも??(←代表・私)
♪とか、【】なども考えたんです。でもとりあえず★スタートで。
いつでも変えられますから…

JSON-LDでのマークアップ

<!--comment--><script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Comment",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "<%topentry_link>#<%comment_no>"
  },
   "headline": "<%comment_title>",
   "datePublished": "<%comment_year>-<%comment_month>-<%comment_day>T<%comment_hour>:<%comment_minute>:<%comment_second>+08:00",
   "description": "<%comment_body>",
  "author": {
    "@type": "Person",
    "name": "<%comment_name>"},
  "author": {
    "@type": "thing",
    "name":"<%comment_name>",
    "sameas":"<%comment_url>",
    "url":"<%comment_url>"}  
   }
}
</script><!--/comment-->

うーん。URLの入れ方が重複しているっポイのですが、とりあえず入ったので良しとします。JSON-LD版では、コメントいただいた方をauthorとしてマークアップできるほか、urlも投入され、元ブログとの連結もsameAsにて繋がっています。これぞウェブ!って感じで楽しいです。

え?、私だけ??

そう。だからこっそり過去記事として公開しているんです。

ちなみに私自身はこれまで通り余所のブログでは最初の自己紹介や引用させていただいた時のご挨拶以外はurlを残さないと思います。ウェブにおいては、つながっている事(ソーシャルグラフ)が一つの価値で、その概念はとても好きなのです。それがブログを始めた理由の一つだったりするのですが、コメントに関しては、リンクメンテができないから、私がブログを止めると、残したリンクはリンク切れになってしまいます。今のところ、外部サイトへのリンク切れはSEOに影響しないと言われていますが、それでもリンクしてみたら切れていたというのは、それなりにユーザのストレスになるものです。大好きなブロガーさんたちにご迷惑をおかけするのは嫌ですし。かといって、これからも続けます!なんて自信がつく日は来なさそうです。やれやれ。笑。

Template 29、OGP (Open Graph Protocol)の宣誓は、必要か?

FC2でのOGP対応

環境設定→メタタグの設定→OGP設定→有効にするを選ぶと下記のメタタグをheadの最後尾に挿入してくれます。

FC2ブログソースデータ

<meta property="og:site_name" content="ブログ名">
<meta property="og:title" content="ページタイトル">
<meta property="og:type" content="article">
<meta property="og:url" content="記事URL">
<meta property="og:description" content="最初の数百文字(?).">
<meta property="og:image" content="記事にイメージがあれば、それ">

自分で書くなら、下記の変数でそれぞれ置き換えられそう…

<%blog_name>、<%sub_title>、<!--topentry--><%topentry_link><!--/topentry-->、<!--topentry--><%topentry_description><!--/topentry-->、<!--topentry--><%topentry_image_url><!--/topentry-->

っと、自分で書いてみたい気がむくむく湧いてきますが、素人が余計な事を考えてもろくなことにはならないだろうと、とりあえずサービスを享受しています。

ところで、OGPとは…

ウィキペディアのページが見つからなかったので、私のへなちょこ翻訳です。(←あてにならない)

The Open Graph protocol, Introduction

The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook. While many different technologies and schemas exist and could be combined together, there isn't a single technology which provides enough information to richly represent any web page within the social graph. The Open Graph protocol builds on these existing technologies and gives developers one thing to implement. Developer simplicity is a key goal of the Open Graph protocol which has informed many of the technical design decisions.

オープングラフプロトコル(OGP)は、ソーシャルグラフ(ウェブ上の人のつながり)において、どんなウェブページでもリッチオブジェクトにしてくれる。例えば、フェースブックにおけるこの技術は、フェースブックの他のオブジェクトと同じ機能をどんなウェブページにも持たせてくれるの。
多くの異なる技術やスキーマが存在し、それぞれ結合して使えたりするんだけど、ウェブページをソーシャルグラフにて豊かに表現しようとすると、単独の技術だけで十分な情報を提供できないの。OGPはこれらの既存の技術の上に成り立っていながら、開発者はたった一つだけ技術を導入すればよくなるの。開発者が簡素でいられることは、OGPの重要なゴールの1つで、多くの技術的な設計決定情報を与えたの。

もうしわけない。訳が下手すぎて、自分でも意味がわかりません。あはは。

当ブログにおける、OGPの必要性

個人的見解では、Facebookとブログは似た者同士で、提供するコンテンツも提供スタイルも似ています。それぞれのメディアを使い分ける余地があまりありません。それもあってか、私が読んでいるブロガーさんでFacebookも更新している方は見かけません。それぞれに別のコンテンツを持たせる意義を見いだせない以上、Facebookとblogは、どちらかを主に、もう片方をコピーにするのがいいのかもしれません。OGPといっても、どちらかで書いた情報を、もう片方にコピーして、両方の読者層も取り込む感じになるのかな?

一方、Twitterは、コンテンツのスタイルも表現方法もブログとは異なるので、おもしろそうだと思って自分でも始めてみました。
blogとtwitterは、本来はそれぞれに別の情報を持たせながら互いに連携していける面白いメディアだと思うんですが、ま、手が回りません。

個人的に最も興味があるのはインスタグラムだったりするのですが、それは、追々。

OGPの宣誓文

The Open Graph protocolでは、宣誓文は、<html lang="ja" prefix="og: http://ogp.me/ns#">みたいな感じで、htmlの後ろにくっついています。

でも、いくつかの日本語サイトでは<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">みたいな感じで、headの後ろにくっついています。

どっちでも同じなのかもしれませんが、なんだか気になる…

日本語サイトのfb: の部分はおそらくfacebook関係なので、追記しない。article: の部分はFC2の方でog.type、articleと書いてくれているので、いらないんじゃ?、などといろいろ疑問が湧いてきます。

んで、わからないから、必要になるまで宣誓しない!という方針に変更いたしました。twitterは専用のカードがちゃんと効いているので困りませんし…

敢えて、余計なことを書くなら、はてなの人たちのブログカードいいな~なんて思っていて、ごく稀に見かけるブログカード自作パターンがおもしろそうなので、作ってみようかな~っとか、思ったり、思わなかったり、です。

Twitterカード、一部崩れていた…

って、あれ?

ツィッターサマリーカード

ユーザータグが、表示されていないですね…

ツィッターソースデータ

ソースデータにはちゃんと出ているのにな…

ツィッターバリデーター

ツイッターのバリデータ(Twitter Card validator)でも、OKだし…

もう一度、Twitter Developer DocumentationのSummary Cardで仕様を確認して…っと、触っているうちに、なんか、直っちゃいました。う~。謎~。

自分が何をやっているかイマイチ理解していないところが素人の醍醐味ってことで、本件、封印します。

Template 28、FC2無料ブログでもファビコンできちゃった…

Bloggerにて映画ブログを書いていた頃、faviconを知って嬉々として作成したものの、FC2では非対応だとのことでブログの上部にpngファイルをくっつけて満足しておりました。

ホームのメタデータを書き加えていた時(Template 27)に、linkタグの使い方が何となくわかって、faviconにリンクを貼ってみたら、出来ちゃった。笑。

これって、規約違反かな??

外国人ライフでもファビコン

↑の赤枠で囲まれた部分が、当ブログのファビコンです。そして、オレンジ枠で囲まれた部分がかつてBloggerで書いていた時のファビコンです。

同じicoファイルなので、同じ見た目。じ~ん。

HTMLコード

<link rel="shortcut icon" href="http://blog-imgs-92.fc2.com/l/a/g/laggy2015/favicon.ico">

上記の赤色部分がファビコンが保存されているurlで差し替えて、<head></head>間のどこかに書き込むだけなので、理論上どなたでもファビコンを投入できそうですよね~。

ファビコンの作り方

過去記事「Favicon(ファビコン)をつくった」が、あるにはありますが…

デザインの方は、ツールを使わず手掘りですので、あまり役に立たないかもです。icoファイルに変えるのも、これが一番スマートなのかよくわかりませんので、プロの記事を参考にしてくださいね~。

Template 27、単独ページ「ホーム」の個別メタタグ設定

SEOを意識したブロガーさんだったら最初に着手するだろうと思しきメタタグ設定。HTML5仕様に書き換えるにあたって、ちょっとした実験心から、必要最低限に抑えて放置してみました。メタタグを設定しない場合、googlebot(以下、ロボ子)がどのようなスニペットを拾ってくるのか興味があったのです。

W3C、HTML/jp/Elements/metaより(始めて日本語ページ発見!)

<meta>要素は、<title>や<base>、<link>、<style>、<script>を使って表現のできない様々なメタデータをあらわします。

ポイント

  • name属性、http-equiv属性、charset属性のうち一つは指定しなければなりません。
  • もしname属性かhttp-equiv属性が指定された場合、content属性も指定しなければなりません。そうでなければ、それは省略されなければなりません。

初期設定

私が実験用に投入したmetaタグは、ただ一つ、meta charset="utf-8"(文字コード)です。↑に一つは必要だって書いていますので、素直に従い、それ以外は全て削除しました。

記事が検索された時のスニペットに不満はありません。イギリスApple Payで下図ならいい感じだと思います。

イギリスのApple Pay

Homeやカテゴリーが酷い状態になっちゃっています。この為、インデックスエリアに属する記事を優先して、しかしボチボチと、metaタグ投入していこうと思います。

FC2でのページ構成(エリア・モード変数)

テンプレート用 変数一覧、エリア(モード)変数を参考に、ホームすなわちindex areaのmetaタグは、下記の通りに設定しました。

meta name="description"

<!--index_area--><meta name="description" content="<%introduction>「外国人としての暮らし」、「イギリス」、「ネィティブ観察記録」、「駐在員の腹の底」などに関する雑記です。最新記事、タグリスト、カテゴリーリスト" /><!--/index_area-->

ブログの説明(<%introduction>)では33文字で短すぎました。でも、ブログの説明を長くしたくなかったので、残りはテンプレートに直接書き込みました。これをやっちゃうと、次にブログの説明を更新する際にも残りの部分を調整しなければならなくなるのですが、あまり変えないエリアなので、多分大丈夫。(とりあえず、メモ)

meta name="keyword"

<!--index_area--><meta name="keyword" content="Internal Links (サイト内リンク), User Tags (ユーザータグ), Categories (カテゴリー), Blog Links (ブログリンク), Recent Artivles (最新記事)"> <!--/index_area-->

Homeのコンテンツは、プラグイン3が使われている(最新記事を除く)ので、そのタイトルを使おうと思ったのですが、これを使うとbodyの方が表示されないエラーが出ました。なんで!!?っと、いろいろ試しましたが結局わからずじまい。普通に手書きしました。どうせ単独ページですし。

meta name="author"

<!--index_area--><meta name="author" content="<%author_name>"> <!--/index_area-->

他のページでは、JSON-LDのマークアップが効いているので、「のろのろ」はauthorであることが繰り返し記述されているのですが、Homeは単独ページなので、マークアップされておりませんでした。

現在のホームのスニペット

今、こんな感じ↓ 2017-3-18 ホームのスニペット

とりあえずこんな感じでしばらく様子を見ます。