ひさびさカスタマイズ

スポンサーリンク

地獄変00さんのlivedoor Blogのテクニック集を参照にいくつかマイナーチェンジを行ってみました。こちらのリンク集は御自身のカスタマイズを含めて使えるテクニックばかり載っています。
色々と参考にさせていただいた沢山のサイト様本当にありがとうございました。
ひさびさのカスタマイズでなんか楽しくなってはまってしまいました。うまくいかないと苦しんですけどね(/TДT)/あうぅ・・・・。

【コラム開閉機能の変更】
以前こちらで紹介したコラム開閉ですが、チェックボックスを色々と変更できるようなので、infinite loopさんの誰にでも出来るコラムの開閉講座!!の記述どおりに前使っていたものから、Java Scriptも変更してチェックボックスとボックスの配置を右にすることに挑戦してみました。

とてもわかりやすい説明なので、説明どおりやると出来ると思います。最後にアップロードしたあとにプラグインの追加から、アップしたURLを指定してあげるを最後に行ってください。慣れている方はわかるかもしれませんが。
あと、実装時に気づかなかったのですが、このボタンをタイトルの下ではなく、左にしたり右にしたりする配置についての記事もここで解説していただいています。
ただ色々やったのですが、全部にやろうとすると、左だけタイトルが右寄せになったり、タイトルが上に上がったりしてしまって、なかなか全部に適応できませんでした(泣)
今日改めて配置の記事を見ながらやってみました。なんと二行ぐらい見落としていました。『marginの設定で、margin:-18px 5px 0px 5px;の様にトップ側をマイナスで指定してください。』ということで、マージンをマイナスにすればタイトルが上にいってしまうのを修正できました。これはボタンを上に上げてタイトルにあわせているのかなと思います。デフォルトではタイトルより下がった感じになるみたいです。
これがわからず色々どこが悪さしているのか結構調べてちょと大変でした。ちゃんと説明いただいていました。しっかり熟読しないといけないですね。

あと、デザインはアップするJava Scriptファイルに記述しますが、頻繁にボタンのデザインを変えたい方は、Open Fieldさんのサイドバーの開閉&サイドバーの開閉スクリプトをちょこっと修正という記事を参照されるといいでしょう。ボタンデザインをスタイルシートに出す設定について書かれています。

ちなみに私の設定はこういった感じです。
[js]
function toggleOpenClose(id,val){
if(val == "−"){
document.getElementById(id).style.display = "none";
document.getElementById(‘btn’ + id).value = "+";
}

else{
document.getElementById(id).style.display = "block";
document.getElementById(‘btn’ + id).value = "−";
}

}

function getButton(obj, i , sInner , bDefaut){
var ret;
var val;
if ( bDefaut ) {
val = "−";
} else {
val = "+";
}
ret =
‘<label for="btncolumn’ + i + ‘">’ + sInner + ‘</label>’ +
‘<div align="right"><input type="button" class="sidebtn" value="’ + val + ‘" id="btncolumn’ + i + ‘" onclick="toggleOpenClose(¥’column’ + i + ‘¥’,this.value);"/></div>’;
obj.setAttribute("id", ‘column’ + i);
return ret;
}

var aryTitle = new Array();
var aryDefault = new Array();

aryTitle[5] = "Search this Blog";
aryDefault[5] = true;

aryTitle[10] = "Categories";
aryDefault[10] = true;

aryTitle[11] = "Access Ranking[Total]";
aryDefault[11] = true;

aryTitle[15] = "Archives";
aryDefault[15] = true;

aryTitle[20] = "Recent Comments";
aryDefault[20] = true;

aryTitle[25] = "Recent TrackBack";
aryDefault[25] = true;

aryTitle[30] = "nikkansports.com";
aryDefault[30] = true;

aryTitle[31] = "Advertise";
aryDefault[31] = true;

aryTitle[35] = "Recommend Item";
aryDefault[35] = true;

aryTitle[40] = "Blogs";
aryDefault[40] = true;

aryTitle[45] = "Recent Entries";
aryDefault[45] = false;

aryTitle[50] = "My Homepage";
aryDefault[50] = false;

aryTitle[55] = "Profile";
aryDefault[55] = false;

aryTitle[60] = "Links";
aryDefault[60] = false;

aryTitle[65] = "MyblogList";
aryDefault[65] = true;

aryTitle[70] = "BlogPeople";
aryDefault[70] = true;

aryTitle[75] = "Information";
aryDefault[75] = true;

aryTitle[80] = "TrackBack People";
aryDefault[80] = true;

aryTitle[85] = "BBS";
aryDefault[85] = true;

aryTitle[90] = "INTERNET Watch";
aryDefault[90] = true;

aryTitle[95] = "Amazon Web";
aryDefault[95] = true;

var aryDiv = document.getElementsByTagName("div");
var sTmpInner;
for(var j = 0; j < aryDiv.length; j++){
if(aryDiv[j].getAttribute("class") == "sidetitle" ||
aryDiv[j].getAttribute("className") == "sidetitle"){
sTmpInner = aryDiv[j].innerHTML;
for(var i = 0; i < aryTitle.length ; i++){
if (sTmpInner.indexOf(aryTitle[i]) != -1 ) {
aryDiv[j].innerHTML = getButton(aryDiv[j+1], i , sTmpInner , aryDefault[i]);
}
}

}
}
if(document.getElementById){
document.writeln(‘<style type="text/css" media="all">’);
document.writeln(‘<!–‘);

for(var i = 0; i < aryDefault.length ; i++){
if( aryDefault[i] ){
document.writeln(‘#column’ + i + ‘{display:block;}’);
} else {
document.writeln(‘#column’ + i + ‘{display:none;}’);
}
}

document.writeln(‘–>’);
document.writeln(‘</style>’);
}
[/js]
スタイルシートの方は、
[css]
.sidebtn{
margin:-17px 0px 0px 0px;
font-size:xx-small;
color:#697497;
padding:0;
background:#EAEAEA;
border:1px solid #FFFFFF;
}
[/css]
としています。ポイントは、やはりマージンをマイナス指定することでしょうか。

【トラックバックURLを扱いやすくする】
トラックバックをワンクリックで選択し、コピーできるようにする。パンパでガウチョさんのトラックバックURLをワンクリックで選択可能にという記事を参考に出来ました。
そして、ボタンを押すことで、クリップボードにコピーできる機能。これはIEのみでの動作なので、その点だけは意識するといいのかもしれません。最近はOPERAやFireFoxなどが人気ですからね。地獄変00さんlivedoor BlogにTrackbackURLコピーボタンをつけるを参考につけました。
私の場合、コピーボタンとトラックバックURLがちょっと離れてしまったので、スタイルシートをいじって近づけました。

【コメント投稿者情報をクッキーに記憶を標準のものに変更】
以前地獄変00さんの記事を参考につけた機能ですが、livedoorで標準で対応したようですので、クッキーに投稿者情報を記憶〜標準機能編の記事を元に戻しました。ただ記憶してもすぐ消えてしまうような気がするんですが・・・。一応IEの設定でクッキー許可にしたりしてみたんですが、どうにも駄目です。
今後の課題ということで、わかりしだい追記したいと思います。

【サイドバーの頂いたコメント欄をツリー表示にした】
弱小エンジニアの小言さんのミニカスタマイズ 16を参考に実装してみました。
うちはタイトルが長い記事が多かったので、おかげさまでいっきにすっきりしました。ありがたいものをつくっていただきました。

私の設定はこんな感じです。
[js]
comment_convert_treeview( "Recent Comments", &quot;&amp;nbsp;&amp;nbsp;L&amp;nbsp;&amp;nbsp;&quot;,"","links","ガルティエ","" );
[/js]
説明のページにありますが、括弧内の””で囲まれているところが引数となります。左から第一引数で、この中には自分のブログのコメントのタイトルを記述します。
第二引数には、使いたい記号を。私のサイトの場合は”L”こういうマーク。前と後ろにある「&nbsp;」半角スペースをあけるというHTMLの記述です。この記述だと記号の前後に全角スペースがある感じでしょうか。
第三引数には名前の後ろにつける敬称をつけることができるようです。私の場合、ここはなにもいれないという意味で説明ページにあるように、””で囲って第五引数、第六引数は設定しなかったのですが、それだと「さん」とみんなについてしまっていました。そのため第五引数、第六引数を設定することで、つけないようにできました。これは以前はあたらしく機能を追加されたそうなので、その関係かもしれません。
第四引数には、設置場所のIDをかくようです。なくてもいいようですが、3カラムにしていて右にしている場合などは、”link2″などと指定するといいでしょう。左の場合もいちおう記述しておいたほうが無難なのかもしれません。
第五引数には、敬称を除外したい名前を書きます。サイト管理者にも敬称がついてしまうために追加された機能ということです。私の場合はメンバーで運営しているので、複数設定するにはどうするのか、わからないので使ってません;;。
第六引数には、敬称を書きます。第五引数で指定した名前以外の方に敬称がつくようです。私はつけないためになにも書いていません。
引数については必要なものだけを書けばいいようです。私の場合は、敬称なしがなぜか出来なかったので、第六引数まで書きました。

【サイドバーの頂いたトラックバックもツリー表示にする】
トラックバックの方はすっきりとまではいかないですが、それでも多少見やすくなったんじゃないかなと思います。
こちらも弱小エンジニアの小言さんのミニカスタマイズ 17を参考にさせてもらいました。
引数の考え方は基本的に同じです。こちらはもうちょっと説明してくれているブログがあるので、そちらもみるといいかもしれません。
関連リンク:
BLOGわんさん:トラックバックのツリー表示
小春日和の陽射しの中でさん:トラックバックのツリー化もできた
萌黄★色さん:コメント・トラックバックのツリー表示

【月別アーカイブをプルダウンメニュー形式にする】
これですが、livedoorではいつかの(?!)ブログの日で対応したそうです。すでにつけている人には非常にわかりにくいと思うんですが、追加すると、プルダウンにするか選択することができるようになっています。
それ以外に弱小エンジニアの小言さん:ミニカスタマイズ 第2段でフリースペースを使った方法もあります。違いは、プラグインのものだと「Go」というボタンをおさないといけないのですが、takoashiさんのものだと選択するだけで飛ぶことができるようになっています。

var start_year = 2004; // ブログを開始した年
var start_month = 1; // ブログを開始した月
var siteurl = “http://blog.livedoor.jp/takoashi/”

この三行は自分の環境に変更しましょう。

とりあえずこんな感じですね。補足修正があったら、追記いたします。


読んで頂いてありがとうございます!

↓↓このブログ独自の「いいね!」を導入しました。少しでもこの記事が気に入って頂けたら押して頂けるとうれしいです。各著者が無駄に喜びます(・∀・)イイ!! よろしくお願いしますm(__)m
The following two tabs change content below.

galthie

スポーツ全般がとても好きです。もともと好きだった将棋も1年くらい前から本格的に指しています。別の趣味であるコンピュータを含めてみなさんの役にたつ情報を載せていきたいものです。 好きなチーム:アーセナル 将棋棋力(2016年1月現在) 【将棋ウォーズ】3級 【将棋倶楽部24】13級 最高R310(R300あたりをうろちょろ) 【将棋道場】対局数少なく判定出ていません

コメント

  1. bali より:

    遅くなりましたけど、TB、ご紹介ありがとうございました。

    私は正直いうと、カスタマイズが苦手なので、
    今度からは、ガルティエさんをお手本にしたいと思います。
    ばりばりカスタマイズやっちゃって下さい。(^o^)丿

  2. galthie より:

    コメントありがとうございます。

    カスタマイズ苦手ということですが、わかりやすい文でしたよ。Jackyちゃんの写真などきれいに配置されていますし^^

    私の場合はこういったことは好きなんですが、まだJava Scriptの記述などはわからないものですから、意味くらいはわかるようになりたいなぁと思っています。なので、技術的なことを聞かれてもスタイルシートとHTMLについてやったことのあることを多少答えられるくらいでして(; ̄ー ̄A アセアセ・・・。

    Java Scriptなど書かれてどんどん便利にされている方のおかげですし、そういった方は本当にすごいなぁと思いますねぇ。
    もうちょっと後になると思いますが、今度はタイトルをbaliさんのページみたいに写真を配置したいなぁと思っています。逆にまた参考にさせてください(笑)

  3. 萌黄 より:

    挨拶が遅れてすみません(;´Д`A “`
    TB&紹介してくださってありがとうございます

    文章書くのが下手なんですけど、カスタマイズ出来た時の幸せ感をみなさんにもwなんて
    おおげさなんですが、そんな感じでいつも書いてます
    といっても私は実践するだけでプログラム書いてる訳ではないんですけどね
    こういうプログラムなど作ってくださる方にはホント感謝です

    ヘタレサイトですが、これからもよろしくお願いします
    ではでは〜

  4. galthie より:

    いえいえ、こちらこそ、わざわざコメントありがとうございました。
    参考にさせていただいて、ありがとうございました。カテゴリー整理もきれいにできてますねぇ。こんな風に出来るんだぁと驚きました^^

    >カスタマイズ出来た時の幸せ感をみなさんにもw
    いやぁ、わかりますねぇ。うまくいったときはうれしいですよね。なかなかうまくいかないときとかやり方がわからないと苦しいのですがwそのぶんできたときはうれしいですね。

    萌黄さんのところで、Google AdSenseとリードメールの紹介がありますね^^私もGoogle AdSenseはきになって申請してみたところなんです。リードメールも興味もってなんかやってみようと思っているので、また参考にさせていただければと思います。
    こちらこそ、これからもよろしくお願いします。

  5. jesus より:

    お初です。
    えー、自分のBLOGもカスタマイズしようと久々にBLOG TIPS関連を探していてここに辿り着きました。自分はcssとかHTMLとかすっかり忘れていて手探り状態です(苦笑)

    ちなみに(うちはMacなんですけども)トップページのプラグインがかなり崩れて表示されて居ります。老婆心まで。
    IE、safari、OPERA、fire fox、ネスケ(全てMac版です)で確認しました。

  6. galthie より:

    jesusさん、はじめまして。
    わざわざ、報告ありがとうございます。

    そうですか〜、困りました。
    一応Win XP SP2+IE6の環境を基準にみていまして、私の環境で大丈夫なので、すくなくともIEやIE関連のタブブラウザを使っている人は大丈夫かなと思っていたのです(T_T)
    以前にLinux + Mozilla 、Linux + Firefox の環境で見たことあるのですが、その時は表示が崩れていました。それでもなんとか見れる範囲だったです。それからいくつかプラグインを追加したりカスタマイズしたので、さらにおかしくなってしまったのかなぁ。

    IE6の環境で整えるので精一杯で色々な環境に対応できる記述を出来るスキルがないんですぅ(/TДT)/あうぅ・・・・そうですか、Mac + IEだと駄目ですかぁ。
    今の段階だと対応できそうもないですが、Firefox等でどのくらい崩れているか見てみます。
    報告ありがとうございました。

  7. コメントとトラックバックのツリー化

    最近、ブログカスタマイズに凝っています。
    いろいろあるので面白いです。
    nemoさんの影響が強いかな。
    勉強にもなりますし。

    ということで、今回は・・・。
    『コメントとトラックバックのツリー化』をしてみました。

タイトルとURLをコピーしました