MENU
カテゴリー

【コピペOK】差別化できるAFFINGER6のCSSカスタマイズ

この記事で解決できること

  1. トップページの記事一覧をカード型にできるようになる
  2. タイトル文字サイズの変更、ボタンの形の変更などの微調整ができるようになる
  3. AFFINGER6の基本機能でできないカスタマイズができるようになる

CSSのカスタマイズはWordPressの設定やプラグインとの相性などでデザインが崩れることがあります。

崩れても追加したCSSを削除すれば元に戻りますが、念のため追加する前にWordPressのバックアップをとるようにしてください。

目次

コピペでカスタマイズするための準備

追加CSSでカスタマイズするための手順1。詳細は吹き出しボックスに記載
追加CSSでカスタマイズするための手順2。詳細は吹き出しボックスに記載
追加CSSでカスタマイズするための手順3と4。詳細は吹き出しボックスに記載
  1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
  2. 「追加CSS」をクリック
  3. 次のCSSをコピーして貼り付け
/*全体用はここに貼り付け*/





@media only screen and (min-width: 600px){
/*PC用はここに貼り付け*/



	
	
}
@media only screen and (max-width: 599px){
/*スマホ用はここに貼り付け*/

	
	
	
	
}
  1. 「公開」をクリック

これでコピペで再現するための準備は完了です。

ここでは簡単にできる方法として追加CSSに記入するようにしていますが、子テーマのスタイルシートに記入しても同じような結果になります。

どちらを選んでも大きな違いはないので、状況にあわせて選択してください。

コピペでカスタマイズするための補足説明

追加CSSを追加する場所の説明。詳細は吹き出しに記載

以降の説明では「CSSをコピー」⇒「コピーしたCSSの貼り付け」という手順でカスタマイズをしていきます。

コピーするCSSの右上には[全体用に貼り付け][PC用に貼り付け][スマホ用に貼り付け]とラベルが振ってあるので、そのとおりに追加CSSに貼り付けてください。

例えば次のCSSなら右上に[全体用に貼り付け]とラベルがふってあるので、追加CSSの/*全体用はここに貼り付け*/の下に貼り付けます。

詳しくは画像をご確認ください。

(※いまは説明しているだけなので実際に貼り付ける必要はありません)

/*サイドバーカテゴリの線*/
#side li.cat-item a {
    border-bottom: 1px solid #f2f2f2!important;
}

次のCSSは[PC用に貼り付け]なので/*PC用はここに貼り付け*/の下に貼り付けます。

/*サイトタイトルのサイズ*/
header .sitename {
	font-size: 2em;
}

次のCSSは[スマホ用に貼り付け]なので/*スマホ用はここに貼り付け*/の下に貼り付けます。

/*サイトタイトルのサイズ*/
header .sitename {
	font-size: 1.1em;
}

CSSをコピペするさいの注意点

注意

/*PC用はここに貼り付け*/
/*スマホ用はここに貼り付け*/

の最後についている } を消してしまうと、CSSが機能しなくなるので、消さないように注意してください。

詳しくは、下記画像をご確認ください。

追加CSSを追加するさいの注意点。詳細は吹き出しに記載

サイトタイトルのサイズを変更

PCサイトタイトルの大きさ変更前
PCサイトタイトルの大きさ変更後
/*サイトタイトルのサイズ*/
header .sitename {
	font-size: 2em;
}
/*サイトタイトルのサイズ*/
header .sitename {
	font-size: 1.1em;
}

文字サイズ:「font-size」の「数値」を変更

サイドバーカテゴリの線の設定

サイドバーのカテゴリの区切り線の色を変更する前
サイドバーのカテゴリの区切り線の色を変更した後
/*サイドバーカテゴリの線*/
#side li.cat-item a {
    border-bottom: 1px solid #EE0044!important;
}

線の太さ:「border-bottom」の「1px」を変更
線の色:「border-bottom」の「#EE0044」を変更
線の種類:「border-bottom」の「solid」を変更

線の種類

「実線」→「solid」
「2重線」→「double」
「ドット線」→「dotted」
「破線」→「dashed」

ヘッダーカードの影を消す方法

ヘッダーカードの影を非表示にする前
ヘッダーカードの影を非表示にした後
/*ヘッダーカードの影を非表示*/
.st-cardlink-card {
	box-shadow: none;
}

「box-shadow」は消すだけでなく、影の濃さ、影の広がり、色なども設定できるようになっています。

ただ「box-shadow」でできることが多いのと、この記事の目的がCSSの技術を身につけるではないので、説明はしません。

興味があれば「box-shadow 使い方」などで検索してみてください。

記事一覧をカード型にする

カードタイプは「横長カードタイプ」「カード2列タイプ」「カード3列タイプ」の3パターンを用意したので、好きなものをお使いください。

記事一覧をカード型にするための準備

記事一覧をカードタイプにする手順1と2。詳細は吹き出しボックスに記載
記事一覧をカードタイプにする手順3。詳細は吹き出しボックスに記載
記事一覧をカードタイプにする手順4から7。詳細は吹き出しボックスに記載
記事一覧をカードタイプにする手順8から10。詳細は吹き出しボックスに記載

AFFINGER6で記事一覧をカード型にするには、まず以下の設定をする必要があります。

  1. 「AFFINGER管理」をクリック
  2. 「全体設定」をクリック
  3. 「サムネイル画像設定」をクリック
  4. 「記事一覧」で「正方形にする」を選択
  5. 「記事一覧」のチェックボックスを全て外す
  6. 「スライド・カード型 サムネイル画像の縦横比」の「デフォルト」を選択
  7. 「基準」の「自動(高さに応じて)」を選択
  8. スクロールして「抜粋設定」まで進む
  9. 「PC閲覧時も記事一覧(トップ・アーカイブ・関連記事)の抜粋を非表示にする」にチェック
  10. 「Save」をクリック

これでカード型にする準備はオッケーです。

横長カードタイプ

横長カードタイプにしたさいPC表示でどのようみ見えるかのイメージ画像

横長カードタイプにしたさいPCで関連記事がどのように見えるかのイメージ画像

横長カードタイプにしたさいスマホ表示でどのようみ見えるかのイメージ画像
/*横長カードタイプ*/
#contentInner .kanren{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	margin:-10px
}
#contentInner .kanren dl.clearfix {
	width : 45%;
	padding:10px;
	box-shadow:0px 0px 3px rgba(0,0,0,0.16);
	border:none;
}
article dl.clearfix:not(ul.clearfix,.p-navi,#st-tab-box){
	display: inline-block;
	transition-duration: 0.4s;
}
article dl.clearfix:not(ul.clearfix,.p-navi,#st-tab-box):hover {
	transform: translateY(-3px);
	box-shadow: 0px 6px 18px -8px rgba(85, 85, 85, 0.75)!important;
}	

2列カードタイプ

カード2列タイプにしたさいPC表示でどのようみ見えるかのイメージ画像

カード2列タイプにしたさいPCで関連記事がどのように見えるかのイメージ画像

カード2列タイプにしたさいスマホ表示でどのようみ見えるかのイメージ画像
/*2列カードタイプ*/
#contentInner .kanren:not(#contentInner .pop-box){
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
#contentInner .kanren dl.clearfix:not(#contentInner .pop-box dl.clearfix ) {
	width : 45%;
	padding:10px;
	box-shadow:0px 0px 3px rgba(0,0,0,0.16);
	border:none;
	border-radius: 5px;
}
#contentInner .kanren dt:not(#contentInner .pop-box dt) {
	float:none;
	width:100%;
}
main .kanren dl img:not(main .pop-box dl img) {
	width:100%;
	height:200px;
	object-fit:cover;
	border-radius: 5px;
}
main .kanren dd:not(main .pop-box dd) {
	padding:10px 0px 0px;
}
.h5modoki, .post h5 {
    padding-right: 0px;
		line-height: 0;
}
article dl.clearfix:not(ul.clearfix,.p-navi,#st-tab-box){
	display: inline-block;
	transition-duration: 0.4s;
}
article dl.clearfix:not(ul.clearfix,.p-navi,#st-tab-box,.st-kaiwa-box,.pop-box dl.clearfix):hover {
	transform: translateY(-3px);
	box-shadow: 0px 6px 18px -8px rgba(85, 85, 85, 0.75)!important;
}	
main article aside .point + .kanren{
	margin: 0px;
	padding: 0px;
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-start!important;
}
main article aside .point + .kanren dl.clearfix{
width : 28%!important;
	margin-right: 14px;
}
main article aside .point + .kanren dl img{
	width:100%;
	height:100px;
	object-fit:cover;
}
/*2列カードタイプ*/
#contentInner .kanren:not(#contentInner .pop-box){
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
#contentInner .kanren dl.clearfix:not(#contentInner .pop-box dl.clearfix ) {
	width : 48%;
	padding:0px;
	box-shadow:0px 0px 3px rgba(0,0,0,0.16);
	border:none;
	border-radius: 5px;
}
#contentInner .kanren dt:not(#contentInner .pop-box dt) {
	float:none;
	width:100%;
}
main .kanren dl img:not(main .pop-box dl img) {
	width:100%;
	height:100px;
	object-fit:cover;
}
main .kanren dd:not(main .pop-box dd)  {
	padding:10px 8px 3px;
}
.st-catgroup.itiran-category .catname {
    font-size: 0.7em;
    padding: 3px 8px;
}
.kanren .clearfix dd h5:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no2) a {
    font-size: 15px;
	line-height: 1.3;
}
dd h3:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no2) a{
    font-size: 15px;
		line-height: 1.3;
}
.h5modoki, .post h5 {
    padding-right: 0px;
		line-height: 0;
}

3列カードタイプ

カード3列タイプにしたさいPC表示でどのようみ見えるかのイメージ画像

カード3列タイプにしたさいPCで関連記事がどのように見えるかのイメージ画像

カード3列タイプにしたさいスマホ表示でどのようみ見えるかのイメージ画像
/*3列カードタイプ*/
#contentInner .kanren:not(#contentInner .pop-box){
	margin-right: -14px;
	display:flex;
	flex-wrap:wrap;
	justify-content: flex-start;
}
#contentInner .kanren dl.clearfix:not(#contentInner .pop-box dl.clearfix ) {
	width : 28%;
	padding:10px;
	margin-right:13px;
	box-shadow:0px 0px 3px rgba(0,0,0,0.16);
	border:none;
	border-radius: 5px;
}
#contentInner .kanren dt:not(#contentInner .pop-box dt) {
	float:none;
	width:100%;
}
main .kanren dl img:not(main .pop-box dl img) {
	width:100%;
	height:130px;
	object-fit:cover;
	border-radius: 5px;
}
main .kanren dd:not(main .pop-box dd) {
	padding:10px 0px;
}
main .kanren dd h5{
	padding:0px;
}
article dl.clearfix:not(ul.clearfix,.p-navi,#st-tab-box){
	display: inline-block;
	transition-duration: 0.4s;
}
article dl.clearfix:not(ul.clearfix,.p-navi,#st-tab-box,.pop-box dl.clearfix):hover {
	transform: translateY(-3px);
	box-shadow: 0px 6px 18px -8px rgba(85, 85, 85, 0.75)!important;
}	
main article aside .point + .kanren{
	padding: 0px;
}
main article aside .point + .kanren dl img{
	height:100px;
}
*3列カードタイプ*/
#contentInner .kanren:not(#contentInner .pop-box){
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
#contentInner .kanren dl.clearfix:not(#contentInner .pop-box dl.clearfix ) {
	width : 48%;
	padding:0px;
	box-shadow:0px 0px 3px rgba(0,0,0,0.16);
	border:none;
	border-radius: 5px;
}
#contentInner .kanren dt:not(#contentInner .pop-box dt)  {
	float:none;
	width:100%;
}
main .kanren dl img:not(main .pop-box dl img) {
	width:100%;
	height:100px;
	object-fit:cover;
}
main .kanren dd:not(main .pop-box dd)  {
	padding:10px 8px 3px;
}
.st-catgroup.itiran-category .catname {
    font-size: 0.7em;
    padding: 3px 8px;
}
.kanren .clearfix dd h5:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no2) a {
    font-size: 15px;
	line-height: 1.3;
}
dd h3:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no2) a{
    font-size: 15px;
		line-height: 1.3;
}
.h5modoki, .post h5 {
    padding-right: 0px;
		line-height: 0;
}

カード型のサムネイルが粗くなる場合

カードタイプにしたさいサムネイル画像が荒く感じる場合の修正手順1と2。詳細は吹き出しボックスに記載
カードタイプにしたさいサムネイル画像が荒く感じる場合の修正手順3。詳細は吹き出しボックスに記載
カードタイプにしたさいサムネイル画像が荒く感じる場合の修正手順4。詳細は吹き出しボックスに記載
カードタイプにしたさいサムネイル画像が荒く感じる場合の修正手順5。詳細は吹き出しボックスに記載

カード型のサムネイルが粗いと感じる場合は、以下の手順にてサムネイル画像がフルサイズで表示されるよう設定してみてください。

  1. 「AFFINGER管理」をクリック
  2. 「全体設定」をクリック
  3. 「サムネイル画像設定」をクリック
  4. 「フルサイズにする」を選択
  5. 「Save」をクリック

正方形とフルサイズの画質比較

カードタイプのサムネイル画像が荒くなった場合の対処法を適応する前
カードタイプのサムネイル画像が荒くなった場合の対処法を適応する後

プロフィール文を左揃えにする

プロフィール文章を左寄せにする前
プロフィール文章を左寄せにする後
/* プロフ文章を左揃え*/
.st-author-description {
	text-align:justify;
}

位置:「text-align」の「justify」を変更

位置の種類

「左揃え」→「left」
「中央揃え」→「center」
「右揃え」→「right」
「両端揃え(最終行を除く)」→「justify」
「両端揃え(最終行を含む)」→「justify-all」

プロフィールの文字サイズを調整

プロフィール文の文字サイズを変更する前(PC表示)
プロフィール文の文字サイズを変更した後(PC表示)
/* プロフ文章の文字サイズ*/
#side .st-author-description{
	font-size:0.9em;
}
/* プロフ文章の文字サイズ*/
#side .st-author-description{
	font-size: 1em;
}

文字サイズ:「font-size」の「数値」を変更

プロフィールボタンの形を変更

プロフィールボタンのカスタマイズ前
プロフィールボタンのカスタマイズ後
/* プロフボタンの形設定*/
 .st-author-profile .rankstlink-r2 p a {
	padding: 5px 15px;
	border-radius: 5px;
}

上下左右間隔:「padding」の「数値」を変更
※左の数値が上下、右の数値が左右

角の丸み:「border-radius」の「数値」を変更

記事上部の著者紹介をカスタマイズ

記事上部のプロフィールをカスタマイズする前(PC表示)
記事上部のプロフィールをカスタマイズした後(PC表示)
/* 記事上部のライター紹介*/
 .st-shortcode-author #st-tab-box {
    border: solid 8px #eeeeee!important;
    background: #F8F3F4!important;
    margin: 24px 0px;
}
 .st-shortcode-author #st-tab-box dd p{
	color: #7F7F7F;
	letter-spacing: 0.03em;
}

線の太さ:「border」の「8px」を変更
線の色:「border」の「#eeeeee」を変更
線の種類:「border」の「solid」を変更

線の種類

「実線」→「solid」
「2重線」→「double」
「ドット線」→「dotted」
「破線」→「dashed」

背景色:「background」の「#F8F3F4」を変更
上下左右の間隔:「margin」の「数値」を変更
※左の数値が上下、右の数値が左右

文字色:「color」の「#7F7F7F」を変更
文字間隔:「letter-spacing」の「数値」を変更

スマホ時に文章を回りこませる

スマホで見たさいに記事上部のプロフィール文章を画像に回り込ませる前
スマホで見たさいに記事上部のプロフィール文章を画像に回り込ませた後
/* ライター紹介文の回り込み*/
#st-tab-box div dt {
	float:left;
	width:80px;
	margin: 0px 22px 0px 0px;
}
#st-tab-box div dd {
	font-size:16px;
	padding-left:0px;
}

アイコンサイズ:「width」の「数値」を変更
画像周りのスペース:「margin」の「数値」を変更
※数値は左から「上 右 下 左」に対応

文字サイズ:「font-size」の「数値」を変更
左側のスペース:「padding-left」の「数値」を変更

グローバルメニューに影をつける

グローバルメニューに影を表示させる前
グローバルメニューに影を表示させた後
/* グローバルナビの影*/
#st-menuwide{
	box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2) ;
}

グローバルメニューの下に少しスペースをいれると、もう少し立体的に見えます。

試してみたい方はmargin-bottom:17px;を「box-shadow」の下にコピペしてみてください。

以下のような感じになります。

下にスペースをいれた後のイメージ図

サイドバーを少し立体化

サイドバーに影を適応させる前
サイドバーに影を適応させた後
/* サイドバー立体化*/
#mybox {
	box-shadow:0px 0px 8px rgba(0,0,0,0.1);
}

目次に非表示ボタンを追加

目次に非表示ボタンを表示させるカスタマイズを適応させる前
目次に非表示ボタンを表示させるカスタマイズを適応させた後
/* 目次の非表示ボタン*/
.st_toc_hierarchical:not(.st_toc_contracted) .st_toc_toggle {
	display:inline-block!important;
}

目次に影をつける

目次に影を適応させる前
目次に影を適応させた後
/* 目次に影*/
#st_toc_container,#toc_container{
	border:none;
	box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
}

ボーダーを非表示にしていますが、表示させたまま影をつける場合はborder:none;を削除してください。

以上で、CSSカスタマイズの紹介は終了です。

「よくわからない」「うまくできない」「他にこんなことがしたい」などあれば、コメントに一言ください。対応できることであれば対応させて頂きます。

AFFINGER6の投稿機能についても簡単にまとめているので、興味があればご覧ください。→AFFINGER6の投稿機能の使い方

AFFINGER6の使い方まとめ

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

アフィリエイト切っ掛けでWEB業界にどっぷり浸かり、10年以上WEB関連のお仕事で食べてる人。個人から法人成りし新規で始めたサービスがうけて誰しもが知るビックネーム企業数社と契約することに成功。勝ち確定や!と思われたやさきコロナ化に突入。フルマラソンで調子良く走ってたら空から隕石が降ってきたぐらいの衝撃を受ける。ビックネーム企業との契約が見事に全部打ち切り。「わいにBtoBは向いてなかったんや・・」と現在は猫3匹と自由気ままに生きる毎日。

コメント

コメントする

目次