こんにちは、ドリル 鈴木です。
今日も先日お問い合わせ頂いた内容に関して、回答をシェアしたいと思います。
ご質問頂いた内容は、「1ページに複数記事表示した時の記事の間隔を調整したい」と言うものでした。
私が1ページに1記事を推奨していた為、このカスタマイズを思いつきませんでした。
1ページに1記事の方はあまり使う場面がないかも知れませんが、折角の機会ですのでご紹介します。
それでは、スタートです。
1ページに何記事表示してますか?
あなたのブログは1ページに何記事表示していますか?
これってどうでも良さそうで、結構大切なポイントだと思っています。
自分のブログがどう見られているのか?自分のブログをどう見られたいのか?これによって1ページに表示される記事数を変える必要があります。
ここで「ブログ」と言ったのは、アメブロとワードプレスなど、使うブログによって見られ方が異なってくるからです。
例えば私なら、アメブロは1ページ1記事、ワードプレスなら1ページ10記事としています。 この理由は、アメブロは一覧で表示される時に全文が表示されるため、いくつも記事を読むのにページを開く必要がありません。その結果、沢山記事を読んでもらっても「PVが増えない」となってしまいます。なので、1ページの表示数を減らし、どんどんページを移動してもらう様にします。
逆にワードプレスは「続きを読む」を使うと、一覧では記事の途中までしか表示されません。その為、多くの記事を気にしてもらえれば「続きを読む」から記事を読んでもらえ、その分PVを増やす事ができます。
しかし、これは私のブログの場合で全ての方のブログに当てはまる訳ではありません。
ぜひ、あなたのブログの読者がどの様に記事を読んでくれているのかを確認して、もっともPVが増えそうな設定を選ぶ様にして下さい。
1ページ複数記事表示の設定方法
1ページに複数記事を表示する設定は管理画面の「基本設定」で行う事ができます。
「ブログを書く」>サイドバーの「各種設定」の「基本設定」をクリックします。
すると、「ブログの表示設定」の中に「ブログ記事の表示数」と言う項目があります。
もしあなたのブログが1ページ1記事の設定ならここで「1」が選択されていると思います。私も「1」が設定されていました。
今回はカスタマイズの為にあえて「5」を設定したいと思います。項目で「5」を選び下までスクロールさせて「保存」をクリックします。
1ページ複数記事表示の時の画面表示
それでは早速1ページに複数記事を表示させた場合の画面表示を確認してみましょう。
先程の設定を行った後ブログを表示させると、以下の画像の様に表示されていました。
この状態は一切カスタマイズを行っていません。すると、記事と記事の間に隙間が空いているのがわかると思います。
私が確認した所、この隙間は「30px」で設定されている様でした。
それでは、実際にCSSでカスタマイズを行い、この隙間を変更してみましょう。
CSSの編集画面を開く
早速、CSSで広告の削除を行いたいと思います。 CSSの編集画面を開いてください。
「ブログを書く」>サイドバーの「ブログデザイン」の「デザインの変更」>「CSSの編集」をクリックします。
CSSを編集して、記事の隙間を変更する
今回の修正はCSSを1つ追加するだけで変更する事が出来ます。
下記の通り「CSSの編集」に追加してください。
.skinArticle {
margin-bottom: 《設定したい値》px;
}
ここでは《設定したい値》に2つの値を設定した場合を例として試したいと思います。
まずは、「0」を設定した場合です。この時の追加するCSSは以下の様になります。
.skinArticle {
margin-bottom: 0px;
}
保存が完了し、ブログを確認すると以下の様な表示になります。
記事と記事の隙間がなくなり、くっついてしまっています。このままでは見づらそうですが、デザインによっては面白いかも知れませんね。
次に「60」を設定した場合です。元の「30」の倍近い値になります。この時に追加するCSSは以下の様になります。
.skinArticle {
margin-bottom: 60px;
}
保存が完了し、ブログを確認すると以下の様な表示になります。
かなり間が空いた印象になるのではないでしょうか。私としては空き過ぎで続いて読んでもらいにくく感じます。
この様に、《設定したい値》を変えるだけでブログの印象や読みやすさを大きく変える事が出来ます。
ぜひあなたのブログに合わせて設定してみて下さい。
まとめ
今回もコメントで頂いたリクエストにお答えする形で記事を書かせて頂きました。
ぜひこれからもリクエストを頂ければ、この様に記事を書かせて頂いていきたいと思っています。お気軽にコメントまたはお問い合わせからリクエストして下さい。
今回のカスタマイズでは、記事と記事の間隔を変更するだけではなく、1ページに表示する記事の数や記事の間隔によってブログのイメージや読みやすさが大きく変わる物だと言う事を知って頂ければと思い書きました。
ぜひ、あなたのブログに合った表示記事数と記事の間隔の設定に挑戦してみて下さい。
ちなみに私のアメブロは1ページ1記事に戻しました。。。
やはりPVを増やしたいので、もっともPVが多くなりそうな設定を選んだ訳です。
思い通りにカスタマイズする事が出来たでしょうか?
わかりにくい所などあればお気軽にコメント頂下さい。個別に解説させて頂きます。
以上、鈴木でした。
たまにクリックで応援して頂けると、励みになります。
⇒《人気ブログランキング》
引用元:http://www.wcf-drill.com/2014/05/ameblo-customize-post-margin.html
こんにちは、ドリル 鈴木です。
今回は、最近変更されたアメブロの広告の削除方法について、解説したいと思います。
これは、コメントでもご質問頂いていた事もあり、再度全て見直す事にしました。
ですので、これを実施して頂ければ、現状の全ての広告が消せると思います。
また、今後も変更箇所だけではなく、「~日時点の広告を削除する方法」 として掲載する様に考えています。
それでは、スタートです。
カスタマイズを始める前に
今回は、全ての広告の削除を行いますので、最初に表示されている広告の確認を行います。
私はカスタマイズ用のテンプレートを使用しているのですが、他のテンプレートを使用している方は、表示されている広告があっているか事前に確認して下さい。
今回のカスタマイズはCSSのみとなっていますので、以前に比べ 簡単にできると思います。
ただし、毎回言いますが、これはとてもグレーなカスタマイズです。
これが原因で、アメーバから警告が来たり、ブログが削除される可能性もありますので、自己責任でお願い致します。
修正前のページ
それでは、カスタマイズ前の画面を確認すると、以下の通りとなっています。
広告は7ヶ所に表示されているのではないでしょうか。
それぞれに番号を振っているので確認してみて下さい。
この7つの広告を一つ一つ消していきたいと思います。
今回のカスタマイズはCSSだけですので、CSSの編集画面を開いて下さい。
CSSをカスタマイズして広告を消す
まずは、CSSの編集画面を開いてください。
「ブログを書く」>サイドバーの「ブログデザイン」の「デザインの変更」>「CSSの編集」をクリックします。
では早速編集していきましょう。
(1)の広告を消すCSS
(1)の広告を消すCSSは以下の通りとなります。
これをそのままコピーして、CSSににペーストし、保存して下さい。
以下のCSSも同様で、全てのCSSをペーストすれば、7つの広告全てを消す事が出来ます。
.centerTextLink {
display: none !important;
}
(2)と(7)の広告を消すCSS
(2)と(7)の広告を消すCSSは以下の通りです。
.subAdBannerArea {
position: fixed !important;
bottom: -9999px !important;
margin: 0 !important;
}
(3)の広告を消すCSS
(3)の広告を消すCSSは以下の通りです。
.afc-frame {
display: none !important;
}
.subAdBannerHeader {
display: none !important;
}
(4)の広告を消すCSS
(4)の広告を消すCSSは以下の通りです。
#resPointAreaWrapper {
display: none !important;
}
(5)の広告を消すCSS
(5)の広告を消すCSSは以下の通りです。
#footer_ad {
display: none !important;
}
(6)の広告を消すCSS
(6)の広告を消すCSSは以下の通りです。
.registArea {
display: none !important;
}
これで、全ての広告が消せると思います。
ほとんどが「display: none !important;」で消せてしまういう、意外な結果となりました。
CSSの保存が終わりましたら、実際のページを見てみましょう。
以下の様に、全ての広告が消えているはずです。
![]()
今回はとても簡単に消せました
今回の修正を見た限り、新しく追加された広告はほぼ 「display: none !important;」で消せている様です。
実は(2)だけが面倒で「display: none !important;」で消せないのですが、(7)だけであれば「display: none !important;」で消せました。
もし、アメーバが絶対に広告を消されたくなければ、その様な作りにする事も可能なはずです。
なぜなら、このカスタマイズもCSSの穴を見つけて消しているのであって、穴がなければCSSだけでは消す事が出来ない為です。
とは言っても、CSSでダメならJavaScriptでといった具合に、どうやっても全ての穴を埋めるのは難しいとの判断からきつくしていない可能性もあります。
また、以前のカスタマイズの時に私が見落としていた可能性もあります。。。
なんにせよ、私としては、アメーバ側の本当の考えを知りたいなと思いました。
まとめ
以上で修正は完了です。
ちゃんと全ての広告は消えたでしょうか?
もし消えなかった場合は、今一度CSSを確認して下さい。
そして、やはり間違いがなかった場合は、消えなかった広告の番号とテンプレート名を教えて下さい。
また、また広告の仕様が変更になっている可能性もあります。
その際もご連絡を頂ければ、対応して記事にしますので、ご連絡下さい。
そして、これはグレーなカスタマイズです。
安全な広告の消し方は「アメブロの広告を消す公式の方法、しかもすぐにでもできます」を参考にして下さい。
以上、鈴木でした。
たまにクリックで応援して頂けると、励みになります。
⇒《人気ブログランキング》
引用元:http://www.wcf-drill.com/2013/10/ameblo-customize-delete-ad-20131007.html
こんにちは、ドリル 鈴木です。
今回は、最近変更されたアメブロの広告の削除方法について、解説したいと思います。
これは、コメントでもご質問頂いていた事もあり、再度全て見直す事にしました。
ですので、これを実施して頂ければ、現状の全ての広告が消せると思います。
また、今後も変更箇所だけではなく、「~日時点の広告を削除する方法」 として掲載する様に考えています。
それでは、スタートです。
カスタマイズを始める前に
今回は、全ての広告の削除を行いますので、最初に表示されている広告の確認を行います。
私はカスタマイズ用のテンプレートを使用しているのですが、他のテンプレートを使用している方は、表示されている広告があっているか事前に確認して下さい。
今回のカスタマイズはCSSのみとなっていますので、以前に比べ 簡単にできると思います。
ただし、毎回言いますが、これはとてもグレーなカスタマイズです。
これが原因で、アメーバから警告が来たり、ブログが削除される可能性もありますので、自己責任でお願い致します。
修正前のページ
それでは、カスタマイズ前の画面を確認すると、以下の通りとなっています。
広告は7ヶ所に表示されているのではないでしょうか。
それぞれに番号を振っているので確認してみて下さい。
この7つの広告を一つ一つ消していきたいと思います。
今回のカスタマイズはCSSだけですので、CSSの編集画面を開いて下さい。
CSSをカスタマイズして広告を消す
まずは、CSSの編集画面を開いてください。
「ブログを書く」>サイドバーの「ブログデザイン」の「デザインの変更」>「CSSの編集」をクリックします。
では早速編集していきましょう。
(1)の広告を消すCSS
(1)の広告を消すCSSは以下の通りとなります。
これをそのままコピーして、CSSににペーストし、保存して下さい。
以下のCSSも同様で、全てのCSSをペーストすれば、7つの広告全てを消す事が出来ます。
.centerTextLink {
display: none !important;
}
(2)と(7)の広告を消すCSS
(2)と(7)の広告を消すCSSは以下の通りです。
.subAdBannerArea {
position: fixed !important;
bottom: -9999px !important;
margin: 0 !important;
}
(3)の広告を消すCSS
(3)の広告を消すCSSは以下の通りです。
.afc-frame {
display: none !important;
}
.subAdBannerHeader {
display: none !important;
}
(4)の広告を消すCSS
(4)の広告を消すCSSは以下の通りです。
#resPointAreaWrapper {
display: none !important;
}
(5)の広告を消すCSS
(5)の広告を消すCSSは以下の通りです。
#footer_ad {
display: none !important;
}
(6)の広告を消すCSS
(6)の広告を消すCSSは以下の通りです。
.registArea {
display: none !important;
}
これで、全ての広告が消せると思います。
ほとんどが「display: none !important;」で消せてしまういう、意外な結果となりました。
CSSの保存が終わりましたら、実際のページを見てみましょう。
以下の様に、全ての広告が消えているはずです。
![]()
今回はとても簡単に消せました
今回の修正を見た限り、新しく追加された広告はほぼ 「display: none !important;」で消せている様です。
実は(2)だけが面倒で「display: none !important;」で消せないのですが、(7)だけであれば「display: none !important;」で消せました。
もし、アメーバが絶対に広告を消されたくなければ、その様な作りにする事も可能なはずです。
なぜなら、このカスタマイズもCSSの穴を見つけて消しているのであって、穴がなければCSSだけでは消す事が出来ない為です。
とは言っても、CSSでダメならJavaScriptでといった具合に、どうやっても全ての穴を埋めるのは難しいとの判断からきつくしていない可能性もあります。
また、以前のカスタマイズの時に私が見落としていた可能性もあります。。。
なんにせよ、私としては、アメーバ側の本当の考えを知りたいなと思いました。
まとめ
以上で修正は完了です。
ちゃんと全ての広告は消えたでしょうか?
もし消えなかった場合は、今一度CSSを確認して下さい。
そして、やはり間違いがなかった場合は、消えなかった広告の番号とテンプレート名を教えて下さい。
また、また広告の仕様が変更になっている可能性もあります。
その際もご連絡を頂ければ、対応して記事にしますので、ご連絡下さい。
そして、これはグレーなカスタマイズです。
安全な広告の消し方は「アメブロの広告を消す公式の方法、しかもすぐにでもできます」を参考にして下さい。
以上、鈴木でした。
たまにクリックで応援して頂けると、励みになります。
⇒《人気ブログランキング》
引用元:http://www.wcf-drill.com/2013/10/ameblo-customize-delete-ad-20131007.html
こんにちは、ドリル 鈴木です。 今回はブログのデザイン全体の両脇に影をつける方法について説明したいと思います。
これは他のブログでも良くあるデザインで、全体的に立体感を出す事が出来ます。 それによって、他の平面的なブログと違ったインパクトを出せます。
しかし、実は只単に影をつけただけでは問題も発生します。 そこで、単に影をつけるだけでなく、デザイン的も最適な影の付け方を説明します。 それでは、スタートです。
カスタマイズを始める前に
今回のカスタマイズのポイントは、CSSを利用してブログデザイン全体に影をつける方法と、それによって起こる問題点と解決方法です。 また、記事の最後では、今回使用した影の画像をプレゼントしていますので、ご自由にお使い下さい。
また、以下の画像の様に、ヘッダー画像とヘッダーメニューを設定している状態から説明しています。 これは、ブログデザインの幅が関係してくる為です。
合わせて、今回、影を設定するのに影用の背景画像を使用します。 背景画像は以下の様な画像を2種類用意していて、その理由は後ほど説明致します。
背景画像をアップロードしてCSSを編集する
それでは、早速ブログに影をつけたいと思います。 ブログの影は、先程紹介した背景画像を使い、影がついている様に見せます。
まずは、CSS編集画面を開き、画像をアップロードして下さい。 「ブログを書く」>サイドバーの「ブログデザイン」の「デザインの変更」>「CSSの編集」をクリックします。 画像のアップロード方法については、「2-3 ヘッダーにオリジナルのヘッダー画像を設置しよう」の記事を参考にして下さい。
まずアップロードしたのは「画像A」です。 この画像は真ん中の白の部分が「980px」になっています。 これは元々のアメブロのブログと同じになっています。
画像のアップロードが終わったら、アップロードした画像の「この画像のパス」をコピーして下さい。 そして、以下の通りCSSを編集して、CSSの一番下に追加して下さい。 CSSの「アップロードした画像のパス」は先程コピーした「この画像のパス」に置き換えて下さい。
.skinFrame2 { background-image: url(アップロードした画像のパス); background-position: center top: background-repeart: repeart-y; }
CSSに追加したら、保存をクリックし、実際のページを見てみます。 今回アップロードした画像Aを利用すると、以下の様なページになります。 ページとぴったりの幅で影がつきます。
ただ、これだと場合によっては見にくい様に感じます。 特にサイドバーにバナーや紹介文を載せている場合、それが顕著です。 となると、サイドバーと影の間に少し隙間が空いていた方がいい様に思いす。
サイドバーと影の間を空ける
そこで、次に試して頂きたいのが、真ん中の幅を「1020px」で作成した「画像B」です。 それでは、早速「画像B」をアップロードして、CSSを編集しましょう。
画像のアップロードが終わったら、同様に「この画像のパス」をコピーして下さい。 次に、先程追加したCSSを消し、再度編集しましょう。 先程と同様に、以下のCSSの「アップロードした画像のパス」を新しくアップロードした画像の「この画像のパス」に置き換えて下さい。
.skinFrame2 { background-image: url(アップロードした画像のパス); background-position: center top; background-repeart: repeart-y; }
編集が終わったら、保存をクリックし、実際の画面を見てみましょう。 今度は以下の画像の様に、サイドバーと影の間が空いて表示されます。 これであれば、サイドバーの見にくさはなくなると思います。
ヘッダーの幅を影に合わせる
しかし、ここで別の問題が出てきます。 それは、ヘッダー画像とヘッダーメニューよりも影の幅が広いため、隙間が出来てしまい違和感が出てしまうと言う事です。
そこで、最後にこの隙間を埋めて完成にしたいと思います。 ここでは、以下の2つを行います。
- ヘッダー画像の幅を広げ「1020px」に合わせる
- ヘッダーメニューの幅を広げ「1020px」に合わせる
それでは、順番に対応方法を解説しています。
ヘッダー画像を1020pxにする
まず、ヘッダー画像の幅を1020pxに合わせましょう。 最初に、980pxで作成してしまった画像を大きくする必要があります。
こればかりはCSSやHTMLではどうする事も出来ません。 面倒かも知れませんが、もう一度幅を「1020px」で画像を作り直して下さい。 高さは替えずにそのままで問題ありません。
次にCSS編集画面を開き、画像をアップロードして下さい。 ここは、以前の域「2-3 ヘッダーにオリジナルのヘッダー画像を設置しよう」を参考に行って下さい。
アップロードが完了したら、「この画像のパス」をコピーし、ヘッダー画像用のCSSを以下の様に編集します。 CSSの変更箇所としては、「width」の値を「980px」から「1020px」に変更しています。 (画像の高さは変えていません)
.skinHeaderArea{ background-image: url(アップロードした画像のパス); background-repeat: no-repeat; background-position: center top; width: 1020px; height: 300px; }/* ←ブログヘッダーに背景画像を敷きたいとき */
これでヘッダー画像の調整は完了です。 それでは次にヘッダーメニューの幅を調整しましょう。
ヘッダーメニューを1020pxに合わせる
最後にヘッダーメニューの幅を「1020px」に調整します。 ここでは、画像は使用していないため、CSSの修正だけになります。
CSS編集画面を開き、ヘッダーメニュー用のCSSを以下の用に修正します。 ここで修正対象となるCSSは「ul#headerMenu」の「width」と「left」です。 これは、幅を広げると同時にメニューの左側の位置を調整する必要がある為です。
ul#headerMenu { width: 1020px; height: 40px; position: absolute; left: -20px; top: 0; background-color: #FFF; /*背景色のカラーコード*/ margin: 0; }
これでCSSの編集は終了です。 実際の画面を見て、ヘッダー画像とヘッダーメニューの幅が影に合っている事を確認して下さい。
背景色を変えて遊んでみる
ちなみに、この影の画像は背景色を変えても大丈夫な作りになっています。 例えば、背景を 赤にしてみても、ちゃんと赤になじんだ影をつける事が出来ます。
さらには、背景に画像を使用していても大丈夫です。 色々試してみるのも面白いかも知れませんね。
今回使用した背景画像はこちらからダウンロードできます。 フリー素材として配布しますので、ご自由にお使い下さい。
まとめ
以上で、今回のカスタマイズは終了です。 難易度は高くないと思うのですが、色々と面倒なカスタマイズかも知れません。
ただ、こうして立体感を出す事によって、単なる平面的なデザインに比べ面白みを出せるかと思います。 ぜひ、画像を直したりといった余裕があればチャレンジしてみて下さい。
予想通りに修正されたでしょうか? わかりにくい所などあれば、お気軽にコメントでご質問下さい。
以上、鈴木でした。
たまにクリックで応援して頂けると、励みになります。 ⇒《人気ブログランキング》
引用元:http://www.wcf-drill.com/2013/10/ameblo-customize-backgroundimage-shadow.html
プロフィール画像を大きくするとインパクトがあり、誰が書いているブログなのかを強調できます。
ピグやイラストなどをプロフィール画像にしている方はこれをきっかけに自分の写真に変えてみてはいかがでしょうか?
ちょっと恥ずかしいかもしれませんが、読者には顔写真の方が親近感が沸いてブログ記事により共感してもらえる効果があります。
プロフィールページへの入口にもなるので、是非挑戦してみましょう。
カスタマイズを始める前に
今回のカスタマイズはプロフィールの配置がW300pxのサイドバーに設置されていることが前提となります。
もし、幅が狭い方のサイドバーにプロフィールを配置している方は下記を参考に移動させて下さい。
※デザインの変更をしてしまうと今までのカスタマイズがリセットされてしまうのでご注意下さい。
また、今回のプロフィール画像に小さいサイズの画像を使うとぼけてしまうので200pxx200px以上の画像を用意して下さい。
私は300pxx300pxの画像を使用します。
画像を加工するのに専用のソフトがないと言う方はこちらのサイトが便利です。
参考:Photo editor online
ブラウザ上で動き無料で使える写真加工ソフトです。
こちらを使えば、思い通りのサイズに加工出来ます。
プロフィール画像を設定する
プロフィール用の画像を用意できたら下記の手順に従ってアメブロに登録します。
1. プロフィール画像の設定ページを開く

2. ファイを選択をクリック

3. プロフィール用の画像を選択して、タイトルを入力後アップロード

4. 画像が設定されている事を確認して下さい
CSSの編集画面を開く

まずは、CSSの編集画面を開いて下さい。
「ブログを書く」>サイドバーの「ブログデザイン」の「デザインの変更」>「CSSの編集」をクリックします。
今回のCSSは修正ではなく追加になります。
CSS編集ページの一番下「/*その他、拡張があれば記述*/」の後に追加して下さい。

修正前のページとCSS
修正前のページです。
CSSは追加なのでCSS編集の一番最後に追記します。

写真拡大用のCSSを追加する
プロフィールの写真周りは複雑な構造になっているので、4ヶ所を修正する必要があります。
若干複雑ですので、後ほど詳しく解説致します。
追記するCSSは以下の通りです。
/* プロフィール画像拡大 */ |
修正後のページは以下の様になります。

プロフィール画像が大きくなり、真ん中に配置されています。
また、ニックネームなどは画像の下に移動しています。
まとめ
以上で修正は完了ですが、若干複雑なため解説を致します。
今回修正したプロフィール画像の周りのHTMLは以下の様な構成になっています。
なので、複数の箇所のCSSを変更する必要があります。
また、それぞれに幅や高さが指定されているため、表示したい画像の大きさに合わせて指定し直す必要があります。

もしあなたの希望と例の画像サイズが異なる場合は、以下の4つの点に注意して修正して下さい。
1. 「.userProfileImageArea」の「width」と「height」に画像サイズ「+4px」の値を指定する。
2. 「.userProfileImageArea」の「margin」の2つ目と4つ目の値を以下の計算方法で算出して指定する。
指定する値 = (260px – 画像の幅 – 4px) / 2
3. 「.userProfileImage」の「width」と「height」に画像のサイズを指定する。
4. 「.userProfileImage img」の「width」と「height」に画像のサイズを指定する。
ここをしっかりと修正すれば自由な画像サイズに変更ができます。
ただし「最大で256px」までなので注意して下さい。
予想通りに変わったでしょうか?
わかりにくい所があれば、気軽にコメントで質問して下さい。