webコンテンツを徹底強化!WordPressサイト制作とプラグイン&テーマ情報・メンテ/エラー対応から、PHP/CSS/javascript、動画・音・イラスト等制作まで扱うコラム
マルチメディアコンテンツ制作読んどけ☆コラム

bulma.cssで、サクッとお洒落モダンデザインにリニューアルしてみる【フレームワークwebサイト制作】

      2021/02/23

今回は、bulma.cssが、お仕事で扱ったお取引先のWordPressサイト・テーマ内に組み込まれていたので、いい機会だから使ってサイトを作ってみます。表や2or3列のレイアウト・クラス指定などを、サクッとですが見ていってみましょう(実際の制作例も有り)。

bulma.cssとは?

2016年発表された、わりと新しいCSSフレームワークです。ライセンスは『MIT(「著作権表示」と「MITライセンスの全文表示」が条件)』。この記事執筆時点での最新バージョンbulma-0.9.1が、圧縮版で約200KBと、超軽量なわけではありません。しかし、『bootstrapみたいにjavascript入っていない』『一部のクラス名がわかりやすい』『Flexboxベースでボックスが並べやすく、モバイルサイトにも向いている』みたいな特徴があります。

難点としては、『一部のクラス名がださい(table class="table"って何や笑 )・または被る』みたいなところでしょうか。 section class="section"のCSSを後から足すとき、.section(クラス)なのかsection(要素)なのか迷う、みたいなところはありました笑。

今回bulma.cssでリニューアルしたいサイト(ネットで曲アレンジサイト・リニューアル前)

震災で2年休みつつも、2010年くらいから細々とやっていて(クラウドソーシング無しで350件近く売ったのはポイントです)、過去にも数回リニューアルしています。前回はたしか2016年くらいでした。

PCユーザーが多いにもかかわらず、『2カラム・サイドバーつき』だと、メインコンテンツが狭くてちょっと見にくいかなという感じだったので、リニューアルします。ついでに、ロゴやサンプル曲なども全部差し替えの大盤振る舞いします。

bulma.CSSのインストールは?

CDNから引っ張ってくる方法もありますが、管理人は自社サーバーにアップで対応しました。公式サイト(リンク)からダウンロードします。

こんな感じで、使うサイトの『assets』フォルダーに、FTPでアップロード。他のフォルダにはスタイルシート言語sassで書かれたカスタマイズファイルなどもありますが、それらも一式で上げます(参照しているから)。とりあえず本体をサイトのヘッダー内に、『link rel="stylesheet"』で読み込めば準備完了です。

bulma.cssでのサイトリニューアル一部始終

ヘッダーメニュー・ロゴなど

bulma.のサイトのソースを参考に組んでみました。デフォルトでは『ロゴがnavの子要素として入っている』ようです。marginで両端に寄せるのはめんどくさくなりそうだったので、子要素から外してメニュー右寄せ。 なぜかモバイルデバイス向けメニューが出ないのでjavascriptで開けるかたちに。

表(テーブルタグ)

bulmaでちょっと使いにくかったポイントがテーブルタグ。普通にタグを書いただけでは、表のボーダーが出ません

ボーダーを表示して表っぽくするには、クラス指定が必要でした。テーブルのクラスは『table』(何だこの安易すぎる命名規則笑)。『is-bordered』クラスが、ボーダー表示するクラスになります(検証したところ、tableも書かないとボーダー出ませんでした)。自分で書いたCSSもあわせて運用する場合、必然的に一つの要素に複数クラスが入ってくる感じになりそうです。

色のクラスの指定

bulmaにはいくつか色のクラスが指定されていて、上記のテーブルのセルに色をつけたいときなどに使えます(他にボタンなども・テキストに直接色クラスは入らないようです)。

例えば、青くしたいときは『is-link』のクラスを。『is-primaryだとターコイズみたいな色』、『is-infoだとスカイブルー』『is-dangerだと赤』、『is-warningだと黄色』といった感じに。

親columns.子columnを使った3列レイアウト

bulma.CSSでボックス並べをするときわかりやすかったポイントは、ボックスを並べるところでしょうか。親要素columnsクラスの中に、子要素のcolumnクラスを入れて並べていきます 3つ入れるとこんな感じ。『is-mobileクラス』を子要素のcolumnに入れると、モバイルでも3列表示・『is-desktopクラス』だと、デスクトップビューポート以下では縦配置に切り替わるという挙動でした。組み方によっては、横幅のmax-widthよりちょっとはみ出たりするかも。

『.columns { margin-left: -0.75rem;margin-right: -0.75rem; margin-top: -0.75rem;}』みたいなのを上書きで調整したりして、max-widthにそろえることはできます。 そろえるとこんな感じに。はみ出たりした部分は、狙って直せるということがわかったので、良しとしますか。 ここらへんの挙動は全部を押さえていないので、今後使う時に詳細にチェックしたいところです。

2列レイアウトの例

お値段表みたいな部分。ボックスのラッパーは『div class="columns is-desktop(デスクトップ以下でレイアウト切り替え)』で、子要素ボックスは『div class="column is-one-half"』を指定。PCビューでは表が2列表示。それ以下では1列表示に切り替わります。

columnのクラスには『is-one-third(3分の1)』『is-one-quarter(4分の1)』『is-full(横幅いっぱい)』という指定もできるので、覚えておくとボックスのレイアウトはサクッと決まりそうです。

あとがき・リニューアル完了後はこんな感じ

そんなわけで、多少クラス名のクセに苦戦したとはいえ、サイトリニューアルが完了しました。以前のバージョンより、メインコンテンツの領域を広くとれて、読みやすくなったかと思います。

多少クラス名のクセはありましたが、色指定やボックスレイアウト指定のクラスを覚えておくと、サクッとモダンでおしゃれなデザインにしやすいと思います。一から作るのは不安な場合も、フリーテンプレートなどが公開されているので、それを元にカスタマイズしていく方法も取れるでしょう。

外部 参考リンク


【カテゴリ】 - wpサイト制作事例
【タグ】 -

  関連記事

【静的HTML→WordPressリニューアル】同じデザインでWPにするときの注意ポイント

今回は以前、管理人が『お取引先の会社のサイト(静的HTMLは持っ ...

【WordPress】人気記事表示のしかた~PVカウント・フィールド格納&ソート(ログイン者カウントなし)

今回は、管理人がお仕事のWPサイト開発で使ってみたテクをご紹介し ...

WordPressのカスタムフィールド値で記事を絞り込み・検索するサイトの作り方・一部始終を徹底解説

今回は、需要があるかもしれない『WordPressのカスタムフィ ...

WPカスタムフィールドを使って、soundcloudみたいに記事一覧でオーディオ再生できるサイトを作る方法

今回は、管理人が持っている著作権フリー曲サイトに、『カスタムフィ ...

WordPressのログイン・ログアウト・権限システムを理解・カスタマイズして、『会員がコンテンツ読めるサイト』を作ろう

今回は、以前にちょっとお仕事で扱った、『ログインした会員が、コン ...

WPログアウト機能『wp-login.php?action=logout』と『wp_logout_url』の違い~後者はwpnonceで一発ログアウト

今回は、(twitterにもちょっと書いたんですけど)管理人が、 ...

別ディレクトリでの記事の管理・表示を、1つのWordPressを使いまわして対応する方法(プラグイン無しカスタム投稿・wp-blog-header.php)

今回は、別ディレクトリのコーポレート・お仕事サイトの記事管理も、 ...