アメブロdeアクセスアップ

アメブロ姫ブログカスタマイズ メッセージボートの下に目次を設置する方法 | アメブロのテンプレートやツールを使って、アクセスアップする方法やアメブロカスタマイズの方法をご紹介します。


テーマ:姫ブログカスタマイズ

アメブロ姫系ブログのカスタマイズです。

 

今回姫系ブログのサンプルに沿ってカスタマイズをしてきましたが、
最後にトップページに目次を設置させます。

 

 

これが、姫系ブログのカスタマイズのラストです♪

 

 

 

 

 

姫系ブログの最後のカスタマイズとして、トップページに目次を設置させました。
これは、質問をくださった方のリクエストなんですが、
以前の記事でも書いたように、トップページの上に、
全部のページに表示できるスペースを確保する方法と同じコードを使いました。
アメブロ改造 メッセージボードに代わるスペースを追加する方法2

 

 

 

 

この方法は、常にメッセージボートの上にスペースに記述したテキストや画像を、
表示させる方法なんですが、ブログのアピールポイントとしては有効です。

 

 

 

 

 

この方法を応用して、目次(メニュー)を作って記事上に表示させます。
こんな感じです。

 

目次を設置

 

 

 

 

目次を横並びにして、テキストの横にピカピカ画像を設置しました。
フリー画像で小さいアイコンがきれいだったので、こちらのサイトを利用しています。

 

 

 

http://sao-charin.babymilk.jp/

 

 

 

 

 

 

 

 

 

 

※画像をクリックするとサイトへ飛びます。

 

 

 

 

ヘッダー部分のメニューばかりがカスタマイズではありません。

 

 

 

好きなところにも、目次(メニュー)は作れますので、
応用してみてくださいね。

 

 

 

 

hana2トップページに目次を設置する方法

 

CSS編集可能デザインスキンを使っている方は、CSSに下記コードを
コピーして貼ってくださいね。

 

 

 

 

 

 

 

check

リストを横並びにする場合は、display:block を使います。

 

 

 

通常リストは、縦に並びますよね。
目次なので横並びにしていますが、縦並びにする場合は、
display:block; の記述は削除してください。

 

 

 

配置の数字ですが、今回記事幅を小さくしているので、
それに合わせた配置を行っています。

 

 

 

通常の配置設定では、margin:auto; を使うと中央揃いになりますので、
このコードのみを記述すれば大丈夫です。

 

 

 

 

これだけでは、表示できませんので一旦保存します。

 

 

次に下記のコードをコピーして、修正した後フリープラグインに貼ってくださいね。

 

 

 

 

 

一番上のプラグインは、魔法のプラグインです。
もう既にプラグインを使用している場合、このプラグインは記述しているかと思います。
(記述していない場合は、コピーして貼って下さいね。)

 

 

リンク先は、ご自分のブログで誘導したい場所にリンクを貼りましょう。

 

 

 

外部リンクの場合は(別窓でページを開きたい場合)
飛び先のURLのあとに 必ず 半角空けてtarget=”_blank”を追加してくださいね。

 

 

 

 

プラグインコードをメモなどにはって、リンク先を修正してから
フリープラグインにコードを貼ったほうが、間違いがありません。

 

 

 

 

 

 

 

フリープラグインを初めて使う方は、配置設定使える機能のところに、
フリープラグインを移動させてくださいね。

 

$(“.pagingArea:first”).before ← このコードはページングエリア(次へ・・・とか)の
上に表示させるという意味です。

 

 

.pagingArea:first を変更したりすると、いろんな場所に応用ができます。

 

 

 

 

 

保存をしてブログを確認してください。

 

 

 

今回メッセージボードの下に目次を設定しましたが、
メッセージボードの上に設置する場合は、下記のコードに変更してみて!!

 

 

 

 

$(“.skinMainArea”).prepend ← 挿入するという意味です。
アメブロのコンテンツエリアの一番上に挿入するように設定してあります。

(メッセージボードの上ね)

 

 

これも、覚えておくといろいろな場所に使えます。

 

 

 

 

 

 

目次は、読者さんを誘導する時には必須のアイテムです。

 

 

 

オリジナルな感じの目次ならば、これで簡単に設置できますね。

 

 

 

このCSSとフリープラグインの使い方は、
他のブログでも使えるし応用も効きます。

 

 

 

ぜひとも覚えて使ってみてくださいね。

 

 

 

テンプレートデザイン・カスタマイズのこと、アクセスアップのこと、
アメブロのことならお任せあれ!

Copyright © アメブロdeアクセスアップ All Rights Reserved.