脱 bundle.css、シェアボタン自作、その他いろいろブログの改造

リダイレクトエラー問題への対処のためにブログに意識が向いたついでで、css の見直しなど色々やりました。

HTML+css でラジオボタン and or チェックボックスでテキストを回り込ませない方法

Flexbox を使ってラジオボタン and or チェックボックスとテキストとを横並びに配置することで、テキストの回り込みを回避します。

cssの見直しを実施 スマホ対応＋その他

css3 を使用したレイアウトパターンの勉強をして、その実践の一環でこのブログの css の見直しを行いました

また、スマホ対応できるように css を変更しました
　ここでのスマホ対応とは、標準のスマホ用ページではなく、スマホで PC 用ページを表示した時に意図した通りに表示できることを意味します

外部リンクにアイコンを追加しました

このブログの記事本文中の外部リンクに対して、アイコンを表示するようにcssを変更しました

参考

1. コピペOK！外部リンクをCSSとアイコンフォントで目立たせる（おち研）
   私のcss知識が古いので、適用対象を部分的にする方法はこちらを参考にしました
2. 外部リンクのアイコンマーク（isamulife）
   Font Awsome を使用しなかった理由はこちらを参考にしたからです
3. 属性セレクタ（HTMLクイックリファレンス）
   1つ目の参考ページと合わせて、こちらもcssの書き方の参考にしました

記事本文中のaタグに対して一律でアイコンを表示する設定を基本として、表示したくないものは個別で除外処理をするという力業です
　直近の記事と、古い記事、ファイルへのリンク等の確認は行いましたが、元々はアイコン表示する想定ではなかったため、除外モレしている可能性があります 　ご了承ください


少し前からうすぼんやりと「やりたい」とは思っていたのですが優先順位が低く、今のタイミングでなぜかやる気が出たので一気にやってしまったという感じです

webページに掲載するソースコードに行数表示を付けたい

webページ中のコード表示に行数表示を追加する方法をcssで作ってみました

1. サンプルコード
2. 参考・既存の方式

今回実現できた機能は次の通り

webページでの表示について

コード部分をドラッグで範囲選択しても行数表示は含まない
1行が長いコードは横スクロールする
行数表示を画面内に残したまま横スクロールする

webページへの投稿作業について

ソースコード自体はできるだけコピペだけで済ませる