つれづれなる備忘録

日々の発見をあるがままに綴る

ブログデザイン備忘録 ~外部サイト画像埋め込み・サイドバー更新

1. はてな記事内の外部サイト画像埋め込み

 あまり外部サイトの画像を埋め込むことはしていなかったが、今までは外部サイトの画像はファイルをダウンロードして、はてなフォトライフにアップロードして記事内に張り付けるという手順をとっていた。あらためて調べてみたら直接貼り付けが可能で、公式サイトに方法が掲載されていた。リンクの挿入とコンテンツの埋め込み - はてなブログ ヘルプ

 簡単な方法としては、画像のアドレスをコピーした状態で編集画面上で張り付けると、どの形式で埋め込むか選択できるので画像を選択してリンクを挿入ボタンを押せばよい。またはてな記法[https://画像のアドレス:image]としてもよい。この方法で画像を埋め込んだものが下になる。

https://cdn.blog.st-hatena.com/images/common/logo-pro.svg?version=ffc627df161fcc9b7b1505ea0e27119b31df459e&env=production

そのままだと大きすぎるので、画像リンクのはてな記法内に横幅のサイズを指定する:w250を加えると小さくなる。横幅の数値は表示を見ながら調整すればよい。

https://cdn.blog.st-hatena.com/images/common/logo-pro.svg?version=ffc627df161fcc9b7b1505ea0e27119b31df459e&env=production

2. サイドバーの更新

 今回、サイドバーの表示内容で注目記事とCategory(カテゴリー)をはてなのデザイン-カスタマイズのサイドバー内でモジュール追加を使って追加した。今までフッターでカテゴリーをカバーしていたが、サイドバー内に追加できることを気づいていなかった。PCではサイドに表示されるが、モバイルだと下にスクロールするとフッターの前にサイドバーの内容があらわれるので、こちらの方が便利だと思う。(フッターはそのまま残しておく)
CSSでデザインを変更できるので、今後どのようなデザインにするか決まったら、変更する予定である。