Seesaaブログの最近の記事からサムネを消す方法 | コピペから応用へ!

Seesaaブログの最近の記事からサムネを消す方法

シェアする

  • このエントリーをはてなブックマークに追加
  • 0
Seesaaブログの最近の記事に表示されるサムネ画像を表示させない方法です。
  • PC用テンプレートで確認しています
  • テンプレートはTKGを使用しています
  • テンプレート設定のスタイルシート(CSS)を使います
  • OperaとChromeで確認しています
画像を使ってる記事と使ってない記事があると「最近の記事の記事」が、こんな風に表示されるかと思います。
20161116065819
サムネの有無でレイアウトが乱れています。
Operaで、最近の記事のサムネを右クリックでの「要素の検証」機能を使います(Chromeでも同じだと思います)
こんな画面が出るので、ソースの赤枠内の<p>を選択、関連する要素がサムネの画像だと分かります。
20161116070148
「リスト」内のサムネを表示している「p]タグ要素を無効にします(pタグを無かったことにする)。
HTMLのコードが
<li class=”recent-entry__item”>
    <p class=”recent-entry__thumbnail”>
となっているので
cssに以下のコードを追記します。
li.recent-entry__item p.recent-entry__thumbnail{
  display: none;
}
サムネが消えました。
20161116070516
記事タイトルの上下に余白ができたままなので(初期にサムネの高さ分スペースをとるようになっています)
次のコードを追記して記事タイトルの余白の高さを揃えます。
.module–recent-entry .recent-entry__title {
  height: auto;
  margin-left: 10px;
}
また「margin-left: 10px」で記事タイトルを10px右に移動させました。
20161116070637
うまく表示できました。改行も問題ないようです。
この方法はCSSにコードを追記するだけでできますが、
他のテンプレートだとタグの構造やクラス名が変わっているかもしれないので、
ブラウザのデベロッパーツールで確認しながら作業を進めるとうまくいくかもしれません。
スポンサーリンク



このブログはレンタルサーバーmixhost
運営してます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする