Mengatasi Masalah Posisi Gambar di Posting pada Wordpress

B

eberapa template Wordpress terkadang dibuat tidak maksimal apalagi kalau template gratis. Salah satu masalah yang sering terjadi dan kebetulan sering pula saya hadapi adalah posisi image atau gambar pada posting yang tidak sesuai dengan pengaturan yang kita buat. Misalnya kita mengatur posisi gambar berada di sebelah kiri text (biasanya disebut left align), namun tampilan pada blog justru tidak berada di sebelah kiri text. Contohnya seperti gambar berikut:

Gambar 1. Pengaturan image aligment di posting (left align)

Gambar 2. Tampilan gambar (image) dengan left align

Namun, tampilan pada blog justru seperti gambar berikut:

Gambar 3. Tampilan posting pada blog

Penyebab posisi gambar yang tidak sesuai dengan pengaturan adalah karena struktur CSS untuk pengaturan image alignment yang kurang lengkap. Berikut langkah-langkah mengatasi masalah posisi gambar yang tidak sesuai tersebut:

1. Silahkan login pada Wordpress CMS Anda untuk masuk ke dashboard.
2. Klik menu Editor pada bagian Appearance yang ada di sebelah kiri.
3. Silahkan edit file CSS Anda (biasanya bernama style.css)
4. Tambahkan kode CSS berikut pada file CSS Anda dengan meng-copy paste.
   .aligncenter,
div.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.wp-caption {
    border: 1px solid #ddd;
    text-align: center;
    background-color: #f3f3f3;
    padding-top: 4px;
    margin: 10px;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.wp-caption img {
    margin: 0;
    padding: 0;
    border: 0 none;
}
.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    padding: 0 4px 5px;
    margin: 0;
}
p img {
    padding: 0;
    max-width: 100%;
    }

img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
img.alignright {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
    }
img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
    }
.alignright {
    float: right;
    }

.alignleft {
    float: left
    }
5. Klik tombol Update File untuk menyimpan perubahan.
   

Maka tampilannya akan menjadi:

Posted in: Css Tutorial