So-net無料ブログ作成
検索選択
メッセージを送る

ｶｽﾀﾑｽｷﾝを作るための注意事項

■今回の記述は「シンプルワイド」のタグを元にしています。（部分的にスタンダード１と2も使用）
　他のタイプのスキンでは設定変更がうまくいかないものもあるかもしれません。（特にタイトル＆サブタイトル部分）

■今回私が記述する内容は、私のやり方であって他にもいろんなやり方があると思います。　
　記述に間違いがあれば教えてください。　
　でも、苦情は受け付けません。（荒らしと思われるコメントは私の判断で消させていただきます）

■今回のカスタムスキンを作るのは自己責任で行ってください。
　問題が発生しても責任は持てません。
　表示等がうまくいかない時は、その作ってるスキンを消して最初からやり直せばうまくいくかもしれません。

■使っているブラウザによっては反応しないカスタマイズもあります。

リンクについて

もしリンクを貼っていただけるのであれば
こちらのバナーをお使いください。

カスタムスキンへの道

ｱｸｾｽ解析


kuu♪からのお知らせ

■スキンを作るコツは、とにかくプレビューで確認することです。
　数字を替えた！　色を替えた！　画像を替えた！そのたびにプレビュー！　で確認！
　そしてこまめに保存してください。

■コメントをたくさんいただいているのですが返信もままならない状況ですのでしばらくの間コメントの受付を停止させていただきます。ごめんなさい。

また、管理人kuuがしばらくソネブロを離れている間に随分仕様の変更等あったみたいですので、当ブログの記述では対応できないものも出ているかもしれません。
カテゴリーを変えよう ｜お知らせ欄をつける ブログトップ

月別表示を変えよう　[ブログの小技]

【月別表示を変えよう】

ソネブロリニューアル後、これまで書いてきたブログの月別表示が変わりました。
全部載せると縦長くなるので全部載せていない人も多いと思います。
これをすっきりさせましょう。
月別アーカイブ-04.PNG　　矢印横.GIF　 月別アーカイブ-03.PNG

月別表示の横に更新回数が載っていないものを
とめさんが紹介してくれています。
｢アーカイブ記事 ドロップダウンリスト」を見てやってみてくださいね。
月別アーカイブ-02.PNG

ここでは、月別表示の横に更新回数が入っているもののタグを紹介します。
（とめさんのタグに必要な部分を付け加えたものです。）

【見本】
月別アーカイブ-01.PNG

①デザイン　→　レイアウト　→　月別表示　と開きます。

②月別表示の件数を増やしましょう（私は最大の100件にしました）

③月別表示内のコンテンツHTML編集を開きます。
【変更前】

<div class="sidebar" id="archive">
<h3 class="sidebar-title"><% content.title | html %></h3>
<div class="sidebar-body">
<% content.header -%>
<ul>
<% loop:list_archives -%>
<% if:archives.article_count -%>
<li><a href="<% archives.page_url %>"><% archives.createstamp | date_format("%Y年%m月") %></a>(<% archives.count | __or__ |  echo('0') %>)</li>
<% /if -%>
<% /loop -%>
</ul>
<% content.footer -%>
</div>
<div class="sidebar-end"></div>
</div>

青字の部分を消します。
矢印縦.gif
【変更後】

<div class="sidebar" id="archive">
<h3 class="sidebar-title"><% content.title | html %></h3>
<div class="sidebar-body">
<% content.header -%>
<script type="text/javascript">
<!--
function jumpmenu(targ,selObj,restore) {
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}
//-->
</script>
<form id="archive" name="archive" action="">
<select name="menu" onchange="jumpmenu('parent',this,0)">
<option value="<%url>" selected="selected">月別アーカイブ</option>
<% loop:list_archives -%>
<% if:archives.article_count -%>
<option value="/archive/<% archives.createstamp | date_format("%Y%m") %>-1"><% archives.createstamp | date_format("%Y年%m月") %>(<% archives.count | __or__ |  echo('0') %>)</option>
<% /if -%>
<% /loop -%>
</select>
</form>
<% content.footer -%>
</div>
<div class="sidebar-end"></div>
</div>

消したところにピンクの文字を書き加えましょう。

【変更前】を全部消し【変更後】を全部貼り付けでもＯＫですよ。

※変更内容をブログに反映するには、「保存」ボタンをクリックしてから、前のページで「設定を保存する」ボタンをクリックする必要があります。

ソネットブログ(so-netblog)：カスタムスキンへの道【目次】へ

 


タグ：ソネットブログ カスタムスキン ソネブロ カスタマイズ So-netBlog 月別アーカイブ
2008-05-29 09:34  nice!(23)  コメント(15) 
共通テーマ：blog

nice! ありがとう　23

コメント 15

コメントの受付は締め切りました
みーはー熊

[ｺﾝﾆﾁﾊ]
うはっ、なんかすごいですねー。
これは、じっくり時間のある時じゃないと間違えそうだわ＾＾；
↑
結局、無理そうだったので コピペさせていただきました（軟弱者でございます）＾＾；
すっきり表示されて 嬉しいです[ﾜｰｲ]

by みーはー熊 (2008-06-05 15:11) 

kuu♪

★熊ねえさん
コピペで十分です[ｱﾊﾊ]
こんなの見てたら目がチカチカしちゃいますから[ｳｯ]
by kuu♪ (2008-06-06 14:22) 

mam♪

[ｺﾝﾆﾁﾊ]
お借りします！[♪]
by mam♪ (2008-07-28 12:20) 

のほん★

月別表示がドロップダウンになって嬉しいです！
コピペさせていただきました♪
ありがとうございます★
by のほん★ (2009-01-22 20:51) 

kuu

★mam♪さん

コメントがめちゃくちゃ遅くてごめんなさい（苦笑）
by kuu (2009-01-24 21:28) 

kuu

★のほんさん

お役に立ててよかったです♪
ドロップダウンになるとすっきりしますよね^^
by kuu (2009-01-24 21:29) 

usaco

[ｱﾘｶﾞﾄｳ]はじめまして[ﾊｰﾄ]
ブログのカスタマイズがこんなに出来るなんて
凄い[ﾋﾞｯｸﾘ]
とりあえず、試してみました[ﾜｰｲ]
私に出来そうなのがあれば、またお世話になります[ﾖﾛｼｸ]お願いします
by usaco (2009-02-25 00:06) 

kuu

★usacoさん

ソネブロは既存のスキンの変えたい場所だけ変えることも可能ですから、興味のあるところだけでもカスタマイズすると、ちょっぴりオリジナルになりますよね[ﾆｺｯ]
by kuu (2009-03-04 14:43) 

まっちゃん

[ｺﾝﾆﾁﾊ]
ブログのスキンを自分で作るのって楽しいですね!!
いつもここのページを参考にしながら作らせてもらってます[ﾊｰﾄ]

これからもたくさんお世話になると思います（＞＜）
よろしくお願いします[ﾎｼ]


by まっちゃん (2009-07-21 16:30) 

kuu♪

★まっちゃんさん

スキン作りは楽しいですね♪
これからも楽しみながら作ってくださいね～。
by kuu♪ (2009-07-29 11:00) 

七瀬ゆうり

初めまして！
月別アーカイブの表示が縦長になって困ってました。

自分でJAVAを調べていたのですが上手くいかず
途方に暮れていたのですがグーグルで検索したところ
こちらのブログを発見しました。
あんなに苦労したのがウソのように、あっけなくプルダウンに
なりました！

説明文も分かりやすく、とっても助かりました。
遅ればせながら、当方のブログからリンク貼らせてもらいますね。

本当にありがとうございました！
by 七瀬ゆうり (2009-09-06 14:20) 

kuu♪

★七瀬ゆうりさん

長くブログを書いていると困りますよね。
お役に立ててよかったです[ﾆｺｯ]
by kuu♪ (2009-09-25 14:51) 

肉球

はじめまして～[ﾊｰﾄ]
usacoさんのとこから来ました~。
さっそく月別表示を試してみました。
時間を見つけて他もトライしてみたいと思います[ｱﾘｶﾞﾄｳ]
by 肉球 (2009-10-15 00:03) 

unitaro

こんにちは！はじめましてです！
月別表示のプルダウンの仕方を探してのkuu♪さんの
ブログに辿り着きました。
早速コピペさせていただきました。
見やすくなってとても助かりました。
ありがとうございます！
by unitaro (2010-03-10 14:17) 

婆や

はじめまして♪
月別表示をすっきりさせたくてグーグル検索したところ
こちらに辿り着きました。
分かりやすい説明、コピペで簡単に変更する事が出来ました♪
有難うございます<(_ _)>
by 婆や (2010-04-15 23:26) 

カテゴリーを変えよう ｜お知らせ欄をつける ブログトップ

ありがとうございます♪♪

記事が役に立たれたら、下のバナーの興味があるものをクリックしてもらうとうれしいです。

　　

　　 　 　 　　

目次

【カスタムスキン初心者の方はこちらをどうぞ】
　┣カスタムスキンの始め方
　┣カスタムスキン作成方法・1　[バナー編]new_58.gif
　┣カスタムスキン作成方法・2　[背景編]new_58.gif
　┣カスタムスキン作成方法・3　[文字色編]new_58.gif
　┣カスタムスキン作成方法・4　[Links編]new_58.gif
　┣カスタムスキン作成方法・5　[Articles編.1]new_58.gif　
　┣カスタムスキン作成方法・6　[Articles編.2]new_58.gif
　┣カスタムスキン作成方法・7　[nice・コメント編]new_58.gif


【カスタムスキンのＱ＆Ａ】
　┣カスタムスキンの質問箱
　┣カスタムスキンの質問箱2


【カスタムスキンを作るための基礎知識】
　┣cssの内容
　┣文字色の変え方　
　┣文字リンク色の変え方
　┣文字のサイズの変え方
　┣文字の右寄せ・左寄せ・真ん中寄せ
　┣字体の変え方
　┣線の種類と記述方法
　┣背景色の指定と画像の挿入方法
　┣画像が小さくなるときの対処法
　┣”margin”　と　”padding”の違い


【背景】
　┣背景色を変えよう
　┣背景に画像をのせてみよう
　┣背景画像を固定してみよう
　┣背景を半透明にしよう
　┣記事上下の矢印画像を変えよう
　┗スクロールバーの色を変えよう

【文字色】
　┣ブログ全体の文字色を変えよう
　┣ブログ全体の文字のリンク色を変えよう
　┣文字リンクの下線を変えよう


【ヘッダー・フッダー】
　┣ヘッダーに画像を入れよう（ＯＯさん部分）
　┣ヘッダーに画像を入れよう（ブログトップ部分）
　┗ヘッダーを透過させよう


【バナー】
　┣オリジナルバナーを作ろう
　┣バナーの位置を変えよう
　┣バナーをリンクボタンにしてみよう
　┣ブログタイトル＆サブタイトルの文字色を変えよう
　┣ブログタイトル＆サブタイトルの文字の位置を変えよう

【タブ】
　┣タブをつけてみよう　　　　
　┣プルダウンタブをつけてみよう


【記事】
　┣記事の外線の色と太さと種類を変えよう
　┣記事の外枠を画像で作ろう
　┣記事部分全体に背景色や背景画像をつけよう

　┣記事タイトルの文字色を変えよう
　┣記事タイトルの文字リンク色を変えよう
　┣記事タイトルの幅を変えよう
　┣記事タイトルの背景色を変えよう
　┣記事タイトルの下の線を変えよう
　┣記事タイトルに小さな画像を入れてみよう

　┣記事本文の文字色を変えよう
　┣記事本文の文字リンク色を変えよう
　┣記事本文の文字の位置を変えよう
　┣記事中の広告を透過しよう

　┣記事の一番下の線の色を変えよう
　┣記事の一番下の日付の文字色を変えよう
　┣記事の一番下の日付の位置を変えよう

　┣nice　コメント　コメントを書く　の下の線の色を変えよう
　┣nice　コメントを書くの文字の位置を変えよう
　┣niceの画像を変えよう
　┣【コメント】の前に画像を入れよう
　┣【コメントを書く】の前に画像を入れよう
　┣コメント記入欄の文字色を変えよう
　┣コメント記入欄に画像を入れよう
　┣コメント記入欄の縦・横の幅を広げよう
　┣コメント記入欄の外枠の線の色と太さを変えよう


【サイドバー】
　┣サイドバーに外枠をつけよう
　┣サイドバーの外枠を画像で作ろう
　┣サイドバーに背景色をつけよう

　┣サイドバータイトルとバナーの間に空白を作ろう
　┣サイドバータイトルに小さな画像を入れてみよう
　┣サイドバータイトルに背景色をつけよう
　┣サイドバータイトルの文字色を変えよう
　┣サイドバータイトルの文字リンク色を変えよう

　┣サイドバー本文の文字色を変えよう
　┣サイドバー本文の文字リンク色を変えよう
　┣サイドバー本文の文字の位置を変えよう

　┣カスタムペイン内の文字に左右の余白を作ろう

　┣NEWの文字色を変えよう

　┣3ペインのサイドバーの位置を変えよう

　┣プロフィールの中の矢印画像を変えよう
　┣プロフィールの中の矢印画像を消そう
　┣プロフィールに画像を入れる方法
　┣プロフィール内の「nice!」の文字色と外線の色と背景色を変えよう

　┣カレンダーの更新した日付部分の画像を変えよう
　┣カレンダーを装飾してみよう

　┣「読者になる」の画像を変えよう
　┣「読者になる」の背景色を変えよう
　┣「読者になる」の文字リンク色を変えよう

　┣「POWERED BY so-neblog」 と「RSS」 の左右の位置を変えよう
　

【ブログの小技】
　┣記事ＴＯＰにお知らせをつけよう
　┣ブログにひとこと話せる「Twitter」をつけよう！

　┣月別表示を変えよう〔ドロップダウンにする〕
　┣カテゴリーを変えよう〔ドロップダウンにする〕
　┣サイドバーのドロップダウンの枠の幅と文字を小さくする
　┣サイドバーのコメント欄をツリー表示にしよう
　┣「メッセージを送る」の画像を変えよう
　┗「ＲＳＳプレイヤーとRSS2.0（RSSフィード）

　┣画像タグの謎を解く
　┣リッチテキストエディタでテーブルを組む【基本】
　┣リッチテキストエディタでテーブルを組む【テーブルのプロパティ】
　┗リッチテキストエディタでテーブルを組む【セルのプロパティ】


【おまけ】
　┣カスタムスキンのためのミニミニ素材
　┣kuuの作ったカスタムスキンのパーツ倉庫new_58.gif

　┣マウスカーソルをハーボット（harbot）にしよう！
　┣コメントにハーボット絵文字
　┣ピグミーの絵文字
　┗ハーボットのアクセスカウンターとオンラインカウンター

　★kuuのカスタムスキンの軌跡

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。