team Alaska

salmon-plf

サーモン隊長

ぬいぐるみ冒険家。数々の冒険を経て team Alaska の隊長となる。team Alaskaの活動に没頭するあまり、チームカラーのグリーンに染まってしまう。好きな食べ物はイクラ。体は弱め。


杉田 親次朗

杉田 親次朗

高校1年から自転車旅を始め、これまでに国内様々な場所を自転車で巡った。"日本を飛び出して世界を走りたい"という想いから北アメリカ大陸大冒険への挑戦を決意。釣りや登山などアウトドアを幅広く愛する。広島県出身、大阪在住の大学生。


SHO-HEYプロフィール

江口 祥平

高校卒業後すぐにワーホリを取得しオーストラリアへ飛ぶ。現地では日本料理店、農場で働くことで何とか1年食いつなぐ。帰国後には冒険に積極的となり、ベトナム縦断、北海道・沖縄自転車旅など数多くのチャレンジを成功させた。兵庫県尼崎在住の大学生。


Category

HOME



twitter


【プラグイン必要なし!】ブログ記事に目次を作る方法 [サンプルコードあり]


ブログの記事を書くとき『目次を付けたいな〜』と思ったことはありませんか?

今回はそんな記事内の目次をページ内リンクを使って実現する方法をお教えします!

目次をつけることよるメリットは幾つかありますが
・読者のユーザビリティをあげる
・記事に一貫性を持たせる

などが主だと思います。

皆さんも今日から記事内目次を使いこなしましょう!




サンプルコードと設置方法

まず一番に皆さんが知りたいのはサンプルコードだと思いますので、はじめに載せておきます。

サンプルコード HTML

<h5>
の部分はご自身のブログに合わせてお使いください


HTMLの
<a>
タグを使って記事内リンクを実現させています。

この方法はHTML対応のエディタさえあれば、どのブログでも利用することができます!
とても便利ですよね。

こちらのコードをそのまま記事エディタにコピペしてお使いください。コピペするタイミングは記事を書き始める前がオススメです。
あらかじめ目次タイトルを考えておくと、筋の通った記事が書けますよ!

上手くお使いください。



目次を自己流にカスタマイズしてみよう

目次の作り方は理解できたけど、デザインをアレンジしたい・・・と思っている方のために簡単なアレンジをお教えします。

私の場合は、目次の全体を枠で囲うために『blogmokuji』というクラスを付けています。
クラス名がダサいので皆さんご自由にお変え下さい。

僕と同じデザインのサンプルCSSを置いておきます。

サンプルコード CSS

こちらをブログのご自身のCSSテンプレートに貼り付けてご使用下さい。
background-colorを変更し、色をアレンジすると雰囲気が一気に変わります。ぜひお試し下さい。


そのほかCSSを使って様々なカスタマイズが可能です。
ご自身のお気に入りデザインを見つけて下さい。


参考ページ

こちらの記事は『2分でできる!ブログ記事にページ内リンクで目次を作る方法』を参考に書かせて頂きました。
大変分かりやすく解説されてますので、理解を深めたい方は一読をオススメします。
関連記事
[ 2017/10/05 20:29 ] ⇨ 気まぐれ記事 | コメント[0]

コメントの投稿