こんにちは、yujiです。
このブログでは、WordPressを使ったブログ運営について詳しくまとめています。
ブログのトップページに並ぶブログカードの抜粋部分がうまく表示されません。
どうすれば表示されるようになりますか？
このように、トップページに並ぶブログカードの抜粋部分がうまく表示されないことがありました。
このようにスニペットの後半が切れています。
この記事では、以上のようにブログ内で文字などが見切れてしまう問題を解決したいと思います。
✔Amazaonアソシエイトに挑戦中の方にお知らせ。
2020年3月以降、Amazaonアソシエイト審査方法が変更されました。この変更についてはまだネット上に情報が不足しているので、以下のまとめが参考になると思います。
▶【審査承認されたので解説】最新Amazonアソシエイトの審査攻略方法
▶【年収7ケタ突破】僕のブログの収益化方法まとめ
▶【もしもアフィリエイトでOK】Amazonアソシエイト審査に1発合格した話
▶【本を聞くアプリ】僕はオーディオブックで、年間100冊聞いてます
▶【実証済み】未経験者の僕が、独学でプログラミングを習得できた勉強法
【解決策】CSSで高さ制限を解除する
「max-height」を使って余裕のある高さ限度を指定し直すことで、文字が見切れていた部分がすべてが表示されるようになりました。
style.cssに「max-height」を追加する
「外観」の「テーマエディター」から「style.css」を開きます。
トップページ・インデックスの大きなブログカードのコードが以下のように表示されています。
✔大きなブログカードのコード
/************************************
** ホーム、インデックス
************************************/
h2.entry-card-title.card-title.e-card-title{
font-size:26px;
font-weight:bold;
text-align:center;
line-height:1.8em;
margin-top:20px;
margin-bottom:10px;
}
.entry-card-snippet.card-snippet.e-card-snippet{
font-size:18px;
color:#545454;
text-align:center;
line-height:1.8em;
margin-left:40px;
margin-right:40px;
margin-bottom:10px;
}
.entry-card-snippet.card-snippet.e-card-snippet{
font-size:18px;
color:#545454;
text-align:center;
line-height:1.8em;
margin-left:40px;
margin-right:40px;
margin-bottom:10px;
max-height:20em;
}
このように「max-height : 20em;」をsnippet部分に書き加えます。
「max-height:20em;」を挿入できたら「ファイルを更新」。
これでスニペットすべてが表示されるようになりました。
このように文字が見切れてしまった場合「max-height」で解決できることがあります。
困ったときは是非試してみてください。
インデックスカードのカスタマイズ
このようなCocoonのインデックスカードを再現する方法、以下の記事でまとめています。
▶『インデックスカード』のカスタマイズはこちら
WEB制作スキルとSEO上位表示について
このブログでは、以上のようなWordPress/Cocoonを使ったブログ運営について、ノウハウをまとめています。
Cocoonの初心者向けSEO対策は、こちらにまとめています。
▶【初心者向けSEO対策】おすすめの『Cocoon設定』をまとめて紹介
また、おしゃれなカスタマイズもすべてコピペでOKなので、初心者の方にもおすすめです。
▶【コピペでOK】ブログ初心者でもできる『Cocoonカスタマイズ』の完全マニュアル
yujiblogはCocoonのカスタマイズ記事が人気となり、WordPress/CocoonでのWEB制作をしたい人向けによく検索されるブログとなりました。
おかげさまで『Cocoon』で検索上位をキープしつつ、順調にアクセス数が伸びています。
僕は以上のWEBデザインスキルを独学で習得し、シェアすることでSEOで結果が出すことができました。
そこで、プログラミング未経験の僕が独学でWEB制作を学んだ方法についての情報も、同様に公開しようと思います。
1か月でWEB制作ができるようになるので、興味のある方は是非。
▶【実証済み】未経験者の僕が、独学でプログラミングを習得できた勉強法
またこのブログは立ち上げて1年ほどになりますが、毎月10万以上の収益を生み出してくれています。
以下の記事では、WordPressブログを収益化していく方法について、僕の経験をもとに詳しく解説しています。
▶【年収7ケタ突破】僕のブログの収益化方法まとめ【初心者でも稼げた仕組みとは？】
この記事が少しでもお役に立てたら幸いです。
最後まで読んでいただき、ありがとうございました！
▶【もしもアフィリエイトでOK】Amazonアソシエイト審査に1発合格した話
▶【限定公開】『もしもかんたんリンク』のカスタマイズ【クリック率アップ】
▶【無料あり】僕はオーディオブックで、年間100冊聞いてます
▶【初公開】僕がネイティブから教わった、英会話上達のコツまとめ
▶【その画像の著作権、大丈夫？】僕がおすすめする『安心のフリー素材サイト』9選
コメント