![](https://i0.wp.com/tommy-steel-heart.com/wp-content/uploads/2022/03/d160a53f71104dc4e5ed3c300ba3ba79.jpg?resize=96%2C96&ssl=1)
ドーモ人柱冨蔵です。
このブログでは植物育成のネタ中心に私の人柱情報を発信してきます。
Twitterアカウント⇒@Tommy_steel_ht
ブログの鬼門!CSSとHTMLを貼る方法を伝授
”コピペで簡単♪CSSとHTMLでおしゃれなボックスを設定!!”
こんな記事を見つけて「やったぜ!これで自分もオシャレブロガーの仲間入りさ♪」
と思っていざ記事を見てトライしますが、、、
コードと呼ばれる謎の呪文がずらっと載ってる一見初心者に優しい記事のようですが、
ほんでどこにコピペしたらええんじゃー。ってなりました。
本当に3時間くらいブログの記事と睨めっこし、あぁなるほどね。となったので、今後始める人が
3時間という貴重な時間を無駄にしないために、メモ代わりに残しておきます。
以下5ステップでCSS及びHTMLを貼り付けます。
②style cssにCSSを貼り付け
③プラグイン:Add quick tagをインストール及び有効化
④HTML貼り付け
⑤ブログの記事作成で実際に使用
①cocoon childをアクティブ化
先ずワードプレスの外観⇒テーマを選択します。
![](https://i0.wp.com/tommy-steel-heart.com/wp-content/uploads/2022/03/1.jpg?resize=1024%2C560&ssl=1)
次にcocoon childを有効化します。
![](https://i0.wp.com/tommy-steel-heart.com/wp-content/uploads/2022/03/2.jpg?resize=1024%2C471&ssl=1)
②style cssにCSSを貼り付け
ネットで拾ってきたCSSを自分のワードプレスに貼り付けます。
先ず外観⇒テーマファイルエディターの順で選択してください。
![](https://i0.wp.com/tommy-steel-heart.com/wp-content/uploads/2022/03/3.jpg?resize=1024%2C451&ssl=1)
次に赤枠の中にネットで拾ってきたCSSコードを貼り付けてください。
![](https://i0.wp.com/tommy-steel-heart.com/wp-content/uploads/2022/03/4.jpg?resize=1024%2C472&ssl=1)
③プラグイン:Add quick tagをインストール及び有効化
”ファイルを更新”ボタンを押して、CSSを保存します。
次にプラグイン⇒新規追加の順にクリックします。
![](https://i0.wp.com/tommy-steel-heart.com/wp-content/uploads/2022/03/5.jpg?resize=1256%2C583&ssl=1)
検索欄に”Add quick tag”を打ち込み検索します。
今すぐインストールボタンをクリックしインストールします。
![](https://i0.wp.com/tommy-steel-heart.com/wp-content/uploads/2022/03/6.jpg?resize=1024%2C472&ssl=1)
プラグインから”Add quick tag”を探し、”有効化”をクリックします。
![](https://i0.wp.com/tommy-steel-heart.com/wp-content/uploads/2022/03/7.jpg?resize=1024%2C469&ssl=1)
④HTML貼り付け
Add quick tagの”設定”をクリックします。
![](https://i0.wp.com/tommy-steel-heart.com/wp-content/uploads/2022/03/8.jpg?resize=1024%2C469&ssl=1)
①この部分にネットから拾ってきたHTMLを貼り付けます。
②名前、アイコンなどを自分のわかりやすいものに設定します(適当でOK)。
③チェックを全て入れます。
④”変更を保存”をクリックします。
ここまで設定できればほぼ完了です。
![](https://i0.wp.com/tommy-steel-heart.com/wp-content/uploads/2022/03/10.jpg?resize=1024%2C451&ssl=1)
⑤ブログの記事作成で実際に使用
実際の記事で”クラシック版の段落”を選択し、赤枠に”Quicktags”というプルダウンがあるので、
▲をクリックしてください。
先程作成したHTMLが入っているはずなので、それを選択すれば実際に記事作成で使用することができます。
![](https://i0.wp.com/tommy-steel-heart.com/wp-content/uploads/2022/03/11.jpg?resize=835%2C358&ssl=1)
おしゃれなブログを作るためには避けては通れないCSSとHTMLですが、コードは書けなくても
こんなふうに簡単に使用することができます。
この記事をきっかけに、より深くCSSとHTMLを学んでおしゃれなブログ作成に繋げていただければ幸いです(私は暫くはNo thank you)。ではまた
/
↓リンクをポチッてくれると死ぬほど喜びます
![](https://i0.wp.com/tommy-steel-heart.com/wp-content/uploads/2022/03/d160a53f71104dc4e5ed3c300ba3ba79.jpg?resize=96%2C96&ssl=1)
ドーモ人柱冨蔵です。
このブログでは植物育成のネタ中心に私の人柱情報を発信してきます。
Twitterアカウント⇒@Tommy_steel_ht
コメント