とあるエンジニアの作業ブログ

Web製作

【Stinger8】ページング(page-numbersクラス),サイドバーリストのレイアウト修正

投稿日:

Stinger8の細かなレイアウト修正をします。

カラミざかり vol2 前編
無料サンプル
ヌギカケ
無料サンプル
女主任・岸見栄子
無料サンプル
菜々子さん的な日常DASH!!
無料サンプル

トップ下部の投稿一覧をページングする部分(page-numbersクラス)のレイアウト崩れの修正

できあがり

Stinger8のバージョン:20171207だとトップページ下部の投稿ページング部分のレイアウトが崩れています。

【変更前】
page-numbersクラス変更前
【変更後】
page-numbersクラス変更後

修正箇所

Stinger8-childのstyle.cssに以下のコードを追加します。

どうやら親のStinger8のstyle.cssにbox-sizing: border-box;が指定されておりwidthとpaddingの計算が狂っているようです。

サイドバーに表示される最近の投稿やアーカイブなどのリストの調整

できあがり

デフォルトのままだとサイドバーが味気ないのに加えてビジーな感じがするので、余白や色味を調整してメリハリをつけます。

【変更前】
サイドバー変更前
【変更後】
サイドバー変更後

修正箇所

Stinger8-childのstyle.cssに以下のコードを追加します。

基本的にはline-heightと余白部分(padding、margin)、あと背景色のの調整です。
list中のリンクの部分はマウスオーバーで背景色が変わるようにもしています。
見た目の好みがあるので数字とか色は適当にいじって良いと思います。

-Web製作
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

STINGER8で初めての投稿の準備をする

WordPressのテーマ、STINGER8を利用した場合の、初めての投稿の準備をします。 目次 前提 アウトプットイメージの確認 投稿の基本形を考える ソースコードをブログ上に表示させるための準備 …

ドローンが飛ぶGIFアニメーションを作ってみた

  上のようなドローンが飛ぶGIFアニメーションを作ったときの要点メモ。Photoshopのどのような機能を使ったかや注意すべきポイントに絞って記載。 (ドローン画像の作り方や飛んでいるよう …

【備忘】gitのglobal userとlocal user使い分け

Macで初めてgit commitした時に、「お前は誰だ?」的な感じで怒られた。

でユーザー名とメールアドレスを指定する必要があるらし …

CSSで背景(background-color)を斜めにする

本サイトの紹介ページのように、CSSだけで背景を斜めにします。 目次 やりたいこと HTMLとCSS ポイント やりたいこと 以下のように右斜め上を支点として回転させ、二つのイメージが同色で重なること …

GulpでWordPressのCI 〜実装編〜

gulpを使ったWordPressのテーマファイルCIの実装編です。 設計編はこちらを参照ください。 目次 やりたいこと・動作環境・前提 やりたいこと・環境・バージョン ディレクトリ構成 利用モジュー …