[ウェブリブログ] 記事を移動する次へ、前へのボタンを上部に配置する

2019年07月02日に"ウェブリブログ"が大幅リニューアルされ、HTML が新しい構成になったのを受けて CSS の編集方法も変わったので紹介する。

今回は記事のページ下部にある前後の記事に遷移する「次へ」「前へ」のリンクを画面上部に配置する CSS を紹介する。

尚、下図の画面キャプチャは「ウェブリブログ事務局」のデザインレイアウトを参考にしたもので、このデザインテンプレートを基本とする。
実際の「ウェブリブログ事務局」のブログはこれから紹介する CSS の変更はされていない点と当ブログとは関係ないので注意のこと。

1.CSS の変更前の状態


CSS の編集を行っていない初期の状態は下図のように記事本文の下に SNS のボタン、フリースペース、そして前後の記事に遷移するリンクが配置されている。
これらの各要素はウェブリブログの HTML として固定化されているので位置の移動ができない(近日、HTML の編集機能が追加予定)

初期状態


2.要素の位置を上下に入れ替える


CSS を次のように修正すると記事遷移のリンクが一番上に次いでフリースペース、記事の順に位置が変わっているのががわかる。

.Main__contents {

display: flex;

flex-flow: row wrap;

}

 ▼
.Main__contents {

display: flex;

flex-direction: column-reverse;

}


CSS 修正後


3.修正の注意点


現在のウェブリブログの CSS は下図のように定義されており、今回 CSS を編集した「.Main__contents」は記事本文と記事遷移リンクなどを包括するクラスになっている。
この「.Main__contents」は記事本文だけでなくトップページ、テーマ別一覧など全体で使われているので利用する際はトップページ等は除外するなど別途対応が必要になる。

HTMLの構成


ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 0

この記事へのコメント