アメブロ サイドメニューのテーマに見出しをつける


※現在はアメブロのカスタマイズのご依頼はお受けしていませんのでご了承ください。
検索しても情報が少ない、ほぼないという内容についてはブログ記事にさせていただきますのでご連絡ください。

ラジオ等でご活躍のやさしい片づけのみちよさんからカスタマイズのご質問がありました。
忙しいお仕事ママのための 30分で片付くお家にする整理収納術 やさしい片付け 忙しいお仕事ママのための 30分で片付くお家にする整理収納術 やさしい片付け

 

 

検索してもほとんど情報がなかったので記事にしてみます。

ご希望の内容はアメブロのテーマの一部を見出し風にしたいとのご相談
記事を割り当ててないテーマを入れることもできますが、その方法だと後に(0)とついてしまいます。

ameblo-theme

ステップは3つ
1.見出しにするテーマのURLを確認する
2.フリープラグインにコードを追加する
3.CSSにコードを追加する

 

1.見出しにするテーマのURLを確認する

見出しにしたいブログのテーマをクリックすると theme- がついたURLが表示されますので番号を控えます。

http://ameblo.jp/lo-mss/theme-10074565447.html

 

2.フリープラグインにコードを追加する

1で確認したURLから数字の部分とテーマの名前を入れて、下記のコードをフリープラグインに追加します。
数字や見出しにしたいテーマの名前は書き換えてください。
※最初の1行が既にある場合には2行目からでも大丈夫です。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("li.themeNumber10074565447").before('<li class="themetitle">見出しの名前</li>');
}
);
</script>

 

3.CSSに追加する

見出しを太字にしたり大文字にしたり、下線を引いたり文字の色を変えたりお好みで装飾してください。
CSSがわからない方は⇒こちらをどうぞ

/*見出しの装飾*/
.themetitle{
font-weight:bold;
font-size:130%;
color:#色コード;
}

/* 元々表示されているテーマを非表示にする */
li.themeNumber10074565447{
opacity:0;position: absolute;
}

 

フリープラグインとCSSを編集したところで更新ボタンをおしてみると下記の様になっています。(いるはず)
(文字の色やサイズは個々のブログによって違います)

ameblo-theme
以上です。


にほんブログ村 その他生活ブログ ライフオーガナイザーへにほんブログ村 その他生活ブログへ

返信を残す

メールアドレスが公開されることはありません。

CAPTCHA