俺流!バラとラン栽培

バラとランと WordPress に魅せられて!

タグ: テーマ

WordPress、ミニマルなポートフォリオ用テーマ、Maker が!

本ブログ、結構掲載する写真が増えてきました!写真は、これまで全く気にせず、ただただ撮影して掲載して・・・って繰り返しでしたが、これだけ掲載写真が多くなると、ギャラリー的なブログというよりは、ギャラリーそのものが欲しいな~なんて考えるようになってきました!

そんな時に、「WordPressでミニマルなかっこいいページが簡単に作成できる!無料で高品質なテーマファイルのまとめ | コリス」という公開記事を発見して・・・

紹介されている一つ一つのテーマを確認すると・・・「Maker」という WordPress 用のテーマがとってもシンプルだし、個人的にとっても気になります!

Posted by “WordPress for Android” in Xperia Z3 Compact.WP_Theme_Maker

ポートフォリオ用のテーマだそうだし、標準で色々とできそうだし!何よりも WordPress 用のテーマですから、使い勝手は良いはずです。市場での評判も良いし。

私ごときがポートフォリオね~とちょっと疑問に感じながらも、興味津々です!

カレンダーウィジェットの日付リンクを丸くする

本ブログのフッター位置にあるカレンダーウィジェットを、以前からもうちょっとデザインを工夫できないかな、と考えていて、いろいろとネットを検索していました。特にリンクに関しては、工夫したかった!

そこで、ネットで見つけた「[WordPress.com] カレンダーウィジェットの日付を丸くする | comemo」を参考にスタイルを変更しました。

先ずは Before-After を掲載しておきます。

スタイル変更前 スタイル変更後
20150501_calendar_1 20150501_calendar_2

「display」を block にすること、border-radius で角を丸めたことでしょうか。上記のコードにある px は、毎回確認しながら微調整しました。コードは、「子テーマ」の style.css へ記入しています。

WordPress の投稿用エディターにボタンを追加する方法

本ブログでは、表や引用を多用しています。つまり、table や blockquote 等の HTML タグを頻繁に利用しています。そこで、WordPress の投稿用エディターに標準で備わっているタグボタンに、table や blockquote 用のタグを挿入するためのボタンを追加できたらな~と思ってネットを調べるとやっぱりありました、その方法が!

下図が実際に追加した状態です!頻繁に利用する自分用のタグボタン(赤で囲った部分)が追加されています。

20150329_Add_EdotorsButtom

参考にしたのは「AddQuickTagに頼らずHTMLエディタのボタンを自作してみた : りくまろぐ」です。もうほとんどコピペで自分用のボタンが追加できます。

下記は、本ブログで実装しているボタン用のコードです。

上記のコードは、functions.php へ追加すれば完了です。ほとんどコピペで生成しているので、詳細は上記にあるリンクのウェブページを参照意して頂ければ良いと考えています。

引用符(blockquote)の CSS、content プロパティーを使いこなす!

本ブログでは、表(table)や引用符(blockquote)を多用しています。表に関しては自己満足ではありますが、そこそこ完了していますが、引用符(blockquote)に関しては、単純な装飾しか施していませんでした!

そこで、引用符に content プロパティーってやつがあることを知り、更に以前単純にコピペで利用させて頂いた引用符に関する装飾を思い出し、本ブログでも採用してみることにしました!

PAK86_codeing_700x200

参考にした投稿記事は以下の 2 つです!

重要なのは、content プロパティーと、それをどうやって表示させるかということです。本ブログでは、引用符(blockquote)のボックスの最初に「Quote」と表示させたい!結論からすると、以下のようになります。

content プロパティーは、要素の前後に、:before または :after という擬似要素を使ってテキストや画像などのコンテンツを挿入する際に使用します。擬似要素とは、HTMLなどの文書には記述されていない要素をCSSによって新たに作り出された架空の要素です。出典:「CSSの content プロパティーを使いこなそう! | Webクリエイターボックス」より

本当に自己満足の世界ですが・・・かなりかっこ良くなったと思っているのですが・・・どうでしょうね~「Quote」という content をローテーションさせることもできるのですが、以前、その調整でかなり時間を費やしてしまって、そこまでやる必要があるのかな~ってなことを考えていたので、単純に引用符のボックスの上にちょっとだけ突き抜けるように設定しました。

コードは以下の通り。

これだけできると本当に嬉しくなりますね~

ちょっと苦労したのは、「Quote」のポジション。blockquote に position プロパティーを設定しないと content プロパティーの表示が上手くできないようです。また、z-index プロパティーを指定することで、本文を最前面に表記できるようにします。

なが~いコードを一人で書くって・・・大変なことですが一度完成すると本当に満足感がありますね!

Posted by “WordPress for Android” in Xperia Z3 Compact.

テーマ、Frontier がバージョンアップ(1.2.4 へ)して変更されたこと

frontier-theme-2-columns本ブログで適用している「Frontier」というテーマが Version 1.2.4 へバージョンアップされました!

これまで、適用しているテーマのこうしたバージョンアップで、何が変更になったのかを意識したことはなかったのですが、これまでにない満足感がこのテーマにあり、バージョンアップで何が変更になったのかがとっても気になりました。

WordPress も日々進化しているようですが、勉強不足でなかなかついていけませんが、テーマに関する変更程度であれば、何とか追随しなければ!

そこで、調べてみると・・・

Version 1.2.4

  • Added ‘title-tag’ support.
  • Added CSS for Print media.
  • Added option for a drop-down menu.

出典:「Frontier Theme – Changelog | ronangelo」より

「title-tag」は、WordPress 4.1 からサポートされた機能のようで、「Frontier」では初めてサポートされた機能のようです。特に SEO という分野で威力を発揮するようですが、勉強不足で詳細が不明です。勉強しなければ!

「Print Media」に対応してくれたのは、個人的にはかなり嬉しい!ブラウザーから直接印刷することは以前からできましたが、この CSS が加えられたことによって、投稿記事を印刷する時に、ヘッダーやサイドバーを自動で省いてくれるようになりました!これ、かなり嬉しい。

「drop-down menu」は、そもそもドロップダウンメニューを構成しているので、あまり必要ないかも・・・ただ、勉強不足ということもあるので、しっかりと確認する必要があるかもしれません。

「Frontier」は、本ブログを公開して既に 2 度目のバージョンアップ。しっかりとメンテナンスされているテーマっていうのも、満足度を向上してくれるんだな~しみじみと感じています。

1 / 41234
「俺流!バラとラン栽培」Copyright © 2015-2016 by Zero Cool. All rights researved. Frontier Theme