Stinger移行時の問題3 画像の中央配置

スポンサーリンク

画像の中央配置

WordPressテーマ「Stinger」は、記事編集画面で画像の中央配置が有効にならないので、CSSを修正して中央に配置されるようにしました。

これで、「投稿の編集」→「ビジュアル」タブから、画像を中寄せすることができます。

スポンサーリンク

画像の中央配置 CSS

さて、画像の中央配置ですが、こいつをCSSに追加しました。これで、「投稿の編集」→「ビジュアル」タブから、画像を中寄せすることができます。左右寄せは使わないので記載してません。(上下ともナレッジツリーさんの記事から転載)

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

左右寄せにも対応させるには、以下を追加してください。

img.alignright {
    display: block;
    margin: 0 0 0 auto;
}

img.alignleft {
    display: block;
    margin: 0 auto 0 0;
}

img.aligncenter {
    display: block;
    margin: 0 auto;
}

img.float-left {
    float: left;
}

img.float-right {
    float: right;
}

.wp-caption {
    text-align: center;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

画像の中央配置 CSSにコードを追加

では、CSSに上記のコードを追加してみましょう。

管理画面の左メニュー「外観」→「テーマ編集」をクリック。

CSS編集

右のメニューから「スタイルシート」をクリック。

cssスタイルシート編集

ここに上記のコードを貼り付けてください。

項目ごとにまとまっているので、関連するところへ配置するのがよいかと。よくわからないなら、最初の方に貼り付けておけばよいでしょう。

スポンサーリンク

画像の中央配置方法

ちなみに、画像の中央配置方法ですが、「投稿の編集」画面で「ビジュアル」タグ→画像を選択して「中央寄せ」を押してください。

画像センタリング

これで画像が中央に配置されるようになりました。めでたしめでたし・・・

今回は「knowledge tree – ナレッジツリー」さんの記事を参考にしてStingerのCSSを修正しました。ナレッジツリーさん、ありがとうございます。

http://knowledgetree.jp/archives/2800

巷で話題のWordPressのテーマ「Stinger2」に変更してカスタマイズしたこと | knowledge tree – ナレッジツリー

スポンサーリンク
PC用
PC用

フォローする