3DCGで何をどう作るか考え中

ZbrushとBlenderの使い方、ヒント、コツなど。たまにZbrushプラグイン開発も。

はてなブログに更新日を追加する Naked用コード、関連記事のフォントサイズを大きくする

(約 4,800文字の記事です。)

f:id:yamato-tsukasa:20200912140654j:plain

ここ1~2週間ほどブログのメンテナンスをしていた。というのも、Googleアドセンスの審査に合格して広告を設置するようになり、改めてブログの見え方・見せ方について再検討したくなった。といえばカッコいいかも知れないが、実は広告を自動的に配置するスクリプトが「はてな記法」では上手く動作しないことが分かったので「Markdown記法」に書き換える作業を進めていたのだが(笑)

はてなブログに「更新日」を追加!

前からこれが標準でなかったので不満だった。が、色々試行錯誤してこんな具合に設置完了!!

f:id:yamato-tsukasa:20200912140654j:plain

これも調べればすぐに出てくるが、最近の仕様変更により2年以上前の記事は役に立たなかった。また誤った情報もある。ここら辺は毎度自己責任の世界だが。

Nakedでは日付表示がハイフン区切りではなくてピリオド区切り!?

私はNakedというテンプレートをベースにサイトをカスタマイズしている。Nakedでは日付の表示がTOPページではハイフン区切りだが記事表示ではピリオド区切りになる。
2020.9.12という具合。だが更新日の表示スクリプトはどうやらサイトマップのURLから持ってくるだけみたいなので、隣の更新日は2020-09-12となる。

両者を統一したい。で調べてみて試行錯誤したできた。

私はWebについては素人です。適当にいじってできたので公開しておきます。が、正しいのかどうかもよくわからん(笑)

とりあえずノークレーム前提で私のコードを紹介しておきます。デザインCSSの最後のほうに貼り付ければいいでしょう。なおご利用は自己責任でお願いします。必ず事前にコード類のテキストバックアップを取ってから作業すること。

/* 更新日時表示 Naked用 */
.entry-date .hyphen {
    display: inline; /* Nakedで消されたハイフン復活 */
}
.entry-date .date-month::before,
.entry-date .date-day::before {
    display: none; /* Nakedのピリオド無効化 */
}
.lastmod {
background-color: transparent;
padding: 5px 0px;
text-decoration: none;
font-size: 12px; /* Nakedと同じサイズにしています */
/*font-weight: bold; /* 太字化 */
display: inline;
margin-left: 0px;
font-family: 'Montserrat', sans-serif;
color: #007070; /* Nakedと同じ灰色は #888888 */
}
.lastmod::before {
margin-right: 5px; /* 元は5px */
padding-left: 8px; /* 初期値は3px */
font-family: 'blogicon';
content: '\f02b'; /* リロードアイコン */
/* FontAwesomeは使いたくないのでコメントアウト */
/* font-family: FontAwesome;
content: '\f01e'; */
}
.lastmod::after {
margin-right: 0px; /* 元は5px */
padding-left: 3px;
content: "更新";
}
.entry-date a {
background-color: transparent;
padding: 5px 0px 5px 6px;
text-decoration: none;
display: inline;
}
.entry-date a::before {
margin-right: 2px; /* 元は5px */
padding-left: 3px;
font-family: 'blogicon';
content: '\f043'; /* 時計アイコン */
/* FontAwesomeは使いたくないのでコメントアウト */
/* font-family: FontAwesome;
content: '\f073'; */
}
/* 更新日時表示 Naked専用 ここまで */

他、上記コードでは太字化したりやめたり、余白の調整をしたりフォントカラーを変えたりとしている。後は各自適宜カスタムしてお使い下さい。

また、以下の部分は私が適当に知識なしにいじってみてできた部分なので、不要な人は削除してお使い下さい。(beforeがあるならafterでもできるんじゃね?試した>できた、程度w 構文として正しいのかリファレンスで確認したわけじゃないです。。。)

f:id:yamato-tsukasa:20200912142310p:plain

FontAwesomeは重い

Webで情報収集した際に出てくるのはFontAwesomeを使ったアイコンだが、これを使うとサイトの読み込みが極端に重くなるので使わないことにした。代わりにはてなブログで使える純正のアイコンを利用することにした。こちらのサイトが詳しい。

はてなブログで使えるアイコンWebフォントの一覧と使い方まとめ - しろかい!





さて、更新日の表示で「記事の鮮度」が分かりやすくなったので、新規の読者にはこの記事の鮮度・信頼性をぱっと見で分かってもらえるようになったと思う。少し改善。

あとは広告の表示位置の自動化。具体的には大見出しのN番目、M番目、L番目……に広告を挿入して欲しい、というものだ。だがうまくいかず、調べてみるとはてな記法で書かれたものでは動作しない模様。というわけで可能な限りはてな記法の記事をMarkdown出リライトすることにした。で、今日、ようやくリストアップした全てのURLの記事をリライト完了。

デフォルトの関連記事のフォントが小さい

2020/09/15 追記

はてな純正の関連記事ではデフォルトのフォントが小さい。そこでフォントを大きくするついでにこちらの記事を参考に微調整なども。あまり装飾はいじらずにシンプルにフォントサイズのみの調整。

https://randamlife.hatenablog.com/entry/2019/05/22/201000

https://saruwakakun.com/html-css/reference/related_hatena

デザインCSSの最後にコピペすればいい。もちろん自己責任でお願いします。必ず事前にテキストバックアップすること。

/*1つ1つの関連記事ボックス*/
li.urllist-item.related-entries-item {
    border-bottom: solid 2px #ececec;
    margin: 0;
    padding: 10px 0;
}

/*関連記事の画像まわり余白調整*/
.urllist-with-thumbnails li .urllist-image {
    margin: 0 10px 0 0;
}

/*関連記事のタイトル*/
a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title {
    font-size: 125%;
}

/*関連記事の説明*/
.urllist-entry-body.related-entries-entry-body {
    font-size: 100%;
}

フォントサイズの%は見ながら微調整すること。

全部のはてな記法投稿記事は書き換えられない

色々マクロを使ったりスクリプトを組んだりと、手作業から繰り返し部分を徐々に自動化していったものの、1記事の書き換えに2分はかかる。1時間やっても30記事しか更新できない上に、はてなブログでは1日当たり100記事しか投稿できないという制約があった。

f:id:yamato-tsukasa:20200912135936p:plain

というわけで、過去1年間でPV数の多い順にGoogleコンソールでサーチしてエクセルで並べ替えてURLリストを作成し、上から順に書き換えることに。最終的にはPV数が1年当たり300PVまでを下限として書き換えることにした。それ未満の記事は放置することにした。おそらく広告収入に全く寄与しない記事(駄文)だと思うから。

とはいえ、全体の7割は書き換えたと思う。あとは初期の1年間の投稿は「見たまま編集」であり、これにはスクリプトが効くので問題ない。過去の「はてな記法」の5割程度はMarkdownに書き換わったと思う。何せ1年半分の投稿がはてな記法だから、それを全部書き換えるのは気が遠くなる。がPV数の高いものは書き換え完了なので、もう書き換え作業は打ち切ることにする。今後の記事は当然Markdownなので問題ない。

とにかく完璧を目指したらきりがない。あと1週間はひたすら変換作業になるが、過去1年間でPV数が300未満の記事をメンテしても無意味だろう。それよりもこれから良質な記事を作ることにエネルギーを使いたい。

いったんブログのメンテは終結

最近ずっとブログのメンテにかかりきりだったが、ようやくこれで一区切りだ。そろそろ3DCGに戻りたい。





今回の創作活動は約2時間45分(累積 約1,897時間)
(615回目のブログ更新)

筆者はAmazonアソシエイト・プログラムに参加しています。(AmazonアソシエイトとはAmazon.co.jpの商品を宣伝し所定の条件を満たすことで紹介料をAmazon様から頂けるという大変ありがたい仕組みのこと。)
以下のリンクを経由してAmazonで何かを買うと1~3%ほどのお小遣いが私に寄付されます(笑)

はてなブログ Perfect GuideBook

はてなブログ Perfect GuideBook

  • 作者:JOE AOTO
  • 発売日: 2016/07/22
  • メディア: 単行本