執筆ガイドライン11、「Figure＋Figcaption」と「alt＋title」

FigureタグとFigcaptionタグ

FC2では、アンカー要素の子要素の状態でimg要素が挿入され、alt属性、title属性を内包した状態で貼り付けられます。

ワードプレスでは、メディア（画像など）を記事に貼る際、caption（説明文）をつけるか選択することができます。figureタグ（親）の中にaタグ（子1）とそこに内包されるimgタグ(孫)、figcaptionタグ（子2）の構成になっています。↓こんな感じ↓

Figureタグ（親）とAタグ（子1）とFigcaptionタグ（子2）

更に言えば、孫要素のimgタグの中に、alt属性とtitle属性を追加すればフル装備です。

いくつか親→子→孫のパターンを検証してみました。aタグの中にfigcaptionタグが内包できればよかったのですが、それは文法エラーの様です。ブラウザーでは表示できますケド。

figcaptionタグ、CSS追記

figcaption {
font-size: 0.75em;
color: #999;
}

画像の付属情報っぽく見えるように、字をちっさく、グレーに変えたCSSを追記しました。なんか雰囲気出たな～っと自己満足。ふふふ。

毎回この仕様で図を挿入するかは謎ですが、補足情報フル装備のサンプルは知っておいた方がいいかな～っと。

W3Cサイト関連項目「Images in HTML」

執筆ガイドライン10、コメントはArticleだ！

んぉ。そうなの?

と、最初は驚いたのですが、なるほど納得する部分もあって、CSSを書き換え、独立したArticleとして扱うことにいたしました。

まずはArticleの定義から

W3C、「HTML/Elements/article」より引用

<article>

The <article> element represents an independent item section of content.

Point

• Independent item section of content:
  • forum post
  • magazine article
  • newspaper article
  • blog entry
  • user-submitted comment [Example B] ...

In principle, content in the article element should be independently distributable or reusable.

Myヘボ訳
<article>は、独立した構成を持つコンテンツを表す。
ポイント

• 独立した構成を持つコンテンツ：
  • 討論記事
  • 雑誌記事
  • 新聞記事
  • ブログ記事
  • ユーザーが投稿したコメント

原則として、アーティクル要素は独立して配信可能かつ再掲可能であるべき。

そして、[Example B]を当ブログに置き換えると下記のような感じでしょうか?

当ブログの執筆ガイドライン

コメントはArticle扱いとする。

そして、今後わからないことがあったら、W3CもしくはgoogleのDeveloppers's siteにて調べる。

執筆ガイドライン9、引用句、引用文、引用元、引用画像

qタグ、blockquoteタグとciteタグ

ブログを書いていて、自分のコンテンツを作るよりも苦手なのが、他所サマの作物を引用させていただくことだったりします。

これまでblockquoteタグしか知らなかったので、何かを引用する時は、この中に囲んでおります。でも、これまで使い方を間違えておりました。あはは。

現時点での私の理解は、下記のとおりです。

q

引用句

短い言葉・句を引用する際に使用する。

タグ内にcite属性cite="URL"で引用元を示すことができる。

blockquote

引用文

長めの文章を引用する際に使用する。

タグ内に、cite属性cite="URL"で引用元を示すことができる。

cite

引用元

タグとして使用する場合は、作品名、引用元情報を記述する

短い句を引用する時に使う、qタグなんて、全く存じ上げませなんだ！

引用句、引用文、引用元のサンプルとCSS

これがやりたくて記事を準備したのに、パソ危機に陥り、他の作業を優先せざるを得ず、なかなか着手できませんでした。

パソが突然フリーズするようになって3日目です。リソース云々の警告すらなしに、画面が固まります。とうとうダメです。そして、この記事はフリーズの為、3回目の書き直しです。号泣。

こまめなセーブが必要なサバイバルゲームです。

引用句pタグのサンプルとCSS

私が信頼を寄せるゲームサイトに、次に遊ぶゲームは、『キングダム ハーツ HD 2.8 ファイナル チャプター プロローグ』が絶対おすすめ！と書いていたので、パソが壊れてブログが書けなくなったら、買おうと思っています。

q {

color: #ff7f7f;

font-weight:bold;

}

q:before {

content: "\00300c";

}

q:after {

content: "\00300d";

}

qタグのサンプルとか、マイナーなものは世の中にあまり存在しなかったので、適当に作りました。括弧全体→開始符→終了符の順に並んでいます。

デザイン的に開始符と終了符を二重括弧にしたくてたまらなかったのですが、句の引用は括弧、句の中で引用が行われた場合は、二重括弧というルールがあるらしいです。もしくは、作品名や雑誌名などは二重括弧でもよいようです。執筆ガイドラインの段階で、意識的に間違えた使い方を宣言するのも微妙なので、qタグはおとなしくただの括弧で作成しました。

「引用文と引用元」のサンプルとCSS

blockquote{

font-size: 16px;

background: #ffe0e0;

margin: 1em 0;

padding: 1em;

font-size: 1em;

min-height: 60px;

}

blockquote:before {

display: block;

float: left;

font-family: Georgia, Times, "Times New Roman", serif;

content: "\201C";

font-size: 100px;

margin-right: 10px;

color: #ffe0e0;

background-color: #ff7f7f;

padding: 15px 8px 5px 12px;

width: 50px;

height: 50px;

line-height: 90px;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

}

blockquote cite {

display: block;

position: relative;

text-align: right;

font-style: italic;

font-size: 1em;

margin: 1em;

color: #999;

}

blockquote p {

margin:0.5em;

}

上から順に、引用ブロック全体(blockquote)→引用開始符(blockquote:before)→引用元情報(cite)→引用文(p)の各タグの記述です。

marginとpaddingの設定がどうも苦手です。

この為ところどころにピクセルでの指定が残ってしまっています。HTML5では、ブロック要素、インライン要素の概念がなくなったとどこかに書いていたように思ったのですが、実際のところ、display:block;を入れないと崩れたり、まだまだ学習が必要です。

記事に書くときの順番はどちらでもOKです。一般的に、引用元は下につけている人が多いような気もしますが、右上につけるとスペースが丁度よい感じです。

画像つき「引用文と引用元」のサンプルとCSS

blockquote span {

float:right;

margin:0.5em;

}

↑の「引用文と引用元」のCSSの最後にspanタグで右に浮動する画像を貼れるようにしました。属性(class)付きのpタグでもいいのですが、違うタグを使うことで、いちいち属性を入力しなくて済むので、記事を書くときに楽なのです。これが良いかどうかの判断はできません。

難点は、フロート由来なんだと思いますが、「引用文→引用画像」の順で書くと、画像がブロック外にはじき出されてしまうので、「画像→引用文」の順で記事を書かなければなりません。

当ブログでの執筆ガイドライン

たまにはwikipedia以外も引用しよう！

執筆ガイドライン8、直リンク・ディープリンクはマナー違反らしい

直リンク、ディープリンクを知らなかった…

関連記事、「執筆ガイドライン5、アンカーテキストの中身に注目」を書いた際に、アンカーテキストの作りが初めてわかったような気がして、楽しかったんですね～。

サイトの評価は被リンクの数も影響するっていうじゃないですか?
職場では、被リンクの数が多いとサイトの信頼度、被リンクからのアクセスが多いと有用度が高いと信じて、沢山リンクを貼ってもらえる質の高いコンテンツを作りましょう～！、的な雰囲気な気がします。

ところが、img系の画像は、直リンク、ディープリンクなどと呼ばれて、マナー違反とされているようです。
そりゃ～もう。がっつり混乱いたしました！

いくつの記事を読み漁った感じでは、imgファイルは、googlebot（以下、ロボ子）には内容がよくわからず評価しがたい（SEO評価につながらない??）。被リンクを受けた際のサーバー負荷を考えると、どちらかと言うと迷惑。だから、マナー違反。
であると、理解いたしました。

いろいろあって、大変よね…

引用と転載は、大きく違うらしい

直リンクについて調べていく中で、直リンクは転載だからダメ！というような記述を見かけました。
え?
何のこと??

一旦、自分のサーバーにダウンロードして引用するのはOKとも書いていました。
おぉ！
違うの??

ウィキペディアの転載と引用のページをそれぞれ読んでみました。

これまでは、違いをはっきり認知していたわけではありません。それでも他のブログで画像を直リンクをしている例を殆ど見かけなかったので、なんとなく慣習的に引用元データダウンロード→FC2へアップロード→引用元記載の流れをとっておりました。

関連記事、「イギリスと言えば、「王家」」を書いた際に、ウィキペディアコモンズのShare or Embed機能を使って9つのファイルを自ブログに埋め込んだのですが、これもディープリンクなのでマナー違反と言うことになるのかな??

embed機能があるのだからいいんじゃないか??、とは思いつつ、貼り直しました。

当ブログでの執筆ガイドライン

引用元は明記し、自ブログサーバー（FC2）へダウンロードし、外部への画像直接リンクは貼らない。

執筆ガイドライン7、画像にはわかりやすいファイル名をつける

偶然知ったことなのですが、Googlebotには、私がロボ子と呼んで親しみを醸成しようとしているgooglebotのほかに、画像を専門に巡回しているGooglebot-Imageが存在するようです。

ウェブマスターツールのおススメ

ウェブマスターツール、画像検索についての A to Zより引用：
画像をインデックスに登録しやすくするために、下記の点を守ってください。

• 画像が埋め込まれている HTML ページと画像そのもの、どちらも Google がクロールできるようにしておくこと
• Google が対応している形式の画像であること（BMP、GIF、JPEG、PNG、WebP、SVG）

さらに、下記のようにしておくこともおすすめします。

• 画像のファイル名が画像の内容に関連した名前になっている
• 画像の alt 属性が、人間が読んで分かるような画像説明になっている
• 加えて、HTML ページのテキスト コンテンツと画像近辺のテキストを、画像に関連した内容にしておくことも有効です。

へぇ～

FC2での画像ファイル名の変更

私の大好きなサーチコンソールがHTML の改善を提案してくるページは、ほぼ毎回、画像です。でも「img/20161126102837b1b.jpeg」と言われてもパッとは分からないんですよね～。
画像が表示されますから、あぁ～これね!っとなるわけですが、もっとわかりやすい状態で表示してくれないかな～。なんて思っていたのです。

でも、わかりにくいのは、実は私が手抜きしてファイル名を更新していなかったからでした。
あはは。

↑のファイル名を変更ボタンを押すと…

↑の様に画像ファイル名を変更できるみたいです。
これで、ロボ子がアクセスできなかったために画像が見えなかったとしても、だいたい推測で当該画像を特定できます。
おぉ～

FC2のプラットホームは、非常にユーザーフレンドリーなので、ウェブの知識がなくても簡単にコンテンツを作成できちゃいます。こういう細かいことを知らなくてもサクサク書けるという偉大な長所の裏側に、無知で居続けられるというちょっとした問題点が…
（ん?、みえない、みえない。笑。）

当ブログでの執筆ガイドライン

番号のままだとエラー修正の際に自分が困るから、面倒でも画像のファイル名は変えるようにしましょう！