LION MEDIAのカスタマイズ~このブログの場合~

LION MEDIAのカスタマイズ~このブログの場合~

このブログではWordPressテーマ「LION MEDIA」を使用しています。
この記事では既存の設定では変更できなかった部分を紹介していきます。
半ば自分の備忘録のような感じです。

個別記事の見出しデカすぎ問題

変更前の個別記事ページはこんな感じでした。
個別記事ページカスタマイズ前
本文が始まるまでがデカすぎ長すぎィ!
ファーストビューに本文が1行半しか含まれていません。
いらない!このスペースいらない!

ってことで高さ調整です。CSSを直接変更していきます

※CSSを直接いじるより、ダッシュボードの外観→カスタマイズを選んで一番下の「追加CSS」に追記していった方がよさげです!

タイトルの高さを変更

まずはここの高さ。
タイトルの高さ
ここはもっと狭くしてもよさそうです。
どこをいじればいいんだ?ってことでまずは調査です。

基本的にどのブラウザでもキーボードの「F12」キーを押せば「開発者モード」になってどこの設定が反映されているかが分かります。
もしくは気になる部分を選択して右クリック→「検証(ブラウザにより呼び方が変わるかも)」で確認できます。

するとブラウザが分割されて、右側に何やら呪文がたくさん出てくると思います。
まずはその呪文をカーソルで上から順番に一行ずつなぞっていきましょう。
そしたら現在のカーソルのある行がどこを設定しているのか反転して教えてくれます。
反転した様子
こんな風に。

どうやら、「div.singleTitle」という部分をいじれば何とかなるかもしれません。

というわけでいじってみます。

次は右画面の「Styles」タブから「.singleTitle」を探します。
CSS変更箇所
マウスカーソルを上図の「padding:30px 0;」のところに移動したら左のページ表示部分が反転しました。ここで確定です。ここの数値を変えればタイトル部分の高さを変更することができます。
chromeだとここで数値を直接いじって確認できます。確認だけで変更を保存はできませんからね。

どこを変更すればいいのか。上図にも赤丸で囲ってありますが、「style.css:696」とあります。つまりwordpressの「style.css」の696行目をいじればいいわけです。

wordpressの管理画面から「外観」→「テーマエディター」で「style.css」を選んで下さい。子テーマを使っている人はできるだけ子テーマに追記するカタチでお願いします。
タイトルのpadding変更
ありました。ここの30pxを5pxに変更してみました。保存を忘れずに。

子テーマに記述する場合は

.singleTitle {
padding: 5px 0;
}

を一番下に追記すればOKです。たぶん…。

タイトルの高さ変更後
短くなりました。ひとまずはこれでよし。

変更も保存したのに反映されない!って人はブラウザのキャッシュが悪さをしている可能性がありますので一度キャッシュを削除してみましょう!
chromeの場合はブラウザ右上のボタンから「設定」→一番下の「詳細設定」→閲覧履歴データを削除する→詳細設定タブから削除して下さい。

期間は全期間、チェックするのは「cookieと他のサイトデータ」と「キャッシュされた画像とファイル」だけでいいと思います。
不安な人は念の為「閲覧履歴」と「ダウンロード履歴」もチェックしといていいですよ~。
ブラウザキャッシュのクリア画面

パンくずリストと本文の間が空きすぎ問題

続いてはここの隙間。
パンくずリストと本文の隙間
なんじゃ、この隙間は?気になる…。
というわけでさきほどと同じ要領で調査します。

まず、style.css 103行目から始まる
.l-main {
width: 70%;
padding:60px 2.5% 60px 0;
}

.l-main {
width: 70%;
padding:25px 2.5% 60px 0;
}

に変更。それでも間が空いてたので更に調査したところ、
content.cssの11行目の

margin:60px 0;

margin:0px 0 60px 0;

に変更しました。こうしないと本文の一番したとSNSシェアボタンがひっつきすぎてしまうからです。

で、変更後はこんな感じです。
CSS変更適用後

うん、本文がファーストビューの真ん中ちょい下くらいから始まるようになりました!
もう少し切り詰めてもいいかもしれませんね。
とりあえずはこれでOKということにしときましょう。

サイドバートップに自己紹介を設置

外観→ウィジェットを開き、左側の「利用できるウィジェット」の中から「テキスト」を選んで右側の「通常サイドバーエリア」の一番上にドラッグ。

ドラッグしたら出てくる編集窓でタイトルを書き(自己紹介とかプロフィールとか)画像を貼り付け、簡単な自己紹介文を書いてついでにTwitterフォローボタンを設置。
Twiiterフォローボタンはここから作れます。
→Twitter Publish

最初に出てくる窓に自分のツイッターURLを入力します。

https://twitter.com/○○○○

自分のツイッターページを開いてコピペすればいいです。
僕の場合ですと
「https://twitter.com/sutyolog」
です。

入力して確定させると
Here are your display options
と表示され、いくつか選ぶ画面になるので
「Twitter Buttons」を選択
そしたらまた選択画面になるので
「Follow Button」を選択

すると自分のブログに貼り付けるコードが表示されるので
「Copy Code」ボタンをクリック。
すると自分のコードがコピーされるので自己紹介文の一番下に貼り付けるだけです。

テキストリンクの色と下線変更

デフォルトだとテキストリンクに下線がなく、色もリンクなのか、ただの強調なのかわかりにくかったので一般的なリンク色にして下線を追加します。

追加CSSに以下を足しました
.content a {
color: #0645ad;
text-decoration: underline;
}
.content a:hover{
font-weight:bold;
text-decoration: none;
}
.content a:visited {
color: #800080;
text-decoration: underline;
}

ブログカードでかすぎ問題

もう一つ気になったのが、リンクを設定した時のブログカードがあまりにも大きすぎるという問題。
でかすぎるブログカード
赤枠で囲った部分がブログカードです。
まるまる1ページ分あります。主張しすぎだろ…。

というわけでカスタマイズです。これは内部設定をいじるよりプラグインで解決した方が早そうです。
僕はPz-LinkCardというプラグインを使いました。
Pz-LinkCard適用後のブログカード
これなら記事の中に自然にリンクを挿入できそうです。
使い方も簡単で、本文中に
[blogcard url="記事のURL"]
というショートコードを挿入するだけ。
細かい見た目はまあそのうちに。

あ、ブログに↑のショートコードを紹介したいけどブログカードが出てしまいコードの説明ができない!って場合はそのコードをさらに[]で囲むとできますよ。
[[ショートコード]]
こんな感じで。

Pz-LinkCardのカスタマイズ

ブログカードが大きすぎる問題は解決したのですが、肝心のブログカードのデザインがすこーし物足りない。
PzLinkCardカスタマイズ前
とりあえず、プラグインの設定からいじっていきます。

設定→Pzカード設定に進みます
Pzカード設定

まず、「配置」タブから「余白」の高さを空白にします。こうすることで文字切れを防げるらしいです。
(引用元:個人ビジネス部
ブログカードの高さを空白にする
デフォルトだと多分108pxになってると思うので、これを空白にしてあげます。

変更したら「変更を保存」ボタンを忘れずに押して帰ります。

後はリンクカード設定のタブを片っ端から見ていって、自分の好みに仕上げていきます。
変更した部分を順番に書いていくと、

「配置」タブ
・上の余白を両方とも「4px」に
・幅を「600px」に
「表示」タブ
・サイト情報を「下側」に
・リンク先URLの表示を「なし」に
・角を丸める「4px」
・続きを読むボタン→シンプルなボタン

サムネイルが見切れる問題

サムネイル画像によっては、こんな風に全体が表示されない場合があります。
サムネイルが見切れている
ブラウザの開発者モードで調べたところ、サムネイル用の150px×150pxの画像を読み込んでいることが分かりました。

wordpressの仕様上、画像をアップロードした際に3つのサイズでそれぞれアップされる仕組みになってるんですよね。
今回はサムネイルのサイズ(最も小さいサイズ)の画像が自動的に選択されていることがわかりました。
この画像が見切れた状態で保存されてるので、リンクカード側の設定をどれだけいじっても無駄ですよね。

LION MEDIAの記事タイトル部分の画像サイズは730×410pxですから、150×150pxとでは縦横比が異なり、どうしてもトリミング(切り取り)される部分が発生します。
それが今回の原因と思われます。

今後の対応としては、画像をアップした際に勝手にトリミングされないようにサムネイルのサイズを指定しておきました。

設定→メディア→サムネイルのサイズ
幅:200
高さ:112
にしました。これで今後の画像は大丈夫かな?と思いたいです。

さて問題は今までアップしてきた画像。これを一つ一つアップロードし直すのはあまりにもナンセンスなのでプラグインを使ってみます。
「Regenerate Thumbnails」というプラグインです。

wordpressダッシュボードから、「プラグイン」→検索窓に「Regenerate Thumbnails」と入力し、出てきたこの御方をインストール&有効化します。
Regenerate Thumbnailsのインストール

有効化まで完了したら、「ツール」→「Regenerate Thumbnails」で設定画面へ。
(僕の場合は「EWWW Image Optimizerを無効化しといた方がいいよ!」みたいな注意が出てきたのでEWWWはとりあえず無効化しときました。)

で、後は「Regenerate Thumnails For All ○○ Attachments」というボタンをクリックするだけです。
画像の数にもよりますが、まあ早いですよ。

サムネイル画像を確認したら、ばっちり元画像が純粋に縮小された画像になってました!

ついでに追加CSSをちょろっと。

.lkc-info{
text-align:right;
}
.lkc-thumbnail{
padding-top:10px
}

で、現在はこんな感じのブログカードになっています。


まあ、あんまり変わってませんけどねw
気分的な問題ということで。

ブログはつらいよカテゴリの最新記事