티스토리, 특정 글자를 이모티콘처럼 바꿔 개성있는 블로그로 변신해보자

티스토리, 특정 글자를 이모티콘처럼 바꿔 개성있는 블로그로 변신해보자



우선, ^^

도움을 주신 땀똔님, 나눔을 실천해주신 청춘일기정말, 정말 감사드립니다.




글 제목과 같이 티스토리 블로그특정 글자를 개성있는 글꼴로 이모티콘처럼 변경하는 방법을 소개합니다.



1. 땀똔님이 공유해 주신, 특정 글꼴을 치환하는 방법  (살짝? 수정  ^; )

  

<script type="text/javascript">

var ch_font = document.getElementById("tistory-comment");

ch_font.innerHTML=ch_font.innerHTML.replace(/ㅋ/gm,'<span></span>');

ch_font.innerHTML=ch_font.innerHTML.replace(/ㅎ/gm,'<span></span>');

ch_font.innerHTML=ch_font.innerHTML.replace(/@@/gm,'<span>&#128280; &#128280;</span>');

ch_font.innerHTML=ch_font.innerHTML.replace(/@.@/gm,'<span>&#128280; . &#128280;</span>');

</script>


("tistory-comment")는 티스토리 댓글,  전체를 변경하기 위해 지정.

 정규식 표현 옵션 /gm

 /g 전체 적용, /m 여러줄 적용,  여기에서 사용하지 않은 /i 대소문자 구분하지 않음(티스토리 치환자와 충돌로 사용불가)

 &#128280;는 @를 🔘 다르게 표현하는 특수문자, 다른 것으로 수정이 가능하다.


이렇게 말이죠

ㅋㅋ ㅎㅎ @@ @.@  ㅠㅠ ㅠ_ㅠ ^^ ^; ^_^ ^__^

}}} ::: TV PIN XX MSG EYE CHK !!! 1818 b: q: QQ ''' 100. ZZ ## LOV


 

 

 2. 청춘일기님께서 나눔해주신 "Nanum Barun Gothic.ttf" 폰트를 수정하는 방법


http://130.pe.kr/351방문하면 자세하게 설명이 되어 있어 여기서의 설명은 생략하고 그림으로 대체한다

저의 블로그 아이콘처럼 입꼬리가 올라가는 모양, 정말 맘에 듭니다. 다시 한번 감사드려요 ^_^ 



참고로 라이브리(LiveRe)를 사용하시는 분은 반드시 수동으로 설치를 하셔야 합니다. ^;

티스토리에서 제공하는 플러그인으로 자동설치 하시면 치환시 <span>으로 인해 오류가 생겼다 멀쩡하다 합니다.

그리고 저의 경우, 글 본문에는 적용하지 않았습니다. 이유...? 본문만큼은 깨끗하게...  ^;


# 특수문자 - 더보기 (복사만 하려면 보기)




정말 귀찮고 어디서도 이모지 폰트를 사용하고 싶다면 ?

관련 글 - 티스토리, 블로그에 이모티콘 쉽게 입력하는 방법을 알아보자



아래는 그냥 복사해서 사용해도 됩니다.


😁 😁 😂 😂 😃 😃 😄 😄 😅 😅 😆 😆 😇 😇 😈 😈 😉 😉 😊 😊 😋 😋 😌 😌 😍 😍 😎 😎 😏 😏 😐 😐 😑 😑 😒 😒 😓 😓 😔 😔 😕 😕 😖 😖 😗 😗 😘 😘 😙 😙 😚 😚 😛 😛 😜 😜 😝 😝 😞 😞 😟 😟 😠 😠 😡 😡 😢 😢 😣 😣 😤 😤 😥 😥 😦 😦 😧 😧 😨 😨 😩 😩 😪 😪 😫 😫 😬 😬 😭 😭 😮 😮 😯 😯 😰 😰 😱 😱 😲 😲 😳 😳 😴 😴 😵 😵 😶 😶 😷 😷 😸 😸 😹 😹 😺 😺 😻 😻 😼 😼 😽 😽 😾 😾 😿 😿 🙀 🙀 🙁 🙁 🙂 🙂 🙃 🙃 🙄 🙄 🙅 🙅 🙆 🙆 🙇 🙇 🙈 🙈 🙉 🙉 🙊 🙊 🙋 🙋 🙌 🙌 🙍 🙍 🙎 🙎 

✀ ✀ ✁ ✁ ✂ ✂ ✃ ✃ ✄ ✄ ✅ ✅ ✆ ✆ ✇ ✇ ✈ ✈ ✉ ✉ ✊ ✊ ✋ ✋ ✌ ✌ ✍ ✍ ✎ ✎ ✏ ✏ ✐ ✐ ✑ ✑ ✒ ✒ ✓ ✓ ✔ ✔ ✕ ✕ ✖ ✖ ✗ ✗ ✘ ✘ ✙ ✙ ✚ ✚ ✛ ✛ ✜ ✜ ✝ ✝ ✞ ✞ ✟ ✟ ✠ ✠ ✡ ✡ ✢ ✢ ✣ ✣ ✤ ✤ ✥ ✥ ✦ ✦ ✧ ✧ ✨ ✨ ✩ ✩ ✪ ✪ ✫ ✫ ✬ ✬ ✭ ✭ ✮ ✮ ✯ ✯ ✰ ✰ ✱ ✱ ✲ ✲ ✳ ✳ ✴ ✴ ✵ ✵ ✶ ✶ ✷ ✷ ✸ ✸ ✹ ✹ ✺ ✺ ✻ ✻ ✼ ✼ ✽ ✽ ✾ ✾ ✿ ✿ ❀ ❀ ❁ ❁ ❂ ❂ ❃ ❃ ❄ ❄ ❅ ❅ ❆ ❆ ❇ ❇ ❈ ❈ ❉ ❉ ❊ ❊ ❋ ❋ ❌ ❌ ❍ ❍ ❎ ❎ ❏ ❏ ❐ ❐ ❑ ❑ ❒ ❒ ❓ ❓ ❔ ❔ ❕ ❕ ❖ ❖ ❗ ❗ ❘ ❘ ❙ ❙ ❚ ❚ ❛ ❛ ❜ ❜ ❝ ❝ ❞ ❞ ❟ ❟ ❠ ❠ ❡ ❡ ❢ ❢ ❣ ❣ ❤ ❤ ❥ ❥ ❦ ❦ ❧ ❧ ❨ ❨ ❩ ❩ ❪ ❪ ❫ ❫ ❬ ❬ ❭ ❭ ❮ ❮ ❯ ❯ ❰ ❰ ❱ ❱ ❲ ❲ ❳ ❳ ❴ ❴ ❵ ❵ ❶ ❶ ❷ ❷ ❸ ❸ ❹ ❹ ❺ ❺ ❻ ❻ ❼ ❼ ❽ ❽ ❾ ❾ ❿ ❿ ➀ ➀ ➁ ➁ ➂ ➂ ➃ ➃ ➄ ➄ ➅ ➅ ➆ ➆ ➇ ➇ ➈ ➈ ➉ ➉ ➊ ➊ ➋ ➋ ➌ ➌ ➍ ➍ ➎ ➎ ➏ ➏ ➐ ➐ ➑ ➑ ➒ ➒ ➓ ➓ ➔ ➔ ➕ ➕ ➖ ➖ ➗ ➗ ➘ ➘ ➙ ➙ ➚ ➚ ➛ ➛ ➜ ➜ ➝ ➝ ➞ ➞ ➟ ➟ ➠ ➠ ➡ ➡ ➢ ➢ ➣ ➣ ➤ ➤ ➥ ➥ ➦ ➦ ➧ ➧ ➨ ➨ ➩ ➩ ➪ ➪ ➫ ➫ ➬ ➬ ➭ ➭ ➮ ➮ ➯ ➯ ➰ ➰ ➱ ➱ ➲ ➲ ➳ ➳ ➴ ➴ ➵ ➵ ➶ ➶ ➷ ➷ ➸ ➸ ➹ ➹ ➺ ➺ ➻ ➻ ➼ ➼ ➽ ➽ ➾ ➾ ➿ ➿ 🚀 🚀 🚁 🚁 🚂 🚂 🚃 🚃 🚄 🚄 🚅 🚅 🚆 🚆 🚇 🚇 🚈 🚈 🚉 🚉 🚊 🚊 🚋 🚋 🚌 🚌 🚍 🚍 🚎 🚎 🚏 🚏 🚐 🚐 🚑 🚑 🚒 🚒 🚓 🚓 🚔 🚔 🚕 🚕 🚖 🚖 🚗 🚗 🚘 🚘 🚙 🚙 🚚 🚚 🚛 🚛 🚜 🚜 🚝 🚝 🚞 🚞 🚟 🚟 🚠 🚠 🚡 🚡 🚢 🚢 🚣 🚣 🚤 🚤 🚥 🚥 🚦 🚦 🚧 🚧 🚨 🚨 🚩 🚩 🚪 🚪 🚫 🚫 🚬 🚬 🚭 🚭 🚮 🚮 🚯 🚯 🚰 🚰 🚱 🚱 🚲 🚲 🚳 🚳 🚴 🚴 🚵 🚵 🚶 🚶 🚷 🚷 🚸 🚸 🚹 🚹 🚺 🚺 🚻 🚻 🚼 🚼 🚽 🚽 🚾 🚾 🚿 🚿 🛀 🛀 🛁 🛁 🛂 🛂 🛃 🛃 🛄 🛄 


🌀 🌀 🌁 🌁 🌂 🌂 🌃 🌃 🌄 🌄 🌅 🌅 🌆 🌆 🌇 🌇 🌈 🌈 🌉 🌉 🌊 🌊 🌋 🌋 🌌 🌌 🌍 🌍 🌎 🌎 🌏 🌏 🌐 🌐 🌑 🌑 🌒 🌒 🌓 🌓 🌔 🌔 🌕 🌕 🌖 🌖 🌗 🌗 🌘 🌘 🌙 🌙 🌚 🌚 🌛 🌛 🌜 🌜 🌝 🌝 🌞 🌞 🌟 🌟 🌠 🌠 🌡 🌡 🌢 🌢 🌣 🌣 🌤 🌤 🌥 🌥 🌦 🌦 🌧 🌧 🌨 🌨 🌩 🌩 🌪 🌪 🌫 🌫 🌬 🌬 🌭 🌭 🌮 🌮 🌯 🌯 🌰 🌰 🌱 🌱 🌲 🌲 🌳 🌳 🌴 🌴 🌵 🌵 🌶 🌶 🌷 🌷 🌸 🌸 🌹 🌹 🌺 🌺 🌻 🌻 🌼 🌼 🌽 🌽 🌾 🌾 🌿 🌿 🍀 🍀 🍁 🍁 🍂 🍂 🍃 🍃 🍄 🍄 🍅 🍅 🍆 🍆 🍇 🍇 🍈 🍈 🍉 🍉 🍊 🍊 🍋 🍋 🍌 🍌 🍍 🍍 🍎 🍎 🍏 🍏 🍐 🍐 🍑 🍑 🍒 🍒 🍓 🍓 🍔 🍔 🍕 🍕 🍖 🍖 🍗 🍗 🍘 🍘 🍙 🍙 🍚 🍚 🍛 🍛 🍜 🍜 🍝 🍝 🍞 🍞 🍟 🍟 🍠 🍠 🍡 🍡 🍢 🍢 🍣 🍣 🍤 🍤 🍥 🍥 🍦 🍦 🍧 🍧 🍨 🍨 🍩 🍩 🍪 🍪 🍫 🍫 🍬 🍬 🍭 🍭 🍮 🍮 🍯 🍯 🍰 🍰 🍱 🍱 🍲 🍲 🍳 🍳 🍴 🍴 🍵 🍵 🍶 🍶 🍷 🍷 🍸 🍸 🍹 🍹 🍺 🍺 🍻 🍻 🍼 🍼 🍽 🍽 🍾 🍾 🍿 🍿 🎀 🎀 🎁 🎁 🎂 🎂 🎃 🎃 🎄 🎄 🎅 🎅 🎆 🎆 🎇 🎇 🎈 🎈 🎉 🎉 🎊 🎊 🎋 🎋 🎌 🎌 🎍 🎍 🎎 🎎 🎏 🎏 🎐 🎐 🎑 🎑 🎒 🎒 🎓 🎓 🎔 🎔 🎕 🎕 🎖 🎖 🎗 🎗 🎘 🎘 🎙 🎙 🎚 🎚 🎛 🎛 🎜 🎜 🎝 🎝 🎞 🎞 🎟 🎟 🎠 🎠 🎡 🎡 🎢 🎢 🎣 🎣 🎤 🎤 🎥 🎥 🎦 🎦 🎧 🎧 🎨 🎨 🎩 🎩 🎪 🎪 🎫 🎫 🎬 🎬 🎭 🎭 🎮 🎮 🎯 🎯 🎰 🎰 🎱 🎱 🎲 🎲 🎳 🎳 🎴 🎴 🎵 🎵 🎶 🎶 🎷 🎷 🎸 🎸 🎹 🎹 🎺 🎺 🎻 🎻 🎼 🎼 🎽 🎽 🎾 🎾 🎿 🎿 🏀 🏀 🏁 🏁 🏂 🏂 🏃 🏃 🏄 🏄 🏅 🏅 🏆 🏆 🏇 🏇 🏈 🏈 🏉 🏉 🏊 🏊 🏋 🏋 🏌 🏌 🏍 🏍 🏎 🏎 🏏 🏏 🏐 🏐 🏑 🏑 🏒 🏒 🏓 🏓 🏔 🏔 🏕 🏕 🏖 🏖 🏗 🏗 🏘 🏘 🏙 🏙 🏚 🏚 🏛 🏛 🏜 🏜 🏝 🏝 🏞 🏞 🏟 🏟 🏠 🏠 🏡 🏡 🏢 🏢 🏣 🏣 🏤 🏤 🏥 🏥 🏦 🏦 🏧 🏧 🏨 🏨 🏩 🏩 🏪 🏪 🏫 🏫 🏬 🏬 🏭 🏭 🏮 🏮 🏯 🏯 🏰 🏰 🏱 🏱 🏲 🏲 🏳 🏳 🏴 🏴 🏵 🏵 🏶 🏶 🏷 🏷 🏸 🏸 🏹 🏹 🏺 🏺 🏻 🏻 🏼 🏼 🏽 🏽 🏾 🏾 🏿 🏿 🐀 🐀 🐁 🐁 🐂 🐂 🐃 🐃 🐄 🐄 🐅 🐅 🐆 🐆 🐇 🐇 🐈 🐈 🐉 🐉 🐊 🐊 🐋 🐋 🐌 🐌 🐍 🐍 🐎 🐎 🐏 🐏 🐐 🐐 🐑 🐑 🐒 🐒 🐓 🐓 🐔 🐔 🐕 🐕 🐖 🐖 🐗 🐗 🐘 🐘 🐙 🐙 🐚 🐚 🐛 🐛 🐜 🐜 🐝 🐝 🐞 🐞 🐟 🐟 🐠 🐠 🐡 🐡 🐢 🐢 🐣 🐣 🐤 🐤 🐥 🐥 🐦 🐦 🐧 🐧 🐨 🐨 🐩 🐩 🐪 🐪 🐫 🐫 🐬 🐬 🐭 🐭 🐮 🐮 🐯 🐯 🐰 🐰 🐱 🐱 🐲 🐲 🐳 🐳 🐴 🐴 🐵 🐵 🐶 🐶 🐷 🐷 🐸 🐸 🐹 🐹 🐺 🐺 🐻 🐻 🐼 🐼 🐽 🐽 🐾 🐾 🐿 🐿 👀 👀 👁 👁 👂 👂 👃 👃 👄 👄 👅 👅 👆 👆 👇 👇 👈 👈 👉 👉 👊 👊 👋 👋 👌 👌 👍 👍 👎 👎 👏 👏 👐 👐 👑 👑 👒 👒 👓 👓 👔 👔 👕 👕 👖 👖 👗 👗 👘 👘 👙 👙 👚 👚 👛 👛 👜 👜 👝 👝 👞 👞 👟 👟 👠 👠 👡 👡 👢 👢 👣 👣 👤 👤 👥 👥 👦 👦 👧 👧 👨 👨 👩 👩 👪 👪 👫 👫 👬 👬 👭 👭 👮 👮 👯 👯 👰 👰 👱 👱 👲 👲 👳 👳 👴 👴 👵 👵 👶 👶 👷 👷 👸 👸 👹 👹 👺 👺 👻 👻 👼 👼 👽 👽 👾 👾 👿 👿 💀 💀 💁 💁 💂 💂 💃 💃 💄 💄 💅 💅 💆 💆 💇 💇 💈 💈 💉 💉 💊 💊 💋 💋 💌 💌 💍 💍 💎 💎 💏 💏 💐 💐 💑 💑 💒 💒 💓 💓 💔 💔 💕 💕 💖 💖 💗 💗 💘 💘 💙 💙 💚 💚 💛 💛 💜 💜 💝 💝 💞 💞 💟 💟 💠 💠 💡 💡 💢 💢 💣 💣 💤 💤 💥 💥 💦 💦 💧 💧 💨 💨 💩 💩 💪 💪 💫 💫 💬 💬 💭 💭 💮 💮 💯 💯 💰 💰 💱 💱 💲 💲 💳 💳 💴 💴 💵 💵 💶 💶 💷 💷 💸 💸 💹 💹 💺 💺 💻 💻 💼 💼 💽 💽 💾 💾 💿 💿 📀 📀 📁 📁 📂 📂 📃 📃 📄 📄 📅 📅 📆 📆 📇 📇 📈 📈 📉 📉 📊 📊 📋 📋 📌 📌 📍 📍 📎 📎 📏 📏 📐 📐 📑 📑 📒 📒 📓 📓 📔 📔 📕 📕 📖 📖 📗 📗 📘 📘 📙 📙 📚 📚 📛 📛 📜 📜 📝 📝 📞 📞 📟 📟 📠 📠 📡 📡 📢 📢 📣 📣 📤 📤 📥 📥 📦 📦 📧 📧 📨 📨 📩 📩 📪 📪 📫 📫 📬 📬 📭 📭 📮 📮 📯 📯 📰 📰 📱 📱 📲 📲 📳 📳 📴 📴 📵 📵 📶 📶 📷 📷 📸 📸 📹 📹 📺 📺 📻 📻 📼 📼 📽 📽 📾 📾 📿 📿 🔀 🔀 🔁 🔁 🔂 🔂 🔃 🔃 🔄 🔄 🔅 🔅 🔆 🔆 🔇 🔇 🔈 🔈 🔉 🔉 🔊 🔊 🔋 🔋 🔌 🔌 🔍 🔍 🔎 🔎 🔏 🔏 🔐 🔐 🔑 🔑 🔒 🔒 🔓 🔓 🔔 🔔 🔕 🔕 🔖 🔖 🔗 🔗 🔘 🔘 🔙 🔙 🔚 🔚 🔛 🔛 🔜 🔜 🔝 🔝 🔞 🔞 🔟 🔟 🔠 🔠 🔡 🔡 🔢 🔢 🔣 🔣 🔤 🔤 🔥 🔥 🔦 🔦 🔧 🔧 🔨 🔨 🔩 🔩 🔪 🔪 🔫 🔫 🔬 🔬 🔭 🔭 🔮 🔮 🔯 🔯 🔰 🔰 🔱 🔱 🔲 🔲 🔳 🔳 🔴 🔴 🔵 🔵 🔶 🔶 🔷 🔷 🔸 🔸 🔹 🔹 🔺 🔺 🔻 🔻 🔼 🔼 🕉 🕉 🕊 🕊 🕋 🕋 🕌 🕌 🕍 🕍 🕎 🕎 🕏 🕏 🕐 🕐 🕑 🕑 🕒 🕒 🕓 🕓 🕔 🕔 🕕 🕕 🕖 🕖 🕗 🕗 🕘 🕘 🕙 🕙 🕚 🕚 🕛 🕛 🕜 🕜 🕝 🕝 🕞 🕞 🕟 🕟 🕠 🕠 🕡 🕡 🕢 🕢 🕣 🕣 🕤 🕤 🕥 🕥 🕦 🕦

묘한오빠

남자의 호칭 중에 "오빠"처럼 묘한 것도 없었다

이미지 맵

묘한오빠/블로그가 변한다 다른 글

이 글에 담긴 의견 17

*

*

    • 청춘일기님, 메인페이지 이미지 사용했습니다. 죄송합니다 ^^;

      글꼴 테스트

      ㅋ ㅎ
      @@; @.@; @_@;
      ㅠㅠ ㅠ.ㅠ; ㅠ_ㅠ ㅠㅠ;
      ㅜㅜ; ㅜ.ㅜ; ㅜ_ㅜ;
      TT; T.T; T_T;
      ^^; ^.^; ^_^; ^-^; -_-

    • ʘ̥_ʘ̥ 이 눈모양 너무 귀여운데요 ㅎㅎ
      도움이 되셨다니 저도 기쁘네요.
      역시나 완벽하게 적용하셨네요 급하게 수정해봤는데 묘한오빠님 프사같은 입모양도 맘에 드셔서 다행입니다 ^_^

    • 오 드디어 글이 올라왔네요! 저번부터 계속 궁금했는데 좋은 정보 감사합니다 ㅎㅎ

    • 나눔을 실천하시는 이웃님들 덕분에 제가 더 많이 배우고 있습니다 ^_^

      땀똔님이 알려주신 방법은 로컬에서 테스트 할때는 잘 되는데 티스토리에만 올리면 오류가 있어 보니 티스토리 자체문제로 수정하는데 쪼금 헤멨고 청춘일기님이 나눔해주신 폰트는 정말 갑~입니다. 전체를 긁어오고 싶은 ㅠㅠ 욕구를 꾹 참았습니다 ^^;

    • 궁금했던 건데 ㅋ이나 ㅎ도 변경하신 특별한 이유가 있나요?
      적용 성공하신 김에 저도 ^^

    • "ㅋ" "ㅎ"의 경우는 transform: rotate(); 를 이용하여 좌우로 살짝시 움직이도록 할 계획입니다만, 로컬페이지에서는 괜찮던데..., 내용이 가득찬 블로그에서는 살짝 정신없기도 해서 목록만 넣어둔 상태입니다.

    • 감사합니다. 이거는 html 에 붙여넣기하면 되나요? <script type="text/javascript">

      var ch_font = document.getElementById("tistory-comment");

      ch_font.innerHTML=ch_font.innerHTML.replace(/ㅋ/gm,'<span>ㅋ</span>');

      ch_font.innerHTML=ch_font.innerHTML.replace(/ㅎ/gm,'<span>ㅎ</span>');

      ch_font.innerHTML=ch_font.innerHTML.replace(/@@/gm,'<span>&#128280; &#128280;</span>');

      ch_font.innerHTML=ch_font.innerHTML.replace(/@.@/gm,'<span>&#128280; . &#128280;</span>');

      </script>

    • 넵 ^_^
      script 파일을 붙혀주시면 되는데 "tistory-comment"는 사용하시는 댓글 id 혹은 class 값으로 변경해주셔야 합니다.
      바꾸고 싶은 특정 글꼴을 계속추가하시면 됩니다.

    • }}} ::: TV PIN XX MSG EYE CHK !!! 1818 b: q: QQ ''' 100. ZZ ## LOV
      ㅋㅋ ㅎㅎ @@ @.@ ㅠㅠ ㅠ_ㅠ ^^ ^^; ^_^ ^__^

      새로 등록한 치환글꼴 테스트..., ^^;

이전 글

다음 글