ブログをカスタマイズする際に、カスタマイズの解説記事からソースコードをコピペすることがありますよね。
このブログのカスタマイズ記事も参考にして下さってありがたいのですが、時々間違って記事そのままをコピペされてる方を見かけます…。
blog.minimal-green.com
例えば、ナビゲーションメニューの記事のコードの「カテゴリ１」とか「リンク」とかをそのままをコピペされている場合です。
「カテゴリ１」とか「リンク」とかhrefの#はあくまで例なので、実際使う際にはご自分のブログのカテゴリとか記事タイトル、URLに変えて使います。
（上記記事にももちろん注意書きしてます…）
www.fair-skinned-monster.com
カスタマイズ記事の読者ボタンやシェアボタンのコードを記事主のアカウントのままコピペしていたり・・・
まあ、「あるある」ですよね（笑）
またネット上の記事のコードが正しいとは限りません、全角スペースが入っていたり、CSSの「;」が抜けていたりミスもあります。
そういう場合は自分で修正しなくてはいけません。
時間が経って、スクリプトのライブラリのパスが変わっていたり、使えなくなっていることもあります。
コピペでカスタマイズするときにも、よく使うHTMLタグの基本をわかっていれば自分でトラブルシューティングできます。
以下は過去記事の再掲です。
リンクと画像ファイルの指定：aタグとimgタグ
aタグ（アンカータグ）
<a href="#sample">サンプルに移動</a>
サンプルに移動このようにリンクが表示されます。
#sampleの部分にリンク先のURLを指定します。
imgタグ（イメージタグ）
<img src="example.jpg（画像のパス）" alt="画像の説明テキスト">
src="example.jpg"の""部分に画像ファイルのURL(アドレス）を指定します。alt属性は画像が見えない環境下での代替テキストです。
画像ファイルのアドレスはトップ下の「images」という名前のファルダにアップロードしたなら"images/画像のファイル名.拡張子"という相対パスで指定できます。
画像にリンクをつけるには
<a href="リンク先のURL"><img src="画像のパス（画像のアドレス）" alt="画像の説明"></a>
このように記述します。
liタグ
リストとリスト項目を示すul要素とli要素は
<ul> <li>リスト項目A</li> <li>リスト項目B</li> <li>リスト項目C</li> </ul>
- リスト項目A
- リスト項目B
- リスト項目C
このように表示されます。ドロップダウン付きのグローバルメニューではli要素とa要素を使ってメニューを作っています。
ブログでよく使うHTMLタグの基本はこちらの記事がわかりやすいです。
naifix.com
このブログのカスタマイズ記事は別の検証用のサブブログで確認してから記事にしていますが、場合によっては修正が必要なこともあります。
（コードを変更した場合はタイトルに「追記」「修正」と入れています）
コピペして思うとおりに表示されないときは、Chromeのデベロッパーツールなどでエラーやスタイルの適用されない原因を見つけて修正してみてください。
このブログやテーマに関することなら、コメント下さればなるべく答えたいと思います。
ferret-plus.com
