使用简单的 CSS 技巧,让 WordPress 内图片显示

部落格已经风行多年,笔者使用过奇摩的部落格、Blogger、痞客邦,到最后选择 wordpress ,刚开始使用NAS架设,频宽与管理问题接踵而来,最后租用虚拟主机架设WordPress,然而文章中的图片可以让网站更多采多姿,提升访客阅读效果,以达增加网站的流量。因此许多网站会在图片上的外框动些手脚,让图文并茂的阅读介面更清爽舒适,当然这类外挂程式不少,不过此文使用简单的 CSS 技巧,让图片更活泼有趣。

使用简单的 CSS 技巧,让 WordPress 内图片显示

图片边框是最常使用的效果之一,方法很简单,就是先透过文字编辑器开启布景主题的式样档(style.css)填入CSS语法,较新的布景主题都有支援自订CSS的方式,下图是笔者使用的布景主题来选择自订的「附加CSS」功能。

使用简单的 CSS 技巧,让 WordPress 内图片显示

进入编辑CSS的画面,输入红色框内的文字,「.it-shadow-03」是一个新的类别定义,「.」字元后面是类别名称,儘量输入好记得用词。「border-radius: 6px」是圆角的弧度指定,数值越大弧度越大,笔者使用6px。「border: 1px solid #ddd」是边框粗细与线条样式,边框线条笔者指定ipx,数值越大当然越粗;而soid 表示实体线(dotted 则会变虚线);#ddd 则是线的颜色代码(可参考这里)。

使用简单的 CSS 技巧,让 WordPress 内图片显示

在编辑区上点选图片出现图示选单,选择红色框内的编辑图示。

使用简单的 CSS 技巧,让 WordPress 内图片显示

接着我们为图片的 CSS 类别设定一个定义过的类别名称,如笔者之前设定的 it-shadow-03,记住要点选〔更新〕才能生效喔!

使用简单的 CSS 技巧,让 WordPress 内图片显示

回到网页浏览随即看到刚刚指定的图片出现了边框与圆角的效果。

使用简单的 CSS 技巧,让 WordPress 内图片显示

其实让不懂CSS程式码的朋友也可以享受网页设计的乐趣,网路这幺发达的今天,资源相当丰富,这里介绍 一个相当棒的线上式样产生器网站 CSSmatic ,例如进入网页选「Box Shadow」来产生阴影效果。

使用简单的 CSS 技巧,让 WordPress 内图片显示

网站左边是调整的项目,只要利用滑鼠移动,右侧马上就可以预览效果,且CSS语法也随即产生。

使用简单的 CSS 技巧,让 WordPress 内图片显示

将CSS的语法複製下来。

使用简单的 CSS 技巧,让 WordPress 内图片显示

进入编辑CSS的画面,并定义一个类别名称(如it-shadow-01),并将语法贴上如下图红色框所示。

使用简单的 CSS 技巧,让 WordPress 内图片显示

一样在编辑区上点选图片选择编辑图示后, CSS 类别设定之前定义的it-shadow-01类别名称,点选〔更新〕即完成。

使用简单的 CSS 技巧,让 WordPress 内图片显示

下图显示有设定过it-shadow-01类别名称的图片呈现阴影,没有设定的图片遇到图片是白色底时,与文字间容易产生阅读的干扰。不懂CSS语法不用担心,利用样式产生器网站 CSSmatic 让你轻鬆製作图片阴影的效果。

使用简单的 CSS 技巧,让 WordPress 内图片显示