ワードプレス記事の見出しを装飾する方法!アイコンやテクスチャで強調部分を作る


ワードプレス見出し装飾画像CSS

 
ワードプレスの記事中に入れる

見出しや強調したい部分を

可愛くオシャレに装飾するカスタマイズ方法について

書いていきたいと思います。

 

例えばこのブロブでよく使っているアイコンが

これ。

このチェックは強調したい文言に使ってます

 

こういった装飾を上手く使うと

ブログがオシャレに、かつ分かりやすくなりますね。

 

有料のテーマ(テンプレート)の一部は

このような装飾が簡単にできるような

仕様になっているものもあります。

が、おそらく大多数の方は無料テーマをお使いだと思いますので

ご自身で設定していきましょう。

 

 

 

見出し装飾のやり方

 
見出し装飾のやり方には

①CSSで線やカラーを組み合わせて自分で作る方法

②アイコンやテクスチャなど無料の装飾素材を使う方法

があります。

 

このチェックは強調したい文言に使ってます

この見出し装飾は

赤チェックの画像を配布サイトから頂いて

使っているので②のやり方です。

 

この記事では

お洒落な見出しや装飾素材を配布しているサイトと

その使い方について

紹介したいと思います。

 

 

ちなみに、

①CSSで線やカラーを組み合わせて自分で作る方法

は下のサイトがすごく綺麗な装飾を提供していますので

興味のある方は覗いてみてください。

http://squeeze.jp/blog/web-design/heading-design-css-only/

 

 

お洒落な見出し・アイコン装飾素材を配布しているサイト

 
ではまず

アイコンやテクスチャなどの装飾素材を探しましょう。

 

ネット上には

お洒落な装飾素材を提供しているサイトが沢山あります。

おすすめをいくつか紹介しますね。

 

◆リヴール

http://nx.myafi.net/
 

フォント変更13
 

見出しやアイコン素材が豊富に揃っているサイトです。

いちいちオシャレ。

私も非常にお世話になってます。

 

見出しはテープ素材や紙素材、付箋など。

アイコンは押しピンやクリップ、チェックマークや矢印もあります。

フォント変更12

 

 

◆Illustrator Factory

http://studio810.sakura.ne.jp/rss_log/

 
フォント変更08

 
イラストやグラフィックスタイル、テクスチャパターンなど

を提供しているサイトです。

 

可愛らしい雰囲気のものが多く、

女性向きかな?

見出し用にはこんな素材があります。

フォント変更09

 

 

◆無料素材倶楽部

http://sozai.7gates.net/

 
フォント変更10
 

このサイトでは

ありとあらゆるアイコン素材が豊富に提供されています。

 

矢印、音符、食べもの、動物、花、キラキラ、申し込みボタン、購入ボタン、

などなど。
 

フォント変更11

 

 

装飾素材を本文記事に埋め込む方法

 
では次に

見つけた素敵な素材を

自分のブログ記事に貼り付ける方法です。

 

基本的には

あなたが素材を提供しているサイトに

貼り方が書いていることが多いですので

それを読んでそのまま真似するのが一番正確ですが

ここではその一例を書いておきたいと思います。

 

 

やり方:素材をPCにダウンロードする

 
まずは

気に入った素材をあなたのPCにダウンロードしてください。

ダウンロードボタンがある場合はそれを使い、

ない場合は右クリックで画像を保存してください。

保存形式はpngかjpgにします。

 

その素材画像をワードプレスのメディアに

新規追加します。

追加したら、そのURLをメモしておいてください。

 

 

やり方:アイコンは記事に直接コピペするだけ

 

まずは簡単なアイコンから。

 

チェックマークのアイコン

このチェックマークのようなアイコンを表示したい場合は

下記のコードを記事のテキストエディタに打ち込めばOKです。

 

<p style="padding-left:35px; background:url('メディアにアップロードした画像のURL') no-repeat 0 50%; font-size:large;">ここに文章</p>

 

『メディアにアップロードした画像のURL』は

先ほどメモしておいたURLです。

 

上のコードをクリップノートに保存しておいて

一瞬で呼び出せるようにしておくと便利です。

関連記事:トレンド記事作成の効率を3倍アップさせる無料コピペツール:クリップノートの使い方

 

 

やり方:見出しはCSSを編集

 
見出しを自分で装飾する場合はちょっと複雑で

CSSを編集します。

 

ダッシュボードの『外観』➡『テーマ編集』を開き、

スタイルCSSを編集していきます。

 

スタイルCSSに

下記のコードを加えます。

.headline {
font-size:14px; /* 文字の大きさ */
background:url(メディアにアップロードした画像のURL) no-repeat;
line-height:50px; /* 行の高さ */
padding:0 0 0 20px; /* 文字周りの余白(上 右 下 左px) */
margin:30px 0 20px; /* 画像周りの余白(上 左右 下px) */
}

 

『ファイルを更新』して保存します。

 

記事を書くときは

テキストエディタで下記のように

上で作ったheadlineというクラスを呼び出します。

<h3 class="headline">見出しタイトル</h3>

 

このやり方は

h2、h3といったタグの種類に関わらず

CSSに作った装飾のクラス(ここではheadlineというクラス)

を呼び出す形式です。

 

ですのでテキストエディタに

<h2 class="headline">見出しタイトル</h2>

とすればh2タグでこの装飾が使えます。

 

 

CSSに別のクラスを作れば

色んな装飾を呼び出すことができますよ。

(この記事は

http://nx.myafi.net/のサイトを参考にさせて頂いています。)

 

 

以上、

ワードプレスで

見出しや強調部分を装飾する方法を

ご紹介しました。

 

 


コメントを残す

サブコンテンツ

プライバシーポリシー

クレジットカード盗難

このページの先頭へ