WordPress テーマ変更後に行ったこと。 フォント調整・動画表示幅調整・記事抜粋の長さ調整

WordPressのテーマを入れ替えてから、あれこれ調整しましたので、メモとして記載しておきます。

変更点は以下の3つ

外国物のテーマを導入した時にはフォントが思うように表示されない

動画 videoタグの表示幅がめちゃくちゃになる

記事抜粋の長さを調整したい

ファイル名：functions.php

以下を追加

[diff]
+// Videoの幅を調整
+if ( ! isset( $content_width ) ){
+ $content_width = 620;
+}
+
+// 記事抜粋文字数の調整
+function new_excerpt_length($length) {
+ return 200;
+}
+add_filter(‘excerpt_length’, ‘new_excerpt_length’);
+add_filter(‘excerpt_mblength’, ‘new_excerpt_length’);

[/diff]

ファイル名：style.css

[diff]
body {
– color: #888;
– font-family: ‘Open Sans’, sans-serif;
– font-size: 12px;
+ color: #444444;
+ font-family:’Lucida Grande’,’Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, Meiryo, メイリオ, sans- + font-size: 16px;
+ font-size: 16px;
}

h1 {
color: #fff;
– font: 400 32px/34px ‘Rokkitt’, serif;
+ font: 400 32px/34px ;
+ font-family:’Lucida Grande’,’Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, Meiryo, メイリオ, sans-serif;
letter-spacing: 0;
margin-bottom:5px;
}
h2 {
color: #fff;
– font: 400 28px/30px ‘Rokkitt’, serif;
+ font: 400 28px/30px ;
+ font-family:’Lucida Grande’,’Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, Meiryo, メイリオ, sans-serif;
letter-spacing: 0;
margin-bottom:5px;
}
h3 {
color: #fff;
font: 400 24px/26px ‘Rokkitt’, serif;
+ font-family:’Lucida Grande’,’Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, Meiryo, メイリオ, sans-serif;
+
letter-spacing: 0;
margin-bottom:5px;
}
h4 {
color: #fff;
– font: 400 20px/22px ‘Rokkitt’, serif;
+ font: 400 20px/22px ;
+ font-family:’Lucida Grande’,’Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, Meiryo, メイリオ, sans-serif;
+
letter-spacing: 0;
+ margin-top:10px;
margin-bottom:5px;
}
h5 {
color: #fff;
– font: 400 16px/20px ‘Rokkitt’, serif;
+ font: 400 16px/20px ;
+ font-family:’Lucida Grande’,’Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, Meiryo, メイリオ, sans-serif;
+
letter-spacing: 0;
margin-bottom:5px;
}
h6 {
color: #fff;
– font: 400 14px/20px ‘Rokkitt’, serif;
+ font: 400 14px/20px ;
+ font-family:’Lucida Grande’,’Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, Meiryo, メイリオ, sans-serif;
letter-spacing: 0;
margin-bottom:5px;
}

.kopa-article-list .entry-item .entry-title {
– font-size:20px;
– font-family: ‘Raleway’, sans-serif;
+ font-size:24px;
+ font-family: ‘Lucida Grande’,’Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, Meiryo, メイリオ, sans-serif;
border-bottom:1px solid #ececec;
padding-bottom:15px;
margin:0 0 15px;

.kopa-article-list .entry-item .entry-date,
.kopa-article-list .entry-item .entry-comments {
color:#888;
– font-family: ‘Raleway’, sans-serif;
+ font-family: ‘Lucida Grande’,’Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, Meiryo, メイリオ, sans- margin-right:15px;
}

.entry-box .entry-title {
– font-family: ‘Raleway’, sans-serif;
– color:#333;
+ font-family: ‘Lucida Grande’,’Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, Meiryo, メイリオ, sans-serif; padding-bottom:10px;
+ color:#666;
border-bottom:1px solid #ececec;
– padding-bottom:10px;
position:relative;
margin:0 0 15px;
}

.entry-box header .entry-date,
.entry-box header .entry-comments {
color: #888888;
– font-family: ‘Raleway’,sans-serif;
+ font-family: ‘Lucida Grande’,’Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, Meiryo, メイリオ, sans-serif; padding-bottom:10px;
margin-right: 15px;
}

.entry-box footer p a.article-title {
font-size:20px;
– font-family: ‘Raleway’,sans-serif;
+ font-family: ‘Lucida Grande’,’Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, Meiryo, メイリオ, sans-serif; padding-bottom:10px;
}
.entry-box footer p .entry-date {
color:#888;
– font-family: ‘Raleway’,sans-serif;
+ font-family: ‘Lucida Grande’,’Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, Meiryo, メイリオ, sans-serif; padding-bottom:10px;
}

[/diff]

以上です。良かったら参考にしてみてください。