WordPressで特定の記事を先頭に固定する方法とTwenty Ten での表示

ちょっとしたお知らせや、ブログの読者に伝えたい事などを記事に書いても、その後に投稿されていけば、あっという間にその記事は埋もれてしまいます。特定の記事をいつもブログの先頭に固定しておける、「先頭に固定表示」のやり方と、CSSについて見ていきたいと思います。

特定の記事を先頭に固定表示するやり方はとっても簡単です。投稿画面の右上、公開のボタンがある所を見て下さい。「下書きとして保存」や「プレビュー」のボタンがある下の方に、「ステータス」、「公開状態」などの項目があります。ここですね。

ここの「公開状態」の「編集」というリンクをクリックするとだだだーーっと隠れていたメニューが出てきます。ここにある「この投稿を先頭に固定表示」にチェックを入れるだけ。これで、このチェックを入れた記事が先頭に固定されます。

さて、この先頭に固定された記事はTwenty Tenではどのような見た目で表示されるのでしょうか。

このような感じで、上に黒いボーダー、薄い水色の背景、と、他の投稿とは違ったデザインで表示されます。

また、投稿された記事自体の幅は同じですが、ボーダー、背景が左右に広がり、エリアが大きくなっています。

Twenty Tenで先頭に固定表示された記事のHTMLをみてみると、記事の囲み部分にstickyというクラス名が追加されています。

<div id="post-1" class="post-1 post type-post sticky hentry category-1">

このクラス名で、他の部分と分けているんですね。

では先頭固定記事のCSSがどうなってるかみてみます。

.home .sticky {
    background: #f2f7fc;
    border-top: 4px solid #000;
    margin-left: -20px;
    margin-right: -20px;
    padding: 18px 20px;
}

background: #f2f7fc;　が薄い水色部分、　border-top: 4px solid #000;　が上の太いボーダーです。
マイナスのmarginでエリアを広げ、paddingで調整しています。

全体をすてきな枠組みで囲ったり、フキダシにしてみたり、いろいろとデザインを考えてみると面白そうですね。すてきなアイディアがあったらぜひ教えて下さい。

Webourgeon