Language

BelarusianCatalanChineseDutchEnglishJapanese

http://nananavi.com

Web design WordPress

【WordPress】Populaire Postes de vignettes dans le paysage à personnaliser de haute qualité axés sur la façon de

Mise à jour:

Bonjour,@nanase_nananaviDans.

Aujourd'hui est"Wordpress Popular Posts"conception de simple pour personnaliser votre nom d'affichage accompagne le contenu que vous publiez sur developerWorks.

  • L'image en mode paysage ou
  • La dégradation de l'image n'est pas
  • Titre en vertu de la nouvelle

De cette façon, l'image et le titre seulement, et ceux qui ne seront appréciées.

Personnalisé balisage HTML

À partir de l'Apparence des Widgets aller à la Populaire Postes de laLe balisage HTML paramètresLa"coutume balises HTML"utiliser pour vérifier,insérez le code suivant.

① Le"Popular Posts d'avant / après: "pour entrer votre code.

<ul class="wpp-list">
</ul>

② Le"poteau de balisage HTML: "dans le code d'entrée.

<div class=wpp-container>
<div class=wpp-img>{thumb}</div>
<p>{title}</p>
</div>

De grandes images, de spécifier la hauteur pour être ajusté.

La taille définie"150×150", comme les petites images ainsi spécifié,faire les choses en grand et a tendu la dégradation de l'image de l'information.

Manuellement,la largeur est500pxOu plus précis et de haute qualité redimensionnée. La hauteur est,ce site est 200px est spécifié. De l'image originale par la taille,la hauteur sera la hauteur de la boîte,un paysage favori de style peut être modifié.

* Pour les images plus grandes (largeur de 1000px) et des photos en haute définition, mais la vitesse de chargement des pages est lent.

Centrale à l'arrêt

Les Images et le texte dans le milieu afin de le centrer.

<div class="center"><div class=wpp-container>
<div class=wpp-img>{thumb}</div>
<p>{title}</p>
</div>

 

L'ajout de CSS à modifier

L'image à la largeur maximale de l'écran pour

/* 画像サイズ レスポンシブ対応 */
.wpp-img img {
max-width: 100%;
width: 100%;
margin: 5px 5px 5px 5px;
}

la marge correspond à la marge. Images autour de la"gauche→haut→bas→droite", vous pouvez spécifier la largeur de l'.

Le titre de l'Article modification de conception

  • Changer la couleur du texte
  • Souligner la présence ou l'absence de changement
  • La taille du texte
/* Title styles */
.wpp-post-title {
color: #fff;
text-decoration: none;
font-size: 13.5px;
}

text-decoration: none; retirer et,encore une fois, le défaut souligner est affiché. nul ne peut, souligner hors sujet.

  • Les Articles et l'article entre la spécification de la largeur de

la marge et le remplissage de. Gauche→→bas→côté droit, vous pouvez spécifier la largeur de l'.

/* 記事と記事の幅 */
.wpp-container {
margin: 10px 5px 20px 5px;
}

 

Et au lieu de

Ou plus.

Éditeur visuel, à l'aide de l'actuel à partir des numéros de changement, et facile à régler. Belle horizontale de la vignette pour le faire.

Accrocheur, plus le nombre de clics et cette conception peut passer.

Site de référence

Translated by Yandex.Translate and Global Translator

-Web design, WordPress
-