Twitter 人気記事
はてなブックマーク人気記事
So-netブログのヘッダに追加された検索欄と「GO!」メッセージを消す方法
» So-netブログ改造ワザ
久しぶりに So-net ブログ改造ワザの記事です。(該当しない方すみません)
今日から実装されたブログのヘッダにある検索欄なんですが、検索対象が「Web 全体」、「全ブログ」、「So-net ブログ」の3つだけで、自分のブログ記事だけを対象にする選択肢がなく使い勝手としてはイマイチ。
あと、未ログインの時に表示される赤い「GO!」アイコンとメッセージもスキンのカラーに合ってなくて気に入らないのでサクッと両方消してみました。
ヘッダーの HTML はメインのテンプレート HTML とは別にシステムが後から差し込むため、直接編集できないので JavaScript を利用します。
» ログイン後
下のコードを表示中のサイドバーコンテンツの「挿入テキスト(上または下)」のところに貼り付けます。表示されているサイドバーならどれでもかまいません。
» 未ログイン
» ログイン後
ヘッダーの幅をスキンの幅に合わせたいという人は以前書いた「So-netブログの新しいヘッダーの幅を変更する方法」も参考にしてみてください。
[追記] 2008/12/11
ページ全体のロードが終わってから書き換えるようにコードを変更しました。
あと、2行目が「<!--」のはずが「<--」なってたのを修正しました。お恥ずかしい。
スタイルシートだけで余計な処理をしなくていいのでこちらのほうがオススメです。
下のスタイルシートを表示中のサイドバーコンテンツの「挿入テキスト(上または下)」のところに貼り付けます。表示されているサイドバーならどれでもかまいません。
もしくは「デザイン」→「HTML編集」で head タグの中の </head> の直前あたりに貼り付けてもよいです。
» 貼り付けコード
今日から実装されたブログのヘッダにある検索欄なんですが、検索対象が「Web 全体」、「全ブログ」、「So-net ブログ」の3つだけで、自分のブログ記事だけを対象にする選択肢がなく使い勝手としてはイマイチ。
あと、未ログインの時に表示される赤い「GO!」アイコンとメッセージもスキンのカラーに合ってなくて気に入らないのでサクッと両方消してみました。
ヘッダーの HTML はメインのテンプレート HTML とは別にシステムが後から差し込むため、直接編集できないので JavaScript を利用します。
変更前の表示
» 未ログイン» ログイン後
下のコードを表示中のサイドバーコンテンツの「挿入テキスト(上または下)」のところに貼り付けます。表示されているサイドバーならどれでもかまいません。
貼り付けコード
<script type="text/javascript">
<!--
function remove_srchbox(){
var hdr_login = document.getElementById("myblog-header-right-no-login");
var hdr_li = hdr_login.getElementsByTagName("li");
if( hdr_li.length > 0 ) hdr_li[2].style.display = "none";
var hdr_right = document.getElementById("myblog-header-right");
hdr_right.style.display = "none";
}
if (window.addEventListener)
window.addEventListener("load", remove_srchbox, false);
else if (window.attachEvent)
window.attachEvent("onload", remove_srchbox);
//-->
</script>
<!--
function remove_srchbox(){
var hdr_login = document.getElementById("myblog-header-right-no-login");
var hdr_li = hdr_login.getElementsByTagName("li");
if( hdr_li.length > 0 ) hdr_li[2].style.display = "none";
var hdr_right = document.getElementById("myblog-header-right");
hdr_right.style.display = "none";
}
if (window.addEventListener)
window.addEventListener("load", remove_srchbox, false);
else if (window.attachEvent)
window.attachEvent("onload", remove_srchbox);
//-->
</script>
変更後
コードを埋め込むとこんな感じ↓で以前のレイアウトに戻ります。» 未ログイン
» ログイン後
ヘッダーの幅をスキンの幅に合わせたいという人は以前書いた「So-netブログの新しいヘッダーの幅を変更する方法」も参考にしてみてください。
[追記] 2008/12/11
ページ全体のロードが終わってから書き換えるようにコードを変更しました。
あと、2行目が「<!--」のはずが「<--」なってたのを修正しました。お恥ずかしい。
[追記] 2008/12/12
sknys さんに教えて頂いた方法も紹介しておきます。スタイルシートだけで余計な処理をしなくていいのでこちらのほうがオススメです。
下のスタイルシートを表示中のサイドバーコンテンツの「挿入テキスト(上または下)」のところに貼り付けます。表示されているサイドバーならどれでもかまいません。
もしくは「デザイン」→「HTML編集」で head タグの中の </head> の直前あたりに貼り付けてもよいです。
» 貼り付けコード
<style>
#searchForm{display:none}
.headerPR{display:none}
</style>
#searchForm{display:none}
.headerPR{display:none}
</style>
JavaScript 1 はじめてのプログラミングとJavaScriptの基礎 (CD-ROM付) (プログラミング学習シリーズ) (プログラミング学習シリーズ)
- 作者: 日向 俊二
- 出版社/メーカー: 翔泳社
- 発売日: 2009/01/30
- メディア: 大型本
- 作者: 岡田 克司
- 出版社/メーカー: 翔泳社
- 発売日: 2008/02/05
- メディア: 大型本
CSS&JavaScript表現アイデア帖 (インプレスムック エムディエヌ・ムック)
- 作者:
- 出版社/メーカー: MdN
- 発売日: 2008/07/18
- メディア: ムック
iTunes App Store / Mac App Store 音楽アプリベストセラー
for iPad
10件まで表示
for iPhone/iPod touch
for Macコメント絵文字スクリプトを新絵文字対応にしました [So-net blog用]
» So-netブログ改造ワザ
So-net ブログユーザ限定ネタです。
以前に公開したコメント絵文字スクリプトを新しい絵文字も使えるように改良してみました。
旧バージョンを使用しているブログは JavaScript のコードを差し替えなくても既に自動的に新バージョンに切り替わっているはずです。旧バージョンでは2カラム用と3カラム用を別々に用意していましたが、今回からどちらも同じコードになっています。
» サイドバーコンテンツの挿入テキストへ貼り付ける
上のコードを既に表示中のサイドバーコンテンツの「挿入テキスト(上または下)」のところに貼り付けます。サイドバーは表示されているものならどれでもかまいません。
このスクリプトのためにカスタムコンテンツを新規追加する必要はありません。
[注意] ブログの管理設定項目の「自動リンク」を「リンクしない」に設定して入力してください。
» HTML テンプレートのなかに貼り付ける
HTML 編集ができる人は「デザイン」→「テンプレート管理」→「HTML編集」でスキンの <head> ～ </head> の間に入れても OK です。
［注意］ コードを貼り付けるのはサイドバーか HTML テンプレートのどちらか片方です。
新バージョンでは最初に新旧絵文字の選択ボタンだけが表示されます。ボタンを押すとそれぞれの絵文字アイコンが表示されるので、コメント中の入れたい位置にカーソルをもっていって各アイコンをクリックして挿入してください。
コメントの書き込み中に挿入された絵文字は ［×××］ のような識別文字になりますが、コメントとして表示されるときに絵文字に変換されるようになっています。
動きがおかしいところとか、コードの貼り付けで分からないところとかあったら気軽に知らせてもらえると助かります。
[追記] 2008/04/01
ブログのレイアウト設定でサイドバーに「最近のコメント」を表示していないときにエラーが出ていたのを修正しました。
[追記]
このスクリプトを使ってコメントに入れた絵文字は、ケータイのブラウザ上では絵文字に変換されません。(現状のケータイのブラウザは JavaScipt に対応していないため)
以前に公開したコメント絵文字スクリプトを新しい絵文字も使えるように改良してみました。
旧バージョンを使用しているブログは JavaScript のコードを差し替えなくても既に自動的に新バージョンに切り替わっているはずです。旧バージョンでは2カラム用と3カラム用を別々に用意していましたが、今回からどちらも同じコードになっています。
貼り付けコードと設置方法
<script type="text/javascript" src="http://www003.upp.so-net.ne.jp/bjork/emoji4msg.js"></script>
» サイドバーコンテンツの挿入テキストへ貼り付ける
上のコードを既に表示中のサイドバーコンテンツの「挿入テキスト(上または下)」のところに貼り付けます。サイドバーは表示されているものならどれでもかまいません。
このスクリプトのためにカスタムコンテンツを新規追加する必要はありません。
[注意] ブログの管理設定項目の「自動リンク」を「リンクしない」に設定して入力してください。
» HTML テンプレートのなかに貼り付ける
HTML 編集ができる人は「デザイン」→「テンプレート管理」→「HTML編集」でスキンの <head> ～ </head> の間に入れても OK です。
［注意］ コードを貼り付けるのはサイドバーか HTML テンプレートのどちらか片方です。
初期表示
新バージョンでは最初に新旧絵文字の選択ボタンだけが表示されます。ボタンを押すとそれぞれの絵文字アイコンが表示されるので、コメント中の入れたい位置にカーソルをもっていって各アイコンをクリックして挿入してください。
旧絵文字リスト
新絵文字リスト
コメントの書き込み中に挿入された絵文字は ［×××］ のような識別文字になりますが、コメントとして表示されるときに絵文字に変換されるようになっています。
動きがおかしいところとか、コードの貼り付けで分からないところとかあったら気軽に知らせてもらえると助かります。
[追記] 2008/04/01
ブログのレイアウト設定でサイドバーに「最近のコメント」を表示していないときにエラーが出ていたのを修正しました。
[追記]
このスクリプトを使ってコメントに入れた絵文字は、ケータイのブラウザ上では絵文字に変換されません。(現状のケータイのブラウザは JavaScipt に対応していないため)
JavaScript 1 はじめてのプログラミングとJavaScriptの基礎 (CD-ROM付) (プログラミング学習シリーズ) (プログラミング学習シリーズ)
- 作者: 日向 俊二
- 出版社/メーカー: 翔泳社
- 発売日: 2009/01/30
- メディア: 大型本
- 作者: 岡田 克司
- 出版社/メーカー: 翔泳社
- 発売日: 2008/02/05
- メディア: 大型本
CSS&JavaScript表現アイデア帖 (インプレスムック エムディエヌ・ムック)
- 作者:
- 出版社/メーカー: MdN
- 発売日: 2008/07/18
- メディア: ムック
So-netブログでいつの間にかiframeが直接表示できてる
» So-netブログ改造ワザ
今日たまたま iframe タグが使えることに気がつきました。
いつの間に仕様が変わったんでしょうか？ (ていうか気付くの遅い？)
以前はシステム側で制限がかけられていて、書いたコードがそのまま表示されて正常に動きませんでした。回避方法として JavaScript の document.write を使って間接的に表示する小技を以前に紹介しましたが、もうそれも必要なくなりました。
↓Amazon のライブリンクもそのまま貼って表示できます。
いつの間に仕様が変わったんでしょうか？ (ていうか気付くの遅い？)
以前はシステム側で制限がかけられていて、書いたコードがそのまま表示されて正常に動きませんでした。回避方法として JavaScript の document.write を使って間接的に表示する小技を以前に紹介しましたが、もうそれも必要なくなりました。
↓Amazon のライブリンクもそのまま貼って表示できます。
So-netブログの新しいヘッダーの幅を変更する方法
» So-netブログ改造ワザ
今回は So-net ブログ限定改造ネタです。
今月21日のメンテからヘッダーとフッターのデザインが変更になりました。
ヘッダーだけがリキッドレイアウトになった今回の変更は(特にオリジナルスキンやスクリプトで部分的にスキンを改造している人には)不評が多いような気がします。管理画面は前のままになってたりしてなんだかちょっと中途半端ですよね。
ヘッダーだけ間延びしてしまってなんかイマイチな感じだったので、以前のレイアウトに近くなるように幅を変更する簡単なスクリプトを作ってみました。ついでにプリセット以外の背景色の指定と、フッターの背景色の指定もあわせて紹介します。
ブログの管理設定項目の「URL 自動リンク」を「リンクしない」に設定して入力してください
[追記] 2008/12/11
検索欄が追加されて HTML が変わったので余分なコードを削除しました。
(header_ul[1].style～の3行)
[追記] 2008/04/28
今更ですが、Firefox でログイン状態のときにヘッダー左側が折り返すのを修正しました。
[追記] 2008/02/10
sknysさんに右側のリンク表示が勝手に改行されないようにする方法を教えて頂きました。
元のヘッダーのプリセットカラーは変更したい色に近いものを選んでおくと、So-net ロゴ (GIF 画像)の輪郭が目立たなくなります。
フッターの場合、ブログ全体が読み込まれてからでないと要素を取得できないので若干手順が増えます。
どれもたいしたものではありませんが、参考になれば幸いです。
[関連サイト]
So-net blog - 2007/11/21 ヘッダー/フッタ-のデザイン変更
s k n y s - s y n k s 「猫にも出来るワイド・ヘッダ攻略改」
今月21日のメンテからヘッダーとフッターのデザインが変更になりました。
ヘッダーだけがリキッドレイアウトになった今回の変更は(特にオリジナルスキンやスクリプトで部分的にスキンを改造している人には)不評が多いような気がします。管理画面は前のままになってたりしてなんだかちょっと中途半端ですよね。
ヘッダーだけ間延びしてしまってなんかイマイチな感じだったので、以前のレイアウトに近くなるように幅を変更する簡単なスクリプトを作ってみました。ついでにプリセット以外の背景色の指定と、フッターの背景色の指定もあわせて紹介します。
コードの貼り付け場所
各コードの使い方は他の改造ネタと同様に、カスタムペインの空いているところにもしくはサイドバーコンテンツの「挿入テキスト(上または下)」のところに貼り付けます。ブログの管理設定項目の「URL 自動リンク」を「リンクしない」に設定して入力してください
ヘッダーの幅を変更する例
下のコードの「770px」の部分を各自のスキンに合わせて調整してください。[追記] 2008/12/11
検索欄が追加されて HTML が変わったので余分なコードを削除しました。
(header_ul[1].style～の3行)
[追記] 2008/04/28
今更ですが、Firefox でログイン状態のときにヘッダー左側が折り返すのを修正しました。
[追記] 2008/02/10
sknysさんに右側のリンク表示が勝手に改行されないようにする方法を教えて頂きました。
<script type="text/javascript">
<!--
header = document.getElementsByTagName("table")[0];
header.align = "center";
header.style.width = "770px";
header_ul = header.getElementsByTagName("ul");
header_ul[0].style.whiteSpace = "nowrap";
//-->
</script>
<!--
header = document.getElementsByTagName("table")[0];
header.align = "center";
header.style.width = "770px";
header_ul = header.getElementsByTagName("ul");
header_ul[0].style.whiteSpace = "nowrap";
//-->
</script>
ヘッダーの背景色を変更する例
下のコードの「#CCCCCC」の部分を任意の6ケタのRGB形式で指定してください。元のヘッダーのプリセットカラーは変更したい色に近いものを選んでおくと、So-net ロゴ (GIF 画像)の輪郭が目立たなくなります。
<script type="text/javascript">
<!--
document.getElementsByTagName("table")[0].style.background = "#CCCCCC";
//-->
</script>
<!--
document.getElementsByTagName("table")[0].style.background = "#CCCCCC";
//-->
</script>
フッターの背景色を変更する例
下のコードの「#CCCCCC」の部分を任意の6ケタのRGB形式で指定してください。フッターの場合、ブログ全体が読み込まれてからでないと要素を取得できないので若干手順が増えます。
<script type="text/javascript">
<!--
function footerColor(){
document.getElementById("footer").style.background = "#CCCCCC";
}
if (window.addEventListener){
window.addEventListener("load", footerColor, false);
}else if (window.attachEvent){
window.attachEvent("onload", footerColor);
}
//-->
</script>
<!--
function footerColor(){
document.getElementById("footer").style.background = "#CCCCCC";
}
if (window.addEventListener){
window.addEventListener("load", footerColor, false);
}else if (window.attachEvent){
window.attachEvent("onload", footerColor);
}
//-->
</script>
上記３つを合わせて変更する場合の例
<script type="text/javascript">
<!--
header = document.getElementsByTagName("table")[0];
header.align = "center";
header.style.width = "770px";
header.style.background = "#CCCCCC";
header_ul = header.getElementsByTagName("ul");
header_ul[0].style.whiteSpace = "nowrap";
function footerColor(){
document.getElementById("footer").style.background = "#CCCCCC";
}
if (window.addEventListener){
window.addEventListener("load", footerColor, false);
}else if (window.attachEvent){
window.attachEvent("onload", footerColor);
}
//-->
</script>
<!--
header = document.getElementsByTagName("table")[0];
header.align = "center";
header.style.width = "770px";
header.style.background = "#CCCCCC";
header_ul = header.getElementsByTagName("ul");
header_ul[0].style.whiteSpace = "nowrap";
function footerColor(){
document.getElementById("footer").style.background = "#CCCCCC";
}
if (window.addEventListener){
window.addEventListener("load", footerColor, false);
}else if (window.attachEvent){
window.attachEvent("onload", footerColor);
}
//-->
</script>
どれもたいしたものではありませんが、参考になれば幸いです。
[関連サイト]
So-net blog - 2007/11/21 ヘッダー/フッタ-のデザイン変更
s k n y s - s y n k s 「猫にも出来るワイド・ヘッダ攻略改」
So-netブログでAmazonアソシエイトの画像サイズを変えたい場合
» So-netブログ改造ワザ
So-net ブログでは記事の中に Amazon アソシエイトが簡単に貼れるようになっていてとても便利なんですが、吐き出されたコードをそのまま使うと画像サイズがちょっと大きくて、レイアウト的にもう少し小さくしたいなと思うときってありませんか？
そういうときは画像の URL の一部分に "AAxxx_" を追加すると画像のサイズを調整することができます。("xxx"の部分は表示したいピクセルサイズ)
例えば、アソシエイトのタグの中の画像 URL (IMG タグ) の後半部分
/P/B000MR9ESU.01._SCMZZZZZZZ_V42124266_.jpg
を 120ピクセルのサイズで表示させたい場合は
/P/B000MR9ESU.01._AA120_SCMZZZZZZZ_V42124266_.jpg
または
/P/B000MR9ESU.01._SCMZZZZZZZ_V42124266_AA120_.jpg
のように変更します。
最近は上のパターンの URL 以外に images 以降の後半部分が
/I/31V355WceSL.jpg
というような短い形式のものもあって、
この場合は "AA" (もしくは "SL") の前にさらに "._" を追加して
/I/31V355WceSL._AA120_.jpg
/I/31V355WceSL._SL120_.jpg
のようにしてやると同ように画像サイズが変更できます。
ちなみにパラメータの "AAnnn" は縦横どちらか長いほうにあわせて正方形にリサイズ、 "SLnnn" は縦横どちらか長いほうを指定のサイズに変更してリサイズしてくれます。
縦横どちらかを指定したい場合は、横なら "SXnnn", 縦なら "SYnnn" で指定できます。
この方法は CD ジャケット画像以外にも使えます。基本的に Amazon 共通の仕様なので So-net ブログに限らず他のブログやサイトでも有効です。
そういうときは画像の URL の一部分に "AAxxx_" を追加すると画像のサイズを調整することができます。("xxx"の部分は表示したいピクセルサイズ)
例えば、アソシエイトのタグの中の画像 URL (IMG タグ) の後半部分
/P/B000MR9ESU.01._SCMZZZZZZZ_V42124266_.jpg
を 120ピクセルのサイズで表示させたい場合は
/P/B000MR9ESU.01._AA120_SCMZZZZZZZ_V42124266_.jpg
または
/P/B000MR9ESU.01._SCMZZZZZZZ_V42124266_AA120_.jpg
のように変更します。
最近は上のパターンの URL 以外に images 以降の後半部分が
/I/31V355WceSL.jpg
というような短い形式のものもあって、
この場合は "AA" (もしくは "SL") の前にさらに "._" を追加して
/I/31V355WceSL._AA120_.jpg
/I/31V355WceSL._SL120_.jpg
のようにしてやると同ように画像サイズが変更できます。
ちなみにパラメータの "AAnnn" は縦横どちらか長いほうにあわせて正方形にリサイズ、 "SLnnn" は縦横どちらか長いほうを指定のサイズに変更してリサイズしてくれます。
縦横どちらかを指定したい場合は、横なら "SXnnn", 縦なら "SYnnn" で指定できます。
この方法は CD ジャケット画像以外にも使えます。基本的に Amazon 共通の仕様なので So-net ブログに限らず他のブログやサイトでも有効です。
リストで一覧表示
