ワードプレスを入れるにあたり、テーマを何にするかという問題があります。
世の中にはテーマがかなり色々あるようで、高機能な有料テーマもあるようなのですが、WP続くかわからないし、とりあえずお手軽に無料テーマからスタートしたいと考えていました。
少し検索して、評判の良さそうな「LION MEDIA」と「LION BLOG」を試しLION MEDIAの方を現在は使っています。テーマなどは、本当はあまり手を入れない方がメンテナンス性が良いのはわかっていますが、ちょっとだけカスタマイズしましたので、その内容をメモします。
＜触ったファイルは以下２つ＞
子テーマのstyle.css
親テーマのfunction.php
そのままでも美しいLION MEDIAテーマ
LION MEDIAはAMP対応・SEO最適化・レスポンシブ、そして表示速度が速い、と書かれていて採用を決めました。
実は、カスタマイズありきのシンプルなテーマyStandardと迷ったんですが、あまりカスタマイズせずとも整ったものを使う方がいいかなってFC2時代に思ったのもあり、LION MEDIAに決定。
テーマはホームページ制作会社FITが製作しており、デモサイトはこちらです。
デモサイトを見ていただけると分かる通り、注目記事のピックアップなどもあって綺麗なニュースサイトのようなイメージですよね。
プラグインを使わずにランキング表示やお問い合わせフォームなども作れたりと、ワードプレスがあまりわかっていない私には始めやすいツールもそろっていました。
そのままでもいいんだけど変えたところ
元々のFC2ブログで使っていたテンプレートが好きだった私。
ちなみに、The other way roundが配布中のAlternativeというテンプレートです。テンプレートも素敵ですし、サイトはFC2ブログのTIPSがたくさん書いてあってためになります！
LION MEDIAはどちらかというとインパクトの強いメディアという言葉があうテーマ。
もう少し印象をトーンダウンしたいなあ・・・という気持ちがあり、そちらの方向でカスタマイズしていくことにしました。
子テーマのstyle.cssへの追加
以下、具体的に記録しておきますね。最後に子テーマのCSSもメモしておきます。
ヘッダーカラーの変更 style.css
LION MEDIAのカスタマイズでサイトのテーマ色を決められます。
こちらで決めた色は例えば本文のリンク色など様々なところに効いてくるのですが、ヘッダーのサイトロゴの部分もその色になるんですよね。
白にしたかったのでCSSに記載して白にします。importantをつけたらうまくいきました。
(追記)と思ったけどブラウザによって挙動が違う？のでテーマのカスタマイズから追加できる「追加CSS」にも記載しました。
.l-header{background-color:#FFF;}
です。
よく見かける外部リンクへのアイコン表示 style.css
コンテンツ部分で、target=”_blank”がつくリンクにアイコンをつけるようにしました。
アイコンもフォント（fontawesome）なんですね。すごいなあ。
WPのカードの幅を100%に style.css
必要かわからないのですが、URLを直接入力した時に埋め込まれるカードの幅がズレるっていう噂を聞いたので100%にしておきます。
wp-embedded-content という属性でした。
wpカードはこんなのです。プラグインでの表示もできるようなのですが、WP標準の機能で今は使っています。
個別ページのアイキャッチ表示を削除 style.css
PC版では個別ページのタイトルの横にはアイキャッチ画像が表示されているのですが、タイトル背景にもアイキャッチが使われていて若干くどい印象を受けたので、こちらを削除することにしました。
アイキャッチをcssでdisplay:none;にします。
また、タイトル側の配分がwidth:50%になっていたのでこちらも合わせて100%にします。
個別ページのタイトル背景を修正 style.css
次にタイトル背景なのですが、デフォルトはアイキャッチ画像の上に黒ベースの格子模様が乗っている状態です。
これはこれでリッチな雰囲気が良いのですが、個人的には少し凝りすぎかなと思ったので、白を70%で乗せることに。
また、日付やカテゴリーが書いてある背景白が若干うるさいので消して、タイトル関連の文字色も全て黒#191919に変更しました。
カテゴリーページのタイトル背景を修正 style.css（現在うまく動いていません）
カテゴリーページもグラデーションで格子模様が美しく作られていましたが、単純なグラデーションにしたいと思っています。
グラデーションのCSSはこちらのサイト Fresh Background Gradientsを参考にしたいと思っていますが、うまくできず手付かずです。
アーカイブページの列を１列に style.css
スマホで見たときのアーカイブページを２列から１列に変更しました。
タイルをたくさん貼るというより、１記事一記事見やすい方がいいなと感じたので修正。PCの場合は２列でOKなのでそのままです。
.archiveItemのwidthを変更します。
というわけでどんなstyle.cssになったかというと
以下の通りになります。
/*外部リンク用アイコン表示*/
.content a[target="_blank"]::after{
margin-right: 3px;
content: "\f08e";
font-family: FontAwesome;
display: inline-block;
vertical-align: -1px;
}
/*WPカードの幅を100%に*/
.wp-embedded-content {
max-width: 100%;
}
/*アイキャッチの小さいの非表示PC版のみ*/
.eyecatch.eyecatch-singleTitle{ display:none;}
/*タイトルを100%幅で書くPC版のみ*/
.singleTitle__heading{
width:100%;
}
/*エントリータイトルのシングル化スマホ版のみ*/
@media only screen and (max-width: 767px){
.archiveItem{
width:calc(100% - 20px);
}
}
/*記事タイトルの背景変更*/
.singleTitle::before{
background-image:none;
background-color: rgba(255,255,255,0.7);}
@media only screen and (max-width: 767px){
.singleTitle::before{
background-image:none;
background-color: rgba(255,255,255,0.7);}
}
.heading.heading-singleTitle,.dateList__item{color:#191919;}
@media only screen and (max-width: 767px){
.heading.heading-singleTitle,.dateList__item{color:#191919;}
}
/*記事タイトル下日付・カテゴリーなどの背景削除*/
.dateList.dateList-singleTitle{
background-color: inherit;}
@media only screen and (max-width: 767px){
.dateList.dateList-singleTitle{background-color: inherit;}
}
親テーマのfunction.php
phpは全く詳しくないので、ちょっとだけ。
こちらはページャーを修正しています。
ページャーの数が１つしか表示されていなくて不便だと感じたので、
//////////////////////////////////////////////////
//オリジナルページネーションを作成
//////////////////////////////////////////////////
のところにある、以下の記述を修正
if ( $GLOBALS['wp_query']->max_num_pages > 1 ) {
$args = wp_parse_args( $args, array(
'mid_size' => 2, ←ここを0から2にしました。
'prev_text' => 'PREV',
'next_text' => 'NEXT',
) );まとめと今後やりたいこと
そのままでも十分綺麗ですが、色々やりたいこと、出てきますね。
これ以外にもいくつか挑戦してみたいことがあるのでここに記録しておきます。
・ヘッダー固定をCSSで実装したいと思います。（ちょっとやってみてうまくいかなかったのでまた今度）
・カテゴリーページの背景色の修正（子テーマでうまくいかなかった）
・ヨメレバCSSも近いうちに書き足したいと思います。
できたらまた記事にしますね！
