3カラムの無料テーマ「Delivery Lite」を使ってみた。

最近、Simplicityにも少し飽きてきたので、テーマを変更することにしました。

というか、2週間に1回はテーマを変更しているような気がします。
飽きっぽいので・・・

今回は3カラムの無料テーマ「Delivery Lite」を使用することにしました。
⇒ https://www.theme-junkie.com/themes/delivery-lite/

これです。

一目見てカッコいいかもと思い試してみることにしました。

そう簡単な気持ちで・・・

screenshot_20160313_012812

Delivery Liteはダウンロードから苦戦の連続で、まだ初心者に毛が生えた程度の私だと、今の見た目にするまでに2日程かかりました。(WordPress歴 約4か月)

本当に大変でした(苦笑

なので、Delivery Liteで検索してこの記事を見てくれた初心者さんの少しでも役にたてばと思い書くことにしました。

「Delivery Liteのダウンロードの仕方」

基本的に有料テーマのサイトなので無料で使用する場合はアカウント登録が必要でした。

右上部にある「MY Account」から登録します(メールアドレスなど簡単なものです)

screenshot_20160313_013802

登録が終わったら再度「MY Account」をクリックすると下記の画面が開きますので「青枠の部分で囲んだテーマ」と「赤枠で囲んだプラグイン」をダウンロードします。

screenshot_20160313_014022

ダウンロードしたファイルはFTPかWordPressからインストールして下さい。

WordPressだと外観>テーマ>上部にある新規追加>テーマのアップロードでダウンロードした「Delivery Lite Theme」を選択。

私の場合、プラグインは下記の3つだけインストールしました(赤枠部分)
「TJ Shortcodes Plugin」←CSS編集でこれは必須(初心者はです)
「Scroll Top Plugin」←スクロールトップは一応インストール
「Advanced Random Posts Widget Plugin」←3カラムにすると寂しくなりそうなのでランダムポストのプラグインもインストール

文字にすると、たったこれだけですがここまでに数時間です。

ここからはツッコミどころ満載ですが、よかったらやってみて下さい。

下記は「Delivery Lite」をインストールしてウィジェットである程度の形を整えた状態です。
※このために使っていないドメインでテストサイトを作成しました

「枠線を消す」

screenshot_20160313_231245

私はこの枠線があると圧迫されている気がするので、いつも消すのですが今回は苦戦しました。
「枠線を消す CSS」など検索でヒットするものを順番に試していったのですが、どれもダメでした。
テーマの編集をみると「Style.css」の他に「Style.min.css」なるものがあります。
コレです⤵
screenshot_20160313_205308

開いてみると、こんな感じです⤵

screenshot_20160313_205705

子テーマ作ろうにもドッチ?状態なので、そのまま編集してしまうことにしました。

まず線の色をchromeの「colorpick-eyedropper」で調べると「#E9E9E9」ということを確認。

screenshot_20160313_210409

外観>テーマの編集>Style.min.cssを開いて「ctrl+f」で検索窓を開いたら「1px solid #e9e9e9」に関係するものを全て削除します。例えば「border-bottom:1px solid #e9e9e9」「border:1px solid #e9e9e9」などです。

screenshot_20160313_210821

よく分からないので全部削除するとサッパリしました。

「タイトル間の間延びを直す」

次にタイトルの間(test1~test2)が間延びしているように感じるので直します。
子テーマの代わりにインストールしたプラグイン「TJ Custom CSS」のおかげでカスタマイズを開くと「Custom CSS」ができていますので下記のCSSを書き込みます。

screenshot_20160313_230202

.hentry {
margin-bottom: 30px;
margin-bottom: 0.307692rem;
padding-bottom: 30px;
padding-bottom: 0.307692rem;
border-bottom: 1px solid #F8F8F8;
}

後日、やっぱり3カラムは本文の部分を広げても読みにくい・・・=訪問別ページビューが下がったので止めました。クリック率は上がったけどね・・・

相当苦労したのに・・・

スポンサーリンク