投稿の追記をちょっとだけ目立たせてみた。


公開日:2013年10月26日 土曜日   〇年前のこの日、何してた?
Categories: Works | Tags: , , , | 閲覧数:27 | Leave a comment

最近、過去記事やら、関連記事やらモロモロをサイドバーや記事下に表示するようになってやたらと前の投稿を編集することが多くなった。

「あ、これもう使ってないや!」とか、
「この情報は古すぎる」とか。

だけど、そういうのに限って、いまだに結構なアクセスがあったりして恐縮しております(* ̄∇ ̄*)エヘヘ

なので、今回は昔の記事に追記したとき(編集した時)、その箇所をわかりやすくしたほうがいいなと思ってやったことを残しておこうと思いまする。

後日、追記したことや編集箇所を目立たせる

追記をマークアップ

まず、調べたのは、追記はどんなタグを使うのが一般的なのか?
で、すぐ出てきたのが”ins”。
さっそく、こんな有意義なエントリーを発見!

だけど、ねこもりやの場合、このエントリーのように、”Pタグ”削除したらどえらいことになると思う。

それに、追記部分に、他の記事へのリンクも貼ったりするので、それも含めて囲ったほうがいいんじゃないかと。

なので、”div”でくくることに決定!

実装サンプル

HTML

例:「プラグインなしでちょっとカッコいいページネーションを付ける。」の一番下のあたり。

CSS

表示サンプル

プラグインなしでちょっとカッコいいページネーションを付ける

解説

上図の様に、他記事へのリンクを含めたりすることを考えて、背景に画像等は使わず囲み線とPのクラス”tsuiki”要素の「追記」の背景にワンポイントの画像を使っています。

実際エディタに書いているのは

だけです。

残りの

は、プラグインWordPress › AddQuicktag « WordPress Pluginsを使ってワンクリックでタグで囲めるようにしました。

 

プラグインAddQuicktagの設定

 

AddQuicktagの設定

 

上図の様に、名前を付けて、
開始タグに

終了タグに

を設定して保存。
追記した文字を選択した状態で、
追記した文字を選択して

 AddQuicktag の先程作成した「追記」をクリック!
投稿画面でaddQuicktagで挿入

そうすると、ねこもりやの環境では投稿画面でもCSSが効いてる。(なんか設定してたっけ?)投稿画面

 

後記

この2か月ぐらいで、いろいろカスタマイズしていて、過去記事がとても目立つようになってページビュー数がぐんと上がってきています。

それだからこそ、なんだか申し訳ない気持ちになって無い知恵をしぼり、沢山のサイト様にお世話になり色々工夫をしています。

いまさらながら、まだまだ知らないことが沢山あって、なーんて面白いんだろう♪と楽しくて仕方ありません。

この面白さ、楽しさをちょっとでも誰かに分けて差し上げることが出来ているなら、こんな嬉しいことは無いと思います。

過去記事をカッコよく見せるショートコードは以下で。


プラグインとの衝突回避方法はこちら。

 

もし、気に入っていただけたらシェアしていただけると嬉しいです♪ この記事へのリンクはこちら↓コピーしてHTML編集画面に貼り付けでお使いください。

ブログの更新情報はこちらで配信中~
Feedlyで購読
follow us in feedly
更新をメールでお知らせ 配信: FeedBurner

sponsored


公開日:2013年10月26日 土曜日   〇年前のこの日、何してた?
Categories: Works | Tags: , , , | 閲覧数:27 | Leave a comment

著者 ねこもりや

どうぶつ占いは「コアラ」。ボーっとする時間が常に必要。”猫になりたい”とひたすら願う怠けもの。

My Photos

Leave a Reply

Required fields are marked *


CAPTCHA