検索結果0件」

    【更新履歴】記事内のボタンのデザインとソースコードを変更しました

    2020/05/07
    【更新履歴】記事内のボタンのデザインとソースコードを変更しました

    Before

    After


    変更箇所

    記事内のボタンのデザインを変更

    記事とソースコードを変更


    記事内のボタンのデザインを変更

    もともと、サイトのカラーを

    • 基本の色:黒
    • ボタンの色:黄色

    というデザインにしていました。

    それは、若者向けのサイトにしたかったので、シックで若者向けのブランドを参考にしたからです。

    こちらが、当初作ったのデザイン案。

    ですが、「ヘッダーとフッターが黒は見づらい」と思ったので、ヘッダーの色を白、フッターの色を灰色ベースに変更しました。

    ということは、

    もともとのカラーベースを参考にする必要がなくなった

    ということです。

    そして、記事が増えてアフィリエイトリンクを複数設置しようとした際、

    ボタンの色が黄色だと、アフィリエイト先のページがわかりづらい

    という問題が発生しました。

    例えば、

    • Amazon = オレンジ
    • 楽天 =

    というイメージが、みなさんあると思います。

    それは、企業がちゃんとブランディングできている証拠です。

    なので、色もアフィリエイト先のブランドカラーに合わせました。


    記事とCSSのソースコードを変更

    記事はMarkdownで書かれています。

    そして当初は、HTML要素のみでデザイン変更ができるような、CSS設計にしていました。

    それには、以下の理由があります。

    • Markdownは「クラス名」をつけられない
    • 使っているプラグイン「gatsby-remark-external-links」の都合上、aタグでリンクを指定したくない

    Markdownは「クラス名」をつけられない

    Markdownで書く場合は、「クラス名」をつけられません。

    Markdown内にHTMLを書けば、クラス名を入れられるが、ソースコードが汚くなるので、なるべくやりたくない。

    そしてボタンの色を切り替える場合は、ボタンごとにクラス名を割り振って切り替えないといけない。

    なので、当初はHTML要素のみでデザインが完結するCSS設計にしました。

    使っているプラグイン「gatsby-remark-external-links」の都合上、aタグでリンクを指定したくない

    このプラグインは、

    1. Markdownの書き方で「aタグ」を書いている
    2. 外部リンクを指定している

    場合、自動的にrel="nofollow noopener noreferrer"を指定してくれる、プラグインです。

    これをつける理由は、セキュリティ対策です。

    ですが、先ほどのようにボタンの色を切りけるには、HTML要素で書いてクラス名を指定する必要があります。

    つまり、Markdownで書かないと機能しないこのプラグインが、使えなくなるということになります。

    HTMLで追加したaタグに、上記のコードを追加する場合は、一つ一つ手動で追加しないといけません。


    ボタンリンクの場合、aタグをHTMLを書き、ルール作りを徹底してカバーする

    上記の問題点は、

    ボタンリンクの場合、aタグをHTMLを書き、ルール作りを徹底してカバーする

    ことでカバーします。

    Markdown内でHTMLを書かないといけませんが、ボタンをブランドカラーに合わせることの方が重要だと考えました。

    こちらが変更履歴の一部

    • 【更新履歴】記事内のボタンのデザインとソースコードを変更しました

    広告