無題で行こう

気の向くままに書きたいことを書いていきます。とりあえず無題でいきましょう。毎日いろいろありますよね♪

MENU

はてなブログを簡単カスタマイズ!⑦ページャー編

f:id:kay72234:20151106220216j:plain

■はじめに

はてなブログの簡単カスタマイズシリーズも、今回が7回目になりました。今回は、筆者としてはどうしても改善したいと思っていたページャーに関するカスタマイズです。かなりニッチな内容ですが…何かの参考になれば幸いです。

■「ページャー」とは?

とりあえず「ページャー」と書きましたが、実は正式な名称なのかどうかは分かっていないのですが…一応、前の記事・次の記事それぞれにリンクする、ページ送りのことを指しています。

f:id:kay72234:20151106212733j:plain


はてなブログの標準のスマホ画面では、上記のイメージのように前の記事と次の記事で左右にエリアが分割されています。筆者はレスポンシブデザイン対応のデザインテーマを使用しているのですが、画面横幅の狭いスマホで表示すると、下記のようにリンクの文字列が完全に重なってしまっていました。

f:id:kay72234:20151107164058j:plain


これはあまりにも不細工…これなら、表示しないほうがましですね。何とかしたいと思いながらも、しばらく手を付けることができずにいました。しかし、ようやく改善することができましたので、方法を整理しておきます。

■リンクを上下にずらしてみる

では、この状態を解消する具体的なスタイルシートの記述方法です。次のコードをコピーしてください。

.pager span.pager-prev a:before{
    content:'<<'
}

.pager span.pager-next a:before{
    content:'\A\A';
    white-space: pre;
}
.pager span.pager-next a:after{
    content:'>>';
}

.pager{
    position:relative;height:6em
}


ダッシュボードからデザインメニューを開いてください。スパナマークのアイコンをクリックして、一番下に表示されている「デザインCSS」からスタイルシートの記述用のウィンドウを開き、先ほどコピーしたコードを貼り付けます。

f:id:kay72234:20151106211735j:plain


コードを貼り付けた後は、「変更を保存する」をお忘れなく。

■コードの解説

保存したら、実際に画面で見てみましょう。こんな感じで、前後の記事へのリンクが上下にずれて表示されるようになりました。

f:id:kay72234:20151107164308j:plain


では、先ほどのコードの内容について少し解説させていただきます。

.pager span.pager-prev a:before{
    content:'<<'
}

.pager span.pager-next a:before{
    content:'\A\A';
    white-space: pre;
}
.pager span.pager-next a:after{
    content:'>>';
}

.pager{
    position:relative;height:6em
}


■不自然な余白を詰める

もう一息、何やらコメント欄との間に不自然な余白がありますので、これを詰めて無くしたいと思います。次のコードをまた「デザインCSS」に貼り付けてみてください。

.entry{margin-bottom: 0;}



次の画像のように、余白がなくなりました。

f:id:kay72234:20151107165230j:plain

「entry」が記事の欄を意味していますので、その下部のマージン(余白)の幅をゼロに指定しました。これでようやく格好が付いた気がしますね。

■さいごに

今回は少しニッチな部分でしたが、ご拝読ありがとうございました。筆者にとってはレスポンシブデザインにして以来の懸案だったので、それが解消できて満足です。
筆者のような状態のブログを実際に見掛けたことがなかったので、ニーズがあるのか自信がありませんが…スタイルシートの記述でいろいろ応用はできると思いますので、冒頭で記載した通り何かの参考になれば幸いです。


スポンサーリンク