ボックススタイルの文字変更

Question

###前提・実現したいこと

ボックススタイルの「POINT」というラベル部分のタイトル文字を
好きな文字に変更してみたいのですが
CSSのどの部分をどのように弄ればよいのでしょうか

よろしくお願い致します。

###該当のソースコード

.box27 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #62c1ce;
}
.box27 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box27 p {
    margin: 0; 
    padding: 0;
}

###該当のソースコード

<div class="box27">
    <span class="box-title">ここにタイトル</span>
    <p>ここに文章</p>
</div>

Comments

[kei344]

「ボックススタイル」とはなんでしょう。テーマでしょうか、特定のプラグインでしょうか。その場合は入手先をリンクつきで質問文に追記してください。

[MaUU]

ありがとうございます。正式な名前はわかりませんが、参考にしたサイトにボックススタイルと書かれていたもので。記事内で飾る枠のことです。「https://saruwakakun.com/html-css/reference/box」こちらが参考サイトになります。

Answer 1

動くサンプル：https://jsfiddle.net/kaLkyty8/

---

提示されたHTMLの「ここにタイトル」部分を書き換えればよいです。

Comments

[MaUU]

ありがとうございます。プラグインを使って簡単に呼び出したいので、CSSのほうでの設定のやり方が知りたいのです。

[kei344]

「CSSのほうでの設定」とは？もう少し具体的にしてください。

[MaUU]

頭悪く、詳しくもないもので、具体的をどう具体的に書くのかどう説明してよいのわからず;; わかりずらかった様ですみませんでした。お陰様で無事、解決できました！ありがとうございます。

Answer 2

HTMLも提示して頂いた方が、より良い回答を得れると思います。

一般的にCSSでフォントの種類を変えるにはfont-family:'***（任意の指定フォント）'; と該当箇所に記入すればフォントが変わります。
ただし、サイト等で公開する場合、閲覧者全てが任意の指定フォントで表示可能かどうかは、閲覧者の環境により異なりますので、webフォント等を考慮する必要があります。

Comments

[MaUU]

ありがとうございます。HTMLも追記させていただきました！フォントの種類ではなく「POINT」という部分を「好きな文章」に変更したいのです、、よろしくお願い致します。

[yoshinavi]

質問者さんは上記のコードを試して見ましたか？「ここにタイトル」部分が「POINT」部分です。ここに任意の文字を入れてみてください。

[MaUU]

ありがとうございます。プラグインを使って簡単に呼び出したいので、CSSのほうでの設定のやり方が知りたいのです。

[yoshinavi]

参考サイトの「POINT」部分を他の文字に変えるのはHTMLでの「ここにタイトル」の部分に書くしかありません。
CSSはその記入した文字に対しての装飾の設定を決めるだけです。
文字を大きくしたり、色を変えたりはできますが、文字そのものの記入はHTMLとなります。
kei344さんもおっしゃってますが、質問者さんの意図が今一つ理解出来ておりませんので、具体的に細かくお願いいたします。

[MaUU]

そうなんですか！CSSの方での設定がそもそも不可ってことなんですね！
とても参考になりこれで前に進めます。
ご丁寧にどうもありがとうございました！！

[yoshinavi]

解決されて何よりです。
HTML・CSS、そこにJavascript等が入ると覚える事がたくさんあり「？？？」かも知れませんが、頑張ってください。

[MaUU]

本当にありがとうございました！
ほんとこの時点で行き詰まっている時点で先行き不安ですが;;この場所があるので初心者としてはとても心強いです。きっとまた理解不明な質問等してるかと思いますが、もしご教示いただける際はご指摘含めどうぞよろしくお願い致します。