転職に役立つWordPress
みなさんこんにちはこんばんは雨崎です。
昨今は転職の選択肢を広げるために様々なスキルを身につけることが重要視されています。
雨崎
その中でも人気となっているのがWordPress。
転職を考え、色々な仕事を探してみた時期があったのですが、
「WordPressの使用経験がある方、大歓迎！」といった文章をちょくちょく見かけることがあります。
いまやWordPressは様々な仕事に根付いており、専門的なホームページ作成のお仕事だけでなく、
「ライティング」や、「簡易な記事更新が業務に含まれているお仕事」の応募要項でも、WordPressの使用経験が条件となる場合があったりします。
雨崎
時代はWordPressなのか
もちろん転職以外でも、WordPressのスキルは役立ちますのでぜひぜひご覧ください。
というわけで今回は、WordPressのプロフィール欄に背景を設定するCSSを掲載しておきます。
変更前のプロフィール
変更後のプロフィール
雨崎
ええ感じや
プロフィールを背景付きボックスにするCSSコード
設定方法は簡単。
「外観 ＞ カスタマイズ ＞ 追加CSS」に以下のコードをコピーして貼り付けするだけ。
途中の「画像.png」のみ、背景に設定したい画像のURLに差し替えてください。
/* プロフィール背景カスタム＝＝＝ここから↓↓ */
.nwa .author-box {
text-align: center;
max-width: 100%;
}
.sidebar .author-box {
border: none;
border-radius: 4px;
margin: 1em 0;
line-height: 1.4;
position: relative;
padding: 1.4% 2% 1.8%;
}
.nwa .author-box .author-thumb {
float: none;
width: 100%;
margin: 9px auto 0;
background: url(画像.png) center no-repeat;
background-size: cover;
height: 0;
padding-top: calc(100%*392/700);
position: relative;
}
.sidebar .author-thumb img {
border: 3px solid #fff;
width: 30%;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
bottom: -25%;
}
.nwa .author-box .author-content {
margin-top: 16%;
font-size: 0.9em;
}
.author-name {
font-size: 1.1em;
font-weight: bold;
margin-bottom: 10px;
}
.author-box .author-name a {
text-decoration: none;
color: #333;
}
.author-box p {
margin-top: 0.3em;
line-height: 1.6;
}
.author-box p a {
text-decoration: none;
color: #008cee;
}
.author-box p a:hover {
text-decoration: underline;
color: #008cee;
}
.author-box .sns-follow-buttons a.follow-button {
font-size: 20px;
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
margin-bottom: 4px;
margin-right: 8px;
background: none;
color: #fff;
}
.author-box a.follow-button span {
line-height: 40px;
}
.author-box a.follow-button span::before {
font-size: 22px;
}
font-family: FontAwesome;
content: "\f099"
}
.author-box .icon-facebook-logo::before {
font-family: FontAwesome;
content: "\f09a";
}
.author-box .icon-instagram-new::before {
font-family: FontAwesome;
content: "\f16d";
}
.author-box .icon-hatebu-logo::before {
font-family: Verdana;
content: 'B!';
font-weight: bold;
}
.author-box .icon-google-plus-logo::before {
font-family: FontAwesome;
content: "\f0d5";
}
.author-box .icon-youtube-logo::before {
font-family: FontAwesome;
content: "\f167";
}
.author-box .icon-pinterest-logo::before {
font-family: FontAwesome;
content: "\f231";
}
.author-box .icon-amazon-logo::before {
font-family: FontAwesome;
content: "\f270";
}
.author-box .icon-github-logo::before {
font-family: FontAwesome;
content: "\f09b";
}
.author-box .website-button { background-color: #47555c !important; }
.author-box .twitter-button { background-color: #1da1f2 !important; }
.author-box .facebook-button { background-color: #3b5998 !important; }
.author-box .hatebu-button { background-color: #2c6ebd !important; }
.author-box .google-plus-button { background-color: #dd4b39 !important; }
.author-box .instagram-button { background: #e1306c !important; }
.author-box .youtube-button { background-color: #ef1515 !important; }
.author-box .flickr-button { background-color: #0063dc !important; }
.author-box .pinterest-button { background-color: #bd081c !important; }
.author-box .line-button { background-color: #00c300 !important; }
.author-box .amazon-button { background-color: #ff9900 !important; }
.author-box .rakuten-room-button { background-color: #c42e7f !important; }
.author-box .github-button { background-color: #333 !important; }
.author-box .feedly-button { background-color: #2bb24c !important; }
.author-box .rss-button { background-color: #f26522 !important; }
.author-box .soundcloud-button { background-color: #ff7700 !important; }
雨崎
▼ドラッグしてる部分を、画像リンクに差し替えるだけ！
まとめ
「転職に役立つWordPress」シリーズ、今回は以上となります。
雨崎
転職に役立ちそうな気がしてきた
プロフィール欄を整えるだけでサイトがオシャレに見えるので、ぜひぜひやってみてください。
コメント