Ameblo Hacks2～ユニークなアメブロカスタマイズをあなたに～

トップページだけレイアウトを変更するには？

当ブログでは写真のように、トップページだけサムネイルを並べて表示しています。
javascriptとサーバーサイドも使って実現していますが、制限を設ければこれはCSSだけでも可能です。
ただ、CSSで処理をすると、ブログ内の全てのページに同じCSSが適用されてしまいますので、トップページだけ異なるレイアウトにするには一工夫必要です。
それを解説するにはこの小技を紹介しなくてはいけません。

というわけで、今日はこのトップページだけレイアウトを変える、という小技をご紹介します。

トップページにしか無いものといえば？

通常、トップページのレイアウトは「アーカイブ」や「カテゴリ別」とほぼ同じように表示されます。
表示されるエントリーが異なるだけなんですね。
ではどうやってトップページだけ異なるCSSを適用するのかというと「メッセージボード」を使います。
メッセージボードは唯一トップページにだけ表示される要素ですので、利用するにはうってつけですね。

メッセージボードに直接CSSを書く！

メッセージボードに直接CSSを書くことにより、トップページだけ違うスタイルを適用します。
まず、通常通りstyleタグの中にCSSを記入します。
例として、エントリーの背景をトップページだけ変えてみましょう。

こんな感じです。
ただ、メッセージボード内は改行すると勝手に;<br>というタグが挿入されてしまいますので、改行を消してあげないといけません。

こんな感じです。
これで、トップページのみ違うCSSを適用できます。

注意点

この方法は、メインカラムのCSSを書き換えるのにとても有効ですが、第1サイドバー(aカラム)のCSSを書き換えるには向いていません。
なぜなら、aカラムの方が先に読み込まれますので、メインカラムに書いたCSSが適用されるには若干の時間差が生じてしまうからです。
ページの表示が終わってさえしまえば関係ないのですが、見えちゃダメ～なところが一瞬コンニチハしてしまうことは覚悟しないといけません。

では次回は、当ブログのようにトップページにエントリーのサムネイルを並べるレイアウトをCSSだけでやってみたいと思います。
その前に思いつきで違う記事を書くかもですが・・・。

新ブラウザゲーム「ブラウザ原人」オープンベータに参加してみる

アメブロとは全然関係ない話でアレですが、最近ピグの釣りにも疲れてきたので、手軽にできそうなブラウザゲームでもやってみようかと思い立ちました。
というわけで、ブラウザ三国志が大流行したときにもやらなかったブラウザゲームというものについに手を出してみることに・・・。

やってみるゲームは、ブラウザ原人という謎のゲーム。
RPGらしいですけど、なぜ原始時代・・・ｗ

「原始時代」という単語に謎の親近感が湧くのは、ボクらアラサーにとっては「ギャートルズ」とか「PC原人」とか「さよなら人類」なんかで親しみが微妙に深いからでしょうか。
あ、そういえば「北京原人」なんていう映画もありましたね。大コケしたやつｗ
遠い昔なのに、ちょっと懐かしい。そんな感じです。

明日からサービス開始らしいんですが、一度オンラインRPGをサービス開始初日から遊んでみたかったんですよね。
というわけで早速登録。
登録方法がわりと解りづらかったので写真付きで書いてみます。

まず、ブラウザ原人にアクセスしたら、原始時代にはおなじみのマンモスの肉が眼前に現れます。

まずはコイツをくりくりっとクリック！

するとこんな感じの画面になるので、もちろん下の新規登録をクリック！

・・・あれ？何も起きないぞ？？

と思いきや、画面下に登録フォームが現れていました。
これ、気づきにくいぞ・・・。

こんな感じです。

というわけで、一通り入力したら無事に登録終了です。

明日早速遊んでみます。楽しかったら多分またレポ書きます。
ゲーム内で見かけたら、是非一緒にあそんでください！

トラフィックエクスチェンジをやってはいけない3つの理由

実は、唯一読者登録をしていただいても、後で削除している類のブログがあります。
「トラフィックエクスチェンジ」紹介系のブログです。
トラフィックエクスチェンジは、最もやってはいけないアクセスアップの手段です。
アメブロユーザーには利用している人が結構いると聞きましたが、やめた方がいいですよ！

理由1…危険！

トラフィックエクスチェンジとは、要するに会員同士がお互いのサイトを閲覧しあってアクセス数をのばそうというシステムです。
その閲覧するページはランダムに選ばれるのですが、変なスクリプトを埋め込んでいるサイトを閲覧させられる可能性は非常に高いです。
ウイルスだけではなく、スパイウェア(PCに潜伏して情報などを抜き取る)に感染する恐れが強いです。
ウイルス対策ソフトを入れていても、危険なことに変わりありません。
IE6が未だに使われている状況を見ると、脆弱性に対する認識が低いのかなと思います。

理由2…効果が無い！

トラフィックエクスチェンジは中身の全く無いアクセスです。
アクセス増加によりランキングに載せ、それでランキングからアクセスが増えることを期待して利用するわけですが、これがビックリするほど効果が薄いと思います。
そもそもランキングからブログを覗く人はかなり少ないです。
一度でもカテゴリ別ランキングに10位以内に載ったことのある人はわかるかと思いますが、アクセス解析を見てもランキングからのアクセスなんて、100も無いです。
それに、来てくれた所でリピートしてくれる確率は非常に低いです。
よって、効果は残念ながら皆無に等しいというわけです。

理由3…みっともない！

トラフィックエクスチェンジはシステム上、トラフィックエクスチェンジとして自分のサイトが閲覧されるわけです。
つまり、利用しているのがバレバレです。
まぁ、同じく利用している人にしかバレないわけですが、ズルしてるのを見られるのは誰も嬉しくないだろうなと思います。

というわけで、個人的には超非推奨システムです。
超ハイリスク・ノーリターンです。
「それでもやる」という人は止めませんが・・・。

twitter投稿フォームプラグインのfirefoxでのエラー、原因判明

詰め合わせに入っているtwitter投稿フォームで、firefoxのみ投稿が出来ないという謎のエラーの原因がわかってきました。
意外にも外部CSSに原因があった模様。

外部CSSとは、こんなヤツです。

これは本来、ヘッダーに入れるべきものです。
これをプラグインに入れることでCSSを補填していたのですが、その部分がDOM構造に影響を与えて、セキュリティエラーを起こしているらしいです。
具体的には全く理解できていませんが・・・
ともかく、外部CSSをプラグインから外して、javascriptでヘッダーに挿入したら上手くいきました。
ちなみに、ヘッダーに挿入するコードは以下のような感じです。

jQuery("head").append('<link rel="stylesheet" href="http://t18.jp/ameblo/com_thumb/com_thumb_light.css" type="text/css">');

もちろん、scriptタグの中に書いてください。
2つ以上ある場合は、

jQuery("head").append(''<link rel="stylesheet" href="http://t18.jp/ameblo/com_thumb/com_thumb_light.css" type="text/css"><link rel="stylesheet" href="http://t18.jp/ameblo/com_thumb/com_thumb_light.css" type="text/css">');

こんな感じで文字数を増やさずにいくらでも追加できます。
結局ポップアップブロックは関係なかったです。。。
ちょっとしたもやもやを残しながらも、一応の解決ということで。

youtubeギャラリーを作ってみました。

フォトギャラリーっぽいyoutubeプレイヤーを作ってみました。

↑こんな感じになります。劣化popeyeですｗ

※追記・いろいろバグ取り完了。
IEってOSによって動きがちょっと違うの？みたいな気分。
画像ロード中のバグ解消。

では早速使い方を。

まず、表示させたい場所に好きなidでdiv要素を作ります。

例を挙げると、こんな感じです。

次に、フリープラグインにプラグイン詰め合わせをインポート。もう既に使ってくれている方は飛ばしてください。

さらに、次のコードを追加します。

例を挙げると、こんな感じです。

動画の数は増やしても重くはなりませんので、どんどん追加しちゃってください！
最後にCSSを書き加えます。

.ytpouter {
background: #EFF9C7;
border: 1px solid #E1F1A1;
border-bottom-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;
border-top-left-radius: 0px 0px;
border-top-right-radius: 10px 10px;
-moz-border-radius-bottomleft: 10px 10px;
-moz-border-radius-bottomright: 10px 10px;
-moz-border-radius-topleft:0px 0px;
-moz-border-radius-topright: 10px 10px;
height: 180px;
width: 240px;
padding: 10px;
}
.ytpouter:hover{
-webkit-box-shadow: #CCC 0px 0px 7px;
-moz-box-shadow: #CCC 0px 0px 7px;
border: 1px solid #D5E68E;
}
.ytpstagewrap {
background: #0C3B3D;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 0px 0px;
border-top-right-radius: 5px 5px;
-moz-border-radius-bottomleft: 5px 5px;
-moz-border-radius-bottomright: 5px 5px;
-moz-border-radius-topleft:0px 0px;
-moz-border-radius-topright:5px 5px;
}
.ytpstage {
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 0px 0px;
border-top-right-radius: 5px 5px;
-moz-border-radius-bottomleft: 5px 5px;
-moz-border-radius-bottomright: 5px 5px;
-moz-border-radius-topleft:0px 0px;
-moz-border-radius-topright:5px 5px;
overflow:visible;
position:relative;
background-repeat: no-repeat;
background-position:center center;
background-color:#0C3B3D;
}
.ytpstage .ytpnav{
background:#0C3B3D;
border-bottom-left-radius:5px 5px;
border-bottom-right-radius:5px 5px;
border-top-left-radius:0px 0px;
border-top-right-radius:0px 0px;
-moz-border-radius-bottomleft: 5px 5px;
-moz-border-radius-bottomright: 5px 5px;
-moz-border-radius-topleft:0px 0px;
-moz-border-radius-topright:0px 0px;
height:32px;
left:0px;
padding: 5px;
position: absolute;
top: 0px;
width: 104px;
-ms-filter: "alpha( opacity=80 )";
filter: alpha( opacity=80 );
opacity: 0.8;
z-index:20;
}
.ytpstage .flag{
width:0px;
}
.ytpstage:hover .flag{
width:1px;
}
.ytpouter:hover .ytpnav{
}
.ytpnav a {
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
-moz-border-radius-bottomleft: 5px 5px;
-moz-border-radius-bottomright: 5px 5px;
-moz-border-radius-topleft: 5px 5px;
-moz-border-radius-topright: 5px 5px;
display: block;
float: left;
height: 22px;
overflow: hidden;
padding: 5px;
text-indent: -900em;
}
.ytpprev {
background: url(http://stat.ameba.jp/user_images/20100823/22/mq24/68/8e/p/o0022002210710162312.png) no-repeat 50% 50%;
width: 22px;
}
.ytpplay{
background: url(http://stat.ameba.jp/user_images/20100823/22/mq24/89/3e/p/o0030002210710142054.png) no-repeat 50% 50%;
width: 30px;
}
.ytpnext {
background: url(http://stat.ameba.jp/user_images/20100823/22/mq24/f3/82/p/o0022002210710160483.png) no-repeat 50% 50%;
width: 22px;
}
.ytpnav a:hover {
background-color: #A1C436;
cursor: pointer;
}

ちょっと長いので、間違えないようにコピペしてくださいね。

popeyeというjQueryプラグインのインターフェースを真似して作りましたが、中身は別物です。
むしろ大分劣化していますが・・・ｗ
今回はブラウザチェックちゃんとやりましたので、気が向いたら使ってください～。

※追記あり【不具合のお知らせ】すすす、スミマセン

※追記　原因が(たぶん)わかりました
ポップアップブロックは関係なかったです。
外部CSSをヘッダー以外に書いていたのがマズかった模様。

前回のエントリーでご紹介したプラグインの詰め合わせなのですが、firefoxのみに不具合が発生しているようです。。。
今までクロームとIEで動いてfirefoxで動かないということがなかったので、かなり油断していました・・・。
使ってくれている方、どうもスミマセン。

その不具合なのですが、特にエラーが出るわけではなく、ツイッター投稿フォームから「投稿できない」というものです。
ちょっとまだ原因がわからず、対策をいろいろ考えています。
気になる方は、ツイッターのアレだけ外してお使いください・・・。

力不足でホントにスミマセン。。。

プラグイン詰め合わせを作ってみました

photo by andymangold

今までに記事でご紹介したカスタマイズをセットにして、使いやすいプラグインにしてみました。
今のところ、記事を読むのにかかる時間、ページトップに戻るボタン、ツイッター投稿フォームの3つがセットになっています。

では早速、使い方をご説明しましょう！

まず、プラグインにスクリプトタグを書いてインポートします。

準備はこれだけです。簡単でしょ！
では、機能ごとに使い方をご説明します。

ページトップへボタン

まず、ボタンに使う画像をどこかにアップロードして、そのURLをメモします。
次に、プラグインにスクリプトタグを書きます。

これでOKです。細かい設定は省いちゃいました。

記事を読むのにかかりそうな時間の表示

プラグインにスクリプトタグを書きます。

これでOKです。これも細かい設定は省いちゃいました。
見た目は各自CSSでご自由に。

ツイッター投稿フォーム

※追記：各記事の個別のページでのみ動作します。
プラグインにスクリプトタグを書きます。

これでOKです。見た目は各自CSSでご自由に。
当ブログのような感じでよろしければ、CSSの一番下に

.jMax{
width:400px;
height:150px;

}
.jMax textarea{
border:1px solid #ccc;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-khtml-border-radius:20px;
background-color:#fff;
font-family:Arial;
color:#999;
width:100%;
height:100px;
font-size:18px;
padding:10px;
resize:none;
overflow:auto;
}
.jMax textarea:focus{
outline:none;
background-color:#F3FFCF;
}
.jMax-text{
margin:5px 5px 5px 10px;
color: #ccc;
font-weight:bold;
font-size:20px;
}
.jMax-submit{
margin:5px 5px 5px 10px;
height:25px;
}
.jMax-submit input[type="submit"]{
background: #222 url(http://zurb.com/images/alert-overlay.png) repeat-x;
height:35px;
float:left;
width:200px;
color: #596F14;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
border:none;
cursor: pointer;
background-color: #DFDFDF;
font-size:20px;
border:1px solid #ccc;
}
.jMax-submit input[type="submit"].disabled{
cursor:default;
color:#999;
text-shadow: 0 -1px 1px #fff;
}
.jMax-submit input[type="submit"].enabled:hover{
background-color: #ccc;
color: #fff;
}

#twtarea{
margin-top:40px;
}

こんな感じで書き加えてください！

今回これを作るにあたって、OTCHY.NET様のライブラリと、codropsさまのインターフェースをお借りいたしました。ありがとうございます！
これからも面白そうな機能があれば加えていきたいなと思いますので、ご要望などあれば是非コメントお願いいたします！

twitter用つぶやきフォームを設置してみた

今更ながら突然、twitterをちょっとずつ学んでみようかと思い立ちました。
というわけで早速、記事についてつぶやく「つぶやきフォーム」を設置してみました。

殆ど他力本願でAPI少しいじっただけなのに得意げに記事にしちゃいますｗ

しかしそもそもうちの記事って、呟きたくなる要素がどこにもないような・・・・

設置方法は後ほど！

PR無しのスキン「スイート」のカスタマイズ方法を纏めてみました

photo by poolie

前回の記事で紹介させていただいた「PR無しスキン"スイート"のカスタマイズ法」ですが、内容的に初心者には厳しいということで、できるだけわかりやすく纏めてみました。
前回の記事に引き続き、Web 空間づくり～アメブロを自分好みのstyleにさまのブログを参考にさせていただいてます・・・というか、まんま転載のパクリ記事です・・・。
soleil666さま、感謝です。ありがとうございます！

かなり有効な方法ではありますが、アメーバID(ブログ)が2つ必要な場合がありますので、それに関しては自己責任でお願いします。

現在のデザインに少し手を加える場合

「今までスイートを利用してカスタマイズをしてきたけど、手直ししたい部分があるのに編集できなくなった」という人が対象になります。
まず、「サイドバーの配置」から「フリースペース」を、Aカラム(3カラムなら左サイドバー)の一番上に配置します。

次に、フリースペースの一番上にstyleタグを書きます。

これだけで追加のCSSが反映されます。
大幅なリモデルでなければこれで問題ありません。

ガラっとデザインを変えちゃいたい人

これには2通りあります。
javascriptを使う方法と、CSSを使う方法です。
javascriptを切っている人はかなり稀なので、個人的にはjavascriptをオススメします。
が、CSSの方が汎用性が高く書き方も簡単なので、そのあたりは好みで選んでください。
どちらの方法も、メインのブログのほかに、サブのブログが必要です。

まず、サブのブログにログインし、カスタム可能なスキンを選びます。
次にCSSの編集で、スイートスキンを使用しているメインのブログに適用させたいCSSをサブブログのCSSに書いて保存します。
ここで書いたCSSを、最終的にはスイートを使用するメインのブログのCSSとして使うことが出来ます。
それを保存したら、サブブログを開き右クリック。「ソースを表示」を選びます。

ソースを開いたら、「usrcss」という文字列が含まれるURLを探します。

このURLをメモし、サブブログからログアウトしたら、スイートを使用しているメインのブログにログインします。
ここから2通りに分かれます。

javascriptで行う場合

まず、サイドバーの配置から、フリープラグインをAカラムの一番上に配置します。

次に、フリープラグインのトップに以下のように書きます。

これでCSSをサブブログで編集したものに差し替えることが可能です！
では次に、CSSで行う場合です。

cssで行う場合

まず、「サイドバーの配置」から「フリースペース」を、Aカラムの一番上に配置します。

フリースペースの一番上に、以下のように記述します。

これで、サブブログのCSSがそのまま反映されます！

javascriptで行う場合とcssで行う場合の違い

javascript版の場合、スイートのCSSは無かったことになり、サブブログのCSSにまるまる差し替えられるような形になります。
CSS版の場合、スイートのCSSに追加する形でサブブログのCSSが適用されます。
ですので、どちらの方法を取るか、によって書くべきCSSが変わってくるというわけです。
もう一つ、javascript版の方が、CSSが適用されるスピードが速いらしいです。
このあたりはお好みでどうぞ～。

せっかく途中まで育てたブログを消したくない！という方は、早速今のうちに完成させちゃいましょう！

まだまだ「スイート」をカスタマイズする！

先日のメンテナンスでの一番のサプライズは、何と言っても一部のスキンの突然のCSS編集不可への切り替えでしょう。
ボクの旧ブログもそれで諦めて、ここに移転してリニューアルしちゃった、というわけです。
前のデザインには飽きていたのでいいんですけどねｗ

で、泣く泣く面倒くさいベーシックスキンへの移植を行った方も多数いらっしゃるかと思いますが、どうやら頑張ればなんとかカスタマイズは可能みたいです。

そんな技を記事にしてくれたのは、ボクのお気に入りのブログでいつも参考にさせていただいている、Web 空間づくり～アメブロを自分好みのstyleにさまのブログです。
うーん、本当に美しいデザインのブログですね・・・。ほれぼれ。

考え方としては・・・

つまりどういう事かというと、CSSをヘッダー以外から呼びだすとどうしてもレンダリングが開始されてからCSSが反映されるまでにタイムラグが生じてしまいますが、それを最小限に抑えよう、という試みです。
ページの読み込みは、ヘッダー→サイドAカラム→メインカラム→サイドBカラム、の順で行われるとのことで、ヘッダーの次に読み込まれるAカラムの一番上にプラグインを配置することで、そのタイムラグを最小にしてしまおうというアイディアです。

どうやってやるの！？

詳しくは、
http://ameblo.jp/soleil666/entry-10622963677.html
こちらと
http://ameblo.jp/soleil666/theme2-10018774094.html
こちらでご説明なさっています。
解らない部分がありましたら、こちらでも分かる範囲でご質問は受付したいと思います。

このように、Web 空間づくりさまのブログでは、まだまだPR広告なしのスキンをカスタマイズする技に挑戦なさっています。すんばらし～！
これは試してみる価値がありそうですね！

1 | 2 | 3 | 最初次のページへ >>

ブログ画像一覧を見る

このブログをフォローする

アメブロカスタマイズのお役立ち情報を発信していきます！