Cascading Style Sheets

Allgemein

Es gibt diverse Ansätze für das CSS, die geändert werden sollten, um vor allem die Lesbarkeit zu verbessern. Ich stelle z.B. meistens fest, dass Titel und Absätze ineinander gepresst sind. Das heisst, kaum Abstand zwischen den Titeln und den Absätzen.

Ein Grafiker hat mir mal an Hand einer Visitenkarte erklärt, weniger ist mehr. Die Karte nicht mit möglichst viel Farbe voll kleckern, sondern auch Freiräume lassen. Name und Adresse nicht möglichst Platzfüllend auf die Karte pressen. Das Wichtigste bei einer Visitenkarte ist der Name, der soll ins Auge stechen. Alle anderen Angaben dürfen ruhig so klein sein, dass sie erst beim 2. Hinsehen auffallen.

Überschriften und Absätze

Auch Webseiten sind einfacher lesbar, wenn nicht alles so ineinander gepresst ist. Der Abstand zwischen einem Absatz und der nächsten Überschrift sollte grösser sein als zwischen zwei Absätzen.

Ich bevorzuge für Titel eine Schrift die sich deutlich von der Schrift für den Absatz unterscheidet. Man soll eine Überschrift nicht nur durch ihre Grösse erkennen, sondern auch an der Schriftart.

Wie gross sollen die Titel sein? In Beiträgen und Seiten stehen die Überschriften H1 bis H6 zur Verfügung. Dazu kommt die Überschrift der Beiträge und Seiten. Diese sollten immer die grösste Schriftgrösse haben. H1 sollte also kleiner sein.

Für Beiträge und Seiten reichen in der Regel H1 bis H3, wobei H3 immer noch grösser als der Textabsatz sein sollte.

Einzüge

Im Block-Editor habe ich keine Möglichkeit für Texteinzüge gefunden, so wie man es aus dem Classic-Editor und Word/Pages kennt. Diese Funktion scheint es nicht zu geben. Da man jedoch den Blöcken zusätzliche CSS-Klassen zuweisen kann, habe ich dafür im Customizer 3 Klassen erstellt, mit Einzug 15, 30 und 45 Pixel. Ein Vorteil hat das Ganze gegenüber der klassischen Vorgehensweise, ich kann die Einzüge frei definieren.

Beispiele

Im Folgenden ein paar Beispiele für mögliche Anpassungen. Die Klassennamen können je nach Theme varieren.

/* Text Absätze in Beiträgen und Seiten vergrössern */
.entry-content.clearfix {
	font-size: 1.2em;}

/* allgemeiner Text */
body,input,textarea,article {
	color: #1d1d1d;
	font: 0.95em 'Montserrat', sans-serif;
	font-weight: 400;
	line-height: 24px;
	word-wrap: break-word;
	-ms-word-wrap: break-word;}
/* Schriftname für Titelüberschriften */
h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
	font-family: 'Titan One', sans-serif;
	color: #555;
	text-transform: none;}
/* Seitentitel / Beitragstitel */
.entry-title {
	font-size: 3em;
	font-weight: normal;
	font-family: 'Titan One', sans-serif;
	color: #555;
	padding-left: 2.5%;}


/* Titel Kategorie */
h3.page-title{
	font-size: 3em;
	font-family: 'Titan One', sans-serif;}

/* Titelüberschriften */
h1 {
	margin-top: 20px;
	font-size: 2.2em;
	font-family: 'Candal', sans-serif;}
h2 {
	margin-top: 20px;
	font-size: 2em;
	font-family: 'Candal', sans-serif;}
h3 {
	margin-top: 20px;
	font-size: 1.5em;
	font-family: 'Candal', sans-serif;}
h4 {
	margin-top: 20px;
	font-size: 1em;
	font-family: 'Candal', sans-serif;}
h5 {
	margin-top: 20px;
	font-size: 0.8em;
	font-family: 'Candal', sans-serif;}
h6 {
	margin-top: 20px;
	font-size: 0.5em;
	font-family: 'Candal', sans-serif;}

/* Titelüberschrift Widget */
.widget h3 {
	margin-top: 0px;
	font-family: 'Candal', sans-serif;
	font-weight: bold;}

/* Text mit fester Weite */
pre,code,kbd {
	font-family: "Courier 10 Pitch",Courier,monospace;
	font-size: 14px;
	line-height: 19px;
	background-color: #F9F9F9;
}

/* Zitat */
blockquote {
	font-family: Noto Serif TC, serif;
	font-style: italic;
	font-weight: normal;
	padding: 20px;
	background: #fff;
	border-left: 4px solid #bd2a2b;
	margin-bottom: 20px;
	background-color: #F9F9F9;
}

/* Initialbuchstabe Absatz */
#container .has-drop-cap:first-letter {
	font-size: 2em;
	color: red;
	font-family: Times;
}

/* Gutenberg, Einzüge von links */
.einzug-1{
	margin-left: 15px;
}
.einzug-2{
	margin-left: 30px;
}
.einzug-3{
	margin-left: 45px;
}

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Durch die weitere Nutzung der Seite stimmen Sie der Verwendung von Cookies und der Datenübermittlung zu Dritten zu. [ Weitere Informationen ]

Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Diese Webseite verwendet weiter 'Akismet' und 'Jetpress' für die Einbindung von Social Media und der Abwehr von Spam. Welche Daten dabei an externe Server übermittelt wird ist durch den Seitenbetreiber nicht zu beeinflussen. Diese Daten sind jedoch für ein vollumfängliches funktionieren der Seite unerlässlich. Sollten Sie damit nicht einverstanden sein, dürfen Sie diese Webseite nicht weiter nutzen. Ausserdem sollten Sie sich darüber Gedanken machen, ob Sie das Internet überhaupt nutzen wollen. Das liest sich für Sie jetzt bestimmt etwas eigenartig, ist aber nun einfach mal so. Ein Datenschutzkonvormes Internet so wie es sich unsere Politiker vorstellen ist zum jetzigen Zeitpunkt nun einfach mal nicht möglich.

Bei den übermittelten Daten handelt es sich nicht um Ihren Namen, jedoch aber um Ihre IP-Adresse. Ändern Sie Diese nicht regelmässig, kann auf Grund dieser Daten ein Surfprofil der entsprechenden Adresse erstellt werden. Auch ist es langfristig dadurch möglich, der IP Ihre eMail-Adresse zuzuordnen und irgendwann auch Ihren Namen zu kennen. Auch ist Ihr Provider verpflichtet darüber Protokoll zu führen und langfristig zu speichern, wann Sie mit welcher IP unterwegs sind.

Der grösste Datensammler ist übrigens Google. Fragen Sie doch da mal nach, welche Daten über Sie gespeichert werden. Gem. der Datenschutzverordnung müssten Sie eigentlich darüber Auskunft erhalten.

Diese Webseite speichert lokal keine IP-Adressen der Besucher und hat auch keine Kenntniss über die wahre Identität seiner Besucher.

Aktivitäten im Adminbereich, dies beginnt bereits, wenn man versucht sich einzuloggen, werden vollumfänglich samt IP-Adresse protokolliert und für 60 Tage gespeichert.

Schließen