【コピペOK】SWELLブログカードのCSSを変えてみた
WordPressテーマ「SWELL」のブログカードのデザインを変更してみました。
SWELLのブログカードのデザインは、シンプルでオシャレなので、もとのデザインを壊さない程度のアレンジにしています。
コピペOKなので、ブログカードを自分好みにカスタマイズしてみたい人は参考にしてみてください。
SWELLのブログカード設定方法
まずは、WordPressテーマ「SWELL」での、ブログカードデザインの設定方法を解説していきます。
手順は次の通りです。
- WordPress管理画面の「SWELL設定」から「エディター設定」→「その他」を選択する
- 「ブログカード」の欄から「ブログカード（内部）」「ブログカード（外部）」を3つのデザインの中から選択する
順に解説します。
①管理画面の「SWELL設定」を開く
まず、WordPress管理画面の「SWELL設定」を選択します。
「エディター設定」を選択し、右端の「その他」のタブを選択します。
②「ブログカード」の設定欄から好みのデザインを選択する
ブログカードのデザインは、タイプ１からタイプ３まであります。
上の図では、内部リンクにタイプ２、外部リンクにタイプ３を選択しています。
いぬ「内部リンク」と「外部リンク」の違いって何？
簡単に説明すると、
「内部リンク」は、自分のブログ内の記事をリンクさせる時に使用するもの
「外部リンク」は、外部のサイトへのリンクを貼るときに使用するもの
という違いがあります。
あとは記事を書く際に「関連記事」を選択すれば、設定したデザインのブログカードが反映されます。
初期デザインでも十分オシャレなので、このまま使っても全く問題はありません。
いぬブログカードの色を変えてみたいな～
という人は、つぎの章を参考にしてみてください。
ブログカードのカスタマイズ方法
ここからはブログカードのアレンジ方法についての解説です。
ここから先は、CSSファイルを変更していきます。
ファイル変更前はバックアップをとり、自己責任でデザインの改修を行ってください。
準備：コードを追記する場所
WordPress画面の「外観」→「テーマファイルエディター」を選択します。
SWELLの子テーマを編集していきます。
「編集するテーマを選択」の部分が「SWELL CHILD」になっていることを確認します。
テーマファイルは「style.css」を選択します。
※SWELLの子テーマをダウンロードしていない人は、SWELL公式サイトからダウンロードしておいてください。
ここまで選択すると、ファイルの冒頭に
@charset “UTF-8”;
から始まるコードが書かれているのが確認できると思います。
こちらは大切なコードになるので、絶対に消さないようにしてください。
一番下の、何も書かれていない部分に、ブログカードデザインの変更をするためのコードを追記していきます。
Ad
「タイプ１」のデザインを変更する
まずはブログカード「タイプ1」のデザインを変更します。
変更前は、以下のようなデザインです。
変更後は、こちらのようなデザインになりました！
コードは以下の通りです。
/******ブログカード装飾*******/
/* ブログカードタイトルを太文字に */
.p-blogCard__title{
font-weight:600;
}
/*ブログカードタイプ１ ボーダー*/
[data-type=type1] .p-blogCard__inner:before {
border: 2px solid #FFC042; /* 枠線 */
}「タイプ２」のデザインを変更する
次にブログカード「タイプ２」のデザインを変更します。
変更前は、以下のようなデザインです。
変更後は、こちらのようなデザインになりました！
コードは以下の通りです。
/******ブログカード装飾*******/
/* ブログカードタイトルを太文字に */
.p-blogCard__title{
font-weight:600;
}
/*ブログカードタイプ２「あわせて読みたい」*/
[data-type=type2] .p-blogCard__caption {
background-color: #007b43; /* 文字部分背景色 */
color: #fff; /* 文字色 */
}
/*ブログカードタイプ２ ボーダー*/
[data-type=type2] .p-blogCard__inner{
border: 3px solid #93ca76; /* 枠線 */
background-color:#fff; /* 背景色 */
}「タイプ３」のデザインを変更する
最後にブログカード「タイプ３」のデザインを変更します。
変更前は以下のようなデザインでした。
変更後は以下のようになりました。
コードは以下の通りです。
/******ブログカード装飾*******/
/* ブログカードタイトルを太文字に */
.p-blogCard__title{
font-weight:600;
}
/*ブログカードタイプ3 ボーダー */
[data-type=type3] .p-blogCard__inner{
border: 2px solid skyblue; /*枠線 */
background-color:#fff; /* 背景色 */
}タイプ１、タイプ２、タイプ３を一度に変更したいときは
タイプ1からタイプ３まで全て変更したいときは、以下のコードをコピー＆ペーストしてみてください。
/******ブログカード装飾*******/
/* ブログカードタイトルを太文字に */
.p-blogCard__title{
font-weight:600;
}
/* ブログカードタイプ１ 「あわせて読みたい」 */
[data-type=type1] .p-blogCard__caption {
color: #007b43; /* 文字色 */
}
/*ブログカードタイプ１ ボーダー*/
[data-type=type1] .p-blogCard__inner:before {
border: 2px solid #FFC042; /* 枠線 */
}
/*ブログカードタイプ２「あわせて読みたい」*/
[data-type=type2] .p-blogCard__caption {
background-color: #007b43; /* 文字部分背景色 */
color: #fff; /* 文字色 */
}
/*ブログカードタイプ２ ボーダー*/
[data-type=type2] .p-blogCard__inner{
border: 3px solid #93ca76; /* 枠線 */
background-color:#fff; /* 背景色 */
}
/*ブログカードタイプ3 ボーダー */
[data-type=type3] .p-blogCard__inner{
border: 2px solid skyblue; /*枠線 */
background-color:#fff; /* 背景色 */
}間違えて、
- 余計な文字を入れてしまう
- 全角スペースを入れてしまう
- 「}」などの入力がされていない
などのミスをしてしまうと、設定が反映されませんので注意してください。
うさぎブラウザやSWELLの設定でキャッシュされていると、変更が反映されない場合があります。
その際はブラウザの履歴を削除したり、SWELLのキャッシュをクリアしてから確認してみてください！
枠の色を変更したいときは、こちらのサイトを参考にしてみてください。
border: 3px solid #ffd700; /* 枠の太さと色 */「border」部分の「#ffd700」が色を指定するコードです。
枠線の太さは「3px」部分の数字を変更します。
（細い線は数字が小さい。太い線は数字が大きい。）
「#ffd700」を好きなカラーコードにして、「設定を変更」ボタンを押せば変えられます。
いぬ末尾の「;」は間違えて消去しないでね！
エディターに正確にコードを入力しないと、うまく設定を反映してくれないので、私も苦労しました…。
コードの改変は、WordPressの中でも中～上級者向けの部分ですね。
初心者の人は焦らなくても大丈夫です。
ゆっくり慣れていきましょう。
Ad
まとめ：ユーザーにとって見やすいブログになるようにしよう！
- SWELLブログカードのデザインは自分好みにアレンジ可能
- 見やすいブログを作ろう！
SWELLのブログカードは、そのままのデザインでも十分オシャレなので、色味を変える程度のアレンジにしています。
ブログカードは
- 適度に目立たせる
- ユーザーに内容が分かるようにする
という部分が重要です。
ブログカードのデザインが悪目立ちしてしまって、ユーザーが文章を読むのに苦労してしまったら、せっかくのアレンジが残念な結果になってしまいます。
ユーザーの目にやさしい、分かりやすいブログを作っていきたいですね！
ストーリーや世界観が面白いゲームや漫画、アニメの感想や独自の考察を書いています。
他にも、イラストを描いてTwitter、Pinterestに投稿しています。
タイッツーでもつぶやいています
関連記事
大カテゴリー
名作ゲームまとめ
名作コミックまとめ
ブログお役立ち記事まとめ
