賢威7(ワードプレス)で文字を囲み枠線で装飾する簡単な方法!

スクリーンショット 2016-02-17 21.17.38

 

前回はCSSにコードを記述して記事内の文字を影枠の囲み線で装飾する方法をご紹介しました。

関連記事:賢威7の影枠囲み線で記事を装飾する方法!CSS記述あり!

 

今回はもっとシンプルに文字を囲むだけのやり方になります。

(賢威7のカスタマイズというよりかはワードプレスの文字装飾です)

こちらはCSS記述なしで直接テキストに入力してください。

文字を囲み線で囲もう!

記述するコードは以下の通り

 

<div style=”border:1px solid #999999; margin: 10px; padding: 10px;”>

-ここに文章をいれてください-
</div>

 

実際に見てみるとこんな感じ

 

スクリーンショット 2016-02-17 21.16.11

 

いやもうシンプル is The BESTと言わんばかりの呆気なさですね(笑)

しかし枠線は大事な部分を強調する大事な役割でもありますので必要に応じて使ってくださいね。

これだけだとシンプルすぎるので、簡単な化カスタマイズ方法を載せておきます。

 

 

□線の太さや種類を変えたい時は以下に変更してください。

 

・1px(線の太さ)

 

・solid の部分を変更(線の種類の変更)

solid:1本線

double:2本線

groove:立体的に窪んだ線

ridge:立体的に隆起した線

inset:上と左のボーダーが暗く表示され、下と右のボーダーが明るく表示され、ボーダーで囲まれた領域全体が立体的に窪んだようになります。

outset:上と左のボーダーが明るく表示され、下と右のボーダーが暗く表示され、ボーダーで囲まれた領域全体が立体的に隆起したようになります。

dashed:破線表示

dotted:点線表示

 

関連記事:賢威7の見出しデザインカスタマイズ30選まとめ!

関連記事:賢威7ソーシャルボタン(SNS)をバイラルメディア風にしておしゃれにする方法!

 

賢威7カスタマイズ大図鑑へ戻る

副業から月収10万円以上を安定的に稼ぐ力を身につける無料メルマガ講座

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-10-16-37-15

一緒にビジネスや遊びを全力でシェアしよう!お気軽に申請どうぞ!

スクリーンショット 2016-08-17 0.43.46

One Response to “賢威7(ワードプレス)で文字を囲み枠線で装飾する簡単な方法!”

  1. アキノリショーヤマン より:

    はじめまして。アキノリです。
    今回このページを見て登録させてもらったものです。

    キラさんのページで
    賢威7(ワードプレス)で文字を囲み枠線で装飾する簡単な方法!を

    見て、ワードプレス7で囲み枠線のコードを使用して

    記事内にて、「テキスト」にコード文を入力。

    そして、「ビジュアル」に切り替えるとなぜか反映されません。

    さらに入力したコード文字が変わってしまいます。

    そして、テキストを見てみると

    -ここに文章をいれてください-

                    ↓

    -ここに文章をいれてください-

    になぜか切り替わってしまいます。

    いろいろプラグインやワードプレスの互換性について調べましたが、解決できずに

    質問をさせていただきました。

    もしわかりましたら、ご回答いただければと思います。

    ちなみに導入プラグインは以下になります。

    Contact Form 7
    Auto Post Thumbnail
    Broken Link Checker
    Google XML Sitemaps
    PubSubHubbub
    Thumbnail For Excerpts
    TinyMCE Advanced
    Ptengine
    All in One SEO Pack

    TinyMCE Advancedもいじってみましたができませんでした。

    またお時間ありましたらお願いします。

コメントを残す

自己紹介・挨拶がないコメントに関しては返答を控えさせて頂きます。
サブコンテンツ

一緒にビジネスや遊びを全力でシェアしよう!お気軽に申請どうぞ!

スクリーンショット 2016-08-17 0.43.46

キラの公式LINE@

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-29-7-40-42

このページの先頭へ