こんにちは、roihiです。
今日もまた私(初心者)が、やっとこさっとこ簡単文字の枠線の作り方を
見つけました！
初心者が初心者のためにお伝えします！笑
こういう文字枠を作りたい
どうしたら、こういう文字の囲枠ができるの？
WordPress、THETHOR、どこかにあるのでしょう。
が、いくら探しても分からない・・・
調べました！どうやらちょっと専門的な知識が必要なの？
CSSというのを使います
えっ！と思っ方安心してください。
おばさんも出来ましたので。
私もブログを始めてから、ちょっとだけHTMLってなに？
CSSってなに？って思って、本を一冊買って勉強していました。
(まだ3分の1読んでいませんが・・・(´；ω；`)ｳｯ…)
でもそのお陰もあり、ほんのちょっとだけ言っている意味が理解できて
変なところ触っておかしくなったらどうしようという不安は少なくなりました。
ですので、安心してこれを参考にしてください。
HTMLってなに？
さくっとだけですが、安心？できるので自分の勉強を兼ねて説明します。
HTMLとは・・・
コンピューターの言語
ホームページを作ったりするのに、どこで何をする場所か(範囲)を定義
するものです。お家でいえば骨組みでしょうか。
全体のスペースに対して、ここはリビングこっちは寝室こっちは壁というように
して一つのファイルに収めます。
ヘッダー/カラム/本文/見出し/段落/画像・動画/表 など。
CSSとは？
それに対して、CSSはそれぞれのパーツに細かい設定をしてして行きます。
壁はどこからどこまで、色は何色、ドアまでの長さは。
屋根はどこからどこまで、色は何色、厚みはどうする。
のようなイメージです。
/基本構造の配置とサイズ、背景色
/テキストの色と配置
/フォントの種類、サイズ、書式
/テキスト/コンテンツの余白の調整
などをします！
そして、細かい部分の変更を表示をするには
CSSで指定したものをHTMLへ追加(合体)させる必要があります。
WordPressは優れもの
WordPressなどは、私のような超ド素人でもHTMLが分からなくても
決まったところに入力すると、綺麗に表示されているというわけです！
私の勝手な想像でしたが、もう少し操作がしやすいのかと思っていました。
wordやPowerPoint的な普通のOfficeのように・・・
そもそもの言語・記述方式が違うのでしょうね。泣
それでもちょっとづつ理解出来てきました。
CSSを追加します
ではいよいよ、CSSを追加して簡単に枠ができるようにします。
外観 >カスタマイズ >追加CSS
を選択します。
今記載されている
.waku2 {
padding: 1em;
border: 3px solid #F7B46B;
border-radius: 10px;
}
が、その記載になります。
waku2
というのは、あとで呼び出す時に必要な名前のようなものです
ここでCSSを追加したら、忘れずに「公開」を押してください。
では次に、実際にやってみましょう！
ここでは「このような枠ができます」という文字を段落に入力
しました。
その段落が選択されている状態のままで、右側の詳細設定でブロックを
選択すると下のほうに「高度な設定」というのがありますので
それを選択します。
次に、文字を入れた段落を選択している状態のまま
追加CSSという欄に先ほどの保存したCSSの名前
「waku2」
と入れます。
この段階では、見た目は変わっていませんがプレビューで見てみると
ちゃんと変わっています。
下書き保存をしてプレビューで見てみましょう。
簡単に囲枠ができましたね！
これがあるととても便利です。私もはじめは文字ばかりで何か
読みにくいと思っていましたが
最近はちょっと色々工夫できるようになりました。(^^)/
おまけ色々変えてみたバージョン
waku2 {
padding: 1em;
border: 3px solid #F7B46B;
border-radius: 10px;
}
の意味を説明します。
padding—– 文字から枠までの余白の指定ができます。
border —– 線の太さ
solid —— 色の指定
border-radius:—– 角丸の指定
の意味になります。何点か変更してみましたので比較しましょう。
まずは、今までバージョン
このような枠が出来ます。
文字と枠までの余白を1em → 5emに変更してみました。
この時は追加CSSは「waku2yohaku」の記載をします。
.waku2yoyaku{
padding: 5em;
border: 3px solid #F7B46B;
border-radius: 10px;
}
このような枠ができます。
次も文字と枠までの余白を1em → 10emへ変更してみました。
.waku2yohaku2 {
padding: 10em;
border: 3px solid #F7B46B;
border-radius: 10px;
}
このような枠ができます。
次は線の太さを3px → 10pxへ変更してみました。
.waku3line{
padding: 1em;
border: 10px solid #F7B46B;
border-radius: 10px;
}
このような枠ができます。
もう一つ、角丸を 10px → 50pxへ変更しました。
.waku4kakumaru {
padding: 1em;
border: 3px solid #F7B46B;
border-radius: 50px;
}
このような枠ができます。
最後に色の変更はお好みですが、参考まで。
| Yellow | #FFFF00 |
| Red | #FFF000 |
| Blue | #0000FFF |
| Magenta | #FF00FF |
.waku5magenta {
padding: 1em;
border: 3px solid #FF00FF;
border-radius: 10px;
}
このような枠ができます。
ちなみに色見は、インターネットで検索しても色々出てきますが
↓ここから選んでも便利です。
ブロックから文字色を選択
文字色でカスタムを選択すると、色々調合できて色指定の記述も
下に表示されます！！！
それからCSSは下段に続けて書いていって大丈夫です。
いかがでしたでしょうか。是非、参考にしてみてください。
最後までお読みいただきありがとうございました。
また、便利な方法を見つけたらご報告しますね。
それでは、またね💛