Außer Blogs auf wordpress.com habe ich neuerdings auch Blogs mit eigener WordPress-Software. Dies ermöglicht unter anderem größere Freiheiten beim Gestalten der Web-Seiten. Ich bin auf diesem Gebiet kein Fachmann, sondern beschreibe nur, was ich in einem konkreten Fall gemacht habe. Dies dient mir zur Dokumentation und zum Nachschlagen, anderen vielleicht als Vorlage. Der dargestellte Code ist korrekt, da er unmittelbar aus dem Blog kopiert wurde.
Es handelt sich um den Blog reisen2018.peter-preus.de. Als Theme habe ich Twenty Seventeen gewählt, alle Angaben gelten zunächst nur für dieses Theme, andere Themes habe ich nicht ausprobiert. Alle Angaben habe ich im Web gefunden, manche Effekte kann man sicherlich auch auf andere Art erzielen.
Der vorliegende Text ist Stand 31.03.2018. Wenn ich noch weitere Erkenntnisse gewinne, werde ich sie hier einfügen.
Erster Teil: Zusätzliches CSS im Customizer
Der verwendete Code beginnt jeweils mit einem Überschriftskommentar, aus dem (hoffentlich) deutlich hervorgeht, wozu der Code dient.
/* Hintergrundfarbe für den
Blog (dieser Hintergrund gilt
aber nicht für die Umgebung des
Beitragsbildes, wenn der
Beitrag aufgerufen wird) */
.site-content-contain {
background-color: #f3f781;}
/* Blocksatz */
body {text-align: justify;}
/* Silbentrennung (nötig bei
Blocksatz) */
body {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;}
/* Vergrößerung der genutzten
Breite auf 1500px */
.wrap {
max-width: 1500px !important;}
/* Entfernen des Werbespruchs
von WordPress am Ende der Seite
*/
.site-info {display:none;}
/* Aufteilung der Satzbreite in
Inhalt und rechte Leiste */
/*For Content*/
.has-sidebar:not(.error404)
#primary {width: 65%}
/*For Sidebar*/
.has-sidebar #secondary {
width: 25%}
/* Keine Umwandlung von kleinen
Buchstaben in große in
Überschriften (gilt nur für den
Blog, nicht für die Beiträge */
h1{text-transform: none
!important;}
/* Keine Angabe von Autor und
Datum in Beiträgen */
.entry-meta {display: none}
/* Farben für Verweise */
/* unvisited link */
a:link {color: blue;}
/* visited link */
a:visited {color: darkblue;}
/* mouse over link */
a:hover {color: orange;}
/* selected link */
a:active {color: red;}
Die Zahlen bei den Maßangaben px und % kannst du natürlich auch anders wählen, ebenso alle color-Angaben.
Zweiter Teil: Veränderungen im HTML
Die Verbreiterung des Satzspiegels habe ich gewählt, weil ich die Bilder relativ groß darstellen möchte. Leider verwendet Twenty Seventeen meine Bilder (im Format 3:2) in der niedlichen Größe von 300×200 px. Da beim Hochladen der Bilder in die Mediathek die Bilder in verschiedenen Größen, darunter auch dem vorgefundenen Original (bei mir ist das, eher zufällig, 990×660 px), gespeichert werden, konnte ich den HTML-Code für die Bilder relativ einfach ändern.
Nachdem ich die Bilder in der gewünschten Größe im Beitrag hatte, stellte ich fest, dass sie (unnötig) unscharf waren. Dies ist aber nicht unbedingt ein Fehler von WordPress, sondern tritt nur bei einigen Browsern auf (zum Beispiel Firefox), andere brachten die Bilder scharf. Da das Aussehen meines Blogs aber nicht vom Browser abhängen soll, habe ich weiter experimentiert. Die letzte Fassung des HTML-Codes liefert in allen Browsern (große und) scharfe Bilder.
Hier der HTML-Code, der beim Einfügen eines Bildes aus der Mediathek erzeugt wird:
<img src="http://reisen2018.peter-preus.de/wp-content/uploads/2018/03/IMG_0055-300x200.jpg" alt="" width="300" height="200" class="alignnone size-medium wp-image-93" />
Hier der abgemagerte HTML-Code, wie er in meinem Blog verwendet wird:
<img src="http://reisen2018.peter-preus.de/wp-content/uploads/2018/03/IMG_0055.jpg" />
Noch ein Hinweis für alle, die wie ich auch das Plugin Jetpack verwenden: Jetpack verspricht unter anderem, die Ladezeiten der Blogbeiträge zu verringern, indem es die Bilder auf einem eigenen Server speichert. Dies musste ich in den Jetpack-Einstellungen ausschalten, da der Geschwindigkeits“trick“ darin bestand, dass Jetpack meine Bilder in der kleinen Größe 300×200 px speicherte. Knapp daneben ist auch vorbei.
