So-net無料ブログ作成
» スポンサーリンク
So-netブログ改造ワザ
前の5件 | -

So-netブログのヘッダに追加された検索欄と「GO!」メッセージを消す方法
» So-netブログ改造ワザ 

久しぶりに So-net ブログ改造ワザの記事です。(該当しない方すみません)

今日から実装されたブログのヘッダにある検索欄なんですが、検索対象が「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>


変更後

コードを埋め込むとこんな感じ↓で以前のレイアウトに戻ります。

» 未ログイン


» ログイン後


 ヘッダーの幅をスキンの幅に合わせたいという人は以前書いた「So-netブログの新しいヘッダーの幅を変更する方法」も参考にしてみてください。

[追記] 2008/12/11
ページ全体のロードが終わってから書き換えるようにコードを変更しました。
あと、2行目が「<!--」のはずが「<--」なってたのを修正しました。お恥ずかしい。

[追記] 2008/12/12

sknys さんに教えて頂いた方法も紹介しておきます。
スタイルシートだけで余計な処理をしなくていいのでこちらのほうがオススメです。

 下のスタイルシートを表示中のサイドバーコンテンツの「挿入テキスト(上または下)」のところに貼り付けます。表示されているサイドバーならどれでもかまいません。
 もしくは「デザイン」→「HTML編集」で head タグの中の </head> の直前あたりに貼り付けてもよいです。

» 貼り付けコード
<style>
#searchForm{display:none}
.headerPR{display:none}
</style>



10日でおぼえる JavaScript 入門教室 新版

10日でおぼえる JavaScript 入門教室 新版

  • 作者: 岡田 克司
  • 出版社/メーカー: 翔泳社
  • 発売日: 2008/02/05
  • メディア: 大型本
nice!(9)  コメント(15)  トラックバック(1)   » カテゴリー:So-netブログ改造ワザ
permalink
trackback
このエントリーをはてなブックマークに追加


iTunes App Store / Mac App Store 音楽アプリベストセラー
for iPad





for iPhone/iPod touch





for Mac





» スポンサーリンク
DMR

サウンドハウス

コメント絵文字スクリプトを新絵文字対応にしました [So-net blog用]
» So-netブログ改造ワザ 

So-net ブログユーザ限定ネタです。
以前に公開したコメント絵文字スクリプトを新しい絵文字も使えるように改良してみました。

 旧バージョンを使用しているブログは自動的に新バージョンに切り替わっているはずです。旧バージョンでは2カラム用と3カラム用を別々に用意していましたが、今回からどちらも同じコードになっています。

貼り付けコードと設置方法

貼り付ける方法は2つあります。
テンプレート HTML の直接編集に自信のない人はサイドバーのテキストに貼り付ける方法をおすすめします。

» 貼り付ける JavaScript コード
<script type="text/javascript" src="http://www003.upp.so-net.ne.jp/bjork/emoji4msg.js"></script>

» サイドバーコンテンツの挿入テキストへ貼り付ける


 上のコードを既に表示中のサイドバーコンテンツの「挿入テキスト(上または下)」のところに貼り付けます。
 利用するサイドバーは表示されているものならどれでもかまいません。
 このスクリプトのためにカスタムコンテンツを新規追加する必要はありません。

[注意] ブログの管理設定項目の「自動リンク」を「リンクしない」に設定して入力してください。

» HTML テンプレートのなかに貼り付ける


 HTML の編集ができる人は「デザイン」→「テンプレート管理」→「HTML編集」でスキンの HTML コードの上のほうにある </head> の1行上 に入れるか、もしくは HTML のいちばん下のほうにある </body> の1行上に入れても OK です。

[注意] コードを貼り付けるのはサイドバーか HTML テンプレートのどちらか片方です。

表示の状態と使い方

» 初期表示


新バージョンでは最初に新旧絵文字の選択ボタンだけが表示されます。
ボタンを押すとそれぞれの絵文字アイコンが表示されるので、コメント中の入れたい位置にカーソルをもっていって各アイコンをクリックして挿入してください。

» 旧絵文字リスト


「旧絵文字」ボタンを押すと古い絵文字アイコンが表示されます。
コメント中に挿入したい位置に入力カーソルを移動させてアイコンをクリックすると、コメント中にアイコン文字コードが挿入されます。

挿入された絵文字は [×××] のようなコード形式になりますが、コメントとして表示されるときに絵文字に変換されます。

» 新絵文字リスト


「新絵文字」ボタンを押すと新しい絵文字アイコンが表示されます。
コメント中に挿入したい位置に入力カーソルを移動させてアイコンをクリックすると、コメントアイコン文字コードが挿入されます。


動きがおかしいところとか、コードの貼り付けで分からないところとかあったら気軽に知らせてもらえると助かります。

[追記]
このスクリプトを使ってコメントに入れた絵文字は、ケータイ、スマホのブラウザ上では絵文字に変換されません。
スマホのブラウザでは 「PC レイアウト」を選択した場合は通常と同じように表示されます。


10日でおぼえる JavaScript 入門教室 新版

10日でおぼえる JavaScript 入門教室 新版

  • 作者: 岡田 克司
  • 出版社/メーカー: 翔泳社
  • 発売日: 2008/02/05
  • メディア: 大型本
nice!(124)  コメント(184)  トラックバック(2)   » カテゴリー:So-netブログ改造ワザ
permalink
trackback
このエントリーをはてなブックマークに追加


So-netブログでいつの間にかiframeが直接表示できてる
» So-netブログ改造ワザ 

今日たまたま記事のなかで iframe タグが使えることに気がつきました。
いつの間に仕様が変わったんでしょうか? (ていうか気付くの遅い?)

 以前はシステム側で制限がかけられていて、書いたコードがそのまま表示されて正常に動きませんでした。回避方法として JavaScript の document.write() を使って間接的に表示する小技を以前に紹介しましたが、もうそれも必要なくなりました。

↓Amazon のライブリンクもそのまま貼って表示できます。


nice!(0)  コメント(0)  トラックバック(0)   » カテゴリー:So-netブログ改造ワザ
permalink
trackback
このエントリーをはてなブックマークに追加


So-netブログの新しいヘッダーの幅を変更する方法
» So-netブログ改造ワザ 

今回は So-net ブログ限定改造ネタです。
今月21日のメンテからヘッダーとフッターのデザインが変更になりました。

 ヘッダーだけがリキッドレイアウトになった今回の変更は(特にオリジナルスキンやスクリプトで部分的にスキンを改造している人には)不評が多いような気がします。管理画面は前のままになってたりしてなんだかちょっと中途半端ですよね。

 ヘッダーだけ間延びしてしまってなんかイマイチな感じだったので、以前のレイアウトに近くなるように幅を変更する簡単なスクリプトを作ってみました。ついでにプリセット以外の背景色の指定と、フッターの背景色の指定もあわせて紹介します。

コードの貼り付け場所

 各コードの使い方は他の改造ネタと同様に、カスタムペインの空いているところにもしくはサイドバーコンテンツの「挿入テキスト(上または下)」のところに貼り付けます。
ブログの管理設定項目の「URL 自動リンク」を「リンクしない」に設定して入力してください

  

ヘッダーの幅を変更する例

下のコードの「770px」の部分を各自のスキンに合わせて調整してください。
[追記] 2008/12/11
検索欄が追加されて HTML が変わったので余分なコードを削除しました。
(header_ul[1].style~の3行)
[追記] 2008/04/28
今更ですが、Firefox でログイン状態のときにヘッダー左側が折り返すのを修正しました。
[追記] 2008/02/10
sknysさんに右側のリンク表示が勝手に改行されないようにする方法を教えて頂きました。

<script type="text/javascript">
<!--
var 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>

フッターの背景色を変更する例

下のコードの「#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>

上記3つを合わせて変更する場合の例

<script type="text/javascript">
<!--
var 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 「猫にも出来るワイド・ヘッダ攻略改」
nice!(10)  コメント(20)  トラックバック(3)   » カテゴリー:So-netブログ改造ワザ
permalink
trackback
このエントリーをはてなブックマークに追加


So-netブログでAmazonアソシエイトの画像サイズを変えたい場合
» So-netブログ改造ワザ 

So-net ブログでは記事の中に Amazon アソシエイトが簡単に貼れるようになっていてとても便利なんですが、吐き出されたコードをそのまま使うと画像サイズがちょっと大きくて、レイアウト的にもう少し小さくしたいなと思うときってありませんか?

そういうときは画像の URL の一部分に "AAxxx_" を追加すると画像のサイズを調整することができます。("xxx"の部分は表示したいピクセルサイズ)

↓そのまま貼り付けるとこのサイズ
Summer Sessions, Vol. 2

Summer Sessions, Vol. 2

  • 出版社/メーカー: Om
  • 発売日: 2007/07/10
  • メディア: CD


例えば、アソシエイトのタグの中の画像 URL (IMG タグ) の後半部分
/P/B000MR9ESU.01._SCMZZZZZZZ_V42124266_.jpg

を 120ピクセルのサイズで表示させたい場合は
/P/B000MR9ESU.01._AA120_SCMZZZZZZZ_V42124266_.jpg

または
/P/B000MR9ESU.01._SCMZZZZZZZ_V42124266_AA120_.jpg

のように変更します。

↓変更後
Summer Sessions, Vol. 2

Summer Sessions, Vol. 2

  • 出版社/メーカー: Om
  • 発売日: 2007/07/10
  • メディア: CD


最近は上のパターンの URL 以外に images 以降の後半部分が
/I/31V355WceSL.jpg

というような短い形式のものもあって、
この場合は "AA" (もしくは "SL") の前にさらに "._" を追加して
/I/31V355WceSL._AA120_.jpg
/I/31V355WceSL._SL120_.jpg

のようにしてやると同ように画像サイズが変更できます。

 ちなみにパラメータの "AAnnn" は縦横どちらか長いほうにあわせて正方形にリサイズ、"SLnnn" は縦横どちらか長いほうが指定のサイズに変更されます。
 縦横どちらかに合わせたい場合は横なら "SXnnn", 縦なら "SYnnn" で指定します。

この方法は CD ジャケット画像以外にも使えます。
基本的に Amazon 共通の仕様なので So-net ブログに限らず他のブログやサイトでも有効です。
nice!(1)  コメント(0)  トラックバック(0)   » カテゴリー:So-netブログ改造ワザ
permalink
trackback
このエントリーをはてなブックマークに追加


前の5件 | -
So-netブログ改造ワザ