2015年06月04日06:32
ブログ記事の中に「見出し」を入れてみる
カテゴリー │■ ITのこと│はまぞうブログのこと
ご覧いただきありがとうございます。
ブログ記事を書いていると、
●見出しを入れたら見やすくなるのに！
●見出しを入れたら分かりやすくなるのに！
それも、ちょっぴり「しゃれた見出し」をつけたいと思ったことはありませんか？
テンプレートのスタイルシートを変えることなく、記事の中に「見出し」を簡単に入れることができます。
↓こんな感じの見出し、よく見ませんか？↓
イメージ的には、横長の長四角から上の横線と右の縦線をなくした枠の中に文字を入れる感じです。
この見出しを作るには、HTMLコードがちょっと多めかもしれませんが、次のコードを
入れるだけで、好きな文字サイズで好きな色を使って簡単に作ることができます。
次の図を使って、見出しを作るHTMLコードを簡単に説明すると、
①枠の左縦線の色と太さを指定します。
#009999で色を、10pxで線の太さを、solidで線の種類（実線）を決めます。
②枠の下の線の色と太さを、①と同じように指定します。
③見だしの文字を枠内のどこに配置するかを決めるために、枠の線からどの程度スペースを空けるかを指定します。
最初の5pxで枠上からのスペースを、次の0pxで枠右からのスペースを、次の0pxで枠下からのスペースを、最後の15pxで枠左からのスペース を決めます。
④見出し文字のサイズと文字を入れる行の高さを決めます。
⑤見出し文字の色を決めます。
⑥見出しに入れる文をテキストで入れます。
これで完成です。
ちょっと面倒くさいかもしれませんが、お気に入りの見出しを１回作ってしまえば、あとはコピーして見出しの文字を入れるだけで済みます。
このような見出しを入れてみたいと思う人は是非試してみてください。
● はまぞうブログ カスタマイズ ワークショップのご案内です！
★はまぞうブログ活用ワークショップのご案内★
［テーマ］ ヘッダー部分のカスタマイズ
●内容：ヘッダー画像の追加、メニューボタンの追加、テキストでのキャッチコピー挿入など
●日時：2015年 6月25日（木曜日）10:00-12:30
●場所：宮下工務店様 初生本店（くらしの広場） WiFi完備です
富塚店ではありませんのでご注意ください
開催場所へのアクセスはこちらから
●定員：6名様
●予約締切：6月23日（火曜日）
●参加費： 2,000円（説明テキストとカスタマイズ用プログラムコードもお渡しします）
●持ち物： 無線LANなどネットにアクセスできるノートパソコン（必須ではありません）
追加したいヘッダー画像ファイル（必須ではありません）
※当日、カスタマイズの方法をお聞きになるだけで、この場で作業できなくても構いません。
このワークショップは次のような方に最適です。
★ 幅の広い「スタイリッシュ」テンプレートに変更したいと考えている方
★ 使っている「スタイリッシュ」テンプレートにヘッダー画像を入れたい方
★ メニュー（グローバルナビゲーションメニュー）をつけたい方
★ ヘッダー部分にテキストでキャッチコピーを入れたい方
※「スタイリッシュ」以外のテンプレートをご使用の方でも、もちろん参加できます。
ヘッダー部分のカスタマイズイメージは、パソコンでここをクリックしてご覧ください。
ワークショップですので、座学に加えてヘッダー画像などを追加する作業を行います。
この場で作り込めなくても、説明テキストとカスタマイズ用プログラムコードをお渡ししますので、ご自宅に帰られた後でも、ご自分で自由に設定できます。
この機会に、是非「はまぞうブログ活用ワークショップ」に足をお運びください。
↓お申し込みはこちらからお願いします↓
ブログ記事を書いていると、
●見出しを入れたら見やすくなるのに！
●見出しを入れたら分かりやすくなるのに！
それも、ちょっぴり「しゃれた見出し」をつけたいと思ったことはありませんか？
テンプレートのスタイルシートを変えることなく、記事の中に「見出し」を簡単に入れることができます。
↓こんな感じの見出し、よく見ませんか？↓
見出しを入れてみる
イメージ的には、横長の長四角から上の横線と右の縦線をなくした枠の中に文字を入れる感じです。
この見出しを作るには、HTMLコードがちょっと多めかもしれませんが、次のコードを
<div style="border-left: #009999 10px solid; border-bottom: #009999 2px solid; padding: 5px 0px 0px 15px; "><span style="font-size:30px;line-height:30px;"><span style="color:#0000ff"><b>見出しを入れてみる</b></span></span></div>
入れるだけで、好きな文字サイズで好きな色を使って簡単に作ることができます。
次の図を使って、見出しを作るHTMLコードを簡単に説明すると、
①枠の左縦線の色と太さを指定します。
#009999で色を、10pxで線の太さを、solidで線の種類（実線）を決めます。
②枠の下の線の色と太さを、①と同じように指定します。
③見だしの文字を枠内のどこに配置するかを決めるために、枠の線からどの程度スペースを空けるかを指定します。
最初の5pxで枠上からのスペースを、次の0pxで枠右からのスペースを、次の0pxで枠下からのスペースを、最後の15pxで枠左からのスペース を決めます。
④見出し文字のサイズと文字を入れる行の高さを決めます。
⑤見出し文字の色を決めます。
⑥見出しに入れる文をテキストで入れます。
これで完成です。
ちょっと面倒くさいかもしれませんが、お気に入りの見出しを１回作ってしまえば、あとはコピーして見出しの文字を入れるだけで済みます。
このような見出しを入れてみたいと思う人は是非試してみてください。
● はまぞうブログ カスタマイズ ワークショップのご案内です！
［テーマ］ ヘッダー部分のカスタマイズ
●内容：ヘッダー画像の追加、メニューボタンの追加、テキストでのキャッチコピー挿入など
●日時：2015年 6月25日（木曜日）10:00-12:30
●場所：宮下工務店様 初生本店（くらしの広場） WiFi完備です
富塚店ではありませんのでご注意ください
●定員：6名様
●予約締切：6月23日（火曜日）
●参加費： 2,000円（説明テキストとカスタマイズ用プログラムコードもお渡しします）
●持ち物： 無線LANなどネットにアクセスできるノートパソコン（必須ではありません）
追加したいヘッダー画像ファイル（必須ではありません）
※当日、カスタマイズの方法をお聞きになるだけで、この場で作業できなくても構いません。
このワークショップは次のような方に最適です。
★ 幅の広い「スタイリッシュ」テンプレートに変更したいと考えている方
★ 使っている「スタイリッシュ」テンプレートにヘッダー画像を入れたい方
★ メニュー（グローバルナビゲーションメニュー）をつけたい方
★ ヘッダー部分にテキストでキャッチコピーを入れたい方
※「スタイリッシュ」以外のテンプレートをご使用の方でも、もちろん参加できます。
ヘッダー部分のカスタマイズイメージは、パソコンでここをクリックしてご覧ください。
ワークショップですので、座学に加えてヘッダー画像などを追加する作業を行います。
この場で作り込めなくても、説明テキストとカスタマイズ用プログラムコードをお渡ししますので、ご自宅に帰られた後でも、ご自分で自由に設定できます。
この機会に、是非「はまぞうブログ活用ワークショップ」に足をお運びください。
↓お申し込みはこちらからお願いします↓
