Hugo に Shortcodes を追加する

amazon のリンクもはれないのは不便だったので、 shortcodes機能を利用してみました。 Hugo の理解が深まった・・・かもです。

やったこと

ブログ内にリッチな感じで（語彙力） Amazon のリンクはれる様にしました。 shotcodes を使うことで同じテンプレートを使用してコンテンツを生成する事ができます。予め Amazon の商品リンクを表示する為のテンプレート( html と CSS )を用意しておく事で生成したコンテンツを記事内に挿入する事ができます。

参考にしたもの

css とかはまるまる参考にさせていただきました。めちゃくちゃ参考になりました。多謝。

はまった所

基本は上記ブログの通りで問題なかったんですが、環境（テーマ）固有の問題があったのでメモ。

CSS の上書き

CSS はテーマによりカスタマイズ方法が違います。シンプルにはテーマに含まれる CSS ファイルを編集しちゃうのが一番楽なんですが、メンテナンス性が著しく落ちるので考えものです。

自分が使用しているテーマ( Parpermod )の場合は assets/css/extended ディレクトリに css ファイルを作成するとバンドルしてくれるみたいでした。(参考)

ということで、上記ディレクトリに amazon_link.css を作成する事で対応しました。

テーマ側の CSS で a タグの下に下線( box shadow )が指定されていたので、下記の様に a タグで明示的に none を指定して対応しました。(テーマを変えた時に備えて text-decoration も同様に指定しています。)

.amazon-widget a {
    position: absolute;
    top:0;
    left:0;
    height: 100%;
    width: 100%;
    text-decoration: none;
    box-shadow: none;
}

同様に img タグのバックグラウンドカラーを明示的に指定しました。

.amazon-widget-img {
    border: 1px solid #E1E8ED;
    border-radius: 15px 15px 0 0;
    text-align: center;
    background: #FFFFFF;
}

これでテーマの基本色（背景色）がかわった場合でもウィジェットのデザイン（色合い）を維持できます。

完成

これでこんな感じに商品リンクが張れる様になりました。おしゃれ！。

ちなみに上記は最近買ってるラベルレスのペットボトル飲料です。ゴミ捨てが楽なのでおすすめ。

やったこと#

参考にしたもの#

はまった所#

CSS の上書き#

完成#

やったこと

参考にしたもの

はまった所

CSS の上書き

完成