Seesaaブログの「最新の記事一覧」にあるサムネイルを消す方法(新デザインシステム)

thumbnail-key-visual.png

先日Seesaaブログのエゴサーチをしていると、Yahoo!知恵袋で「最新の記事のサムネイル表示・・」について質問されているページを発見しました。
既に回答が付いているものの、もしかしたら期待通りの結果を得られていないのではと思い、本日はSeesaaブログカスタムレシピにて「最新の記事一覧のサムネイルを消す方法」をご紹介します。

蛇足ではありますが、「最新の記事のサムネイル」はSeesaaブログ新デザインシステムの記事末辺りとコンテンツの「最近の記事」を利用した際に、サムネイルと共にあなたが書かれている他の記事へのリンクを表示しています。

記事末辺りにある最新の記事
コンテンツ

今回の目次

HTMLの編集方法

最新の記事一覧にあるサムネイルを消すにあたり、まずは選択しているデザイのHTMLを編集する必要があります。

  1. マイブログ > [デザインPC] > [PC] > [デザイン設定]と順にクリックします。

  2. デザイン設定画面が表示されたら、現在ブログに適用されているデザイン名のリンクをクリックします。

  3. [スタイルシート編集] [HTML編集] [コンテンツHTML編集] のタブが表示されている画面に切り替わったら、 [HTML編集] のタブをクリックします。

  4. ソースコードの109行目(以下ご参照)辺りに「最新の記事一覧」で使用している記述があります。-が付いているところを削除してください。

    	<% if:list_category_article -%>
    	              

    <% article_category.name -%>の最新記事

    <% /if -%>
  5. 削除したら[保存]ボタンをクリックして編集内容を保存してください。

  6. サムネイルが表示されなくなったかを確認してみてください。添付画像のようにサムネイルが消えていれば成功です。

サムネイルは消えてはいるものの、見た目がおかしいと感じるかもしれません。
次はCSSを編集して見た目をいじってみましょう。

CSSの編集方法

デザインテンプレートによって、説明内容の値が異なる場合がありますので、あらかじめご了承ください。

    1. マイブログ > [デザイン] > [PC] > [デザイン設定]と順にクリックしてデザイン設定画面が表示されたら、現在ブログに適用されているデザイン名のリンクをクリックします。

    2. [スタイルシート編集] [HTML編集] [コンテンツHTML編集] のタブが表示されている画面に切り替わったら、 [スタイルシート編集] のタブをクリックします。

    3. 新規に以下の記述を追加してください。

      ul.recent-entry {
      	    overflow: hidden;
      	}
      	
    4. .module--category-recent-entry .recent-entry__itemを検索しください。
      そして-が付いている記述 (数値は選択されているデザインによって異なります)は削除し、+が付いている記述を追加してください。

      .module--category-recent-entry .recent-entry__item {
      	    display: inline-block;
      	    margin-right: 10px;
      	    margin-bottom: 15px;
      	    width:130px;
      	-    height:130px;
      	+    margin-left: -1px;
      	+    padding-left: 19px;
      	+    border-left: 1px solid #CCD0D9;
      	    }
      	
    5. 記述を追加できたら [保存] をクリックして編集内容を保存した後、以下の画像のような見た目で表示されていれば成功です。

コンテンツHTMLの編集方法

次にコンテンツにある「最近の記事」に設定されているサムネイルを常に非表示にさせる方法を紹介します。

      1. マイブログ > [デザイン] > [PC] > [デザイン設定]と順にクリックします。

      2. デザイン設定画面が表示されたら、現在ブログに適用されているデザイン名のリンクをクリックします。

      3. [スタイルシート編集] [HTML編集] [コンテンツHTML編集] のタブが表示されている画面に切り替わったら、 [コンテンツHTML編集] のタブをクリックします。

      4. ソースコードの13行目(以下ご参照)辺りに「最近の記事一覧」で使用している記述があります。-が付いている記述 (数値は選択されているデザインによって異なります)を削除してください。

        	<% if:parts_name == 'recent_article' # START parts -%>
        	

        <% parts.title -%>

        <% /if:parts_name == 'recent_article' # END parts -%>
      5. 削除したら[保存]ボタンをクリックして編集内容を保存してください。

      6. コンテンツHTMLの編集これで完了です。
        サムネイルが表示されなくなったかを確認してみてください。添付画像のようにサムネイルが消えていれば成功です。

いかがでしょうか、このようにHTMLとCSSを編集することでサムネイルを非表示にした見た目に変更することができるようになります。ぜひお試しください