ブログは楽しい

このページの記事目次 (カテゴリー: ブログは楽しい

← 前のページ  total 27 pages  次のページ →  

今日はブログ禁止!(笑)

うぉ~。3月に書いた記事が一個もない…

仕事が忙しかったこともあるのですが、新しい記事を書く余力がなく、夜な夜なゲームとテンプレートカスタマイズに明け暮れておりました。

ゲームは兎も角、テンプレートカスタマイズの方は、「現実逃避したくて、感情移入なしで何か没頭できること…」的な感じで始めたところ、予想外にハマってしまいました。ロボ語学習おもしろいです。

カスタマイズでやったこと

AMP (Accelerated Mobile Page)化
断念しました。おそらくFC2でもBloggerでもできません。(私には)
詳しくは→Template 25、AMP化の失敗と雑談
HTML5化
今のところ、とりあえずちゃんと動いていそうです。
詳しくは→Template 23、テンプレートをHTML5に書き換えた
コンテンツモデルへの書き換え
セクショニングタグ進捗
divタグを可能な限りheader、nav、section、article、footer等のセクショニングタグへ入れ替えて、フローコンテンツ化する。
皆様から頂いたコメントは独立したArticleとしてマークアップしております!
詳しくは→執筆ガイドライン10、コメントはArticleだ!
CommentをJSON-LDでもマークアップ
マークアップできそうじゃない??なんて思って始めたのですが、うまく行きません…(今ココ)

いただくコメントが本記事より有用…

私がブロガーとして自慢できることがあるとすれば、「想定より長く続けている」事と、「コメントでいろいろ教えてもらえる」事です。とてもうれしく思っております。

この為、コメントは独立したArticleとして扱える事を知った時、なんだかしみじみ納得いたしました。それで、HTMLをarticleに書き換えた後、JSON-LDでもマークアップしようと試みたのです。

JSON-LDコメントのマークアップ

サンプルは最近のコメントで、URLまで入れてくださっていた、さいもんさんから頂いたコメントです。適当に作った「JSON-LDの雛形」に、FC2の「テンプレート用 変数一覧」を埋め込んで、お名前、URL、コメントタイトル、コメント本文、コメント日時をマークアップしました。

キレイに入ったように見えたのですが…

JSON-LD記事全体

コメントが8件(ぷうままさんとケフコさんとのやり取りがちゃんとマークアップされていて、感涙。)、ブログ記事が1件、パンくずリストが1件、ウェブページが1件、と、エラーが2件。

このエラーが曲者で、コメント由来なのに、他の3種のマークアップにもエラー加算されちゃっていたので、削除せざるを得ません。あ~。なんかあと一歩な気がするんだけどな~~なんて思いつつ、もうそろそろ現実世界に戻らないと…、家が大変なことになっています。

本日の課題

  1. (たまっている)食器洗い
  2. (たまっている)洗濯
  3. 掃除
  4. (たまっている)アイロンがけ
  5. 食材の買い物
  6. 来週の出張のホテル&交通機関の予約
  7. その他、諸々

今回、私の最低防衛ラインは、「ゴミだし」だということがわかりました。爆笑。他のことは全滅です。あ~。家事力。お~。家事力。う~。家事力…

余談

現実逃避に新しい外国語(ロボ語)に没頭できたことはとてもよかったと思います。会社の意向次第で住む場所を選べない現実に、衝動的に会社を辞めそうになりましたが、何とか持ち直して、やり過しています。

今回、ブログの見た目は一切変わらないものの、中身(コード)をちょいちょい変えています。こういうパフォーマンスを生まないことは仕事上、「趣味」と揶揄される対象だったりします。まぁ、実際に、趣味なのですが、やってみたいことに自己責任で、が~っと没頭できるというのはスカッとしますね。

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



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


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