ひろみのプロフィールはこちら!
ブログ&メルマガで毎月10万円以上の自動収入を目指しませんか?

自己破産経験有でも、アフィリエイトで毎月10万円!
アフィリエイトで自立を果たした「ひろみ」から数量限定特典プレゼント中です!

無料プレゼントを受け取る!

【cocoon】プラグインを使わずに画像に枠線を付ける方法

Wordpress

こんにちは。ひろみです。

本日も、自己破産経験者の私でもできた!

月10万円を稼ぐネットビジネスの始め方をお伝えしていきます。

 

今回は、画像に枠を付けて見やすくする方法を解説していきます。

 

今回はプラグインを使わず、スタイルシートにCSSコードを追加する方法をお伝えしていきます。

プラグインは、あまりインストールしすぎると、ブログ自体の動きが鈍くなる可能性がありますので、注意が必要です。

  • ブログ内の画像に枠を付けて見やすくしたい
  • プラグインをインストールしたくない

っというあなたにおススメに記事になります。

 

WordPressのテーマによっては、画像に枠を付けることができない場合があります。

白ベースの画像だと、どこから画像でどこからが画像ではないかの判別ができません。

そういうときに、画像に枠があると、ブログ記事が見やすくなります

 

ぜひ、参考にしてくださいね。

 

CSSコードをコピーする

それでは、画像に枠を付けるためのCSSコードを下記よりコピーしてください。

↓↓↓

/* 画像に枠線を付ける */
img.waku {
    border: solid 1px #808080; /* 枠線のスタイル 太さ 色 */
    box-shadow: 0px 0px 5px #808080; /* 影の水平方向の距離 垂直方向の距離 ぼかしの距離 色 */
}

 

スタイルシートに設定をする

それでは、先ほどコピーしたCSSコードをスタイルシートに貼り付けます。

 

WordPressのダッシュボード左側のメニューから、【外観】⇒【テーマの編集】をクリックします。

 

 

 

テーマの編集画面に移動します。

【Cocoon Child】になっていることを確認します。

「スタイルシート」を選択します。

「必要ならばここにコードを書く」という表示の下あたりに、先ほどコピーしたCSSコードを貼り付けます。

【ファイルを更新】をクリックします。

 

これで、テーマの編集は完了です。

 

実際に文中の画像に枠を付ける

それでは、投稿ページで画像に枠を付けていきたいと思います。

普通に画像を【メディア追加】からアップロードします。

 

白ベースの画像だと、どこからどこまでが画像で、どこからが背景なのかがわかりませんよね。

 

画像をクリックすると、赤枠のようなメニューが表示されます。

鉛筆マークをクリックします。

 

画像詳細が表示されます。

「上級者向け設定▼」をクリックします。

 

「画像CSSクラス」に【waku】と英語で入力します。

【更新】をクリックします。

 

すると・・・・

画像に枠があるのがわかりますでしょうか?

「枠有り」

 

「枠無し」

 

 

画像に枠を付けたい場合は、上記の作業を繰り返し行います。

ちょっと面倒くさいですが、なれると簡単です。

 

まとめ

今回は、画像に枠を付ける方法をプラグインを使わない方法で解説いたしました。

WordPressテーマによっては、画像に枠が自動では付かないので、この方法で、画像に枠を付けて、見やすいブログ記事にしてくださいね。

 

 

この記事を書いた人
ひろみ

こんにちは。「ひろみ」と申します。

私は、自己破産の経験がある、アラフオーの独身女子です。
一昔前であれば、「負け組」を言われる部類にはいると思います。
しかし、アフィリエイトと出会って、「在宅」のまま「自立」することに成功しています。
今はシェアハウス暮らしで、情報発信をしております。

ひろみをフォローする
ブログ&メルマガで毎月10万円以上の自動収入を目指しませんか?
自己破産経験有でも、アフィリエイトで毎月10万円! アフィリエイトで自立を果たした「ひろみ」から数量限定特典プレゼント中です!
Wordpress
ひろみをフォローする
Get a chance!

コメント

タイトルとURLをコピーしました