ブートストラップ３を使って自作テーマ作成（２０）コメント投稿フォーム、コメント表示部のCSS設定

コメント投稿フォーム、コメント表示部のスタイル設定を行います。

TwentyFourteenにおける設定内容

　
コメント投稿フォーム、投稿済みのコメント表示は、単一投稿や固定ページを表示するテンプレートファイルsingle.php、page.php内の下記コードによって生成されています。
　
if ( comments_open() || get_comments_number() ) {
　comments_template();
}
　

CSSの設定

　
コメントのテンプレートファイルcomments.phpも含め特にコメント関連ではTwentyFourteenのものを流用していて変更していません。
スタイルシートの設定は、TwentyFourteenのstyle.cssの”6.14 Comments”の部分をすべてコピーし、自分の好みに応じて適宜変更します。
　
レイアウトはブートストラップ３のグリッドを使って行っているので、下記部分は削除しました。
　
.comments-area {
　　margin: 48px auto;
　
「ブートストラップ３を使って自作テーマ作成」の目次へ

関連記事の目次

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テーマ作成

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

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