【WordPress】テーマ「スワロー」をカスタマイズしてみた【ラインマーカー他】

読了時間: 約947
注意
もしコードが表示されない時は、一度ブラウザを「更新」して下さい

スワロー

早い物でブログ始めて丸2ヶ月が過ぎました。何せ右も左も分からない状態で始めたので(最初はみんなそうでしょうが)【WordPress】の存在すら知らなっかたぐらいですから笑

現在使用しているテーマーは「OPENCAGE」のSWALLOW(スワロー)です。

SWALLOWはシンプルな見た目と洗練された機能美が光るWordPressテーマです。プロブロガー八木仁平監修のもと、OPENCAGEが開発したWordPressテーマ。「必要なものとは何か」を考え尽くして、無駄な機能やデザインを削ぎ落とした洗練されたWordPressテーマです。

※OPENCAGEホームページより抜粋 5月の初めにネットで調べて良さそうだったので購入しました。

画像 画像

サポートもキッチリ対応してくれますし、今の所殆ど不満は無いです。初心者の私でも使いこなせますから。

しかし…この無駄な機能やデザインを削ぎ落としたのが【SWALLOW】の売りであるのは百も承知なんですが、少し慣れてくるとあちこちもう少し変えてみたいと言う欲求にかられました。


最近この本も購入して現在勉強中です。 (亀のようなスピードですが笑)

諸先輩の方々曰く「プラグインを使用しなくても『CSS』で編集出来るならそれに越したことはない」と言う意見をいくつか見受けたからでもあります。

となるとやっぱり「CSS・HTML」の勉強は避けて通ることは出来ないのだろうなーと考える様になりました。尚レンタルサーバーは「ロリポップ・ライトプラン」で運用しています。同じ様な環境の方の参考に少しでもなればと思います。 WAF設定 

注意

「CSS編集」の際はログイン→セキュリティ→WAF設定→ドメインを「無効にする」をタップして下さい。 終了したら元の「有効」に戻しましょう。

試行錯誤

「OPENCAGE」のホームページから抽出しました。

コード
.entry-content h2{
position: relative;
border: none;
font-size:1.25em;
padding: 1em 1.1em;
margin-top: 2.1em;
margin-bottom: 1em;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #e55937;
color:#fff;
box-shadow: 0 0 45px rgba(0, 0, 0, 0.25) inset;
}

/* 下記がステッチ風のドットライン */
.entry-content h2:before,
.entry-content h2:after{
content:'';
display:block;
width:100%;
position:absolute;
border-top:1px dashed;
}
.entry-content h2:before{
top:3px;
left:0;
}
.entry-content h2:after{
bottom:3px;
left:0;
}
このコードを基に本と睨めっこしながら試行錯誤の連続笑 おかげでだんだんとポイントが分かって来ました。色の設定についてはこちらを参考にして色々変えて見ました。


影の設定については今回一番重要視したので、忘備録も兼ねて記述しておきます。 CSSコード2

CSSコード5選

①画像に影を付ける

「CSS編集」を開き下の様にコードを追加します。 コードを追加

貼り付ける場所です。

追加CSSに貼り付け

コード
/* 画像に影を付ける */
.b-shadow{
box-shadow:5px 5px 10px #D9073D;
}
出力は以下の様になります。

<div class="b-shadow"><img src="xxxxx" /></div>

<img src=xxxxx>””の中に画像のアドレスを挿入します。
画像

写真に影が無事付きました。

②見出し2の角を丸くする

見出し2テスト画像

この「見出し2」を見ての通りにします。これは「OPENCAGE」のホームページを見てコードが出ていたのでそのまま『追加CSS』で貼り付けようと思ったのですが、スワロー用ではなかったので躊躇しました。
で、サポートにメールで問い合わせをしました。

注意
カスタマイズに関する事は本来ならサポート外です
せっかく【スワロー】という良質のテーマを使用しているにも関わらず、テーマに反することをやっている様でサポートの方もあまり気分良くなかったでしょう。

しかし親切にも返事はすぐ返って来ました。m(_ _)m
これが以下のコードになります。
コード
/* 見出し2の角を丸くする */
#container .entry-content h2 {
   border-radius: 10px;
}
これは【スワロー】の『追加CSS』編集に貼り付けることによって出来ますが、他のテーマだと異なるかもしれません。ご注意ください。

③見出し2に影を付ける

ここまで分かれば、いくら初心者の私と言えど、自分でコードを書けました。
コード
/* 見出し2に影を付ける */
#container .entry-content h2{
background-color: #2e8b57;
box-shadow: 3px 7px 7px #696969;
}
メニュー追加
最終的にこの画面のメニューに追加して選択出来る様にするのが目的です。

④Apple Keyboard風

これはこちらの方のブログを参考にさせていただきました。

コード
/* keyboard
--------------------------------------------------- */
.keyboard {
	height: 41px;
	min-width: 24px;
	padding: 0 10px;
	margin: 5px 10px;
	background: #EFF0F2;
	border-radius: 4px;
	border-top: 1px solid #F5F5F5;
	box-shadow: 0 0 25px #E8E8E8 inset, 0 1px 0 #C3C3C3, 0 2px 0 #C9C9C9, 0 2px 3px #333333;
	color: #AAAAAA;
	text-shadow: 0 1px 0 #F5F5F5;
	font: bold 14px arial;
	text-align: center;
	line-height: 41px;
	display: inline-block;
}
.keyboard-dark {
	height: 41px;
	min-width: 24px;
	padding: 0 10px;
	margin: 5px 10px;
	background: #222222;
	border-radius: 4px;
	border-top: 1px solid #222222;
	box-shadow: 0 0 25px #333333 inset, 0 1px 0 #000000, 0 2px 0 #222222, 0 2px 3px #333333;
	color: #AAAAAA;
	text-shadow: 0 -1px 0 #000000;
	font: bold 14px arial;
	text-align: center;
	line-height: 41px;
	display: inline-block;
}
Lite風の出力は以下の様になります。

<span class="keyboard"> mac-key</span>

Dark風の出力は以下の様になります。

<span class="keyboard-dark"> mac-key</span>

Lite風は ⌘command+NDark風は⌘command+Nこう言う風になります。

参考
テーマ「Cocoon」にもある程度同じ機能が、最初から備わっています。こちらを参考にして下さい。

『拡張スタイル』➡️『インライン』➡️『キーボードーキー』

⑤ラインマーカー

以前の記事で紹介させて頂いた方のブログから抜粋しました。こちらの記事も合わせてどうぞ
『ラインマーカー作成が出来ない』のは【ロリポップ!】の「セキュリティー設定」が原因だった!

コード
/*金色のマーカー*/
.marker_Gold{
background: linear-gradient(transparent 70%,gold 70%)
}
#container .header{background: -webkit-linear-gradient(129deg, rgb(116, 114, 153), rgb(204, 238, 205));
background: linear-gradient(129deg, rgb(116, 114, 153), rgb(204, 238, 205));}
/*赤色のマーカー*/
.marker_Red{
background: linear-gradient(transparent 70%,red 70%)
}
/*黄色のマーカー*/
.marker_Yellow{
background: linear-gradient(transparent 70%,Yellow 70%)
}
/*青色のマーカー*/
.marker_Blue{
background: linear-gradient(transparent 70%,blue 70%)
}

/*水色のマーカー*/
.marker_Skyblue{
background: linear-gradient(transparent 70%,skyblue 70%)
}
呼び出しはプラグインの「AddQuicktag」を使用します。
AddQuicktag
【WordPress】
➡️ダッシュボード
➡️プラグイン
➡️新規追加
➡️「AddQuicktag」で検索

AddQuicktagインストール画面

インストール後「有効」をタップします。

AddQuicktagの選択画面

①「設定」アイコンタップ
②「AddQuicktag」をタップすると設定画面が出てくるので、次のように入力します

AddQuicktag設定画面

設定
① ボタン名    ➡️ラインマーカー:黃(お好きな名称で)
② ダッシュアイコン➡️お好きなアイコンを選べます
③ ラベル名    ➡️お好きな名称もしくは無記入でも可
開始タグ
<span class="marker_Yellow">
終了タグ
</span>

アイコン選択画面
用途に合わせて、アイコンをお選びください。

注意
色を指定する場合最初は必ず大文字です。黄色➡️Yellowという風に

入力を済ませたら、「一番右のチェックボックス」をタップして完了です。

チェックを入れた画面
ラインマーカーで緑色を引きました
ラインマーカーで青色を引きました
ラインマーカーで黄色を引きました
ラインマーカーで赤色を引きました

こういう感じになります。

まとめ

「CSS 編集」で検索すればいっぱい出てきますが、総じて皆さんコピペOKというスタンスを取っていますね。これはお互い「情報」は共有しましょう、「コンテンツ」で競い合いましょうという解釈と私は捉えています。

私も本を開くまではCSS やらHTMLって聞くだけで、すごく難解な代物だと言う先入観がありました。しかし今は本当に少しづつですが、内容が理解できる様になりつつあります。

要するに「正しい文法(CSS)でコードを書き、(HTML)で出力してあげる」
この基本を大事にすれば良いわけですね。しかし、プラグインをなるべく使わないようにするためにCSSの本を買って勉強しているのに、結局プラグインを使っていることに対して小一時間…(`・ω・´)

以上、お読みいただきありがとうございました。こちらの記事も合わせてどうぞ
アイキャッチ画像【WordPress】テーマ「スワロー」のカスタマイズ BOXの追加方法
画像

画像