執筆ガイドライン

このページの記事目次 (カテゴリー: 執筆ガイドライン

total 2 pages  次のページ →  

執筆ガイドライン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」と言われてもパッとは分からないんですよね~。
画像が表示されますから、あぁ~これね!っとなるわけですが、もっとわかりやすい状態で表示してくれないかな~。なんて思っていたのです。


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


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


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


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



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


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

執筆ガイドライン6、テーブルタグを止めてdl、dt、ddタグを使う

これまで、下記のような見た目のページを作る時、エクセルのテーブルをぺたっと貼っていました。コードが読みにくくて仕方がないので、何か簡潔化する方法がないかと探していたところ、定義リストもしくは説明付きリストと呼ばれるタグの存在を発見いたしました。
dl-dt-ddサンプル


我ながら大変無知でお恥ずかしいのですが、この1年半エクセルテーブルのコピペで、人間が理解できればよし!と思っておりました。定義リスト(説明付きリスト)にするとGooglebot(以下、ロボ子)にとっても意味があるリストになるそうです。


<dt></dt>で囲まれた言葉を、後続の<dd>で説明するそうです。1つの<dl>に対して複数の説明<dd>を持つこともできるそうです。ふむふむ。



当ブログでの定義リスト


class付きのHTML、CSSはどれもうまく行かなかった…


今だにCSSの書き方がよくわかっていない為か、class付きの.yokonarabi dl {などのクラス付きのCSSとHTMLはどれも全く上手くいきませんでした。class付きの記述がうまく行けば、映画用、ゲーム用などと、定義リストの見た目を内容ごとに変えることができて楽しいかなと思ったのですが断念いたしました。


横並びにしたかったので、それが達成できたのが今回の収穫です。



HTMLは普通に書く


<dl>
<dt>言葉1</dt>
 <dd>説明1</dd>
<dt>言葉2</dt>
 <dd>説明2</dd>
<dt>言葉3</dt>
   <dd>説明3</dd>
</dl>


普通です。



CSSにはheightを追記したらちゃんと並んだ


.entry_m dt {
padding-top : 0.2em;
padding-bottom : 0.2em;
padding-left : 0.2em;
width : 10em;
height:1;
float : left;
clear : left;
}
.entry_m dd {
padding-top : 0.2em;
padding-left : 0.2em;
padding-right : 0.2em;
padding-bottom : 0.2em;
width : 40em;
height:1;
margin-left : 1em;
}


本当に理解に苦しむのですが、Bloggerにはサクッと入るコードが、FC2では言葉(=dt)説明(=dd)の高さが少しずつずれる、もしくはCSSが認知されないなどの怪奇現象が起きました。ようやく有効に見えるコードが下記の通りで、他のコードとの違いはよく分かりません。敢えて言うならheightを追加したことかな??なんて勘ぐっているのですが、結果オーライで検証終了しました。


他のことをしている時にふと理解できるようになったりするといいな~。なんて、運を天に任せております。



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


項目名と説明文のような形式をとる場合には、dl、dt、ddタグを使い、ロボ子にも構成情報を共有する。