コンテンツの修飾方法

是非HTMLで制作して欲しい

diy-617763_1280

WordPressの登場でFTPなどの知識が無くても簡単にホームページ制作ができるようになりました。

しかし、ちょっと気の利いたコンテンツを作ろうと思ってもWordPress標準のビジュアルエディターでは自ずと限界があります。

例えば、サイトのイメージに大きく影響するヘッドラインなどはHTMLでなければ実現できません。

HTMLはプログラム言語か何かで理科系のツールの様に思われている方も多いと思いますが、『、』や『。』の句読点の様な文章の前後に着ける記号に過ぎません。

HTMLの教科書を使って勉強するとたくさんの知識を覚えなければなりませんが、実は4つのことを覚えるだけでほとんどの事は出来てしまいます。

詳しくは、ワードプレステーマ 覚えるHTMLは4種類をご覧ください。

是非、HTMLを使って、充実したコンテンツを制作してください。

 

ヘッドライン

headline1deco2

ヘッドラインはサイトのイメージを左右する重要なものです。

同じ内容のコンテンツをヘッドラインだけ変えると全く別のサイトの様に感じるくらいです。

このような重要なヘッドラインですから時間をかけてじっくりと修飾をするべきです。

サイズを大きくしたり、色を変えたり、背景画を使用したり・・・

また、ヘッドラインはいくつかの種類を設定できます。

HTMLではh1からh6までの6種類が用意されています。h1は歴史的に常用しないので、実質はh2~h6の5種類です。

更に、ヘッドライン修飾に時間をかける理由としてはレスポンシブWebデザインの考慮もあります。

最近はスマホで閲覧する方が多いためレスポンシブWebデザイン時のヘッドラインの見栄えも重要です。

ヘッドラインの修飾にはHTMLやCSSの知識が必要ですが、TAテーマ001を使用するとブラウザからの操作だけでレスポンシブWebデザインも含めてあらゆる修飾が可能になります。

TAテーマ001のヘッドライン修飾の詳細は、ワードプレステーマ ヘッドライン(見出し:h2~h5)に自由を!をご覧ください。

ランディングページ等で多用されるヘッドライン修飾の詳細は、ワードプレステーマ ランディングページの装飾ヘッドラインをご覧ください。

 

パラグラフ

texture-1362872_1280

ホームページのコンテンツ文章は見やすさのためにパラグラフを意識するべきということは前述しました。

しかし、見栄えの良いパラグラフを表現するためにはどのようにすれば良いのでしょうか?

具体的には、CSSに以下の様な記述をして<p></p>で対応箇所を挟みます。

p {
 margin-top: 0.5em;
 margin-right: 0;
 margin-bottom: 1.2em;
 margin-left: 0;
 line-height: 1.3em;
}

<p></p>で対応箇所を挟むことは慣れの問題なので良いでしょうが、CSSの記述がどうも厄介です。

しかし、TAテーマ001を使用するとCSSの知識無しにブラウザからの操作だけでパラグラフの詳細設定が可能になります。

TAテーマ001のパラグラフ修飾の詳細は、美しい文章を演出する HTMLタグ(パラグラフ)をご覧ください。

 

画像と文字の回り込み

scrabble-921254_1280

コンテンツ制作の構成でコンテンツの決まった位置に画像を挿入する旨の説明をしました。

しかし、これをWordPressのビジュアルエディターなどで実現しようとすると意外と難しいです。(できないことは無いですが思い通りにならない場合が多い・・・)

だからと言ってHTMLとCSSで行うには覚えることが多かったり煩雑になります。

そこで、TAテーマ001では最低限のHTML記述で実現可能なショートコードと呼ばれる機能を用意しています。

TAテーマ001の画像と文字の回り込みの詳細は、ワードプレステーマ 画像と文字の回り込みをご覧ください。

 

アイキャッチ画像

アイキャッチ画像はWordPressに用意された標準機能のひとつです。(有効にするためにはfunctions.phpに記述する必要があります)

しかし、このアイキャッチ画像をどのように表示させるかは使用しているテーマによります。

アイキャッチ画像の使い方としては、トップページなどのダイジェスト(新着情報など)やアーカイブ一覧にサムネイル画像を表示させたり、投稿記事(固定ページも可能)自体に表示させたりします。

TAテーマ001では各種ダイジェストやアーカイブ一覧などにサムネイル画像を表示できます。そして、固定ページ、投稿記事への表示も設定できます。

TAテーマ001のアイキャッチ画像の各種ダイジェストやアーカイブ一覧などにサムネイル画像表示の詳細は、『TAテーマ001』の取扱い説明(基本操作)ダイジェスト記事デザイン設定をご覧ください。

TAテーマ001のアイキャッチ画像の固定ページ、投稿記事への表示の詳細は、『TAテーマ001』の取扱い説明(共通設定)固定ページ・投稿記事・一覧をご覧ください。

  • LINEで送る
ta_thm001_feature
ta_thm001_blog_smallta_free_pics
ta_thm001_downloadta_thm001_manualta_designing