投稿サンプルとCSSで設定してあるもの
Gushの記事投稿サンプルとCSSで設定してある装飾の解説です。
大見出しはh2
中見出しはh3
まず、記事タイトルには<h1>タグを使用しております。記事内見出しは<h2>から<h5>をご利用ください。一般的には<h2>と<h3>だけで事足りるかなと思います。
小見出しはh4
<h4>にはとくに装飾を施しておりません。
ボックス装飾
引用
<blockquote>の表示はこのようになります。
ブログデザインの最終目的は、訪問者が読みやすい導線づくりです。実際に訪れてくれるお客様の目線をないがしろにしてはいけません。
|
1 2 3 |
<blockquote>ブログデザインの最終目的は、訪問者が読みやすい導線づくりです。実際に訪れてくれるお客様の目線をないがしろにしてはいけません。 <a href="http://naifix.com/blog-design/" target="_blank">初心者ブロガーが絶対覚えておくべき読まれるブログデザインの大原則</a></blockquote> |
グレーボックス
CSSに「gray_box」というクラスでボックス設定をしています。
こんな感じで使ってね
|
1 |
<div class="gray_box">こんな感じで使ってね</div> |
CSSで設定してある文字装飾など
CSSをご覧いただくとわかりますが、「クラス定義」として下記のような設定をしてあります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
.center { text-align: center; } .right { text-align: right; } .left { text-align: left; } .s { font-size: 50%; } .ss { font-size: 70%; } .l { font-size: 150%; line-height: 130%; } .ll { font-size: 200%; line-height: 120%; } .b { font-weight: bold; } span.futo { font-weight: bold; } span.futoaka { font-weight: bold; color: #ff0000; } span.futomido { font-weight: bold; color: #149b14; } |
YouTubeなど動画の貼り付け
動画を貼り付けるとPC表示では問題ありませんが、スマホだと枠からはみ出てしまいます。プラグイン導入で対応できますが、CSSにもクラスを設定してあります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/*-------------------------------------- 動画レスポンシブ化 ---------------------------------------*/ .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; margin: 0 auto 24px 0; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } |
YouTube動画なら、下記のようにDIV要素で囲ってください。
|
1 |
<div class="video-container"><iframe width="560" height="315" src="//www.youtube.com/embed/_HXj22ky5CY" frameborder="0" allowfullscreen></iframe></div> |
※随時更新中
[…] 投稿サンプルとCSSで設定してあるもの http://gush.naifix.com/sample/ […]
[…] 投稿サンプルとCSSで設定してあるもの […]
お世話になります。
今回とっても不思議な現象が起こり困っています。
Gushのヘッダーの文字が大きくさらに左によって表示されます。
cssでヘッダーに一度背景色をつけてからそうなりました。
その後元に戻したのですが数時間たった今でも変化なしです。
因みに違うドメインで試してみたらオリジナルのまま正常に表示されます。
コードは以下に書きますが間違いないと思います。
何でこうなったのか不思議でお手上げ状態です。
/*————————————–
ヘッダ見出し
————————————–*/
#header {
text-align: center;
padding-top: 24px;
}
#header .top_title {
margin-bottom: 12px;
font-size: 36px;
}
#header .caption {
color: #222;
}
因みにサーバーはエックスサーバーです。
FastCGIは無効にしています。
今はmod_pagespeedは有効ですが何度か無効にして様子を見ても変わらなかったです。
以上分かりずらいかもしれませんがよろしくお願いします。
大変敏速なご回答ありがとございました。
全然気がつきませんでしたと言うかさすがですね。
ほんとうに感謝致します。
今ではきちんと表示されるようになりスッキリしました。