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

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

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

変更前の個別記事ページはこんな感じでした。

本文が始まるまでがデカすぎ長すぎィ！
ファーストビューに本文が1行半しか含まれていません。
いらない！このスペースいらない！

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

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

タイトルの高さを変更

まずはここの高さ。

ここはもっと狭くしてもよさそうです。
どこをいじればいいんだ？ってことでまずは調査です。

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

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

こんな風に。

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

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

次は右画面の「Styles」タブから「.singleTitle」を探します。

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

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

wordpressの管理画面から「外観」→「テーマエディター」で「style.css」を選んで下さい。子テーマを使っている人はできるだけ子テーマに追記するカタチでお願いします。

ありました。ここの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シェアボタンがひっつきすぎてしまうからです。

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

うん、本文がファーストビューの真ん中ちょい下くらいから始まるようになりました！
もう少し切り詰めてもいいかもしれませんね。
とりあえずはこれで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;
}

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

もう一つ気になったのが、リンクを設定した時のブログカードがあまりにも大きすぎるという問題。

赤枠で囲った部分がブログカードです。
まるまる１ページ分あります。主張しすぎだろ…。

というわけでカスタマイズです。これは内部設定をいじるよりプラグインで解決した方が早そうです。
僕はPz-LinkCardというプラグインを使いました。

これなら記事の中に自然にリンクを挿入できそうです。
使い方も簡単で、本文中に↓のショートコードを挿入するだけです。

※テキストで↑を打つと管理画面でP’zLinkCardがエラー吐きやがるので画像で失礼します…。

細かい見た目はまあそのうちに。

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

Pz-LinkCardのカスタマイズ

ブログカードが大きすぎる問題は解決したのですが、肝心のブログカードのデザインがすこーし物足りない。

とりあえず、プラグインの設定からいじっていきます。

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

まず、「配置」タブから「余白」の高さを空白にします。こうすることで文字切れを防げるらしいです。
（引用元：個人ビジネス部）

デフォルトだと多分108pxになってると思うので、これを空白にしてあげます。

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

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

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

サムネイル画像によっては、こんな風に全体が表示されない場合があります。

ブラウザの開発者モードで調べたところ、サムネイル用の150px×150pxの画像を読み込んでいることが分かりました。

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

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

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

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

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

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

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

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

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

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

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

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

その例え話、本当に必要ですか？一度考え直してみよう

おはようございます、僕です。僕は例え話をするのが苦手で、このブログでも現在ほとんど使っていません。もうちょっと例え話を考える訓練をしないとなあと思ってる今日この頃です。しかしながら、他のブログを読んでいると、例え話が本題よりも長くてイライラすることがたまにあるので書いてみました。例え話は伝わりにくい内容の時だけにしません？無駄な例え話は離脱の原因になる読者が検索からあなたのブログに訪問してきた場合、何か悩みを抱えてて、一秒でも早い解決法が知りたいわけですよね。そこに冗長な例え話を入れられても...

すちょろぐ

Follow me!