Hexo:記事に画像を貼り付ける

記事に画像を貼り付ける

公式やネット上でもいろいろやり方が紹介されていますが、post_asset_folder: true{% asset_img slug [title] %}のやり方がなんだかしっくり来ませんでした。
md 記法で完結したい。

公式のやり方

  • 設定変更: post_asset_folder: trueする。
  • hexo newのタイミングでディレクトリが作成される
  • この中にまとめて記事と画像を突っ込む
  • 画像の参照は独自記法で{% asset_img slug [title] %}
  • md 記法だとpermalinkに依存するので、絶対パスで書かなくてはいけない
  • 記事に紐づくディレクトリになるので、他の記事から同じ画像を参照しにくい

こんな構成で考えてみた

公式の方法で面倒なところを回避したい。

  • hexo newのタイミングでディレクトリ作成されるのがイヤ
  • permalinkの設定に依存したくない
  • 画像はある程度フォルダにまとめて突っ込みたい
  • 他の記事からも参照したい

ということを実現するために思いついたのが、昔ながらの単純な案。

mkdir -k ./images/site  

で static なディレクトリを作成し、そこに画像を置いちゃう。
これなら設定も変える必要はありません。

さっそくcat.pngを用意して、Markdown で記述してみます。

![猫](/content/images/2023/01/cat-1.png)  

猫

表示されました!
欠点はドラフト扱いがないからディレクトリ内は全部デプロイされちゃうことかな。

なお上の画像は左寄せされていますが、デフォルトはセンタリングです。

画像のセンタリングをやめる

HEXO ではジェネレート時にimgタグを探し、クリックによるホバー表示とalt属性と同じspan要素の作成をしてくれます。
デフォルトではスタイルがセンタリングになっているので、これを解除したいと思います。

センタリング設定はarticle.stylファイルに記述されています。
ファイルから.article-entryを探し、さらにimg, videoの設定にあるmargin: autoをコメントアウトします。
.stylファイルのコメントアウトは JavaScript の行コメントアウトと同様、//です。

ついでに画像の境界線も欲しいのでoutline: 1px solid #CCCも追加しておきました。

.article-entry  
  @extend $base-style  
  clearfix()  
  color: color-default  
  // 〜〜 中略 〜〜  
  img, video  
    max-width: 100%  
    height: auto  
    display: block  
    // margin: auto ← コメントアウト  
    outline: 1px solid #CCC // ← 外枠を追加  

自動生成されるキャプションもセンタリングになっていますが、こちらは.caption内の定義をコメントアウトすると左寄せになります。

  // 〜〜 中略 〜〜  
  .caption  
    color: color-grey  
    display: block  
    font-size: 0.9em  
    margin-top: 0.5em  
    position: relative  
    // text-align: center ← コメントアウト  

これでキャプションも左寄せになりました!

Subscribe to 猫好きが猫以外のことも書く

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
jamie@example.com
Subscribe