【Cocoon】記事下のフォローにTwitterを追加する方法
ENOWL_Nao
ENOWL（エノウル）
【Cocoon】画像に枠線をつける方法
ENOWL_Nao
どうも、こんにちは。
WebデザイナーのNaoです。
現在、「Cocoon」という無料のWordPressテーマを使用しています。
記事内に画像を挿入した際に本文と画像の境目が分かりにくいと思いました。
毎回画像に枠線をつけるのは手間なので、記事内画像に自動で枠線をつけるように設定を変更することにしました。
しかし中には、特定の画像にだけ枠線をつけたい！という方もいらっしゃると思うので、
今回は以下の2つのパターンをご紹介します。
- 全部の画像に枠線をつける方法
- 画像1枚だけに枠線をつける方法
自分の目的にあった方法を試してみてください。
それでは行ってみましょう！
全部の画像に枠線をつける方法
STEP1 管理画面から「Cocoon設定」をクリック
STEP2 「画像」をクリック
STEP3 画像の囲み効果から好きなスタイルを選択
画像の囲み効果から好きなスタイルを選択します。
下がそれぞれのスタイルになります。
小さいと見づらいと思うので、画像をクリックすると大きく表示されます。
私は、「ボーダー（薄い太線）」を選択しました。
STEP4 「変更をまとめて保存」をクリックして保存する
以上で記事内のすべての画像に枠線がついたと思います。
それでは、次に特定の画像のみに枠線をつける方法のご紹介です。
記事内の画像1枚だけに枠線をつける方法
今回はワンちゃんの画像だけに枠線をつけたい！という想定でやっていきます。
STEP1 管理画面から「外観」→「カスタマイズ」をクリック
STEP2 「追加CSS」をクリック
STEP3 コードを貼り付ける
下のコードをコピーして赤枠部分に貼り付けてください。
1.my-settings-border{
2 border: 2px solid #ec6800;
3}
上のコードは「オレンジ色の線をつける」という記述になります。
後ほど、色を変更する方法もご紹介するので初心者の方はまず設定できるか挑戦してみてください。
貼り付けが完了したら「公開」ボタンを忘れずにクリックしてください。
「公開」ボタンをクリックすることで保存ができます。
「公開」ボタンを押して保存が完了したら、左上のバツボタンから戻ってください。
STEP4 画像を選択
記事作成画面に戻り、枠線をつけたい画像を選択してください。
STEP5 「高度な設定」から「追加 CSS クラス」を設定
画像が選択された状態で、右側の「高度な設定」から「追加 CSS クラス」に先程のクラス名を追加します。
先程のコードをコピー&ペーストしている場合は、「my-settings-border」です。
違う名前に設定した方はその名前を追加しましょう。
STEP6 保存して確認
追加が完了したら保存をして確認してみてください。
↓無事にワンちゃんの画像だけにオレンジ色の枠線を設定することができました。
枠線の色を変更する方法
枠線の色を変更したい！
こんな方向けにさっき設定した枠線の色を変更する方法をご紹介します。
途中までは流れが一緒です。
STEP1 管理画面から「外観」→「カスタマイズ」をクリック
STEP2 「追加CSS」をクリック
STEP3 コードを変更する
下のコードの「border: 2px solid #ec6800;」という記述の
「#ec6800」の部分を変更することで色を変更することができます。
1.my-settings-border{
2 border: 2px solid #ec6800;
3}
「#ec6800」の部分はカラーコードといって色を表しています。
なので、「#ec6800」の部分を変更することで色を変更できるという訳です。
下記、リンクのサイトから変更したいカラーコードをコピーしてきて変更してみましょう。
WEB色見本 原色大辞典 – HTMLカラーコード
今回は試しに青（#1e90ff）に変更してみたいと思います。
1.my-settings-border{
2 border: 2px solid #1e90ff;
3}
貼り付けが完了したら「公開」ボタンを忘れずにクリックしてください。
「公開」ボタンをクリックすることで保存ができます。
「公開」ボタンを押して保存が完了したら、左上のバツボタンから戻ってください。
記事を確認してみてください。線の色が変更できているはずです。
これで線の色を変更することができました。
しかし、この方法だと1色しか色を設定することができません。
次では、枠線の種類を増やす方法をご紹介します。
枠線の種類を増やす方法
もっと枠線の種類を増やしたい！
そんな方向けに枠線を増やす方法を説明していきたいと思います。
先程までやったことの繰り返しなので、あまり難しくありません。
STEP1 管理画面から「外観」→「カスタマイズ」をクリック
STEP2 「追加CSS」をクリック
STEP3 コードを追加する
今回は、青い枠線とオレンジの枠線を追加したいと思います。
下記のコードをコピーして設定してみてください。
1.my-settings-border-blue{
2 border: 2px solid #1e90ff;
3}
4.my-settings-border-orange{
5 border: 2px solid #ff4500;
6}
上記のコードを増やしていくことでたくさんの枠線を作成することが可能です。
自分用にカスタマイズしてみてください！
貼り付けが完了したら「公開」ボタンを忘れずにクリックしてください。
「公開」ボタンをクリックすることで保存ができます。
「公開」ボタンを押して保存が完了したら、左上のバツボタンから戻ってください。
STEP4 画像を選択してそれぞれ「追加CSSクラス」の設定を行う
画像を選択して先程の設定したCSSクラスを設定していきます。
今回は
- ワンちゃん → 青
- ネコちゃん → オレンジ に設定していきます。
ワンちゃんの設定
ネコちゃんの設定
STEP5 保存して確認
追加が完了したら保存をして確認してみてください。
それぞれ枠線の色が反映されました。
まとめ
いかがだったでしょうか？
無事に枠線をつけることができたでしょうか？
- 全部の画像に枠線をつける方法
- 画像1枚だけに枠線をつける方法
という2種類の方法をご紹介しましたが、自分にあった方を選択して設定してもらえればと思います。
参考になれば幸いです。
ここまで読んでいただきありがとうございました！
個人事業主さまの「Web担当」そのWebの悩み
そのWebの悩み
一人で抱え込んでいませんか？
「ちょっとここを直したい」「そろそろリニューアルしたい」…。
小さな修正から本格的な制作まで、Webに関する「どうしよう」を私が丸ごと受け止めます。難しい専門用語は使いません。
あなたの事業を支えるパートナーとして、まずは気軽にお話ししませんか？
私について
ホームページをご覧いただきありがとうございます！
なおと申します。
現在はフリーランスのWebデザイナーとして活動しています。 WebデザインからコーディングからWordPress実装まで一貫してホームページ制作を行うことができます。
