人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

アメブロのCSS設定について困っています。

・"記事一覧、次ページ、前ページ" を記事下のみに表示したいのですが、
<div class="pagingArea nextPrevPaging"> が記事上と記事下の両方で使われているため、display:noneを使うと両方が消えてしまいます。

フリースペース欄に作って位置調整すれば良さそうですが、
方法がわからないので、良い方法があれば教えてください。

よろしくお願いします。

●質問者: pochi1234
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● Cherenkov
●200ポイント ベストアンサー
article+.pagingArea {
 display:none;
}

でどうでしょう。



追記:
コメントにある、.skinMainArea2 > .pagingArea:first-child { display: none;} でも消すことはできるはずです。


フリープラグインでJavaScriptが使えるようなので以下の内容のものを追加しても実現できます。
Amebaヘルプ|フリープラグインの設定方法

<script src="http://www.google.com/jsapi"></script>
<script>google.load('jquery','1')</script>
<script>(function(j){j(function(){$=jQuery=j})})($)</script>
<script type="text/javascript">
$(document).ready(function(){
 //display:noneしてついでにclassを追加。
 $('.pagingArea:first').css('display', 'none').addClass('pagingAreaTop')
});
</script>


参考:フリープラグインを利用したカスタマイズ|アメブロカスタマイズで人が集まるブログ作り


Cherenkovさんのコメント
.skinMainArea2 > article:first-child + .pagingAreaのほうが手堅いかも

Cherenkovさんのコメント
あーでもブログの種類によって微妙に構成が違うからだめかもしれません。 article+.pagingAreaにしたのは、サイバーエージェント社長アメブロと同じ場合です。 確実なのはpochi1234さんのアメブロURLか、完全に同じ構成のURLを提示してください。

pochi1234さんのコメント
ご回答ありがとうございます。 現行のCSS編集用テンプレートを使用しているため、 上記の方法ができないです。 記事上と記事下の両方とも <div class="pagingArea nextPrevPaging"> になっています。 classが違えばdisplay:none;が使用できるのですが。

Cherenkovさんのコメント
.skinMainArea2 > .pagingArea:first-child { display: none;} を試してみてください。

Cherenkovさんのコメント
「表示を確認する」では両方消えたけど保存してみたら記事上だけ消せました。

pochi1234さんのコメント
.skinMainArea2 > .pagingArea:first-child { display: none;} で記事上を消すことができました。 フリープラグインの方法まで書いて頂いて下さって ありがとうございます。

2 ● pretaroe
●0ポイント

基本的に、アメブロではできません。

>フリースペース欄に作って位置調整すれば良さそうですが、

この方法も無理です。

上から背景と同じ色の画像を上乗せして消すとか
そういうあまりお勧めできない方法しかありません。


pochi1234さんのコメント
ご回答ありがとうございます。 .skinMainArea2 div.pagingArea:first-child{display:none;} で可能になります。

3 ● Q-A
●100ポイント

.skinMainArea2 div.pagingArea:first-child{display:none;}
.skinMainArea2 .pagingArea{display:block;}

ではどうでしょう?
私の確認したアメブロではいけました。個々のブログによってcssが違うでしょうから、pochi1234さんのブログでダメなようでしたら、ページの構造や関わっていそうなcssを教えてください。


pochi1234さんのコメント
ご回答ありがとうございます。 .skinMainArea2 div.pagingArea:first-child{display:none;} が正解になります。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ