こんばんにちは、ミニマパッカーの吉永です
ずっと、このブログの見た目もっとシンプルに変えたいな～と思っていのですが、いかんせんいいのがなくて
海外製はよくわからない、日本製は有名どころを使っていると人とかぶるし
そして、ちょっと見た目がごちゃごちゃしてる感じのものが多くて、なかなか探せませんでした
しかし、ふらふらとさまよっているとズキューンをくるテーマを発見
その名も「Minimal」！
今日は着替え記念にこちらのテーマをご紹介したいと思います！
こっちのブログで使用中
ミニマリスト向け日本語ワードプレステーマMinimal
ミニマリスト向けとだけあって、シンプル！
こちらを作成された方のブログもこのシリーズを使われているのですが、きれいなのでなにかとうろうろとブログ内を徘徊してしまいます
メリット
- 日本語記事でもきれい！
- シンプル！
- ワンカラム・2カラム・2カラムその２の3種類から選べる
- 内部SEO済み
デメリット
- 自分の管理画面からカスタマイズできない
- 有料(条件付き無料)
- 今までただ貼り付けていた動画は自動でレスポンシブにならない
とっても素敵なんですけど、テーマのパフォーマンスを最大に引き上げるために、管理画面から好きなようにカスタマイズができません
知識が必要です
何か希望があれば、作者様が対応してくれるようですが、
ここが大きなデメリットです
一個買えば3種類ついてくるのですが、どれにしようかいろいろやってみたくても、その都度、メールでカスタマイズをお願いするのも気が引けます
ネット検索してもこのテーマ特化のカスタマイズ（コピペOKとか）とかの情報はまださっぱりないので、コツコツ自分で頑張るしかなそう
なので、初心者向けではないですね
私も初心者ですけど、なによりやっぱり見た目が好きだから頑張るしかない（笑）
でも見た目が好き！！
でもでも、見た目がとっても好きで、なんとか作者様にわがままを言って自分好みにカスタマイズしつつ使っていきたいと思います！
▼テーマはこちら
ミニマリスト向けのWordPressテーマ『Minimal』を作りました
【忘備録】Minimalのカスタマイズ
< >
minimalは管理画面からカスタマイズが制限されているので、サーバーにアクセスして直接変更します
そのために必要なものは、ffftpとatom
ffftpでレンタルサーバーに接続→minimalをPC上にコピー→PC上でatomを使ってカスタマイズ→ffftpでサーバーにアップロード
【記事上の日付表記変更】
デフォルトだと公開日ですが、それを公開日と更新日の両方の表記に変更
meta.php内をまるごとこちらに書きかけ、まるごとコピペ。
<p class="meta">
<?php if ( $mtime = get_mtime('Y/m/d') ) { ?>
<time itemprop="datePublished"><?php the_time('Y/m/d'); ?></time>
<time itemprop="dateModified">
(更新日 : <?php echo $mtime; ?>)
</time>
<?php } else { ?>
<time itemprop="datePublished"><?php the_time('Y/m/d'); ?></time>
<?php } ?>
</p>
【画像の幅】
スタイルシートはcssフォルダ内のスタイルシートを変更すること。
マナブログ風チェックマークと太文字をブロックエディタで表現
二行になってもチャックマークが一行目に固定されるようにカスタマイズ
記事内には <p><span class=”check”>この記事の内容</span></p>
スタイルシートに以下
.check {display: block;position: relative;line-height: 1.4;background: #ffffff;border: 0px solid #acf;padding: 0em 1em 0em 1.0em;font-size: 1.3em;font-weight: 600;}.check:after {content: ” “;display: block;width: 0;height: 50%;position: absolute;top: 25%;left: 3.4em;opacity: 0.6;border-right: 0px dashed;border-right-color: #76b3f7;
}.check:before {font-weight: 900;font-size: 0.6em;font-family: “Font Awesome 5 Free”, “Font Awesome 5 Brands”, “Helvetica Neue”, Helvetica, Arial, sans-serif;content: “\f00c”;color: #6C9FCE;display: inline-block;position: absolute;top: 1em;left: 0em;transform: translateY(-50%) scale(1.5);
}
クイックアドのそのまま使用することにしたので削除
Twitterなどにリンクを貼ると画像が出てくるOGP・Twitterカード設定・プラグインなし
参考：サルワカさん 【WordPress】OGPとTwitterカードをプラグイン無しで設定する方法
グレーボックス
グレー背景のボックスの作り方
オリジナルの使い方がわからず断念
あたらに作成（デザインはmanablog参考）
<div class=”gbox”>文字<div>
スタイルシートに
/* グレーbox */
.gbox{
font-size: 16px;
padding: 20px;
background-color: #fafafa;
outline: 1px solid #f0f0f0;
border-color: #f0f0f0;
text-align: left;
margin: 40px;
margin-bottom: 60px;
margin-top: 15px;
}
@media only screen and (max-width: 479px)
{
.gbox {
margin: 15px;
margin-bottom: 60px;
}
}
＜div class=”pre”＞文字＜/div＞で囲む。鍵かっこは小文字
minimalのスタイルシートにはこんな感じのデザイン
.single pre {font-size: 17px;background-color: #fafafa;padding: 40px 25px;color: #5a5a5a;font-weight: 500;line-height: 1.5;outline: 1px solid #f0f0f0;border-color: #f0f0f0; }@media only screen and (max-width: 479px) {.single pre {font-size: 15px;padding: 20px 15px; } }.single pre[class*=”language-“] {margin-left: 40px;margin-right: 40px;margin-bottom: 40px; }
CSSが反映されない時の特定の場所だけのキャッシュ削除方法
キャッシュを消したいページで右クリックで検証（デベロッパツール開く）
開いた状態で、ブラウザの更新ボタンを右クリック
キャッシュの削除とハードの再読み込みを選択
少し時間かかるが終わり
参考≫ChromeでCSSが反映されない？キャッシュ消去で対処
minimalで右側にアイコンがある会話風吹き出し（なるべく元の指定を使って）
テーマについてくるクイックadの中の会話風タグをそのまま右側吹き出しも作る方法
これがもともとのまなぶさん作吹き出し。かっこは半角へ変更
＜div class=”talk clearfix”＞
＜div class=”col-md-3 col-xs-3 img”＞＜img class=”img-responsive img-circle” src=”https://nige.suppinblog.com/wp-content/uploads/2021/02/pessimist-1.jpeg” alt=”悩む人”＞＜/div＞
＜div class=”col-md-9 col-xs-9 text”＞
ここに
＜/div＞
＜/div＞
右から吹き出しに「fuki-right-img」と「fuki-left-img」これを入れる
＜div class=”talk clearfix”＞
＜div class=”col-md-3 col-xs-3 fuki-right-img img”＞＜img class=”img-responsive img-circle” src=”https://nige.suppinblog.com/wp-content/uploads/2021/02/pessimist-1.jpeg” alt=”悩む人”＞＜/div＞
＜div class=”col-md-9 col-xs-9 fuki-left-text text”＞
ここに
＜/div＞
＜/div＞
で、スタイルシート（CSSフォルダ内一番下）に
.fuki-right-img {
float: right;
}
.fuki-left-text {
float: left;
}
を追加。
コメント