「カスタム可能」でないデザインでテーマ編集するには <新デザイン用> | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…

こんにちは、パソコンワンポイントレッスン!

PCインストラクターの川上です。



アメブロ内にお客様になり得る方が少ない場合、

外部から自分のアメブロを検索してもらう必要があります。


その際、とーっても大切なことがあります。

そう、「新しいテーマをつくる」についてです。


実は、そのことについては、この方がこちらで書いてくれております↓↓↓
(私の3年前に書いた「テーマを編集するには(カテゴリ分類の方法)」をご紹介していただいております。)


ただし・・・

私が以前に書いた記事では、「CSSの編集デザイン(新デザイン)」を採用されている方のみができる方法しか書いておりませんで・・・^^;


ですので、「CSSの編集デザイン」ではなくて、アメブロさんが用意しているカラフルな既定のデザインの方でもできる方法をお伝えしておきますね。

でも、どちらにしても、ちょいと面倒ですので、悪しからず^^;
(CSSの編集デザインの方は過去記事『テーマを編集するには(カテゴリ分類の方法)』ご覧くださいませ^^)


それでは・・・
(あ、今回のは「新デザイン」の方のみになりますので、ご注意くださいませ。)


テーマ名の前に、「しかく」で変換される「■」「◆」「◇」や、「けいせん」で変換されて表示される「├」「└」「┠」といった記号はつけずに、まず普通にテーマ名をつけておきます。


「マイページ」から「右上の三本線マーク(①)」-「テーマ編集(②)」をクリックして、

川上雄大のワンポイントレッスン!


テーマを作成します。すでに作成している場合は、テーマ名の先頭の記号を削除して変更しておきます。

川上雄大のワンポイントレッスン!



そして、自分のブログに戻って、一度更新(F5キー)してから、テーマをクリックします。

川上雄大のワンポイントレッスン!


すると、こういった記事URLが表示されます。(画面左上あたりに)

http://ameblo.jp/sumitak1329/theme-10057484786.html


途中で、theme-と表示されているのがテーマの記事URLになります。

そこで、そのテーマの記事URLの後ろの数字を覚えておきます。(コピペしておくとよいですね。)

そう、この赤い部分です。

http://ameblo.jp/sumitak1329/theme-10057484786.html


そして、「フリースペース編集」を開いて、

川上雄大のワンポイントレッスン!


「フリースペース編集」内に、次のコードをコピペします。



<style type="text/css">li.themeNumberテーマの数字:before{display:inline;white-space: pre;content:"◆";color:#337fcc;}</style>



次に、テーマの数字を削除して、さきほどの数字に入れ替えます。


<style type="text/css">li.themeNumber10057484786:before{display:inline;white-space: pre;content:"◆";color:#337fcc;}</style>



このコードを続けて(1行にして)、テーマの数の分作成します。

あとは、数字とテーマの前につける記号だけを変えていくとOKですね。


※文字色(color)が#337fcc(薄い青色)になっていますが、これはリンクの文字と同じにしておりますので、ご自由に変えてくださいませ。

例えば、テーマが5つある場合は、

<style type="text/css">li.themeNumberテーマの数字:before{display:inline;white-space: pre;content:"◆";color:#337fcc;}li.themeNumberテーマの数字:before{display:inline;white-space: pre;content:"├";color:#337fcc;}li.themeNumberテーマの数字:before{display:inline;white-space: pre;content:"├";color:#337fcc;}li.themeNumberテーマの数字:before{display:inline;white-space: pre;content:"├";color:#337fcc;}li.themeNumberテーマの数字:before{display:inline;white-space: pre;content:"└";color:#337fcc;}</style>



こんな感じになりますので。
テーマの数字記号色コードは変更してくださいませ。)



なんだか今日の記事は英数字だらけになってしまいましたが・・・(苦笑)

お時間のあるときにでもチャレンジしてみてくださいませ!!



<追記>
ちなみに、今回の記事は「新デザイン」の方のみとなりますので、ご注意くださいませ。

新デザインとは、2011年9月半ば以降から選択されるようになったデザインのことで、それ以前にアメブロ作られた方は、旧デザインということになります。

アメブロの新デザイン旧デザインについて詳しく知りたい方は、アメブロカスタマイズの松本さんのこちらの記事『アメブロの新デザインと旧デザインについて』をご参照されるとよいです。



<アメブロのテーマ関連記事>

テーマを編集するには(カテゴリ分類の方法)

アメブロのテーマで「ブログ」って・・・

過去記事を素早く修正する方法

アメブロのテーマについて




以上、テーマの編集でした。



LIDS札幌・ライフデザインスクール
川上 雄大