当初、はてなブログを使用していましたが、本格的にブログに取り組んでみようと思い、一念発起してwordpressを始めてみる事にしました。数あるテーマから有料の「JIN」を購入し、基本的には
WordPressテーマ「JIN」の設定マニュアル
WordPressテーマ「JIN」のカスタマイズ方法
に従って設定を行っていましたが、はてなブログでやっていたカスタマイズがそのまま使える部分もいくつかあったので、備忘録も兼ねてまとめました。
導入したプラグイン
プラグインとは、専門的な知識が無くても簡単にwordpressの機能を拡張するツールですが、当ブログでは主に以下のプラグインを導入しました。
<div class=”simple-box4″><p>・Pz-LinkCard</p></div>
Pz-LinkCard
他の記事あるいはサイトへリンクを貼った時に、はてなブログ風にブログカード形式で表示するプラグインです。「JIN」では同じサイト内の記事であれば、URLを貼り付けるだけでブログカード形式で表示されるものの、外部のサイト(記事)では残念ながら設定されていない為、外部サイトへのリンクでもブログカード風になるように導入しました。なお、設定はこのプラグインを作った方の
WordPressテーマ「JIN」の外部リンクとして「Pz-LinkCard」を使うときの設定のコツ
を参考にしました。
サイドバーのカスタマイズ
タイトル
サイトの背景が白地の為、サイドバーのタイトルが少し目立つように(わかりやすいように)タイトルの上下に青線を入れてアクセントをつけてみました。
サイドバーではウィジェットにHTMLを追加し、またコードを追加CSSに追加しました。
コードを表示する
サイドバーのタイトルとしたい場所に以下のコードを記載したHTMLを追加します。
<div class=”box1″>
タイトルを入力する
</div>
その後、追加のCSSに以下のコードを記載します。
.box1{
padding: 5px 12px;
margin: 1em 0;
color: #808080;/*文字色*/
border-top: solid 2px blue;
border-bottom: solid 2px blue;
}
.box1 p {
margin: 0;
padding: 0;
}
/******サイドバー上下2重線終わり******/
SNSのフォローボタン
プロフィールの下にSNSのフォローボタンを設置するのに、はてなブログで使用していたコードがほぼそのまま使用する事ができたので、そのコードをそのまま記載しました。
コードを表示する
まず、SNSのフォローボタンを表示したい場所に以下のHTMLを記載します。今回はtwitter、Instagram、youtube、amazonのフォローボタンを設置しました。
なお、赤文字は適宜ご自身のアカウント名などに変更して下さい。
また、今回アイコンフォントは
Font Awesome
を使いましたが、読み込み速度などを考慮すると JINオリジナルアイコンフォントを使用した方が良いようです。
<!–フォローボタン始まり–>
<ul class=”follow-btn-list”>
<!–ツイッター–>
<li class=”follow-btn-item”><a href=”https://twitter.com/intent/follow?screen_name=twitterのアカウント名” class=”twitter” target=”_blank” title=”twitterの名前をフォロー” rel=”nofollow noopener noreferrer”><i class=”fab fa-twitter”></i></a></li>
<!–インスタグラム–>
<li class=”follow-btn-item”><a href=”https://www.instagram.com/Instagramのアカウント名?ref=badge” class=”instagram” target=”_blank” title=”インスタグラムをフォロー” rel=”nofollow noopener noreferrer”><i class=”fab fa-instagram”></i></a></li>
<!–YouTube–>
<li class=”follow-btn-item”><a href=”https://www.youtube.com/channel/アカウント名?sub_confirmation=1″ class=”youtube” target=”_blank” title=”youtubeをフォロー” rel=”nofollow noopener noreferrer”><i class=”fab fa-youtube”></i></a></li>
<!–amazon–>
<li class=”follow-btn-item”><a href=”URL” class=”amazon” target=”_blank” title=”ほしいものリスト” rel=”nofollow noopener noreferrer”><i class=”fab fa-amazon”></i></a></li>
</ul>
<!–フォローボタン終わり–>
上記だけでは、アイコンフォントがそのまま縦並びに表示されるだけなので、以下のコードを追加のCSSに記載して体裁を整えます。
.follow-btn-list {
list-style: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 0 auto;
padding: 0 0 1em;
}
.follow-btn-item a {
display: inline-block;
text-align: center;
width: 40px;
height: 40px;
margin: .15em;
padding: .1em;
color: #fff;
font-size: 26px;
line-height: 40px;
border-radius: 20px;
box-sizing: border-box;
transition: .2s;
}
.follow-btn-item a:hover {
transform: translateY(-4px);
box-shadow: 1px 10px 8px -4px rgba(0,0,0,.2);
opacity: .8;
color: #fff;
}
/*** ツイッター ***/
.follow-btn-item .twitter {
background: #1da1f2;
}
/*** youtube ***/
.follow-btn-item .youtube {
background: #ff0000;
}
/*** amazon ***/
.follow-btn-item .amazon {
background: #000000;
}
/*** カテゴリ- ***/
.follow-btn-item .category {
background: #333;
}
/*** instagram ***/
.follow-btn-item .instagram {
background: linear-gradient(125deg, #427eff 0%, #f13f79 70%) no-repeat;
position: relative;
overflow: hidden;
}
.follow-btn-item .instagram::before {
content: “”;
position: absolute;
top: 20px;
left: -14px;
width: 53px;
height: 53px;
background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
}
.blogicon-instagram {
position: relative;
z-index: 1;
}
/*** instagramここまで ***/
.follow-btn-item i {
vertical-align: 7%;
}
/****** サイドバーＳＮＳボタン終わり ******/
カテゴリーBOX
カテゴリーが少しでも目立つようにアイコンフォントとカテゴリー名をBOＸにしました。
コードを表示する
まず、カテゴリーBOXを表示したい場所に以下のHTMLを記載します。横2つであればスマホでもきれいに2列で表示されますので、BOXの数は2の倍数になるようにした方が見栄えもいいかと思います。
赤文字のアイコンフォントについては、先程のフォローボタン同様に Font Awesome
を使っています。
<!–サイドバー記事カテゴリー始まり–>
<div class=”content-inner-follow-buttons” >
<a class=”category” href=”#”>
<i class=”fas fa-wrench”></i><span class=”inner-text”>準備中</span>
</a>
<a class=”category” href=”#”>
<i class=”fas fa-wrench”></i><span class=”inner-text”>準備中</span>
</a>
<a class=”category” href=”#”>
<i class=”fas fa-wrench”></i><span class=”inner-text”>準備中</span>
</a>
<a class=”category” href=”#”>
<i class=”fas fa-wrench”></i><span class=”inner-text”>準備中</span>
</a>
</div>
<!–カテゴリ終わり–>
上記だけでは、BOXにならずそのまま文字だけが表示されるだけなので、以下のコードを追加のCSSに記載して体裁を整えます。
.content-inner-follow-buttons{
width: 100%;
text-align: center;
margin-top:30px;
letter-spacing: -.30em;
}
.content-inner-follow-buttons .follow-title {
letter-spacing: normal;
width:100%;
color:#666;
}
.content-inner-follow-buttons a {
display: inline-block;
letter-spacing: normal;
position: relative;
width: 45%;
font-size: 18px;
text-align: center;
text-decoration: none;
padding:20px 0;
margin:3px;
overflow: hidden;
z-index:2;
}
.content-inner-follow-buttons a:hover {
color:#fff;
transition: all .3s;
}
.content-inner-follow-buttons a:after {
position:absolute;
content:”;
width:100%;
height:100%;
top:-100%;
left:0;
z-index:-1;
transition: 0.2s;
}
.content-inner-follow-buttons .inner-text {
font-size:16px;
padding-left:5px;
}
.content-inner-follow-buttons .category {
color: #0000ff;
border: 1px solid #0000ff;
background: #ffffff;
}
.content-inner-follow-buttons .category:hover:after {
top:0;
background:#0000ff;
}
/******サイドバー記事カテゴリ終わり ******/
画像を拡大するカスタマイズ
当サイトの記事では写真は勿論、グラフや表なども使用予定ですので少しでも見やすいようにとマウスオーバーした時に画像が拡大できれば、、、と思い以下のコードを追加CSSに追加しました。
コードを表示する
.entry-content img {
max-width: 100%; box-shadow: 0 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.entry-content img:hover {
box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.2);
-webkit-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: all 0.3s; transition: all 0.3s;
}
/******画像を拡大する終わり******/
なお、コード内の
webkit-transform: scale(1.05);
transform: scale(1.05);
の赤文字が拡大率になっていて、ひとまず1.05としました。
コードについては、全くの素人なので表示速度やSEO？対策などを考慮すると良くないものもあるのかもしれませんが、皆さんの参考になれば幸いです。
