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

ルームにjQueryを導入してみる

ちょっと今回は初心者お断りな内容です。スミマセン・・・。

ルーム内にjQueryを導入する方法があります。
あんまりおおっぴらにするとアメブロ側に対策されてしまうかな～なんて思って今まで記事にしなかったのですが、意外とリクエストがあったので書いちゃおうかと思います。
ここのアクセス数なんてたかが知れてるし、大丈夫でしょ！ということで・・・

ルームとブログの違い

アメーバのルームとブログの違いの一つに、jQueryが標準装備されているか否か、という要素があります。
ブログではjQueryを使ったテンプレートを使用しているので、(実は旧バージョンですが)便乗して使うことが出来ます。
しかし、ルームで使われているのはjQueryではなくmootoolsというライブラリなんです。
そこで、ルームでjQueryを使うには自分で導入するしかありません。
導入にはサーバーを自分で用意する必要があります。
まだお持ちでない方には(しつこいようですがｗ)、ロリポップ！が超オススメですので検討してみて下さい！

jQueryをダウンロード

まず、jQueryをダウンロードしましょう！
download jQueryのロゴをクリックしてダウンロードしてください。
ダウンロードしたらメモ帳などのテキストエディタで開き、一番最後に

jQuery.noConflict();

と書き加えて保存し、サーバーにアップします。

なぜ「jQuery.noConflict();」が必要なのかというと、その理由はmootoolsと深く関わってきます。
先ほど書いたようにルームには標準でmootoolsが使われているのですが、mootoolsもjQueryも「$」を名前空間に使いますので、一緒に使ってしまうと意図しない動きをしてしまうのです。
「jQuery.noConflict();」はjQueryの「$」を使えないようにする命令です。
これを書くことにより「$」をjQueryのために使うことは一切出来なくなりますので「$」を使ったjQueryのコードは全ての「$」を「jQuery」と書き換えなくてはいけなくなりますが、安定した動作は約束されます。

では実際にルームにjQueryを導入してみましょう。

ルームのフリースペースを使ってjQueryをインポートする

ルームのフリースペースにスクリプトタグを書きますが、普通に書くだけではスクリプトタグが文字列として表示されるだけでスクリプトは実行されません。
一工夫が必要です。
このように書いてみましょう。

</p>"<script type="text/javascript" src="アップしたjQueryのURL"></script>"<p>

pタグと「"」が変な位置にありますが、こう書かないと動きませんので、細かいことは気にしないでこのまま書いちゃってください。
※改行は絶対にNGです
スクリプトタグが文字列として表示されなければ成功です。
これでjQueryのインポートは出来ましたので、あとはそれを使ってプログラミングするだけです！

プログラムは外部ファイルに！

jQueryを導入するだけでは何も起きませんから、それを利用してプログラムを書かないといけません。
ルームのスクリプトは外部ファイルに書いて、サーバーにアップしてインポートするのがベストです。
というのも、ルームのフリースペースでは改行するとBRタグが自動的に挿入されてしまいますので、エラーを起こしたり非常に見辛くなってしまいます。
ですからプログラムは外部ファイルに書いて、先ほどjQueryをインポートしたのと同じやり方でインポートすればOKです。

ここに一例を示します。

</p>"<script type="text/javascript" src="アップしたjQueryのURL"></script>""<script type="text/javascript" src="自作javascriptファイルのURL"></script>"<p>

このように、フリープラグインのような感覚で書くことができます(ただし改行はしないこと)
ボクの旧ブログのルームはjQueryがふんだんに使用されていますので、試しにいろいろ触って遊んでみてください！

今回はちょっと初心者お断りな内容でしたが、脱初心者した頃に思い出していただければ幸いです。
わかっちゃう方は、早速ルームの改造を楽しんでください！

linkwithin導入の小技(センタリングなど)

アメブロでも導入されている方が既に多数いらっしゃる「linkwithin」。
このウィジェット(ブログパーツ)は、関連するエントリーをサムネイル付きで表示してくれるというなんともありがたいサービスです。
登録から使用のプロセスも驚くほど簡単ですので、初心者でもすぐに利用出来ると思います。

当ブログでも(そのうち外す予定ですが)利用させていただいてますが、中央配置をする方法などのご質問がありましたので、今回はそういった小技をご紹介しようと思います。

FAQを読んで悩み解決！？

まずは「よくある質問」いわゆるFAQを読むのが基本です。
というわけで、用意されているFAQを早速日本語に直してみます。

Q…動作しません
A…サポートページからメールを送ってください。大体3日以内に回答できるよう頑張ります。

Q…表示される記事はどのように選ばれますか？
A…タグやタイトル、記事の内容などの数種類の要素を基にしています。

Q…たまにサムネイルの代わりにテキストリンクが表示されます。なぜですか？
A…画像の無い記事が多く選ばれた場合テキストリンクになります。

Q…表示させる位置はどうすればカスタマイズできますか？
A…表示させたい場所に<div class="linkwithin_div"></div>と書いてください。

Q…ウィジェット上部のテキストはどうすればカスタマイズできますか？
A…表示させたいページ上(アメブロならフリープラグイン)にHTMLで<script>linkwithin_text='好きな文章';</script>と書いてください。

Q…ウィジェット内に広告は表示されますか？どうやって収入を得ていますか？
A…収益を共有するような仕組みを将来的に考えていますが、今のところはありませんし、あくまでもオプションにする予定でいます。

Q…数個のブログを持っているのですが、それぞれにウィジェットを使うにはどのようにしますか？
A…それぞれのブログに対してそれぞれ最初から使用申請してください。それぞれにユニークなIDを発行しなくてはうまく動作しません。

以上、FAQを日本語に直してみました。
これでちょっとした問題は解決できるかと思います。

それではこれを踏まえて、ここからは本題の「ボク的小技」をご紹介したいと思います。

小技その1…センタリング

よく質問を受けるのが、センタリングの方法です。
これはごく普通にCSSでやっちゃいます。

#lws_0{
padding:0 35px;/*この35pxの部分を微調整していい感じにしてください*/
}

これだけでOKですよ！
簡単ですので、サクっとやっちゃいましょう！

小技その2…アドセンスと記事フッターの間に表示

↑こんな感じですね。
これはプラグインにスクリプトを書きます。

jQuery(function(){if(jQuery(".entry").length){jQuery(".entry .foot").eq(0).before('<div class="linkwithin_div"></div>');
jQuery.getScript("http://www.linkwithin.com/widget.js");
}
});

そして、以下のコードを消します。

これでできるはずです！

小技その3…上部テキストを画像に変える

ウチでいうところの「オススメエントリー」の部分ですね。
プラグインにこのように書きます。

これでOKです。
要するに、FAQの下から3番目を利用して、テキスト部分にimgタグをいれてやっただけなんですよね。手抜きです。

と、いうわけで、FAQの翻訳と小技を３つほどご紹介しました。
お役に立てましたでしょうか？

超便利だけど不満な点も無いではないlinkwithinですが、せっかくの素晴らしい機能をフル活用していきましょう～。

高品質なフリーアイコンでブログを華やかに！

ブログをキレイに彩るためには、可愛らしいバナーやアイコンが欲しいところです。
でもこれらを自分で作るとなると、知識という頑張れば乗り越えられるハードルの向こう側に「センスと絵心」というさらに高いハードルが待ち構えています。

そこで重宝するのが、そういう高い能力と優しい心をもったデザイナーさんたちがwebで公開しているフリーのアイコンです。
最近では、特に海外のサイトでは大変高品質でモダンなアイコンが惜しげもなく配布されていますので、それを使わない手は無いというもの。

今回はオススメのアイコン配布サイト、アイコン検索サイトを紹介しますので、是非ご覧になってください。
使うときは、必ずライセンス(利用規約)を確認してくださいね。

icon finder

超有名なフリーアイコン検索サイトです。
キーワード検索はもちろん、APIなども提供しています。
収録数も相当なもので、ココだけでもほぼ欲しい用途のアイコンは見つけられると思います。

very icon

とても見やすいフリーアイコン検索サイトです。
収録数はそれほどでもなさそうですが、一見の価値ありです。

icon fever

ブログのような形式で新着のアイコンをどんどん紹介しているサイトです。
ジャンル毎に分かれていますので、用途別で探すにはいい感じです。

ホームページを作る人のネタ帳

fc2ブログ「ホームページを作る人のネタ帳」様の記事より「ハイクオリティ無料アイコンまとめ100パック2009年最新版」です。
このまとめ記事は本当に素晴らしいです。
100ものアイコンセットが1記事で一気に紹介されています。書くのにどれくらい時間掛かったんだろう・・・。
ともあれ、折角なので有り難く活用させていただくということでｗ

殆どが海外ものですが、本当にクオリティが高いものばかりですね。
あとはどのアイコンセットをどういう風に使うか・・・
自分のブログのイメージを大事にして、アイコンを使いすぎないように効果的に使って、センスを発揮してください！

サイドバー広告をなんとかする…その２

これまでと違って、サイドバー広告の無いスキンがカスタマイズ不可となってしまいました。
と、いうわけで、ますますデザインが難しくなってしまいました。南無。
サイドバー広告はサイドバーの幅に全然合ってないので、カスタマイズする時にやたらと邪魔なんですよね・・・。
正直言って、これはワザと嫌がらせなのかと思うくらい邪魔です。
アメブロさんもクリックさせる気があるならもっとオシャレにつくってもらいたいですよね！まったく。

というわけで、あの中途半端なサイズの広告を消さずにデザインに組み込むにはどうすればいいか、改めて考えてみました。

「木を隠すなら森の中」作戦

別に広告を隠したいわけではないんですが、どうすれば違和感なく設置できるかを考えたときに、やはり広告は広告コーナーに置くのが一番いいだろう、との結論に達しました。
と、いうわけで、当ブログでは広告コーナーを新たに設け、そこにサイドバー広告を移動しています。

3カラム右メニューで広告コーナーを作ってみる

広告ありきの中身のないアフィブログにならないように、まずは記事ありきでデザインしないといけません。
左のカラムが一番目立ちますので、中央メインの3カラムは勿体無いです。
左がメイン、中央がいつものサイドバー、右に広告コーナーを作りましょう！
これで、広告が本文の邪魔をする心配が無くなります。
サイドバー広告も自動的に右のカラムに挿入されますし、とても都合がいいですね！

サイドバー広告は幅が120px、高さが240pxです。
広告用カラムはこれより広めの幅を取って作りたいと思います。
それにはまず広告素材を探して、気に入ったものがあればその素材の幅に合わせるように設定すればOKです。
このブログを見ていただければわかると思うのですが、サイドバー広告は幅が合わなくなるので、右側に違うサイズの広告を入れて幅を統一させるようにしています。
その隣に幅を合わせやすい広告素材を探すことも重要になります。

というわけで、広告素材を探してみましょう。

A8.netに登録してみる

A8.netは国内最大手のアフィリエイト・サービス、つまり、ブログに掲載する広告を紹介してくれる業者さんです。非常に安心して利用できますよ。

広告探しのコツは、まず自分自身が興味を持つ商品を選ぶということです。
自分が興味のある商品を選ぶと必然的に読者にも興味を持ってもらいやすいですから、これはかなり重要なファクターです。
サイトの見た目にも合いますし、収益が上がる可能性が上がります。

次に、怪しげな商品は絶対に選ばない、ということも大事です。
怪しげな商品の広告はブログやサイトのイメージを台無しにしてしまいます。

A8.netは広告のサイズからも検索ができますので、ガンガン検索していい感じな広告を探しましょう！
オススメは「フリーサイズ」で300pxの幅のものです。
これも自分のブログにあったものにすればよいのではないでしょうか？

CSSで調整しよう

まず、広告スペースにするサイドバーの幅を調整します。

#sub_b{
width:300px;/*ここをお好みの値に調整*/
}

次に、サイドバー広告に手を加えて見やすくします。

#defaultAd > h4{
position:absolute;
top:-9999px;
}
#sub_b div#defaultAd.defaultAd2 .menu_frame {
overflow: visible;
width: 120px;
height:240px;
}
#sub_b div#defaultAd div,#sub_b div#defaultAd{
margin: 0 0 0 0;
padding: 0 0 0 0;
}

上記のCSSでサイドバーの上方左端に移動できたかな、と思います。
次に、フリースペースを右サイドバーに設置し、その中にサイドバー広告の右側に置く広告タグを書きます。
<div id="yokonokoukoku">ここに広告タグをコピペ</div>
で、CSSに手を加えます。

#sub_b{
position:relative;
}
#yokonokoukoku{
position:absolute;
top:0px;/*縦位置調整*/
right:0px;/*横位置調整*/
}

最後に、フリースペースの続きに好きな広告タグ（カラムの幅に合うもの）を好きなだけ書きましょう。
この時、改行を入れないで書いてしまうのがポイントです。

さぁ、これで完成です！
完成すると当ブログのような感じになります。

広告素材によってはちょっとうるさく感じたりしてしまいますので、素材選びが大事だと思います。
是非トライしてみてください！

カッコいいフォントを使ってヘッダー画像を作ろう！

未完成なブログですが、記事を書いて増やしていこうと思いますｗ
では本題。

初心者の方がブログのカスタマイズで一番悩むのが「ヘッダー画像」ではないでしょうか？
参考にするのは大体芸能人ブログになるでしょうから、それは当然です。
実際殆どカスタマイズしていなくても、美麗なヘッダー画像があるとそれだけで、なんだか全体がキレイに見えちゃったりするものですよね。

手っ取り早く画像を加工して作るには、キレイな写真とカッコいいフォントをゲットするのが一番の近道です。
画像加工ソフトはやはりイラストレーターとフォトショップがベストです。
フォトショップはアホみたいに高いので、フリーソフトのGIMP2(使ったこと無いですがなぜかインストール済みｗ)もいいらしいですし、それを使う手もあります。
使う方次第ということで・・・。

では早速、フリーフォントを探すのに適したサイトを紹介しましょう。

※ここで紹介するフリーフォントは、http://ameblo.jp/meat18/entry-10602775619.htmlの記事で紹介したような方法を禁止しているものが多いです。素直に画像の加工用に使いましょう～。

・creamundo.com

creamundo.comには、数千種類ものフリーフォントが紹介されています。逆にありすぎて探すのに苦労するかも？
お気に入りフォントを登録できたりもしますので、急を要さない人には見ごたえがあっていいかもしれません。

・フリーフォント最前線

フリーフォント最前線は結構老舗のサイトです。
日本語系フォント、ネタ系フォントが豊富で、クオリティが高いものが多く、種類の多さはそれほど膨大ではありませんが充分にはあり、とても探しやすいです。
かなりオススメのサイトです。

このようなカッコいいフォントはあれもこれも使いたくなってしまいますね。
でも、サイトには統一感も重要なわけで、悩みどころです。

さぁ、カッコいいフリーフォントで画像の加工にチャレンジしてみましょ～。

follow me!

フォローありがとうございます！

読者登録はこちら

なうはこちら

ですので、よろしくお願いします～。

ご質問はこちらまで

メッセージはこちらまで。
※メッセージではカスタマイズに関する質問は、キリが無いので無視します。

カスタマイズに関するご質問はこのスレッドにコメントを書いていただければお答えします！
たまに調べる気ゼロで質問してくる人がいますが、そのようなあからさまな質問はスルーしますのでご了承くださいませ・・・。

返信遅いですが、許してくださいね～。

コメントプラグイン不具合報告スレッド

コメントプラグイン、不具合報告はこちらまでコメントお願いします！

コメントプラグイン使用申請スレッド

コメント欄にプロフ画像を表示するプラグインですが、使用申請受付を再開します！
とりあえず100人だけ募集しますので、使用希望の方はこの記事のコメント欄に100番以内にコメントしていただければ次回の承認作業で承認します！

では、どしどしご応募くださいませ～

※受付終了しました～
たくさん申請いただきました！ありがたや。
感想のコメントも頂いて嬉しいのですが、まだ募集中と勘違いされている方も多いので、一旦コメ欄閉じさせていただきます。
たくさんのコメント有難うございました。

使い方

●コメント欄の背景に画像を使用していない方

●コメント欄の背景に画像を使用している方

まずCSS

#comment_module {
position:relative;
}

.prfphoto{
float:left;
margin-top:10px;/*写真の縦位置を調整*/
left:10px;/*写真の横位置を調整*/
width:75px;
position:absolute;
overflow:hidden;
margin-right:5px;
margin-bottom:5px;
border:dotted 2px #ddd;
background:#FFFFFF;
}

#comment_module .admin_comment .prfphoto{
float:left;
margin-top:10px;/*管理者コメントの写真の縦位置を調整*/
left:10px;/*管理者コメントの写真の横位置を調整*/
width:75px;
position:absolute;
overflow:hidden;
margin-right:5px;
margin-bottom:5px;
border:dotted 2px #ddd;
background:#FFFFFF;
}

.prfphoto img{
margin:21px;
}

#comment_module .comment_body{
padding-left:100px;/*コメント本文の位置(数字を増やすと右に寄ります)*/
padding-right:0px;/*コメント本文が右にはみ出る場合は数値を上げてください*/
}

#comment_module .admin_comment .comment_body{
padding-left:100px;/*管理者コメント本文の位置(数字を増やすと右に寄ります)*/
padding-right:0px;/*管理者コメント本文が右にはみ出る場合は数値を上げてください*/
}

#comment_module .label{
padding-left:100px;/*コメントタイトルの位置(数字を増やすと右に寄ります)*/
padding-right:20px;/*コメントタイトルが右にはみ出る場合は数値を上げてください*/
}

#comment_module .admin_comment .label{
padding-left:100px;/*管理者コメントタイトルの位置(数字を増やすと右に寄ります)*/
padding-right:20px;/*管理者コメントタイトルが右にはみ出る場合は数値を上げてください*/
}

#comment_module .comment_footer{
clear:left;
}

次にフリープラグイン
<script type="text/javascript" src="http://navi-map.info/com_thumb/3/comment_thumbnail_imgbg.js"></script>

これでOKです！

承認された方はもう使用できますので、お楽しみください！

<< 前のページへ最新 | 1 | 2 | 3

ブログ画像一覧を見る

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

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