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"]
というショートコードを挿入するだけ。
細かい見た目はまあそのうちに。

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

ブログ運営カテゴリの最新記事