StrawMan Templateで大事な記事の見た目を整える方法
2019/11/19 20:06
0
今回は、StrawMan Templateで重要度の高い記事を整える方法を解説します。
重要度の高い記事というのは、作者ページ・作品一覧のようなまとめ記事を指しています。
これらの記事を目次やHTMLで整え、googleに正しく認識してもらえるようにする方法を紹介します。
ブログ形式は、記事の集合体になりがちですので目当ての記事が探しにくいという弱点があります。
その対策として、タグ機能が内蔵されていますが、量が増えると分かりづらいのは変わりません。
そこで、StrawMan Templateではメニューを標準装備。
各テーマのまとめ記事をメニューに登録し、webサイトテイストなわかりやすいブログ作りが出来るようにデザインされています。
正直な話、記事を整えるにはそれなりの手間がかかります。
ですので、整えるのはまとめ記事や外向けのメニューに登録するような記事だけにし、読者とわいわいやっているような内輪向けの記事は気軽に書くことをお勧めします。
少々ややこしいですが、一度整えたあとはコピペで量産できますので是非チャレンジしてみてください。
後述しますが、見た目以外にも大きな恩恵がありますので騙されたと思って是非～～～
見出しとは、項目別に区切りをつけるタイトルや章のようなものをhtmlで再現したものです。
見出しサンプル↓
見出しサンプル↑
コードを書き出すと
このように記述しています。
これが見出しです。
見出しには順番があって、記事のタイトルがh1、記事内の大見出しがh2、大見出しの中の見出しがh3という風に使用します。
イメージ
h1
h2
h3
h4
h5
フォルダの階層のようなもの？
ｈｔｍｌの記述
実際の表示
h1には装飾を使っていませんが、h2とh3はcssで装飾を加え、区切りをわかりやすくしています。
見出し装飾のサンプルサイトを紹介しますので、リンク先からお好きなものを選んでください。
（コードを表示ボタンを押すとコードが展開されます）
気に入った装飾を見つけたら、FC2管理画面→テンプレートの設定
スタイルシート編集の一番下にコピペしていきます。
なお、サンプルサイトではh1への装飾になっていますのでh2やh3と装飾したい見出しに変更。
#FFC778などのカラー指定部分は削除するか、ライトテーマとダークテーマで馴染むカラーに変更してください。
例えば
↓
h1をh2に、カラー指定をOFF
↓
カラーを変える場合は、#6594e0部分をお好みのカラーコードで上書きします。
以上が見出しの装飾です。
なお、イマイチしっくりこなくても構わないので装飾してください。
見出し部分のcssを書き換えることで、全記事の見出しが一発で描き変わります。
重要なのは、大事な記事はh2h3を使うこと。
これをやっておけば、記事ごとに書き換える手間とおさらばです。
記事上に目次を置き、どんな項目があるのかを提示し、各項目へジャンプできるように設定します。
例えば作者情報ページを作ると仮定して…。
こんなところでしょうか？
この目次にジャンプ機能を付けて汎用性を持たせたものがコチラ。
実際の表示
目次内のタイトルAを押すと、h2のタイトルAにジャンプします。
タイトルにある、a1が移動元と移動先を示していますので、コピペで項目を増やし、項目名を変更しa1部分を適当な文字列に書き換えることで完成です。
あとは、h2の下に内容を書くだけです。
h3にジャンプ機能を入れるときは、h2のように書き換えればOKです。
h2だけで見出しが足りる時はh3を消してください。
目次の項目が多い場合は、目次に戻るを設定するのもスマートです。
もくじに戻る
modorururuへジャンプするように指定してみました。
この機能を使う場合は、以下のコードをコピペすることでサンプルコードが有効になります。
（FC2管理画面→テンプレートの設定→スタイルシートの編集の一番下にコピペ→更新）
背景色は標準のStrawMan Templateに合わせてありますので、お好みのカラーへ変更してください。
（例：ライトテーマの目次背景色を変えるなら、#eeeをお好みのカラーコードへ書き換え）
以上です。
もくじもまた、見出しと同じように一度設定してしまえばcssの修正で全記事書き換わります。
機能がhtmlだとしたら、cssは装飾です。
いまいちピンと来なくてもとりあえず使っておけば、私のように直したいけど600記事手打ちで修正するなんて無理！なんてことがおこらないので安心です。
見出し・もくじ・ジャンプを設定すると見た目が改善され、ブログが分かりやすくなりユーザーにアピールしやすくなることはご理解いただけたと思います。
話がややこしくなるので伏せましたが、もう一つ重要な目的があります。
それが、googleに良記事と判断してもらい、検索順位を押し上げるために有効な記事構成を作り上げることでした。
こういったgoogleにアピールする方法をSEOと言います。
SEOを駆使して検索順位を上げよう！といった記事をよく見かけると思いますがようはあれです。
具体的にどうするかの説明は不要です。
ここまでの解説は、googleが推奨する良記事の構成を再現したものなのですでに完成済み。
良記事と判断される構成とは、h2h3などの見出し要素を正しく設定し、見た目にも配慮したhtmlで書くことが重要です。
例をあげるなら、Wikipediaです。
ウィキが上位に表示されるのは、googleに賄賂を贈っているからではなく、記事の構成が優良であり、そういったコンテンツの集合体だからこそ上位に表示されるわけです。
以上のことから、見出し/もくじ/ジャンプは、重要な記事や不特定多数の外部に向けた記事に付けることをお勧めします。
こういった記事が検索上位に食い込めば、なにもしなくてもgoogle経由でユーザーがやってくるボーナスステージに突入します。
SNSや投稿サイトで宣伝するよりも遥かに強力な武器になること間違いなしです。
イマイチピンと来ない方はこちらをご覧ください。
google検索の結果を表示
検索順位２位、ウィキの次。
これがどれだけインチキ強力で破壊力のある記事なのか実感いただけると思います。
こういったインチキ恩恵を受けたいなら、見出し/目次/ジャンプは必須です。
許されざる行為見出しも検索結果に反映されています。
構成が整っていればSEO的に有利ではありますが、人気がありアクセスが多いことも重要です。
そんな、見やすく便利な人気記事にするための機能を紹介します。
よそのサイトや記事をカード化して紹介する機能です。
こんな感じで表示されます。
実装方法は以下のリンク先で。
現在、バナーリンクを並べる見せ方は廃れましたがこちらは新しめ。
なにより、ブログカードの制作者は私とエンジニアの間でテンプレ神と呼んでいるほどFC2に精通した人物です。
ハイデザインテンプレートを連発するテンプレ神はFC2の救世主。
しかも、プログラムの腕も抜群ですのでweb界隈の最新技術にも対応済み。
テンプレ神の教えを守ったStrawMan Templateもまた最新技術の塊です。
そんな方が作ったブログカードですので機能的な問題は皆無かつ、SEOを意識したリンク構成を作り上げる優れもの。
ブログカード導入で迷ったときはテンプレ神のもので決まりです。
アイコンで装飾する機能ですワン
特になにということはありませんが、なんとなく見た目が楽しくなります
実用的なものも多く
アイコンの特性上、直感的に物事を伝えられます
漫画ビューワーで読む
導入方法はこちらから
アイコンの種類はこちらから
見た目とコードを整えた記事は武器であり資産です。
作者や作品のまとめページを整えることで、検索上位に食い込みユーザーの誘導が容易になりますし、そういった記事が増えていけばサイトの価値が上がり、より検索に優位に働きます。
外向けの記事はともかくとして、まずはご自身の創作物の価値を上げ、ユーザーがブログ内で迷子にならないように整えてみてください。
最初は戸惑うと思いますが、慣れてしまえば全部コピペで行けます。
SEOを意識した記事作りを是非マスターしてください。
StrawMan Template総合案内板へ戻る
重要度の高い記事というのは、作者ページ・作品一覧のようなまとめ記事を指しています。
これらの記事を目次やHTMLで整え、googleに正しく認識してもらえるようにする方法を紹介します。
はじめに
ブログ形式は、記事の集合体になりがちですので目当ての記事が探しにくいという弱点があります。
その対策として、タグ機能が内蔵されていますが、量が増えると分かりづらいのは変わりません。
そこで、StrawMan Templateではメニューを標準装備。
各テーマのまとめ記事をメニューに登録し、webサイトテイストなわかりやすいブログ作りが出来るようにデザインされています。
正直な話、記事を整えるにはそれなりの手間がかかります。
ですので、整えるのはまとめ記事や外向けのメニューに登録するような記事だけにし、読者とわいわいやっているような内輪向けの記事は気軽に書くことをお勧めします。
少々ややこしいですが、一度整えたあとはコピペで量産できますので是非チャレンジしてみてください。
後述しますが、見た目以外にも大きな恩恵がありますので騙されたと思って是非～～～
見出しを整える
見出しとは、項目別に区切りをつけるタイトルや章のようなものをhtmlで再現したものです。
見出しサンプル↓
ボクが見出しだよ
見出しサンプル↑
コードを書き出すと
<h3>ボクが見出しだよ</h3>
このように記述しています。
これが見出しです。
見出しには順番があって、記事のタイトルがh1、記事内の大見出しがh2、大見出しの中の見出しがh3という風に使用します。
イメージ
h1
h2
h3
h4
h5
フォルダの階層のようなもの？
ｈｔｍｌの記述
<h1>記事タイトル</h1>
<h2>記事内見出し</h2>
<h3>見出しの中の小見出し</h3>
実際の表示
記事タイトル
記事内見出し
見出しの中の小見出し
h1には装飾を使っていませんが、h2とh3はcssで装飾を加え、区切りをわかりやすくしています。
見出しを装飾する方法
見出し装飾のサンプルサイトを紹介しますので、リンク先からお好きなものを選んでください。
（コードを表示ボタンを押すとコードが展開されます）
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。
気に入った装飾を見つけたら、FC2管理画面→テンプレートの設定
スタイルシート編集の一番下にコピペしていきます。
なお、サンプルサイトではh1への装飾になっていますのでh2やh3と装飾したい見出しに変更。
#FFC778などのカラー指定部分は削除するか、ライトテーマとダークテーマで馴染むカラーに変更してください。
例えば
h1 {
color: #6594e0;/*文字色*/
/*線の種類（点線）2px 線色*/
border-bottom: dashed 2px #6594e0;
}
↓
h1をh2に、カラー指定をOFF
↓
h2 {
/*線の種類（点線）2px 線色*/
border-bottom: dashed 2px;
}
カラーを変える場合は、#6594e0部分をお好みのカラーコードで上書きします。
WEBブラウザ上で動作する、RGB値とHTML・CSSなどの色指定で使用するカラーコードを相互変換するシンプルなツール。16進数カラーコードとRGBを変換する計算式の解説も。
以上が見出しの装飾です。
なお、イマイチしっくりこなくても構わないので装飾してください。
見出し部分のcssを書き換えることで、全記事の見出しが一発で描き変わります。
重要なのは、大事な記事はh2h3を使うこと。
これをやっておけば、記事ごとに書き換える手間とおさらばです。
もくじを置き各項目へジャンプする
記事上に目次を置き、どんな項目があるのかを提示し、各項目へジャンプできるように設定します。
例えば作者情報ページを作ると仮定して…。
もくじ
・秋田LV3について
・当サイトのコンテンツ
・販売ストア一覧
・当サイトの著作権について
・免責事項
・秋田LV3について
・当サイトのコンテンツ
・販売ストア一覧
・当サイトの著作権について
・免責事項
秋田LV3について
見出し
こんなところでしょうか？
この目次にジャンプ機能を付けて汎用性を持たせたものがコチラ。
もくじサンプルコード
実際の表示
タイトルA
見出し
目次内のタイトルAを押すと、h2のタイトルAにジャンプします。
タイトルにある、a1が移動元と移動先を示していますので、コピペで項目を増やし、項目名を変更しa1部分を適当な文字列に書き換えることで完成です。
あとは、h2の下に内容を書くだけです。
h3にジャンプ機能を入れるときは、h2のように書き換えればOKです。
h2だけで見出しが足りる時はh3を消してください。
目次の項目が多い場合は、目次に戻るを設定するのもスマートです。
もくじに戻る
<div class="mokuji_wrapper" id="modorururu">～～もくじ</span>
<a href="#modorururu">もくじに戻る</a>
modorururuへジャンプするように指定してみました。
この機能を使う場合は、以下のコードをコピペすることでサンプルコードが有効になります。
（FC2管理画面→テンプレートの設定→スタイルシートの編集の一番下にコピペ→更新）
目次機能追加css
背景色は標準のStrawMan Templateに合わせてありますので、お好みのカラーへ変更してください。
（例：ライトテーマの目次背景色を変えるなら、#eeeをお好みのカラーコードへ書き換え）
もくじサンプルコード
以上です。
もくじもまた、見出しと同じように一度設定してしまえばcssの修正で全記事書き換わります。
機能がhtmlだとしたら、cssは装飾です。
いまいちピンと来なくてもとりあえず使っておけば、私のように直したいけど600記事手打ちで修正するなんて無理！なんてことがおこらないので安心です。
googleとSEOとの関係
見出し・もくじ・ジャンプを設定すると見た目が改善され、ブログが分かりやすくなりユーザーにアピールしやすくなることはご理解いただけたと思います。
話がややこしくなるので伏せましたが、もう一つ重要な目的があります。
それが、googleに良記事と判断してもらい、検索順位を押し上げるために有効な記事構成を作り上げることでした。
こういったgoogleにアピールする方法をSEOと言います。
SEOを駆使して検索順位を上げよう！といった記事をよく見かけると思いますがようはあれです。
具体的にどうするかの説明は不要です。
ここまでの解説は、googleが推奨する良記事の構成を再現したものなのですでに完成済み。
良記事と判断される構成とは、h2h3などの見出し要素を正しく設定し、見た目にも配慮したhtmlで書くことが重要です。
例をあげるなら、Wikipediaです。
ウィキが上位に表示されるのは、googleに賄賂を贈っているからではなく、記事の構成が優良であり、そういったコンテンツの集合体だからこそ上位に表示されるわけです。
以上のことから、見出し/もくじ/ジャンプは、重要な記事や不特定多数の外部に向けた記事に付けることをお勧めします。
こういった記事が検索上位に食い込めば、なにもしなくてもgoogle経由でユーザーがやってくるボーナスステージに突入します。
SNSや投稿サイトで宣伝するよりも遥かに強力な武器になること間違いなしです。
イマイチピンと来ない方はこちらをご覧ください。
google検索の結果を表示
検索順位２位、ウィキの次。
これがどれだけ
こういった
その他の便利な機能
構成が整っていればSEO的に有利ではありますが、人気がありアクセスが多いことも重要です。
そんな、見やすく便利な人気記事にするための機能を紹介します。
ブログカード
よそのサイトや記事をカード化して紹介する機能です。
テンプレートのサンプルページです。
こんな感じで表示されます。
実装方法は以下のリンク先で。
SSL化後の悩ましい作業のひとつ ブログカード
現在、バナーリンクを並べる見せ方は廃れましたがこちらは新しめ。
なにより、ブログカードの制作者は私とエンジニアの間でテンプレ神と呼んでいるほどFC2に精通した人物です。
ハイデザインテンプレートを連発するテンプレ神はFC2の救世主。
しかも、プログラムの腕も抜群ですのでweb界隈の最新技術にも対応済み。
テンプレ神の教えを守ったStrawMan Templateもまた最新技術の塊です。
そんな方が作ったブログカードですので機能的な問題は皆無かつ、SEOを意識したリンク構成を作り上げる優れもの。
ブログカード導入で迷ったときはテンプレ神のもので決まりです。
Font Awesome
アイコンで装飾する機能ですワン
特になにということはありませんが、なんとなく見た目が楽しくなります
実用的なものも多く
アイコンの特性上、直感的に物事を伝えられます
漫画ビューワーで読む
導入方法はこちらから
【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう
導入方法から基本的な使い方、「Font Awesome Animation」でさまざまなアニメーション効果を加える方法まで丁寧に解説します。
アイコンの種類はこちらから
【Ver.5対応】Font Awesome のアイコンを日本語で検索し Unicode が分かるように一覧化してみた
FontAwesomeのアイコンを日本語で検索！バージョン４だけでなく最新のバージョン５のアイコンにも対応しています。それぞれバージョンごとに検索出来るようにアップデートしました。
まとめ
見た目とコードを整えた記事は武器であり資産です。
作者や作品のまとめページを整えることで、検索上位に食い込みユーザーの誘導が容易になりますし、そういった記事が増えていけばサイトの価値が上がり、より検索に優位に働きます。
外向けの記事はともかくとして、まずはご自身の創作物の価値を上げ、ユーザーがブログ内で迷子にならないように整えてみてください。
最初は戸惑うと思いますが、慣れてしまえば全部コピペで行けます。
SEOを意識した記事作りを是非マスターしてください。
StrawMan Template総合案内板へ戻る
- 関連記事
-
- 漫画ビューワーlaymic_v2のクローズテストのお願い
- StrawMan Templateの簡易コード置き場
- StrawMan Templateで大事な記事の見た目を整える方法
- FC2ブログとstraw_manの運用に役立つヒント集
- [FC2ブログ対応] オススメ外部機能の紹介と実装方法