【知識不要】一分でできるコピペでWordPressを美しく。超簡単にホームページをオシャレにする方法
目次
CSSで外見を整える
WordPressの設定画面から、「外見」→「カスタマイズ」を選択しましょう。
すると、このような画面が出てきます。
私は先ほどご紹介したMesmerizeテーマの影響で左側がごちゃごちゃになっていますが、基本はもっとシンプルです。画面左側をスクロールし、「一般設定」→「追加CSSを開きます。」
はい、ここでコピペの出番です。
以下のコードをコピペしてください。結構長いです。ちなみにテーマによっては一部競合して、変な見た目になるかもしれないです。
body, input, textarea {
font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
color : #000000;
-webkit-font-smoothing: antialiased;
}
.hero-title{
font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
color : #000000;
-webkit-font-smoothing: antialiased;
}
.header-subtitle {
font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
color : #000000;
-webkit-font-smoothing: antialiased;
}
.menu-item {
font-family: "游ゴシック Light", "Yu Gothic Light", "游ゴシック体 Light", "YuGothic Light", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
color : #000000;
-webkit-font-smoothing: antialiased;
}
.ui-sortable-handle {
font-family: "游ゴシック Light", "Yu Gothic Light", "游ゴシック体 Light", "YuGothic Light", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
color : #000000;
-webkit-font-smoothing: antialiased;
}
h1 , h2 , h3 , h4 , h5 , h6{
font-family: "游ゴシック Light", "Yu Gothic Light", "游ゴシック体 Light", "YuGothic Light", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
color : #000000;
-webkit-font-smoothing: antialiased;
}
.shareaholic-recommendation-article-title{
font-family: "游ゴシック Light", "Yu Gothic Light", "游ゴシック体 Light", "YuGothic Light", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
-webkit-font-smoothing: antialiased;
}
.shareaholic-share-buttons-heading-text{
display:none;
}
.shareaholic-share-arrow , .shareaholic-share-arrow-version-1 {
display:none;
}
/*ここまでフォント調整
ここから色調整*/
.button.color1{
background-color:#ffbb00;
border-color:#ffdd44;
}
ul.dropdown-menu.active-line-bottom > .current_page_item > a, ul.dropdown-menu.active-line-bottom > .current-menu-item > a, ul.dropdown-menu.default > .current_page_item > a, ul.dropdown-menu.default > .current-menu-item > a {
border-bottom: 3px solid #ffbb00;
}
.coloured-nav ul.dropdown-menu.active-line-bottom>.current_page_item>a, .coloured-nav ul.dropdown-menu.active-line-bottom>.current-menu-item>a, .coloured-nav ul.dropdown-menu.default>.current_page_item>a, .coloured-nav ul.dropdown-menu.default>.current-menu-item>a, .fixto-fixed ul.dropdown-menu.active-line-bottom>.current_page_item>a, .fixto-fixed ul.dropdown-menu.active-line-bottom>.current-menu-item>a, .fixto-fixed ul.dropdown-menu.default>.current_page_item>a, .fixto-fixed ul.dropdown-menu.default>.current-menu-item>a {
border-bottom: 3px solid #ffbb00;
}
.coloured-nav ul.dropdown-menu.active-line-bottom>.current_page_item>a, .coloured-nav ul.dropdown-menu.active-line-bottom>.current-menu-item>a, .coloured-nav ul.dropdown-menu.default>.current_page_item>a, .coloured-nav ul.dropdown-menu.default>.current-menu-item>a, .fixto-fixed ul.dropdown-menu.active-line-bottom>.current_page_item>a, .fixto-fixed ul.dropdown-menu.active-line-bottom>.current-menu-item>a, .fixto-fixed ul.dropdown-menu.default>.current_page_item>a, .fixto-fixed ul.dropdown-menu.default>.current-menu-item>a:hover { color:#b58e00; }
ul.dropdown-menu.active-line-bottom > .current_page_item > a:hover, ul.dropdown-menu.active-line-bottom > .current-menu-item > a:hover, ul.dropdown-menu.default > .current_page_item > a:hover, ul.dropdown-menu.default > .current-menu-item > a:hover { color:#b58e00; }
a:link { color: #574400; }
a:visited { color: #574400; }
a:hover { color: #b58e00; }
a:active { color: #b58e00; }
background-color: #FFFFFF;
html.has-offscreen body:after {
background: #000000;
}
.bg-color1{background-color:#dd9900;}
p.has-large-font-size {line-height: 40px;}
上記のコードを簡単に説明すると、上半分がフォントの設定で下半分が色の設定です。
フォントはWindowsとMacに標準でインストールされていて商用利用もほぼ可能、見た目も美しい游ゴシックにしています。好みで変更してください。ちなみに游ゴシックの場合は標準でインストールが完了しているので、フォントデータを自前で用意する必要はありません。
色に関してはページの背景画像によってどれが最適なものなのか変わってくるので、自分で変更してください。「#123ABC」みたいな、シャープから始まる16進数の数字6ケタを変更すると色が変わります。
ちなみに「コードが簡単化されてなくて汚い！」というコメントは受け付けておりません。めんどくさかった(´・ω・｀)
完成形・ビフォーアフターの比較
とりあえず、CSSナシとCSSアリでどのようにサイトの見た目が変わるのか確認してみましょう。
画面中央辺りからマウスカーソルをグイグイやると比較できます。
圧倒的にCSSは適用した方がいいですね。
最後に
いかがでしたか？
ときえのきはこれからも日々テキトーにゆるーくブログを書いていくのでよろしくお願いします！
