金利の変動

記事の文字装飾 HTMLで表示させる方法とは?(HTML・CSS基礎)

賢威テンプレートは、記事の文字装飾もデザイン性がたくさん含まれています。

 

賢威6.1にバージョンアップされてからも、
それは健在!!っていうか、見せるブログ記事になるように、
ポイントマークなどのデザインも豊かになりました。

 

ですがどうやって記事に表示させるのか?
これ、よくわからない方多いですよね?

 

記事に反映するために、基本的なHTMLコードをご紹介しますね。

 

 

記事内の文字装飾は、ブログのPVも延ばし、
また、滞在時間も延ばしてくれるので、濃いファンの獲得につながります。

 

 

文章を、ただただ書くだけでなく、
改行やメリハリをつけると、読みやすいですよね?

 

 

ブログを育てていくならば、記事を見せる工夫も大事!!

 

賢威は、いろいろな文字装飾のほかにも
CSS内でデザインを工夫してくれています。

 

  • リスト表示
  • ポイント画像
  • 表組
  • 引用

 

上のリスト表示も、わたしとっても気に入っていて、
良く使うので、ちょっと変更したんですが、
ポイント画像などは、読ませたい場所につけるだけで目に留まりやすい。

 

また、画像もプリティ―の場合は、可愛くなりました。

例えば、こんな感じで・・・・

ポイントです。

チェックです!!

初心者マークも付けたりできます。

 

ちょっと可愛くって、使いたくなりますよねー。

記事を書くときに、文字を大きくしたり色を変えたり(文字装飾)
文章の前にポイント画像を置いたりするためには、
記事内で、タグ(コード)を指定しなければ、表示されません。

 

賢威を購入すると、購入者専用のサポートサイトがあるんですが、
ダウンロードと一緒に、文字装飾の表示の方法も細かく書かれています。

 

 

が、気づかなかったり、読まなかったりします。

なので、簡単なコードですので覚えて記事を書くときに、役立ててね。

 

 

他のワードプレスのテンプレートでも、
コード表示は一緒ですので、覚えておくと違うテンプレートでも応用可能です。

 

文字装飾のコード表示

賢威テンプレートの場合、CSS(スタイルシート)だけでも
いくつかのファイルに分かれています。

 

「テーマの編集」から、右サイドの一番下のスタイルのファイルが、
すべてデザインを設定してあるファイルです。

賢威スタイルシート

← 文字装飾の設定に関しては、
左図のadbanced.css ファイルにすべて記載があります。

※design.cssは全体のデザインとなります。

 

 

 

 

 

ここで、文字の色や大きさ・余白・回り込みの指定がされていますので、
これを記事に表示させる時には、記事投稿(HTML)の中で、
呼び出さなければ表示されません。

 

こういうCSSをHTMLへ呼び出すときには、
HTMLコードを使います。

 

HTMLコードは、文字をどのように表示させるかといったプログラミング用語です。

 

難しいことは解らなくても、基本のみ覚えておくといいです。

 

Pタグは、よく使うんですがこれ段落です。
記述の方法は、すべて<タグ>囲みで行い</タグ>で閉じます。※基本なので覚えましょう。

 

 

<p>ここにテキスト</p>

これで、1行です。

 

テキストの装飾は、CSSが設定していない場合は、
<font></font> タグで指定できます。

 

形式は、こうです。

<font 属性名=”属性値”> テキスト </font>

属性というのは、プロパティ―のことなんですが、
例えば色を指定したい場合、属性名は、色つまりカラー(color)のことです。
なので、フォントの色を、○○色にします。

というのが、上のHTML表記ということです。

なので、文字の色を変更したい時は、

<font color> テキスト </font> という表記方法となります。

 

この装飾の部分を、1つのファイルにまとめて設定してあるのが、
CSSファイルだと思ってください。

 

CSSの記述のことは、専門的になってしまうので解説はしませんが、
要素(タグで囲まれた範囲(領域)のこと)をclass属性(分類)で設定できます。

 

そこで、HTMLで表示する場合、このclassを使って呼び出して表示させます。

 

賢威テンプレートのスタイルシートでは、class属性を使って指定してありますので、
部分的な装飾を行う場合に、これを指定してあげればOK!!

 

例えば・・・・

  • 文字の大きさを細かく指定する場合
  • 文字の色を変更する場合
  • 文字を太くする場合

 

上記を1つのタグで呼び返すことができます。

 

このようになります。

 

このテキストを、フォントサイズ16ポイントで赤で太字にする。

 

上記の場合は、こんなタグです。

 

<p>このテキストを、<span class=”f16pt red b”>フォントサイズ16ポイントで赤で太字にする。</span></p>

 

段落全部指定する場合は、<p class=”CSSの指定”></p>

細かい部分を指定する場合は、<span class=”CSSの指定”>
テキスト</span>

 

大まかに分けると、上記のように使い分けるといいでいいと思います。

 

 

 

良く使う文字装飾

賢威テンプレートの場合は、adbanced.css ファイルに指定がすべて書かれているので、
良く使うものに関しては、PC付箋やメモを使ってデスクトップ上に保存しておき、
使う時に確認しながら、入力するということになります。

 

 

一部抜粋していますので、参考にしてください。

フォントサイズ f8pt ~f24pt
フォントカラー red(赤)blue(青)orange(橙)
pink(ピンク) yellow(イエロー)
蛍光色で文字を囲む box-yellow (黄色)box-aqua(水色)
box-gray(灰色) box-red(赤色)

 

 

上記の文字装飾は、きっと記事の中でたくさん使うと思いますので、
表示方法のコード形式を覚えて、使ってみてください。

 

 

ポイントね

 

ぜひ参考にしてくださいね。
 
 
 
 

コメントを残す

サブコンテンツ

このページの先頭へ