スポンサーサイト
新しい記事を書く事で広告が消せます。
このページの記事目次 ( ← 2017年02月 → )
total 10 pages 次のページ →
FC2では、アンカー要素の子要素の状態でimg要素が挿入され、alt属性、title属性を内包した状態で貼り付けられます。
ワードプレスでは、メディア(画像など)を記事に貼る際、caption(説明文)をつけるか選択することができます。figureタグ(親)の中にaタグ(子1)とそこに内包されるimgタグ(孫)、figcaptionタグ(子2)の構成になっています。↓こんな感じ↓
更に言えば、孫要素のimgタグの中に、alt属性とtitle属性を追加すればフル装備です。
いくつか親→子→孫のパターンを検証してみました。aタグの中にfigcaptionタグが内包できればよかったのですが、それは文法エラーの様です。ブラウザーでは表示できますケド。
figcaption {
font-size: 0.75em;
color: #999;
}
画像の付属情報っぽく見えるように、字をちっさく、グレーに変えたCSSを追記しました。なんか雰囲気出たな~っと自己満足。ふふふ。
毎回この仕様で図を挿入するかは謎ですが、補足情報フル装備のサンプルは知っておいた方がいいかな~っと。
W3Cサイト関連項目「Images in HTML」
んぉ。そうなの?
と、最初は驚いたのですが、なるほど納得する部分もあって、CSSを書き換え、独立した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にて調べる。
ブログを書いていて、自分のコンテンツを作るよりも苦手なのが、他所サマの作物を引用させていただくことだったりします。
これまでblockquoteタグしか知らなかったので、何かを引用する時は、この中に囲んでおります。でも、これまで使い方を間違えておりました。あはは。
現時点での私の理解は、下記のとおりです。
短い句を引用する時に使う、qタグなんて、全く存じ上げませなんだ!
これがやりたくて記事を準備したのに、パソ危機に陥り、他の作業を優先せざるを得ず、なかなか着手できませんでした。
パソが突然フリーズするようになって3日目です。リソース云々の警告すらなしに、画面が固まります。とうとうダメです。そして、この記事はフリーズの為、3回目の書き直しです。号泣。
こまめなセーブが必要なサバイバルゲームです。
私が信頼を寄せるゲームサイトに、次に遊ぶゲームは、『キングダム ハーツ HD 2.8 ファイナル チャプター プロローグ』が絶対おすすめ!
と書いていたので、パソが壊れてブログが書けなくなったら、買おうと思っています。
qタグのサンプルとか、マイナーなものは世の中にあまり存在しなかったので、適当に作りました。括弧全体→開始符→終了符の順に並んでいます。
デザイン的に開始符と終了符を二重括弧にしたくてたまらなかったのですが、句の引用は括弧、句の中で引用が行われた場合は、二重括弧というルールがあるらしいです。もしくは、作品名や雑誌名などは二重括弧でもよいようです。執筆ガイドラインの段階で、意識的に間違えた使い方を宣言するのも微妙なので、qタグはおとなしくただの括弧で作成しました。
上から順に、引用ブロック全体(blockquote)→引用開始符(blockquote:before)→引用元情報(cite)→引用文(p)の各タグの記述です。
marginとpaddingの設定がどうも苦手です。
この為ところどころにピクセルでの指定が残ってしまっています。HTML5では、ブロック要素、インライン要素の概念がなくなったとどこかに書いていたように思ったのですが、実際のところ、display:block;を入れないと崩れたり、まだまだ学習が必要です。
記事に書くときの順番はどちらでもOKです。一般的に、引用元は下につけている人が多いような気もしますが、右上につけるとスペースが丁度よい感じです。
↑の「引用文と引用元」のCSSの最後にspanタグで右に浮動する画像を貼れるようにしました。属性(class)付きのpタグでもいいのですが、違うタグを使うことで、いちいち属性を入力しなくて済むので、記事を書くときに楽なのです。これが良いかどうかの判断はできません。
難点は、フロート由来なんだと思いますが、「引用文→引用画像」の順で書くと、画像がブロック外にはじき出されてしまうので、「画像→引用文」の順で記事を書かなければなりません。
たまにはwikipedia以外も引用しよう!
関連記事、「執筆ガイドライン5、アンカーテキストの中身に注目」を書いた際に、アンカーテキストの作りが初めてわかったような気がして、楽しかったんですね~。
サイトの評価は被リンクの数も影響するっていうじゃないですか?
職場では、被リンクの数が多いとサイトの信頼度、被リンクからのアクセスが多いと有用度が高いと信じて、沢山リンクを貼ってもらえる質の高いコンテンツを作りましょう~!、的な雰囲気な気がします。
ところが、img系の画像は、直リンク、ディープリンクなどと呼ばれて、マナー違反とされているようです。
そりゃ~もう。がっつり混乱いたしました!
いくつの記事を読み漁った感じでは、imgファイルは、googlebot(以下、ロボ子)には内容がよくわからず評価しがたい(SEO評価につながらない??)。被リンクを受けた際のサーバー負荷を考えると、どちらかと言うと迷惑。だから、マナー違反。
であると、理解いたしました。
いろいろあって、大変よね…
直リンクについて調べていく中で、直リンクは転載だからダメ!というような記述を見かけました。
え?
何のこと??
一旦、自分のサーバーにダウンロードして引用するのはOKとも書いていました。
おぉ!
違うの??
ウィキペディアの転載と引用のページをそれぞれ読んでみました。
これまでは、違いをはっきり認知していたわけではありません。それでも他のブログで画像を直リンクをしている例を殆ど見かけなかったので、なんとなく慣習的に引用元データダウンロード→FC2へアップロード→引用元記載の流れをとっておりました。
関連記事、「イギリスと言えば、「王家」」を書いた際に、ウィキペディアコモンズのShare or Embed機能を使って9つのファイルを自ブログに埋め込んだのですが、これもディープリンクなのでマナー違反と言うことになるのかな??
embed機能があるのだからいいんじゃないか??、とは思いつつ、貼り直しました。
引用元は明記し、自ブログサーバー(FC2)へダウンロードし、外部への画像直接リンクは貼らない。
ウェブマスターツール、画像検索についての A to Zより引用:
画像をインデックスに登録しやすくするために、下記の点を守ってください。
- 画像が埋め込まれている HTML ページと画像そのもの、どちらも Google がクロールできるようにしておくこと
- Google が対応している形式の画像であること(BMP、GIF、JPEG、PNG、WebP、SVG)
さらに、下記のようにしておくこともおすすめします。
- 画像のファイル名が画像の内容に関連した名前になっている
- 画像の alt 属性が、人間が読んで分かるような画像説明になっている
- 加えて、HTML ページのテキスト コンテンツと画像近辺のテキストを、画像に関連した内容にしておくことも有効です。
へぇ~
私の大好きなサーチコンソールがHTML の改善を提案してくるページは、ほぼ毎回、画像です。でも「img/20161126102837b1b.jpeg」と言われてもパッとは分からないんですよね~。
画像が表示されますから、あぁ~これね!っとなるわけですが、もっとわかりやすい状態で表示してくれないかな~。なんて思っていたのです。
でも、わかりにくいのは、実は私が手抜きしてファイル名を更新していなかったからでした。
あはは。
↑の様に画像ファイル名を変更できるみたいです。
これで、ロボ子がアクセスできなかったために画像が見えなかったとしても、だいたい推測で当該画像を特定できます。
おぉ~
FC2のプラットホームは、非常にユーザーフレンドリーなので、ウェブの知識がなくても簡単にコンテンツを作成できちゃいます。こういう細かいことを知らなくてもサクサク書けるという偉大な長所の裏側に、無知で居続けられるというちょっとした問題点が…
(ん?、みえない、みえない。笑。)
番号のままだとエラー修正の際に自分が困るから、面倒でも画像のファイル名は変えるようにしましょう!