WordPress個別サポート

BizVektorのトップページに表示できるInformation(お知らせ)とBlog(ブログ記事)は次のようなレイアウトになっています(タイトルのみ表示の場合)。

BizVektorのInformationとBlog

BizVektorのInformationとBlog

上から下へのレイアウトですが、タイトルだけを一覧表示したときの余白を見ていてInformationとBlogを横並びにできないのかと思った方のためにCSSの調整方法を紹介します。

※ふわっと仕上げなので、実際に使うときは微調整してください。

Informationには「#topInfo」、Blogには「#topBlog」というidが付いているので、参考になりそうなCSSを探していくと、bizvektor_themes/plain/plain.cssに次のようなスタイル定義があります(FireFoxの「要素を調査」メニューなどでも探せます)。

BizVektorバージョン1.0.0でbizvektor_themesフォルダはdesign_skinsフォルダに変更されています。
#content #topInfo,
#content #topBlog { margin-bottom:10px; }

この部分を子テーマのCSSにコピーして、横並びスタイルの定義に活用します。

/* InformationとBlogを横並びに */
#content #topInfo, #content #topBlog {
    width:45%;
    float:left;
    margin:10px;
}

/* フリーエリアで横並びを解除 */
#topContentsBottom {
    clear:both;
}

@media (max-width: 480px) {
    #content #topBlog,
    #content #topInfo 
    {
        float: none;
        width:98%;
    }
}

「float:left;」で2つのパーツを横並びにしているだけです。詳細にレイアウトを調整する方は#topInfoと#topBlogで別々に指定した方が良いでしょうが、ここではサンプルなのでふわっと仕上げています。

その下の「clear:both;」はトップページ下部のフリーエリアを表示するために回り込みを解除しています。時間がある方は、この部分を消してみてどのように問題が起きるか試してみてください。急に問題が起きたときにも役立ちます。

最後の「@media (max-width: 480px)」以降は、スマホなど画面の幅が狭い端末で横並びを解除する指定です。「480px」は自由に指定できるので、使い方に応じて適当な幅を指定してください。

InformationとBlogを横並びにした結果は次のようになります。

InformationとBlogを横並びに

InformationとBlogを横並びに

これを見て「日付とかカテゴリーを消したいなー」と思った方のために日付とカテゴリーを非表示にするCSSを紹介しておきます。

#content #topInfo.infoList ul li .infoDate,
#content #topInfo.infoList ul li .infoCate,
#content #topBlog.infoList ul li .infoDate,
#content #topBlog.infoList ul li .infoCate {
    display: none;
}

「display: none;」で文字を消すことが良いか悪いかは別にして、これで日付とカテゴリーが消えます。

InformationとBlogから日付とカテゴリーを削除

InformationとBlogから日付とカテゴリーを削除

その他、いろいろ試してみると面白いですが、ひとまずこの記事は終わりにします。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート