【LION MEDIA】僕がこのテーマでやってきたカスタマイズのまとめ集

どうも、MOGAKUN(@ThreeFrogblog)です。

デザイン性に優れているWordpressテーマ『LION MEDIA』。

デフォルトの状態でも良いが、そこに色を出したいと思い始めてから2か月ほどが経ち、色々なところを変更してきました。

ここでは、僕がこれまでに行ってきたカスタマイズの詳細を参考程度に記録しておきたいと思います。

記事ページとカテゴリーページのファーストビューで表示できる領域を広げました。

ピーマン

カテゴリーページTOP▼

記事内TOP▼

MOGAKUN

デフォルトの各カテゴリーTOPページではピックアップ記事が表示されていて、下記に続くコンテンツが見にくくなるため表示させないように変更しました。

記事内TOPは、本来サムネイルが表示されるところを、あえて白い背景にしてタイトル文字色を黒に変更しました。

『LION MEDIA』カテゴリーTOPページ&記事内TOPのファーストビューを見やすくカスタマイズ

先頭にアイコンを表示することでテキストリンクであることを認識しやすいようにしました。

サンプルテキストリンク←このようにテキストリンクの先頭にアイコンを表示させてみました。

アイコンがあることで視認性は上がり、リンクであることがはっきりわかるようになったと思います。

『LION MEDIA』テキストリンクの先頭にFont Awesome導入でアイコン表示する方法

ソースコードを載せるときに見やすくなるようにハイライト表示をしてくれるようにしました。

ピーマン

こんな感じ!

カスタマイズの紹介記事などを記述する際にソースコードをプラグインを使って表示させている人もいるかと思います。

それが嫌になったので、<pre><code>要素を少し触って整形し、(難しそうでも簡単です)→highlight.jsを使用してコードをハイライト表示させてみました。

『LION MEDIA』<pre><code>要素にhighlight.jsを使いハイライトなアイコン付きソース表示カスタマイズ

ブログのホーム画面に「背景画像」「テキスト」「ボタン」付きのインフォメーションエリアを実装してみました。

オススメ!

MOGAKUN

ブログのテーマでよくあるやつです。『LION BLOG』の方には似たようなものが、デフォルトで標準装備されていましたが『LION MEDIA』の方ではなかったので自作してみました。

『WordPress』カスタムHTMLウィジェットでサイトTOPに背景画像付きボタンテキストを設置

 

あとがき

これからもまた少しづつ変更していくつもりですので、それは追記という形で更新していきたいと思います。

 

コメントを残す

メールアドレスが公開されることはありません。