cssの記事一覧

改行を広く、連続でとりたいなぁと思うことがよくあるのですが、
WordPressは連続改行はできないようです。基幹的な問題で、WordPressは、
デフォルトの状態で連続改行はできないようになっているようです。

複数改行できるプラグインがあるようですが、WordPressの基幹部分に影響がでない
とも言いきれないので、今回はプラグインの解説はしません。というか、皆さん知ってますからね。
改行プラグインの使い方については、よそのブログでも参考にしてください。

僕が今回試してみたのは、
CSSを利用して、padding-topを調整する方法です。

---

---

複数改行したい場所の文字列を、上記の＜p styleから始まるタグで囲みます。

emの部分は、お好みに合わせて、その都度ご自分で調整してみてください。
広くとりたいならば、値を大きくしてください。微調整できますから。
marginでも可能。僕はとりあえず、paddingを使ってみました。

実際に使ってみると、こんなふうになります。

---

---

綺麗に複数改行されたように見えると思います。
実際は【BRタグ】を挿入しているわけではないので、複数改行とは言えないですが、
より自然に見えると思います。結構使えるテクニックなので、覚えておくといいかも。

それと、もうひとつネタ。
ビジュアルエディタを使用する場合、Enterは、改行ではな＜P＞タグで括られる。
これを回避する方法としては、Shiftキー＋Enterで改行が入る。
＜BR＞タグですね。ビジュアルエディタを多用する人には、当り前の知識かも知れませんけどね。

皆さんの参考になれば幸いです。
失礼します。

改行

サイト制作をしていて、簡単に見出しを綺麗にすることって意外と
難しいですよね。headerに使用する画像ならば、多少時間はかかっても
良いのですが、見出しの画像まで作っていると非常に手間がかかります。

【今回、CSSを用いて簡単に、シンプルではありますが、どんなサイト
デザインにも合いそうなものを紹介します。】既に既出の部分もあるでしょうが、備忘録と言うことで。

全て画像は用いていません。CSSでコントロールしてますので、シンプルにまとまっています。逆にシンプルだからこそ新鮮にうつります。

baseとなる、CSSはこちらになります。お使いのスタイルシートにでも張りつけて、ご自分のお好みに
合わせて細かく調整してみてください。

---

h2{
margin: 0 0 1.7em 0;
padding: 0.1em 10px;
border-top: 0px solid #000;
border-right: 0px solid #000;
border-bottom: 1px solid#000;
border-left: 2px solid #000;
background: #fff;
font-size: 1.4em;
font-weight: bold;
line-height: 1.4em;
color: #000;
}

簡単な説明だけしておきます。
borderの部分は、枠のことです。値を大きくすれば太くなります。

font-size　文字の大きさ
line-height　高さ

一度全部の値を変更してみて、ご自分で確認してみると分かりやすいと思います。

---

破線や、点線で表現しようと思えば、borderの部分を変更すれば可能。

dashed(破線)
dotted(点線)

---

backgroundの部分に、好きな色を指定すれば、下記のようにも変更できます。
若干青みをかけてます。

---

アイデア次第では、他にも色々面白そうな見出しが作れると思いますので、是非挑戦してみてください。

見出し関連記事一覧

タイトル・見出しに使えるデザインまとめ | DesignWalker
見出しをCSSでシンプルに装飾するtips – EC studio デザインブログ

css