CODE PICKSの使い方

CODE PICKSでは、掲載されているHTML・CSSコードをコピーして、ご自身のWebサイトやブログで使用できます。

基本的な使い方は、デザインを選び、コードをコピーして、使用したい場所へ貼り付けるだけです。

CODE PICKSの基本的な使い方

ボタンや見出し、カードなどの記事から、ご自身のサイトに合うデザインを選びます。

色や形だけでなく、設置したい場所や目的に合っているかも確認してみてください。

記事内の「HTML」欄に掲載されているコードをコピーします。

コピーしたHTMLは、WordPressの「カスタムHTML」ブロックや、ご利用中のWebサイトのHTML編集欄へ貼り付けてください。

続いて、記事内の「CSS」欄に掲載されているコードをコピーします。

WordPressをご利用の場合は、一般的に「外観」→「カスタマイズ」→「追加CSS」へ貼り付けます。

テーマによっては、テーマ専用のCSS入力欄や、子テーマのスタイルシートを使用する場合があります。

コードを保存したら、実際のページを開いて表示を確認します。

パソコンだけでなく、スマートフォンでも文字やボタンがはみ出していないか確認することをおすすめします。

掲載しているコードは、そのまま使うだけでなく、サイトに合わせて自由に調整できます。

CSS内の「#」から始まるカラーコードを変更すると、背景色や文字色、枠線の色などを変更できます。

background-color: #c98792;
color: #ffffff;

上の例では、background-colorが背景色、 colorが文字色を指定しています。

ボタン名や見出しなど、画面に表示される文章は、 HTML内の文字を書き換えることで変更できます。

<a class="sample-button" href="#">詳しく見る</a>

「詳しく見る」の部分を「お問い合わせ」など、使用目的に合った文字へ変更してください。

ボタンやテキストリンクでは、 HTML内のhref=""に移動先のURLを設定します。

<a class="sample-button" href="https://example.com/">詳しく見る</a>

使用しているWordPressテーマやプラグインによっては、既存のCSSと掲載コードが干渉し、見本と異なる表示になる場合があります。

表示が崩れた場合は、追加したコードを一度削除し、元の状態に戻してから調整してください。

テーマファイルなどを直接編集する場合は、作業前にバックアップを取っておくと安心です。

CODE PICKSに掲載しているコードは、個人サイト・商用サイトを問わずご利用いただけます。

ただし、掲載コードそのものを素材として再配布・販売する行為や、内容をほぼそのまま転載する行為はご遠慮ください。

コードを貼り付けても表示されない場合は、次の項目をご確認ください。

解決しない場合は、お問い合わせページよりご連絡ください。なお、ご利用環境やコードの内容によっては、個別のカスタマイズに対応できない場合があります。