WordPressとbootstrap | 穏やかな一日を!占い師幸宏のブログ

穏やかな一日を!占い師幸宏のブログ

占い師幸宏です。
日々の中で見過ごしてしまうかもしれないような幸せを感じる何かを探していきます。
占いのやハワイの叡智マナカードリーディングメッセージもお伝えして行きます。
エンパス・手相・シックスセンス・産業カウンセラー・ITコーディネータ・ウクレレ

イベント出展情報

 

ALOHA!
今日も、みなさんが笑顔になれますように。

 

メインのホームページとブログサイトをリニューアルしました。
デザインも一新しました。
プラットフォームは以前と同じWordPressです。
サーバも同じWindows Server2022を使用しています。
Wordpressのデザインは、テーマから選んでカスタマイズをすることが一般的です。
今までは、Wordpressの標準のテーマをカスタマイズして使っていました。
メリットは、大体のデザインが出来ているので、ある程度見栄えの良いものが簡単にできることです。
ですが、細かいところのカスタマイズをしようとすると、結構難しい場合もあります。

今度は、思い切って、自分でテーマを作ってみました。
Webデザインのフレームワークで、Bootstrapというシステムがあります。
無料で使えて、CSSでクラスを定義すると、Webに必要なデザインパーツを使うことが出来ます。
しかも、レスポンシブルなので、そのままモバイルにも対応可能です。
手作りしようとすると、細かくクラスの定義をしないといけないですが、そのへんが用意されています。
思いっきり複雑で面倒くさい、レスポンシブル対応のメニューも、定義すれば簡単に作れます。
また、Bootstrapのデザインテンプレートも、検索するとたくさんあります。
無料のものでそのまま使えるものや、コードを見ることで参考になるものもたくさんあります。

 

その、Bootstrapを使って、Wordpressのテーマを作ってみました。
一番気になっていた、メニュー周りもwp-bootstrap-navwalkerライブラリというものをダウンロードして設定すると使えることがわかりました。
また、インターネットを検索すると、サンプルのコードもたくさん出ています。
その辺を参考にしながら組み立てて行きました。

 

作ってみると、思いの外、順調にできます。
Bootstrapのよく使われるものの作法を覚えると、とても楽にできます。
少し苦労することがあるとすると、標準のCSSクラスを少し変更するときです。
その際に、例えば、幅を空けたりする場合などは、空け幅を定義しているCSSクラスを設定すれば大体は大丈夫ですが、時々、うまくいかないときもあります。
また、定義するクラスを作ってもうまくいかない場合もあります。
その際には、タグの中で、Style属性で定義すると、うまく行ったりするときもあるので、いろいろ試すと良いと思います。

WordPressだと、プラグインが必要な、例えばスライダーも、Bootstrapで実装することが出来ます。
細かいところもいろいろ定義できるので、とても便利です。
ただ、実際にコードを書くところは増えたり、細かく作り込み事は可能ですが、最初からページにコンテンツを埋め込まないと行けないところも出てくるので、Wordpressでの修正というよりは、完全にコードでの修正になります。
ですが、とても便利なので、なんらかのコードを書く心得のある方がチャレンジされると面白いと思います。

 

mahalo
最後まで読んでくださり本当にありがとうございます。

 

占いやカウンセリングを通して、メッセージをお伝えしていきます。

個人セッションは、携帯電話、LINE、Zoomで30分間6000円(延長10分間2000円)です。

お気軽にお問い合わせ下さい!

LINE公式アカウントです。気軽に登録してください!
LINE公式アカウント