Wordpress

wordpressテーマMesocolumnの見出しをカスタマイズ

スポンサーリンク

今回は見出し設定について

newspaper-152320_640

初期値の場合は見出しが文字の大小だけで少し寂しいので素人なので苦戦しながら変更しました。

初期値のcssでは以下のようになっています。

スタイルシート (style.css)より検索してください。

キーボードのCtrl+Fで【.post-content h1】と検索してください。

h1~h6までありますのでこれを変更していきます。

cssの変更

コピー&ペーストでも使えます。

見出しジェネレーターなどがありますのでお好きな設定に変更してください。

h1は

これから以下へ差し替えました。

 次は見出しh2の変更

初期は以下になっています。

変更後は以下をコピペしてください。

カラーコードなど自分好みに変更すればOKです。

sponsored link

 見出しh3の変更方法

初期は以下になっています。

これを変更します。

またコピペしてください。

 見出しh4の変更

引き続き初期コード

変更後。

ここもコピペで使えます。

h5,h6は設定していないので初期のままになっていますので省略します。

h1~h4の初期コードは

完成後のコードはこうなっています。

参考にしたサイト

見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応)

http://www.keni-customize.net/custom-midashi-design-555/

 

アクセントに使えるCSSのborderと擬似要素を使った立体的な見出しデザイン

http://squeeze.jp/blog/web-design/heading-design-border-css/

サイト自体も凄くおしゃれに作られています。

 

wordpressって先生だらけでいいですね。

参考や勉強になることばかりです。

http://www.hotnews-planet.com/

-Wordpress
-, ,

記事のシェアや登録はコチラから!

スポンサーリンク


Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

認証コード *

*

関連記事

WordPressテーマAGENTを活用して採用の視野を広げよう!

求人特設サイトの構築に特化した国内初のWordPressテーマAGENT テーマ ...

ブログ開設から更新やアクセス数,SEOについて考える!

ダラダラと更新して約1年半が経ちました。 更新頻度はとても!!低いです。 &nb ...

wordpressのテーマmesocolumnをカスタマイズ!

テーマはMesocolumnで運用開始   テーマの新規追加もしくはサ ...

AGENT採用サイトでの利用だけど他にも多方面に使える!

WordPressテーマAGENTについて書きましたがコーポレートサイトとしての ...

no image
WordPressテーマStingerでSNSボタンにPocketを追加した!

テーマ編集 さて、追加について説明します。 外観→テーマ編集→サイドバーに下図の ...