Dans ton deuxième code, enlève le <a href="#" class="more">lire la suite</a>. Quand tu fais <?php the_content('Lire la suite') ?> une balise lire la suite s'ajoute automatiquement si dans l'zarticle tu met la barre "MORE". Et la classe associée est prédéfinie class="more-link". dans ton CSS tu utiliseras donc .more-link{} .
Donc ton index.php doit être comme ceci: (comlme tu as suivi le tuto, après si tu te sens capable adapte à tes besoin :) )
<?php get_header(); ?>
<div class="blog-head"></div>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<div class="blog">
<div class="vignette">
<a href="<?php the_permalink(); ?>" class="preview"><?php the_post_thumbnail(); ?></a>
</div>
<div class="blog-content">
<div class="blog-title">
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1><?php comments_popup_link('0','1','%','nbrcom'); ?>
</div>
<?php the_content('Lire la suite'); ?>
<p class="date">Posté le <?php the_time('l d F'); ?> dans <?php echo get_the_category_list(', '); ?></p>
<div class="cb"></div>
</div>
</div>
<?php endwhile; endif; ?>
<?php wp_pagenavi(); ?>
<div class="blog-footer"></div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>