THE THOR(トール)でブログ内の画像・イラストに枠線をつける方法を紹介

困っている人
困っている人

投げ銭の機能を取りいれているブログを発見しました!!僕もやって見たいです、教えてください。

こんな悩みを解消します。

こんにちは、たっつー(@utakata_blog)です。

本記事では人気のWordPressテーマ”THE THOR(ザ トール)“で利用する画像に枠線をつける方法を紹介します。

 

  • 画像に枠線がない場合とある場合の比較
  • THE THOR(トール)の画像に枠線をつける方法
  • 読みやすい記事作成を心がけよう!!

 

以前使っていたテーマは画像に枠があったので記事にメリハリがあったのですが、THE THORを利用しだして枠線がないことが不満でした。

CSSを追加して解決できたので、その方法をシェアしていきますね!!

関連記事

[word_balloon id="unset" src="https://memoriesto-go.com/wp-content/uploads/2020/03/スクリーンショット-2020-03-03-20.[…]

THE THOR(ザ トール)
5

毎日「また増えた!」を実感。集客・収益に徹底的にこだわった結果へ導く次世代WordPressテーマ「ザ トール」。

値段

16,280円(税込)

画像に枠線がない場合とある場合の比較

THE THOR(トール)SEO対策・デザイン・使い勝手の三拍子が揃っており、たくさんの人が愛用している人気のWordPressテーマです。

しかし、画像に枠線がないことだけは不満がありました!!

 

実際に枠線がない場合とある場合を比べてみましょう。

画像の枠線がない場合

まずは画像に枠線がない場合

文章と画像の境目がわからないので全体的に読みにくい記事になっています。

特に手順の説明系の記事であれば、なおさら見にくさを感じてしまうでしょう。

画像の枠線がある場合

こちらは枠線がある場合

枠線があったほうが、記事の輪郭がハッキリしており、メリハリも出ますね。

何より読みやすいので枠線は付けておくべきだと思います!!

たっつー
たっつー

枠線は簡単につけることができるので次章を参考に挑戦してみましょう!!

THE THOR(トール)で画像に枠をつける方法

さっそくTHE THOR(トール)の画像に枠線をつける手順を紹介していきます。

手順はいたって簡単、CSSを貼り付けるだけで5分もあれば完了しますよ!!

これから紹介するカスタマイズはCSSをいじっていくのでバックアップを取った上で実践するようにしましょう。

まずは下記のCSSをコピーしましょう。

コピペするコードは以下の通り。

/*投稿の画像に枠をつける*/
.content img:not(.border-none) {
padding: 1px;
border: 1px solid #d8d8d8;
}

コピーしたCSSを今から紹介するWordPressの追加CSSという場所にコピペするだけで適用されます。

追加CSSの場所は以下の通り。

WordPressのダッシュボードの「外観⇨カスタマイズ」をクリック。

追加CSSの項目をクリックすると下記画面になるので、赤枠の部分にコピペする感じです!最後に右上の「公開」をクリックすると貼り付けたCSSが適用されます。

たっつー
たっつー

これだけで画像に枠線がついているはずです。確認してみましょう!!

関連記事

[word_balloon id="unset" src="https://memoriesto-go.com/wp-content/uploads/2020/03/スクリーンショット-2020-03-03-19.17.1[…]

最後に:読みやすい記事作成のために枠線を取り入れよう!!

今回はTHE THOR(トール)の画像に枠線をつける方法を紹介しました。

THE THOR(トール)は痒いところにも手が届く素晴らしいWordPressテーマですが、今回紹介した以外にも細かいけれどより良くなるカスタマイズ方法を下記記事にて紹介しています。

 

関連記事

こんにちは、たっつー(@utakata_blog)です。 この記事では実際にTHE THOR(トール)を利用している僕がよりよいサイト作りのために取り入れているカスタマイズを紹介します。 当ブログ(ウタカ[…]

 

今回は以上です。

関連記事

[word_balloon id="unset" src="https://memoriesto-go.com/wp-content/uploads/2020/03/スクリーンショット-2020-03-03-20.42.33.pn[…]

最新情報をチェックしよう!
>当ブログは「THE THOR」で作成しています!!

当ブログは「THE THOR」で作成しています!!

「THE THOR」は集客・収益に徹底的にこだわったテーマです。 MP・PWAなど最新鋭の技術を搭載し、サイトの表示速度はWordPressテーマの中でもトップクラス。

CTR IMG