はてなBlogでのメンテナンス記録 - Publish while resting-ぐだぐだわーくす

f:id:dacs:20170312134312j:plain:w760

メンテナンス記録を羅列

はてなブログを触ってみてちまちま設定していったこと、気になったことをメモ的に記録していく。従って、この記事については、初回の公開日時には意味が無い。

完全に自分の忘備録だけどなんかの役に立つと嬉しい。バリバリ書き加えたり削ったりするので、あるものと思っていると無くなる可能性もあるけどね。

3/18にダラダラ弄った主な部分

プロフィール修正

意外と参照されていますね。放置状態で申し訳ないので小手先でちょこっと修正。

Followボタン、シェアボタン新設

以下のコピペに自分の持ちURL設定して新設。ZENBACKは設置中止。 www.ituore.com www.ituore.com

カエレバを使ってみる

商品紹介ブログパーツカエレバ素直にAmazonや楽天を使っても良かったけど奇麗に纏められると聞いてこちらにした。

3/16にダラダラ弄った主な部分

Pro版にしちゃった

やるぞー！おー！ dac.hateblo.jp

3/15にダラダラ弄った主な部分

画面トップへのスクロール

画面トップへのスクロールボタンの設置

読者登録をちょこちょこ

アンテナ扱いでどかどか放り込んでみる。便利そうだけど、未読記事が展開されるために画面がとても煩雑になる。展開と縮めが機能としてあって欲しいところだけど…。

カスタムURL

URL自体の可読性を高め、記事内容と紐づけるためカスタムURLを極力設定している。しかし、一旦記事発行した後にカスタムURLを設定すると、元のURLに単純に記事が存在しないと表示されてしまう。別名扱いにするか、リダイレクトされるようにしてほしい。特にTwitterやFacebook等で外部で共有した場合、過去のURLでの流入があるが、その際に行き止まりになってしまう。Googleのフェッチもリアルタイムに近く行われるうえ、旧URLは旧URLで保存されてしまうようで修正の手立てがない。

カスタムURLはやろうと思えば何度でも変更できてしまうためリダイレクト対応をすると最悪ループしかねないので対応できないのかもしれない。しかし、今のままは不便な気がする。

3/13にダラダラ弄った主な部分

facebook連携を開始

繋げるかどうか悩んだけど、まあメインブログも繋げているし良いかということで。InstagramとかMixiとかもあるけど、そちらはあまり繋ぐ意味が無い気がする。Mixiなんか枯れまくっているし、まだあったの？的な感じだけどなあ。 f:id:dacs:20170313224908p:plain

どうせ繋げるならGoogle+やTumblrと繋いでほしい。

目次に目次が入ってしまう

ああ、H3要素以降を全部拾うから見出しのつもりでH3要素で「目次」って書いたらそれも含んでしまう訳ね。互い違いでこれはちょっとよろしくない。眠くなったので後で調べるけど、多分なんかやり方あるでしょ。適当なid付けてエスケープさせるみたいな何か。table-of-contentsクラスから数えて最初のli要素部分なのでCSSで指定してdisplay:noneで良いはず。

最終更新日時を挿入したい

どうやら備え付けの機能は存在しない模様。検索してすぐ見つかったのは以下の記事。 psn.hatenablog.jp

良さげではあるのだけどPro用。当面は使用できない。早々にProにする準備はあるが流石にまだ早いので情報のありかだけを記録。

可能であれば

一回最初に書いた内容に追記や修正を加えていって、更新日時ベースで見てもらうような運用にしたい。もし、機能的にそれが無理なのであれば、元記事を使って新規記事を起こして旧記事は削除するような運用をしていくことを考える。これまで作ってきたコンテンツではURLのパーマネント性を保持することを意識してきたが、そこら辺のルールに拘らないなら別にそれでも大丈夫。

話には聞いていたけれど、こりゃ凄い（酷い

このBlog日曜に始めたばかりなのね。そりゃあ確かにドメインが強くて、信頼されているのは有難いですよ。だけど、こりゃ出鱈目過ぎる。チートでしょう。1ページの4番目って…。 f:id:dacs:20170314013302p:plain:w760

3/12にダラダラ弄った主な部分

カスタムURL化

URLは素のままだと日時を基にしたPathやファイル名になるので編集オプションでカスタムURLに書き換えした。ただ英語を書くのは苦手なので妥当な書き方かどうかは全く自信が無い。

カスタムURL 投稿した記事のパーマネントリンクで、/entry/に続く文字列を指定できます。デフォルトの形式は詳細設定ページの

「記事URL」で設定できます。
編集オプションの設定とOGP - はてなブログヘルプ

Descriptionの記入

編集オプションでDescription相当の「記事の概要」項目がある。出来るだけ記載したい。この項目だけ記入時に文字数カウンターがあると嬉しいが贅沢は言うまい。

でも、本文のところでリアルタイムに記入文字数が確認できる訳だし、単純にそれを転用すれば秒速で実装されそうなものだし…。気づいていないだけで実はそういう機能実装されているんだろうか？

アイキャッチ挿入、画像幅設定

アイキャッチ画像を記事に入れてみた。閲覧環境に合わせてレスポンシブに大きさが変わってくれるのは有難いが、勝手に初期の横幅で記事幅より狭く決まってしまうのでひとしきり悩んだ。はてな記法でw:760とするか、HTMLでwidth属性を760（今指定しているテーマの最大幅時）に合わせるとおおよそ期待した挙動を示すようだ。monaski.hatenablog.com

横幅はこれで良いとして悩みは縦幅だ。今はFree画像サイトから入手したままを上記横幅で引き延ばしている。わざわざ加工するのが面倒だからだが、これは閲覧性が悪くなる。FHDであっても記事タイトルと画像だけで一杯になって本文が見えないのはいかがなものか？全く画像が無いのも残念な感じになるので、縦幅を削ることを検討しないといけない。なるべく手をかけずに…

AMP非対応

AMPはProでしか生成されないと分かった。ケチ！いずれProにするけどさ、それくらいあってもいいのに…。help.hatenablog.com

ヘッダ画像

ヘッダに文字だけでなく画像と混合したタイトル設定をすると何故か文字のスタイルが変わってしまう。文字も込みで画像にしてtitle属性やalt属性を設定すれば良いのだけど、面倒なのでそのうち作る。

Feed管理

RSSは普通に二種類出力されているが、Pro化してドメイン変更すると切り替えを依頼しなければならない。仮初めでもRSSの登録用アイコンを表示するかどうか悩む。help.hatenablog.com

共有系サービスリンク

備え付けの共有系アイコンは設定するとロードに時間がかかるのでやめてとりあえずZenbackにしてみた。

ここら辺はもっと早い読み込みがされているBlogが多くあるので参考にしていこうと思う。所詮この手のものは後から必要になったときに見えれば良いので遅延読み込みをさせて、読み込みを優先させるべき部分をさっさと表示させないと駄目だろう。

カテゴリの1Byte表記

カテゴリは一旦適当に設定したが、スラッグ形式ではなくまんまエンコードされるので、仕方なく英語形式にした。下手な英語は恥ずかしくて嫌だが仕方ない。Google的には日本語でも問題が無いがエンコードされると人間の可読性が無くなる。staff.hatenablog.com

サイドバーにもカテゴリを表示させることにした。タグ形式っぽくしたかったのでカスタムCSSをはめてみたが、ちょっと今後調整必要。 nohack-nolife.hatenablog.com rascal0403.hatenablog.com

リスト形式での記述

この記事は列挙するだけだからli要素で一旦書いたがどうも可読性が低くなって自分が使い難いので仕方なく見出し形式に変えた。とはいえ、メモなので見出し形式は大げさすぎる気がする。後で各項目の更新日時をかけるようにはてな記法かMARKDOWN記法を確認しておく。

編集方式の切り替え

とりあえず最初は見たまま編集をしていたが、結局細かいところは直接HTMLを弄る。そうなるとはてな記法かMARKDOWN記法を使った方が手軽。一日経っていないが、やはり見たままだと痒いところに手が届かない感が早々に出てきた。しかし、Markdown形式で書いてはいるが、これはこれで慣れないと編集画面が妙にケバケバしくなっていけない。 www.subcul-girl.com www.milkmemo.com

やっぱりそうか。とりあえず2記事見たまま編集でやってみて、こりゃあかんとなってこの記事はMARKDOWN記法。でも、機能的に一番しっくりくるのは、はてな記法だろうし、ユーザの共有情報も多いだろう。次以降ははてな記法で行こう。それにしても予想していたけど、編集開始時に記法選択が出来るものの一旦書き始めたらどこをどうやっても変換が出来ない訳ね。最終的にHTMLに変換しているのだから出来るんじゃないかと期待したけど甘かったか。

サイドのbox2幅調整

固定幅の広告336pxを入れていたが、テーマの指定と合わず断ち切れになっていた。カスタムCSSで設定しようとしたがどうにも上手くいかないのでレスポンシブ型に変更した。確かにレスポンシブ型は柔軟で便利なのだが、時々無茶苦茶大きいものを表示しようとするのである程度固定的に設定したかったのだが、切れてしまうよりはマシ。