https://www.awesome-360.com/tags/html/ Recent content in HTML on Awesome360 Hugo -- gohugo.io ja-jp Fri, 23 Jul 2021 00:00:00 +0000 https://www.awesome-360.com/post/2021/07/how_to_edit_affiliate_link_hugo/ Fri, 23 Jul 2021 00:00:00 +0000 https://www.awesome-360.com/post/2021/07/how_to_edit_affiliate_link_hugo/ 今回は私が使用しているHugoテーマでアフィリエイトリンクを埋め込めるよう編集したので、その方法について紹介していきます。 では早速いってみましょう！ 目次 HTMLを編集 CSSを編集 TOMLファイル編集 CSSファイル編集 最後に 1. HTMLを編集 まずはhtmlファイルを作成します。 今回はaffiliate.htmlというファイルをshortcodes内に作成しました。 配置位置は以下の感じです。 ご自身のブログ-|-aechetypes |-content |-data |-layouts-| |-shortcodes-| |-affiliate.html |-public |-static ファイル内を編集していきましょう。 私は以下のようになりました。 <div class="affiliate-box"> <div class="three columns amazon-image"> <a href="{{ .Get "amazon-url" }}" target="_blank"> <img border="0" src="{{ .Get "imageUrl" }}"> </a> </div> <div class="affiliate-info"> <div class="amazon-info"> <a href="{{ .Get "amazon-url" }}" target="_blank"> <p class="amazon-name">{{ .Get "title" }}</p> </a> <div> <p>{{ .Get "summary" }}</p> </div> </div> <a href="{{ . https://www.awesome-360.com/post/2021/07/how_to_edit_css_for_heading/ Sat, 17 Jul 2021 00:00:00 +0000 https://www.awesome-360.com/post/2021/07/how_to_edit_css_for_heading/ 今回は「私のブログ見出しがものすごく見辛いな」と思っていたので、CSS等カスタマイズしたので、その方法を紹介します。 目次 CSSを新規作成 HTMLの編集 TOMLファイルの修正 CSSの編集 参考サイト 1. CSSを新規作成 まずはカスタムCSSファイルを作成します。 今回は見出しの編集をしたかったので、static>css>の直下にcustom_heading.cssを作成しました。 配置場所は以下のようなイメージです。 ご自身のブログ-|-aechetypes |-content |-data |-layouts |-public |-static-|-css-|-custom_heading.css 2. HTMLの編集 次にHTMLファイルを編集します。 今回は、single.htmlを編集していきます。 まずテーマの中にあるsingle.htmlをlayoutsにコピーします。 私は_defaultとpostの直下にあるsingle.htmlを編集したかったので、以下のような配置になりました。 ご自身のブログ-|-aechetypes |-content |-data |-layouts-|-_default-|-single.html |-post-|-single.html |-public |-static どちらのsingle.htmlもdiv要素のidがcontentがあったので、以下のように追加しました。 <div id="content"> {{ range .Site.Params.customCSS }} <link rel="stylesheet" href="{{ . | absURL}}"> {{ end }} </div> ここまでできたら、一旦tomlファイルを編集していきます。 3. TOMLファイルの編集 config.tomlを編集します。 [params]にcustomCSSを配置して、先ほど作成したCSSファイルを有効にします。 大体のテーマではcustomCSSは元々あると思います。 customCSSに"/css/custom_heading.css"を追加します。 私の場合は以下のようになりました。 [params] customCSS= ["default", "/css/custom_heading.css"] 4. CSSの編集 有効になったところで、新規に作成したcustom_heading.cssを編集していきます。 今回は初心者に優しいサイトである サルワカさん が提供してくれているコードを使用します。 とっても便利なので是非使って下さい。 ＜参考サイト＞ ・CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選( https://saruwakakun.