2016.05.10
2151文字 / 読了時間:2.7分程度
web/design/css/php/js..

また、テンプレート(ワードプレステーマ「Ateh’s theme-M(Square)」)をいじりたい気分になっていたり。
この辺は落差が激しいので、気分な時にやっておきたいことはやっておけたらいいなとか。

見出し(h2,h3)のデザイン変更?

てことで、見出し(h2,h3)のデザインが今までいまいち気に入っていなかったり。
自分で設定しているのに……。

それで無難なh4を愛用していたけれど、こういう見出しの使い方は非推奨な気はするし、なにより自分でも落ち着かないところはあったり。

てことで、使いたくなる見出しデザインを考えた結果……。

functions.phpに色々追加して(設定オフにしやすいように一応外部ファイルに隔離してincludeで取り込むようにしたけれど)、見出しタグを置換させて見出しの下に自動的に画像を置くようにしてみたり。

見出しの直下に画像というブログのスタイル

人を集めることを意識したブログは、画像多めが基本なのかな。

アイキャッチ画像を見出しの下に置くことが推奨なのかなあ、ってくらいよく見かける気がするけれど。

それはともかく自分でもデザイン的に画像が適度にはさまっているのは文字だけの圧迫感が減っていいんじゃないかなあという気はするので、やってみようかなあと思った感じ。

画像で一呼吸おけるかんじなのかも?

見出しの直下に画像をいちいち配置するのはめんどくさい

でも見出しの下に画像を置きたいといっても、いちいち画像をupして画像タグをおくのは言語道断なくらいにめんどくさかったり

なので、その手間を省きたいと考えたんだけれど。

で、最初は単にショートコードでランダムに画像を置けるようにしてみたけれど。

それでもショートコードは置かなければならないし、そもそもデザイン用のショートコードを本文にいれるのはあんまりきれいじゃない気がしてあんまり気が乗らなかったり。

てことで、次に思いついたのが、タグの閉じるのを置換して、画像も追加するようにすれば一番手っ取り早いんじゃないかなあとか。

イメージとしてはこんな。

「</h2>」→(自動置換)→「</h2><img…>」

無事に動いてなにより。

テンプレート、最近変更した部分?

リスト関連は少し前に追加したデザインだけれど。
これもけっこう気に入っていたり。

最近変更した部分は主なものはこんな。

  • リスト関連(ul,li)デザイン変更
  • 見出し関連(h2,h3)デザイン変更
  • 線(hr)デザイン変更
  • リンクデザイン変更
  • コメント機能対応
  • プロフィール表示機能対応
  • 配色関連

リンクも、バランスを考えるのがめんどくさいからリンク以外と同じにしよう(カーソルのせないかぎり見分けがつかない)というのはやっぱり手抜きといえば手抜きなので、多少初期からはいじってあったり。

線(hr)デザイン変更?

区切り線としてわりとhrタグは個人的に愛用していたり。

hrタグ自体は、非推奨にはなってないのかな。ここみると。

また、hr要素は、HTML 4.01では水平線(horizontal rule)が描画されると定義されていますが、 HTML5ではテーマ・話題の区切りを表す要素であり、水平線の定義はありません。

とあるので、hrはこの定義どおりに扱いさえすれば水平線にしなくてもよさそう。

てことで。

hrを水平線から、画像並べたのに変えてみたけれど(見出しと同じ置換で)、html5の仕様にもそってるし、別に趣味にはしりすぎってことでもないかもしれない――と思ったけれど、完全に置換したからソースからhr消えてた……。

この辺の置換のつめるのはまだ足りてないかも。
とりあえずhrは置換するけれどHRはしないし、見出しの方も同じ。

これ↓がhr。


配色と画像のフィルタ

この辺は個人的趣味の部分が大きいので、最近は同じ配色を使っているけれど、そのうちまたかえるかも。
前は日替わりにもしていたけれど、季節感的にあわない配色もあるから、むしろ月ごとに指定とかもそのうち追加したいかもしれない。

今回、自動表示させる画像は他でつかっている(アイキャッチ代用他)のと同じように、基本的にはcssでフィルタをかけていたり。
最近セピアが気に入ってるけれど、なんかブラウザによってはかかってなかったり。

とりあえずchromeで作ってるから、他のブラウザのチェックはどうしても後回しになるなあ。

ただ、フィルタをかけると、元画像はunsplashのランダム(デフォ設定の場合)でクオリティはともかく中身はまちまちなんだけれど、それでもぱっと見には統一感はそれなりにとれるから、まあいいかなとか。

まとめ

てことで。

この記事内ではひとつも画像は使っていないし、基本タグだけ(hr,h2,h3,a,strong,blockquote,ul,li)しか使ってないけれど。

それでも視覚的に文字だらけの圧迫感はだいぶ減ったんじゃないかな。

むしろ、画像いれるとバランス崩れるかもしれないけれど、まあそれはそれ。

とりあえず、自分のブログの見栄えが気に入ると滞在時間が増えるし、そうなるとブログを書く気力もupするのは確か。

なので、配色も画像もランダムなので自分でもそこそこ新鮮だし、滞在時間増えるといいなあ。

とりあえず、おわり。









Comment



CAPTCHA




Memo.Medamayaki

三国志他歴史、小説、ゲーム等に関するメモ用ブログ。

TEMPLATE:Ateh's theme

×

Status


苗字:
名前:
性別:
年齢:
通り名:
出身:
誕生月:
誕生日:
職業:
種族:
武器:
属性:
髪色:
目色:
口癖:

Setting

苗字:
名前:
性別:
年齢:
通り名:
出身地:
誕生月:
誕生日:
職業:
種族:
武器:
属性:
髪色:
目色:
口癖:





× 
×

Recent Posts

×

Custom Menu