ameba OWNDをもっと可愛いくするためのちょっとしたCSSカスタマイズ

2018年8月29日

OWNDを利用していてもう少し見栄えをよくしたいという場合、「CSS（スタイルシート）のカスタマイズ」をすることになります。カスタマイズ内容について備忘を兼ねて記載します。

ameba OWNDのCSSカスタマイズの操作方法

CSSカスタマイズの操作方法については公式サイトでマニュアルがあります

OWND 公式サイトのマニュアルページ

現在、適用されているスタイルを確認してカスタマイズする箇所を調べるためのツール

Chromeの「検証（デベロッパーツール）」機能を利用してどこをカスタマイズすればよいかを特定します。
下記のページに目的の操作がわかりやすく解説されています。

変更前のスクリーンショット

 

改善点 ① メニューバー

「京都の宿泊」や「TopPabe」「ツイッター」の各ページへのリンクなのですが、ページに馴染みすぎてリンクとしてわかりにくいのでボタンのようにしてわかりやすくしたい。

追加した設定

.common-header-nav__item {
　font-weight: 700;
　box-sizing: inherit;
　display:inline-block;
　width: calc(100%/3);
　border: 1px solid #5FBAC2;
　text-align: center;
　height: 49px;
　line-height: 50px;
　vertical-align: top;
　white-space: nowrap;
　overflow: hidden;
　background-color: #ffffff;
}

スーマートフォンで表示した場合、全体設定の内容だけでは左に寄ってしまうため、画面幅いっぱいにボタンを表示させるため下記の設定を追加

.common-header-nav {
    text-align: left;
    padding: 0 0 0 0;
}

適用結果

改善点 ② ボタン

OWNDのデフォルトのボタンなのですが、リンクとして認識しづらいのではないかと、かつ可愛く押してみたくなるように変更したい。

追加した設定

.btn__item {
    display: inline-block;
    text-decoration: none;
    background: #5FBAC2;/*ボタン色*/
    color: #ffffff;/*ボタン色と同じに*/
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
    border-bottom: solid 3px #627295;
    border-radius: 50px;/*角の丸み*/
    text-shadow: -1px -1px rgba(255, 255, 255, 0.44), 1px 1px rgba(0, 0, 0, 0.38);
  }
  
.btn__item:active{/*ボタンを押したとき*/
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
    border-bottom: none;
}

適用結果

改善点 ③ ページタイトルと見出し（２）

「ページタイトル」と「見出し（２）」なのですが両方とも区別がつきにくく、文字サイズが大きくてスマートフォンで閲覧した際に邪魔になるという点、ちょっと殺風景なので少し賑やかにしてみたい。

追加した設定

.page__main--blog-detail .blog-title__text {
    font-size: 2.4rem;
    line-height: 1.2;
}
.blog-body__text h1, .txt h1 {
    font-size: 2.4rem;
    line-height: 1.2;
}
.blog-body__text h2, .txt h2 {
    font-size: 2.1rem;
    line-height: 1.2;
}
.blog-body__text h2 {
font-weight: 700;
color: #ffffff;/*文字色*/
background: #5FBAC2;
box-shadow: 0px 0px 0px 5px #5FBAC2;
border: dashed 1px white;
padding: 0.2em 0.5em;
}

適用結果

改善点 ④ 見出し（３）

見出し（３）を写真タイトルとして使用して文章のテーマの区切りとして利用していたのですが、区切りとしてはすこしわかりにくい。

追加した設定

.blog-body__text h3 {
 font-size: 1.6rem;
 font-weight: 700;
 color: #ffffff;/*文字色*/
 padding: 0.5em;/*文字周りの余白*/
 display: inline-block;/*おまじない*/
 line-height: 1.0;/*行高*/
 position: relative;
 padding: 0.6em;
 background: #5FBAC2;
 vertical-align: middle;/*上下中央*/
 border-radius:5px 5px 5px 5px;/*左側の角を丸く*/ 
}
.blog-body__text h3:after {
position: absolute;
content: '';
top: 100%;
left:10px;
border: 15px solid transparent;
border-top: 13px solid #5FBAC2;
width: 0;
height: 0;
}

適用結果

今日のところはこの辺で・・・

 

～ここから
/**
 * @media all
 * 全体に適用したいCSSを記述してください。
 */
.common-header-nav__item {
font-weight: 700;
box-sizing: inherit;
display:inline-block;
width: calc(100%/3);
border: 1px solid #5FBAC2;
text-align: center;
height: 49px;
line-height: 50px;
vertical-align: top;
white-space: pre-wrap;
overflow: hidden;
background-color: #ffffff;
}
.btn__item {
display: inline-block;
text-decoration: none;
background: #5FBAC2;/*ボタン色*/
color: #ffffff;/*ボタン色と同じに*/
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
border-bottom: solid 3px #627295;
border-radius: 50px;/*角の丸み*/
text-shadow: -1px -1px rgba(255, 255, 255, 0.44), 1px 1px rgba(0, 0, 0, 0.38);
}
.btn__item:active{/*ボタンを押したとき*/
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
border-bottom: none;
}
.page__main--blog-detail .blog-title__text {
font-size: 2.4rem;
line-height: 1.2;
}
.blog-body__text h1, .txt h1 {
font-size: 2.4rem;
line-height: 1.2;
}
.blog-body__text h2, .txt h2 {
font-size: 2.1rem;
line-height: 1.2;
}
.blog-body__text h2 {
font-weight: 700;
color: #ffffff;/*文字色*/
background: #5FBAC2;
box-shadow: 0px 0px 0px 5px #5FBAC2;
border: dashed 1px white;
padding: 0.2em 0.5em;
}
.blog-body__text h3 {
font-size: 1.6rem;
font-weight: 700;
color: #ffffff;/*文字色*/
padding: 0.5em;/*文字周りの余白*/
display: inline-block;/*おまじない*/
line-height: 1.0;/*行高*/
position: relative;
padding: 0.6em;
background: #5FBAC2;
vertical-align: middle;/*上下中央*/
border-radius:5px 5px 5px 5px;/*左側の角を丸く*/ 
}
.blog-body__text h3:after {
position: absolute;
content: '';
top: 100%;
left:10px;
border: 15px solid transparent;
border-top: 13px solid #5FBAC2;
width: 0;
height: 0;
}
.quote {
width: auto;
margin-right:6px;
border-radius: 5px;
box-shadow: 3px 3px 3px #AAA;
border: 1px dotted #CCCCCC;
}
～ここまで

 

ブログの開設に関するメモ