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

Web製作

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

投稿日:

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

蜘蛛ですが、なにか?
無料サンプル
SとM エクスタシー
無料サンプル
賭ケグルイ
無料サンプル
監禁婚〜カンキンコン〜
無料サンプル

トップ下部の投稿一覧をページングする部分(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】固定ページを自由にデザインしてみた

HTML/CSSがかける人は、テーマ標準の固定ページだとデザイン変更しづらいのではないでしょうか?? Wordpressにループって概念があるのはうっすらとは知ってますけど、、、何もあんなにまんまブロ …

【超初心者向け】githubでテーマファイルをバージョン管理する

恥ずかしながらgitでリモートリポジトリ管理するのが初めてなので自分用のメモ。 目次 やりたいこと 動作環境・前提 テーマファイルをmasterブランチで管理するまで 開発用のfeatureブランチ作 …

Stinger8のサイドバーにプロフィールを表示する

Stinger8のサイドバーにプロフィールを表示します。 目次 前提 作業手順 ウィジェットにHTMLを記述 CSSで見た目を整える 前提 WordPressがインストールされている Stinger8 …

MAMPを移行したらphpMyAdminが起動しなくなった

古いMacからMAMPを個別に移行したら、phpMyAdminが起動しなくなった。 どうやらMySQLのユーザー/パスワードが不一致になってしまったようだ。 関連して他のエラーも発生したため、一連で対 …

MacでのAdobeクラウドストレージ活用と作業用ディレクトリ

最近Macを買い換えた。新しいMacはStorageを256にしたのでローカルにバンバンファイルを保存するのには不安が残る。 そこで、これを機に本格的にローカルへのファイル保存をやめて、全てクラウドス …