Bootstrapのフリーのテーマを使ってデザインを簡単にカスタマイズ

一からすべて自分でデザインするのは手間がかかるので自分のイメージに近いフリーのテーマをまず最初に適用し、そのフリーのテーマをベースにカスタマイズする手順をまとめています。

ここでは、Bootstrap3のサンプルデザインOffcanvasをベースにカスタマイズしています。
　

１）Bootstrapのフリーのテーマを入手、設定

　
①Bootstrapのフリーのテーマを入手
　
ここでは、下記サイトのテーマを使用しています。
Bootswatch: Free themes for Bootstrap
　
②HTMLのCSSファイルインクルードの設定
　
上記①のサイトでは、ファイル名がBootstrap3のCSSファイルと同じbootstrap.min.cssとなっているのでファイルを置き換えるのみで適用できます。
　
（フリーのテーマ使用前）

btstrp1

（superheroというテーマ使用後）

btstrp2

　

２）フリーのテーマをカスタマイズする方法

　
①カスタマイズ用のCSSファイルを作成し、オリジナルのテーマの下にインクルードの記述を追加します。ここでは、custom.cssとしています。
　
<head>
　　：
　<link href=”css/bootstrap.min.css” rel=”stylesheet”>
　<link href=”css/custom.css” rel=”stylesheet”>
　　：
　
②ブラウザで作成中のHTMLを表示し、F12ボタンなどでブラウザのDeveloperツールを開始します。
　
③ブラウザ上で選択したい要素上をマウスオーバーして右クリックし、”要素を調査”、”要素を検証”などの項目をクリックします。
　
④変更したい要素の値を変更するとブラウザ上の表示内容が即時に反映されるので、いろいろ試しながら設定値を決めます。
　
⑤設定値が決まったら変更したCSS設定をコピーし、custom.cssに貼り付けます。
　
●サイトのヘッダー部（jumbotron）とアクティブのリストグループの要素の背景色をカスタマイズする例
　
（ブラウザ上の表示例）

btstrp3

（custom.cssの内容）

.container .jumbotron, .container-fluid .jumbotron {
    border-radius: 20px;
}

.jumbotron {
  background-color: #0ABD3B;
}

.list-group-item.active, 
.list-group-item.active:hover, 
.list-group-item.active:focus {
  background-color: #0ABD3B;
}

関連記事の目次

VPSの開始からWebサイト公開、運用

VPSにログイン、SSH接続、初期設定

VPSサーバーでスナップショットを取得: ～障害に備え、リカバリーポイントを作成。
VPSサーバーにログインして、設定内容を確認: ～グローバルIPアドレス確認、SSHキーを作成。
VPSサーバーにSSHでログイン: ～Tera Term、SSH、公開鍵認証方式
yumコマンドで最新のパッケージにアップデート: ～全パッケージを最新にアップデート

WordPressでブログ公開～初期構築手順

Apacheのインストール: ～yumコマンドでApacheインストール、iptablesでファイアウォールの設定
PHPとMySQLをインストール: ～yumコマンドでPHP、MySQLインストール
WinSCPを使ってWordPressをアップロード: ～WinSCPをクライアントPCにインストール、ファイルアップロード方法
WordPressをインストール: ～MySQLでWordPress用データベース作成、wp-config.phpファイルの設定

まずは基本的なセキュリティ設定

CentOSのファイアウォール設定: ～iptablesを使ってネットワークフィルタリング設定を一から行う
OpenSSHの設定をよりセキュアに: ～ログイン制限、ポート変更、認証方式
ApacheでTCPのTraceメソッドを無効にする: ～Apacheの設定変更、Telnetで動作確認
ヘッダーにApacheバージョンが表示されないようにする: ～Apacheの設定変更、Telnetで動作確認
Apacheでディレクトリ内一覧表示を無効にする: ～autoindex_moduleのロードを無効にする
セキュリティを考慮し、MySQLの匿名ユーザーにパスワードを設定、または削除: ～MySQLの匿名ユーザーにパスワードを設定、または削除
PHPのバージョンが表示されないようにする: ～php.iniの設定変更
WordPressディレクトリのパーミッションをセキュアに: ～WordPress用ディレクトリの所有グループ、ユーザー、パーミッション設定

基本的なWordPress設定 Tips

パーマリンク設定時のApache設定: ～WordPressパーマリンクの設定、Apache .htaccessの設定
WordPressテーマの選定: ～テーマ追加の特徴フィルターの項目、テンプレートキング
WordPressで画像のアップロード、サイズ調整、リンクを設定: ～アップロード画像の画像サイズ、サムネイル、画像編集、リンク設定

サーバー、Webサイトの運用

更新可能なRPMパッケージのリストをメールで送信する: ～yumコマンド、Bashスクリプト、Cron
Linuxでディスク使用量が多いディレクトリを調べる方法（１）: ～du --max-depth
Linuxでディスク使用量が多いディレクトリを調べる方法（２）: ～duコマンド、sortコマンド
WordPressデータベースのバックアップとリストア: ～コマンドラインでバックアップ、リストア
WordPressのバージョンアップと旧バージョンへの戻し: ～データベースとディレクトリのバックアップ、リストア
BashスクリプトでWordPressデータベースを自動バックアップ: ～MySQLデータベースをBash、Cronを使って自動バックアップ、メール通知
BashスクリプトでDos攻撃など大量アクセスのログを検知: ～Apacheアクセスログ、Dos、Cron、メール通知

WordPress　高度な利用

テーマ作成
　

ブートストラップ３を使って自作テーマ作成 （１）全体概要 （２）ブートストラップのサンプルを使ってindex.phpを作成 （３）header.php、sidebar.php、footer.php、index.phpのテンプレートファイル作成 （４）JavaScriptインクルードの設定 （５）投稿本文表示用のテンプレートファイルを作成 （６）単一投稿用（single.php）のテンプレートファイル作成 （７）固定ページ用（page.php）のテンプレートファイル作成 （８）検索結果表示用（search.php）のテンプレートファイル作成 （９）アーカイブ表示用（archive.php）のテンプレートファイル作成 （１０）カテゴリー表示用（category.php）のテンプレートファイル作成 （１１）WordPressのメニュー画面でナビゲーションメニューを設定 （１２）サイトタイトル、キャッチフレーズを表示できるようにheader.phpを修正 （１３）カスタムヘッダー画像を使えるようにheader.phpを修正 （１４）404.phpテンプレートファイルを作成 （１５）記事タイトル部分のCSS設定 （１６）記事メタデータ部分のCSS設定 （１７）記事本文部分のCSS設定 （１８）前後のページへのリンクのCSS設定 （１９）前後の投稿へのリンクのCSS設定 （２０）コメント投稿フォーム、コメント表示部のCSS設定 （２１）ウィジェット部のCSS設定 （２２）アーカイブページのCSS設定 （２３）画面を左右にスライドさせるボタンのCSS設定: ～Bootstrap3、自作テーマ作成、TwentyFourteen
Bootstrapのフリーのテーマを使ってデザインを簡単にカスタマイズ: ～Bootstrap3のスタイルをカスタマイズ
簡単なショートコードを作ってみる: ～ショートコードの作り方
ショートコードを使って関連記事のリンクを自動で挿入: ～ショートコードの簡単なサンプル
ショートコードを使ってディレクトリ内のファイル名を取得し、投稿内にリンクを挿入: ～カスタムフィールド利用、PHPで日本語文字列検索などのコーディング
WordPress投稿内でAngularJSを使用: ～AngularJS、Bootstrap、アコーディオン
Bootstrap3で作成したナビゲーションメニューをAngularJSに変更: ～AngularJS、Bootstrap、自作テーマheder.php
WordPressでAngularJSを使ったGoogleマップを使えるようにする: ～AngularJSを使って投稿内にGoogleマップ

Webサイト作成（WordPress以外）

Ruby on Rails（他サイト）: ～構築、CMS、Bootstrap、AngularJS

WordPressテーマ作成

Bootstrap

Angular-ui bootstrap

ng-bootstrap（Angular2、Angular4）

コメントを残すコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。