【ストーク】トップページを固定ページにした時の文章の始まりのスペースが気になる

ストーク 固定ページ タイトル スペース
おかぴー

こんにちは!
WEBデザイナーのおかぴー(@blueokap)です。

僕の詳しいプロフィールと、このブログについてはこちら

 

今回は、「Sports Connecters」というブログを作られている「Yuyaさん」からご質問をいただきました。

「ストーク」のテーマで、トップページを固定ページにしたときに気になる箇所があるようです。

 

Yuyaさん

こんにちは

STORKを使ったブログを書き始めてもうすぐ1年になるものですが、トップページを固定ページで作っていますが、

スライドショーの文字表記が消えたり、スライドショーから下の部分の文章が始まる部分が妙に隙間があって、とても見にくくなってしまいました。

いろいろ調べてみたのですが、なかなか改善方法が見つからない中こちらのサイトを見つけたのでご連絡をさせていただきました。

ご助言などいただけたら嬉しく思います。
よろしくお願い致します。

おかぴー

Yuyaさん、こんにちは。

僕もストークで固定ページをトップページとして設定していますので、お力になれると思います。

よろしくお願いします。

 

そして、今回修正したい箇所がこちらです↓

ストーク 固定ページ スペース

 

Yuyaさん、スクリーンショットもありがとうございます。

ご覧いただいたように、たしかにスライダー機能で動いている記事のサムネイル画像にタイトルが表示されていません。

そして、最新記事・よく読まれている記事の上にある部分がスペースが空いています。

 

通常だと、スライダーのタイトルに関しては、
このような感じで画像の上にタイトルが表示されるのですが、

ストーク 固定ページ スライダータイトル

 

実は、スペースの件も含めて今回ポイントだったのが、あるCSSのカスタマイズコードでした。

パソコンとスマホの両方で起こるそうですが、記事内の解説はパソコン画面で進めて行きます。

それでは、お悩み解決していきます!

 



スライダーの記事タイトルが消えていることについて

トップページを固定ページで作成する際、Yuyaさんは記事タイトル(h1タグ)に「トップページ」という文字を入れて固定ページのタイトルにしていました。

実は、その文字を非表示にするためにCSSで非表示にカスタマイズされていました。
そのコードがこちらです↓

トップページのタイトル全般を非表示にしていたコード

.home .entry-title{
display: none;
}

このコードの意味は、トップページのタイトルを見えなくするコードになっていて、
スライダーのタイトルも一緒に非表示にしていたというわけでした。

ちなみに、スライダーのタイトルは「h2タグ」というもので設定されています。
ですので、この追加されたコードを削除しました↓

ストーク 固定ページ スライダータイトル スペース

すると、スライダー部分のタイトルが戻ってきました!

ということで、
スライダーのタイトルが消えているのは、このCSSコードを削除することで解決しました。

 

逆に表示されたトップページのタイトル(h1タグ)を非表示にする

次に、先ほどのコードを削除(デフォルトの状態に戻した)ことで、
本来非表示のままにしておきかった固定ページのタイトル部分の文字が表示されています↓

ストーク 固定ページ スライダータイトル スペース

 

なので、トップページの固定ページタイトルだけを指定してCSSで文字を非表示にします。

ソースコード

/*トップページのh1タグだけ非表示にします*/
.home h1.page-title.entry-title{
display:none;
}

ストーク 固定ページ スライダータイトル スペース

これで、トップページのタイトル部分の非表示ができました。
先ほどのスライダー部分のタイトルはもちろん表示されたままになっていますね。

 

さて、次は最後のカスタマイズ。
トップページの文章の始まりにあるスペースについて。

 

文章始まりのスペースを詰める

ここまで読んでもらったら、もしかしたらなんとなく原因がお分かりになった方もいるかもしれませんが、

2つ目のカスタマイズでタイトルを非表示にしたことで、この部分がぽっかり見えないスペースを作ってしまっているため、文章が始まるまで若干スペースが空いてしまっているんです。

さっきのコードの「display:none;」というCSSは、
あくまで非表示にしただけなので、この場合は文章全体の位置を上に詰めます!

以下のコードを使っていきます!・・・が、どんな意味かも含めて解説します。
なぜなら、使う人によってコード内容が若干変わるからです。

コピペできるコードは、下の方に赤い枠で囲ってコードを置いてありますのでそちらをお使いください^^

 

Yuyaさんの場合

#post-1169.article header{
margin-bottom:-2.5em;
}

赤文字の部分が変わります。

 

①「#post-1169」

この数字は、記事ごとに割り振られたIDを意味していて、
そのIDを確認するには固定ページの編集画面を開きURLを確認します。

すると、当ブログの場合は以下の画像のように「post=2214」とURLのところにIDが書いてあります。

 

つまり、Yuyaさんのブログでは固定ページで使っている記事のIDが1169であったので、コードのところに「post-1169」と記載しましたが、

僕のブログだった場合は以下のようになります↓

僕のブログの場合

#post-2214.article header{
margin-bottom:-2.5em;
}

ということで、もしこのカスタマイズをする場合は、
番号の箇所を変更して行ってください。

 

②「margin-bottom:-2.5em;」

次に、この数字の部分は上にどれだけ詰めるかを表しています。

たとえば、-2.0emとか、-1.2emなど。
この数値で詰める間隔が変わってきます。

ここはあなたのお好みの数値を入力して調整してみてくださいね^^

ソースコード

#post-0000.article header{
margin-bottom:-2.5em;
}

数字だけ変えましょう↑

 

カスタマイズ結果

スライダーのタイトルの表示をして、記事を上に詰めることができました!

パソコンの場合↓

ストーク 固定ページ タイトル スペース

 

スマホの場合↓

ストーク 固定ページ タイトル スペース

 

相談後の感想

Yuyaさん

無事にページの修正ができました。
何を調べても解決できなかったので、本当に助かりました。
ありがとうございました。

Googleでいくら検索しても自分の知りたい情報が出てこなかったので、同じような悩みを持った人がいないのかなと思って諦めていましたが、

今回綺麗に修正できたので、ずっと気になっていたストレスから開放された気持ちです。
順を追って丁寧に説明してくださったので非常にわかりやすく助かりました。

我流で作っていたサイトなので、まだまだわからないことが出てくると思います。
また是非ご相談させください。

おかぴー

Yuyaさん。
無事修正できてよかったですね!

お疲れ様でした。

もちろんです。
またご相談お待ちしていますね。

 

他にも、ストークでのカスタマイズのお悩みはこちらのページにまとめています。

また、デザインやカスタマイズで何かお困りのことがあれば、
お気軽にお問い合わせください^^

 

ブログランキング参加中!

「このブログがためになった!」と思ったら、ポチッとしていただけると嬉しいです^^
応援よろしくお願いします!!


ブログで感じる不安から解放されるために必要なこと

どんなブログを作ればいいのか。

どんな内容の記事を書けばいいのか。

ブログの完成形が見えないから不安で、とりあえず常に記事数を増やさないとと思っている。

ブログを作るからには収益化したい。けど、具体的にどうすればいいかがわからない。

ワードプレスの設定もやらなきゃだけど、それに時間を取られてたら記事が更新できない。

自分が悩んでいるデザインの解決策がどうやって検索したら答えが出てくるのかも、よくわからない。

あなたは、ブログを作っていて何かしらこのような不安を感じたことはありませんか?

そんなブログの不安をなくす解決策とは?

必見です!!


コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください