テーマに小見出しをつけて見やすくする


内藤です

僕が今やっているように、サイドバーのテーマに小見出しを付けて見やすくする方法です。
※CSS編集用デザインになります



『集客に活用!』 とか 『サービスについて』 などの文字は本来ないものです。

こういった小見出しを付ける事で見やすくなります。

1.まずは、[テーマ編集]から、テーマの順番を整えます



『順番』に数字を入れて並び替えができます。
並び変えができたら保存します。

2.上に小見出しを付けたいテーマのテーマNoを確認します。

例えば僕の例ならば、 「ブログを活かす仕組み」 の上に 「集客に活用!」という小見出しを付けたかったので、「ブログに活かす仕組み」のテーマNoを確認します。

「ブログに活かす仕組み」というテーマのURLが http://ameblo.jp/ameblochange/theme-10026732877.html となっています。

この場合、テーマNoはthemeNumber10026732877となります。

3.フリープラグインで小見出しを挿入

フリープラグインに以下を追加します

<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("li.themeNumber10026732877").before('<li class="categorytitle">集客に活用!</li>');
}
);
</script>

$(function(){ の後が

$("li.テーマNo").before('<li class="categorytitle">小見出し文字</li>');

という形です

※↓こちらは既にフリープラグインにある場合は不要です

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>

複数小見出しを付けたい場合は

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("li.themeNumber10026732877").before('<li class="categorytitle">小見出しの文字</li>');
$("li.themeNumber10026732876").before('<li class="categorytitle">小見出しの文字</li>');
}
);
</script>

のような感じにします。

テーマNoの部分と、小見出しの文字は環境に合わせて変更します。

さらに、CSSに

.themeMenu li{
margin-left:4px;
}
.themeMenu li.categorytitle{
border-bottom:2px solid #000000;/*下線*/
margin-left:0px;
padding-top:10px;
}

を追加し装飾します。

これでテーマが見やすくなります

やってみてくださいね

2017年3月からのアメブロ常時SSL化に際しまして、「フリープラグイン」を使ったカスタマイズが利用できなくなる可能性があります
【追記あり】アメーバブログの常時SSL化に伴う仕様変更について|スタッフブログ
フリープラグインを使ったカスタマイズはせずに、CSSを使ったカスタマイズを行ってください