森のなかまアパートメント

下にある「お部屋あんない」「過去帳」をあさると、見たい物件がみつかるかもしれません

GW はてなブログの編集について勉強したこと


Goo blogで愛用していたテンプレート。好きでした
移ってきてからの数日間、はてなブログの編集方法について勉強したまとめです

個人差はあれど、使い慣れた道具が変わると調子がくるいますよね。
はてなブログへ移ってきて、やりたいことがスッとできないように感じました。
機能の優劣ではなく、単に慣れていないだけなの話なのだと思います。

★改行の高さをコンパクトにしたい

最初に違和感を感じたのは「見たままモード」の「改行」でした。
GW 東横フラワー緑道で横浜駅へ」まで書いてみて、思った以上に改行の高さがあります。
ゆったりした行間を好む方なら良いのかもしれませんが、森のなかまの無駄に長い文章をスクロールしてもらうのは申し訳ないですし、自分で見ても面倒です。


王道ではないかと思いますが、画像にキャプションのようにくっつけて文字をいれ、改行は1行分にしたいのです(Goo blogのレンダリング結果)。


Goo blogではWEB版の「TEXTエディター」を使っていました。改行ひとつに対してレンダリング結果も概ね1行でした。

あっ、そういえば2019/3ごろにGoo blogのシステム変更で改行にまつわるトラブルがあったのを思い出しました。Goo blogの「HTMLエディター」も似た感じだった記憶があります(間違っていたらすみません)。

「見たままモード」ですと森のなかまが望むような体裁にはなってくれそうにないので、「makrdown」「はてな表記」の2択になりそうです。
比べてみると「改行」については「はてな表記」の方が森のなかまの感覚に近そうででしたので、次の投稿からは「はてな表記」に切り替えました。

説明中にある「〜〜」は任意の文字を表し、改行を含むこともできます(できないものもあるかも)

「見たままモード」だとなんとなく、やりたいことができないという方は、捨て記事を作ってプレビューで確認してみると、なんとなく「こんなもんかぁ」と思われるかと思います(個人差はあります)

画像やリンクの挿入や文字色はエディタのボタンが機能します。エディタのボタンで実現できないものだけを覚えれば良いのかと思います。例えば「はてな表記モード」では「中央揃え」のボタンがないので、これは定型文で対応します(後述)

★記事の幅いっぱいに画像を横に並べて配置

あと、Goo blogにあった小さい画像を横に並べて配置したりしていましたが、これはどうすればよいのか。
「見たままモード」で貼り付けた画像をクリックするとリサイズされた画像が自動的に保存されるようです(詳しくはコチラ)。調べたらGoo blogも自動で決めうちのサイズを作成していたようです。

毎回手動でリサイズするのも面倒ですし、作業用の画像が増えてしまうのも気持ちの良いものではありません。またwidthを指定すると特定のデバイス表示に限定されます。コンピュータがやれることはコンピュータにやってもらいたいです。

スマホ版はまだ確認していませんが、プレビューでは記事の幅に合わせて4枚の画像が縮小されることを確認しました。
WEB版、スマホ版で記事の幅に合わせて4枚の画像が縮小されることを確認しました。
難しい呪文は書かずに全てUI操作でできてしまいました。便利ですね。

  1. 「写真を投稿」から並べたい順番でサムネイルをクリックします(右肩に番号が付きます)
  2. 「横並び」をクリック
  3. 「選択した写真を貼り付け」をクリック(ダブルクリックだと詳細設定をスキップできるようです)
  4. コンピュータがよしなに処理してくれました。以降は定型文についてです
  5. 「サイドバー」から「+」をクリックし「定型文貼り付け」をON(リスト下の方)
  6. 「定型文貼り付け」をクリックし「定型分を作成する」をクリック。適当なタイトルを作って次の文字列を書いておきます
<div align="center">hoge</div>

編集画面に挿入し`hoge`と書かれているところをお好きな文字や行に置き換えればよいかと思います。左寄せや右寄せが必要な方は`center`を`left`,`right`に置き換えれば良いでしょう。

★これはなんだろう?

「はてな表記一覧」に載っていて実際どうなるのか想像できなかったので書いてみました。文中であってもWikipediaへのリンクを明示でき、埋め込みより高さが必要ないので好みだったりします。

[wikipedia:よりより]
[google:1AAA 懐中電灯]
[rakuten:かわいい 懐中電灯]
[https://staff.hatenablog.com/entry/2017/02/24/152000]

実際の表示結果
wikipedia:よりより
google:1AAA 懐中電灯
rakuten:かわいい 懐中電灯
https://staff.hatenablog.com/entry/2017/02/24/152000

★意外な場所に設定がある

はてな」はいろんなサービスがあるようです。それぞれのサービスを組み合わせて別なサービスを提供しているようで、設定する場所も分かれているようです。

はてなフォトライフ
ここにあります。デフォルトの画像サイズを確認されておくとよいでしょう
はてなメッセージ
レポートのメール送信設定などができます

★おわりに

慣れたものを使い続けられるとありがたいのですが、それを許してくれないのが常であります。これを機に少し勉強をしてみました。
文化が違うので迷うこともありましたが、ここ数日で少し歩み寄れた気がしました。
この投稿自体が森のなかまの「はてな表記の練習」みたいなものなので「あれは?これは?」とお尋ねされても、詳しいことはお答えできないかと思います。

もし、この投稿を機に「あーそうなんだ」みたいなきっかけになったとしたら、うれしいかぎりであります。

それでは!