HTMLだけで出来る、タイトル付きの可愛い点線の枠の作り方!(。・ω・)ノ゙

ワードプレス
この記事は約9分で読めます。

おはにちばんは、ふみえです(。・ω・)ノ゙

皆さんいかがお過ごしでしょうか??

最近少しずつブログのデザインををいじってるんです(・ω・)ノ

例えば、

「抜粋」っていうのを使うようにしてみたり、

スマホではサイドバーにあるやつを表示しないようにしたり、

オススメ記事に枠を付けてみたり!(=゚ω゚)ノ

・・・実はオススメ記事の枠が結構気に入ってるので、

おすそ分けしようと思います(●´ω`●)

 

広告

オススメ記事の枠を作ってみた!

★★こんな記事も書いています★★

↑これですこれ!!(/・ω・)/

 

何が気に入ってるかってね!

枠の上にさらに枠があるでしょ!!

なんだか良くないですか!?(=゚ω゚)ノ

それにこの枠はCSSじゃなくて、

HTMLだけで作ってるんですよ!!(^ω^)

おかげで全然ややこしくなくて、

とっても簡単なんです♪(●´ω`●)

 

枠のHTMLを見てみる

さっきの枠のHTMLは、

<div style=”height: 12px;”><span style=”background: #603c21; padding: 6px 10px; border-radius: 5px; color: #ffffff; margin-left: 10px;”>★★<span class=”bold”>こんな記事も書いています</span>★★</span></div>
<div style=”padding: 10px 5px 10px 10px; border-radius: 10px; box-shadow: 5px 5px 5px #AAA; border: 5px dashed #603c21; text-align: center;”>

<a href=”https://eimuf.com/website/simplicity2/theme-change-4558.html”>テーマをsimplicity2に変えてみた!</a>

<a href=”https://eimuf.com/website/simplicity2/chocolat-4809.html”>simplicity2をchocolatっていうテーマに似せてみる!</a>

<a href=”https://eimuf.com/website/html-css/youtube-lightweight-3111.html” target=”_blank” rel=”noopener noreferrer”>youtubeを軽くして(?)埋め込む方法!</a>

<a href=”https://eimuf.com/website/plugin/web-hakusyu-2770.html” target=”_blank” rel=”noopener noreferrer”>web拍手のプラグインを使ってみました</a>

<a href=”https://eimuf.com/website/plugin/comment-plugin-3650.html” target=”_blank” rel=”noopener noreferrer”>サイドバーにコメントを表示させる便利なプラグイン!</a>

</div>

こんな感じになっています(・ω・)ノ

 

ちょっとわかりにくいので、

文字リンクの部分を消してみると、

<div style=”height: 12px;”><span style=”background: #603c21; padding: 6px 10px; border-radius: 5px; color: #ffffff; margin-left: 10px;”>★★こんな記事も書いています★★</span></div>
<div style=”padding: 10px 5px 10px 10px; border-radius: 10px; box-shadow: 5px 5px 5px #AAA; border: 5px dashed #603c21; text-align: center;”>文字リンク</div>

こんな感じです(つω`*)

これでも分かりにくいと思って、

色分けしてみたんだけど、

余計分かりにくくなったかも。。。

 

とりあえず説明してみると、

青文字の部分が「★★こんな記事も書いています★★」っていうところで、

赤文字の部分が「点線の枠」のところです(^ω^)

そうなんです!!

これは2種類のHTMLを組み合わせて使ってるんです!(=゚ω゚)ノ

 

「★★こんな記事も書いています★★」っていうところ

まずは、

★★こんな記事も書いています★★

 

この部分から説明します(・ω・)ノ

 

この部分のHTMLは、

<div style=”height: 12px;”><span style=”background: #603c21; padding: 6px 10px; border-radius: 5px; color: #ffffff; margin-left: 10px;”>★★こんな記事も書いています★★</span></div>

こうなっています。

んー。

何が書いてあるのか全く分かりませんね(;´・ω・)

だけど、

よく分かんなくてもコピペするだけで、

★★こんな記事も書いています★★

 

これを作ることが出来ちゃいます!!(/・ω・)/

もちろん文字を変えることも出来ますよ(^ω^)

 

私は茶色い背景に白い文字にしてるんだけど、

他の色を使いたい!!!

っていう場合は、

「#603c21」ってところを変えれば背景の色が変わります(・ω・)ノ

「#ffffff」ってところを変えれば文字の色が変わります(・ω・)ノ

※「カラーコード」でググれば分かりますよ~!

ぜひ色んな色を試してみてください(*´ω`*)

 

点線の枠のところ

次は、

文字リンク

この点線の枠の部分について説明してみます(・ω・)ノ

 

この部分のHTMLは、

<div style=”padding: 10px 5px 10px 10px; border-radius: 10px; box-shadow: 5px 5px 5px #AAA; border: 5px dashed #603c21; text-align: center;”>文字リンク</div>

こんな感じです(・ω・)ノ

これまた何が書いてあるのか分かんないんだけど、

色を変えたい時は、

「border: 5px dashed #603c21」ってところの、

「#603c21」を変えればいいだけです!(^ω^)

 

ちなみに、

「border: 5px dashed #603c21」ってところの、

5pxってところの数字を変えたら、

線の大きさも変えられますよ~!(/・ω・)/

テスト用の記事を作って、

色々変えてみるのも面白いかもしれません!

 

使い方

私は「AddQuicktag」っていうプラグインを使っています。

だから「AddQuicktag」での使い方を書いておきますね!(^ω^)

なお、コピーする時は、

これは画像です

赤丸のところを押して、

「Ctrl」と「C」を同時に押すとコピーできます(^ω^)

 

「AddQuicktag」で設定する

「AddQuicktag」の設定画面の、

「開始タグ」ってところに、

<div><span>★★こんな記事も書いています★★</span></div>
<div>

これをコピペして、

「終了タグ」ってところに、

</div>

これをコピペするだけです(^ω^)

必ずこれをコピーして使ってください!
じゃないと使えません!!(ヽ”ω`)

 

「AddQuicktag」の方はというと、

こんな感じです(・ω・)ノ

好きな名前を付けるのと、一番右側にチェックを入れるのをお忘れなく!

これで枠が使えるようになりました!!

早速使ってみましょー!!

 

実際に使ってみる

先に、枠の中に入れたい文字を書いて、

ドラッグして選択します。

その状態で、

「AddQuicktag」で登録した名前のやつをぽちっとするだけです(^ω^)

簡単でしょ♪

1回登録しちゃえば、後はこんな感じで使えばいいので、

記事を作るのも簡単です!

 

・・・難しそう。

って思った方も実際に使ってみると、

とっても簡単なんですよ~(つω`*)

騙されたと思って使ってみてください!

 

まとめ

1年後はまた変わってるかもしれないけど、

今はこの枠が気に入ってるので、

じゃんじゃん使っていきます!(+・`ω・)b

 

今回も最後まで読んでくださってありがとうございました(^ω^)

3
この記事を書いた人

山口県に住んでるぽっちゃりキャバ嬢。左利き。好きな食べ物はいなり寿司。 好きな音楽は洋楽EDM。自称コスメヲタ。いつか下着のお店を作りたいと思いブログを始めたものの、最近はコスメレポばかり(つω`*)

ふみえをフォローする
ワードプレス
広告
この記事をシェア(/・ω・)/
ふみえをフォローする
関連記事と広告(●´ω`●)
関連記事と広告(●´ω`●)

ブログランキングに参加してます(●´ω`●)

未経験でもお店を持ちたいっ!

コメント